withdrawal.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. <template>
  2. <view class="content">
  3. <!-- <uni-notice-bar single="true" text="实际到账98%"></uni-notice-bar> -->
  4. <view class="content-money">
  5. <view class="flex " style="width: 750rpx;justify-content: space-around;margin-left: 0;">
  6. <view class="buttom">
  7. <view class="icon">{{ money | getMoneyStyle }}</view>
  8. <text class="text">可提现佣金</text>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="row-box">
  13. <view class="title">提现金额</view>
  14. <view class="row">
  15. <text class="tit">¥</text>
  16. <input class="input" type="number" v-model="withdrawal" :placeholder="'最低提现金额' + minPrice + '元'"
  17. placeholder-class="placeholder" />
  18. <view class="buttom" @click="withdrawal = money">全部提现</view>
  19. </view>
  20. </view>
  21. <view class="list">
  22. <radio-group @change="tabRadio">
  23. <!-- <label>
  24. <view class="box">
  25. <view class="icon iconfont iconweixin1"></view>
  26. <view class="title-box">
  27. <view class="title">
  28. <text v-if="weixin_no">提现至微信</text>
  29. <text v-else>请创建微信账号</text>
  30. </view>
  31. <view class="node">
  32. <text v-if="weixin_no">账号({{ weixin_no }})</text>
  33. </view>
  34. </view>
  35. <view class="right">
  36. <radio value="weixin" color="#c29963" :checked="type == 'weixin'" />
  37. </view>
  38. </view>
  39. </label> -->
  40. <label>
  41. <view class="box">
  42. <view class="icon iconfont iconzhifubao"></view>
  43. <view class="title-box">
  44. <view class="title">
  45. <text v-if="aliData.name">提现至支付宝</text>
  46. <text v-else>请创建支付宝账号</text>
  47. </view>
  48. <view class="node">
  49. <text v-if="aliData.name">真实姓名({{ aliData.name }})</text>
  50. </view>
  51. </view>
  52. <view class="right">
  53. <radio value="alipay" color="#9c0b18" :checked="type == 'alipay'" />
  54. </view>
  55. </view>
  56. </label>
  57. <label>
  58. <view class="box">
  59. <view class="icon iconfont">
  60. <image class="icon-img" src="/static/icon/i8.png" mode="aspectFit"></image>
  61. </view>
  62. <view class="title-box">
  63. <view class="title">
  64. <text v-if="bankData.name">{{ bankData.bank + ' ' + bankData.payment }}</text>
  65. <text v-else>请创建银行账号</text>
  66. </view>
  67. <view class="node">
  68. <text v-if="bankData.name">真实姓名({{ bankData.name }})</text>
  69. </view>
  70. </view>
  71. <view class="right">
  72. <radio value="bank" color="#9c0b18" :checked="type == 'bank'" />
  73. </view>
  74. </view>
  75. </label>
  76. </radio-group>
  77. </view>
  78. <!-- <view class="row b-b" v-if="type == 'weixin'">
  79. <text class="tit">微信账号</text>
  80. <input class="input" type="text" v-model="weixin_no" placeholder="请输入微信账号"
  81. placeholder-class="placeholder" />
  82. </view>
  83. <view class="row b-b" v-if="type == 'alipay'">
  84. <text class="tit">支付宝账号</text>
  85. <input class="input" type="text" v-model="alipay_code" placeholder="请输入支付宝账号"
  86. placeholder-class="placeholder" />
  87. </view>
  88. <view class="row b-b" v-if="type == 'alipay'">
  89. <text class="tit">支付宝姓名</text>
  90. <input class="input" type="text" v-model="alipay_name" placeholder="请输入支付宝姓名"
  91. placeholder-class="placeholder" />
  92. </view>
  93. <view class="row b-b" v-if="type == 'bank'">
  94. <text class="tit">银行卡号</text>
  95. <input class="input" type="text" v-model="bank_code" placeholder="请输入银行卡号"
  96. placeholder-class="placeholder" />
  97. </view>
  98. <view class="row b-b" v-if="type == 'bank'">
  99. <text class="tit">姓名</text>
  100. <input class="input" type="text" v-model="bank_people" placeholder="请输入银行卡姓名"
  101. placeholder-class="placeholder" />
  102. </view>
  103. <view class="row b-b" v-if="type == 'bank'">
  104. <text class="tit">所属银行</text>
  105. <input class="input" type="text" v-model="bank_name" placeholder="请输入所属银行"
  106. placeholder-class="placeholder" />
  107. </view>
  108. <view class="row b-b" v-if="type == 'bank'">
  109. <text class="tit">所属支行</text>
  110. <input class="input" type="text" v-model="bank_belonging" placeholder="请输入所属支行"
  111. placeholder-class="placeholder" />
  112. </view> -->
  113. <button class="add-btn modified"
  114. @click="navTo('/pages/money/account?type=' + (type=='bank'?'3':'2'))">账号管理</button>
  115. <button class="add-btn up" @click="confirm">提交申请</button>
  116. </view>
  117. </template>
  118. <script>
  119. import {
  120. getMoneyStyle
  121. } from '@/utils/rocessor.js';
  122. import {
  123. extractCash,
  124. extractBank,
  125. aliInfo,
  126. bankInfo,
  127. setBank,
  128. getBank
  129. } from '@/api/wallet.js';
  130. import {
  131. orderData,
  132. getUserInfo
  133. } from '@/api/user.js';
  134. import {
  135. mapState,
  136. mapMutations
  137. } from 'vuex';
  138. import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
  139. export default {
  140. filters: {
  141. getMoneyStyle
  142. },
  143. components: {
  144. uniNoticeBar
  145. },
  146. computed: {
  147. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  148. },
  149. data() {
  150. return {
  151. weixin_no: '',
  152. type: 'bank', //提现方式
  153. money: '0.00', //可提现金额
  154. freeze: '0.0', //冻结金额
  155. withdrawal: '', //提现金额
  156. minPrice: '', //最少提现金额
  157. aliData: {},
  158. bankData: {},
  159. weixin: {},
  160. alipay_code: '',
  161. alipay_name: '',
  162. bank_code: '',
  163. bank_people: '',
  164. bank_name: '',
  165. bank_belonging: '',
  166. jftype: 0,
  167. };
  168. },
  169. onLoad(options) {
  170. //加载提现信息
  171. this.loadData();
  172. // // 加载提款账号信息
  173. // this.loadAli();
  174. // this.loadBank();
  175. this.dataUp()
  176. },
  177. methods: {
  178. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  179. dataUp() {
  180. let obj = this
  181. getBank().then(res => {
  182. console.log(res.data.zfb, 'res')
  183. if (res.data.zfb.name) {
  184. obj.aliData = res.data.zfb
  185. console.log(obj.aliData, 'obj.aliData')
  186. }
  187. if (res.data.bank.name) {
  188. obj.bankData = res.data.bank
  189. }
  190. })
  191. },
  192. // 加载余额信息
  193. async loadData() {
  194. extractBank({}).then(({
  195. data
  196. }) => {
  197. console.log(data, 'data+++++++++')
  198. this.minPrice = data.minPrice;
  199. this.money = data.brokerage_price
  200. });
  201. },
  202. // 跳转
  203. navTo(url) {
  204. uni.navigateTo({
  205. url: url
  206. });
  207. },
  208. // 切换选中对象
  209. tabRadio(e) {
  210. this.type = e.detail.value;
  211. },
  212. // 提交
  213. confirm() {
  214. let obj = this
  215. let data = {
  216. extract_type: this.type, //bank -银行卡 alipay-支付宝 weixin-微信
  217. money: this.withdrawal, //金额
  218. type: 0 //0佣金1余额
  219. };
  220. if (this.withdrawal % 100 != 0) {
  221. uni.showToast({
  222. title: '提现金额为100的倍数',
  223. duration: 2000,
  224. mask: false,
  225. icon: 'none'
  226. });
  227. return;
  228. }
  229. if (this.withdrawal < this.minPrice) {
  230. uni.showToast({
  231. title: '提现金额不可少于' + this.minPrice,
  232. duration: 2000,
  233. mask: false,
  234. icon: 'none'
  235. });
  236. return;
  237. }
  238. if (this.type == 'alipay') {
  239. console.log('alipay');
  240. data.name = this.aliData.name;
  241. data.alipay_code = this.aliData.payment;
  242. }
  243. if (this.type == 'bank') {
  244. console.log('bank');
  245. data.name = this.bankData.name;
  246. data.bankname = this.bankData.bank;
  247. data.cardnum = this.bankData.payment;
  248. // data.bank_belonging = this.bankData.bank_name
  249. }
  250. if (this.type == 'weixin') {
  251. console.log('weixin');
  252. data.weixin = this.weixin_no
  253. }
  254. extractCash(data)
  255. .then(e => {
  256. obj.loadData()
  257. uni.showToast({
  258. title: '提交成功',
  259. duration: 2000,
  260. position: 'top'
  261. });
  262. })
  263. .catch(e => {
  264. console.log();
  265. });
  266. }
  267. }
  268. };
  269. </script>
  270. <style lang="scss">
  271. page {
  272. height: 100%;
  273. }
  274. .content-money {
  275. padding: 30rpx 0;
  276. background: #ffffff;
  277. }
  278. .flex {
  279. background-color: #ffffff;
  280. text-align: center;
  281. margin: 0 30rpx;
  282. border-radius: $border-radius-sm;
  283. .buttom {
  284. font-size: $font-lg;
  285. width: 50%;
  286. }
  287. .interval {
  288. width: 2px;
  289. height: 60rpx;
  290. background-color: #eeeeee;
  291. }
  292. .icon {
  293. background-size: 100%;
  294. font-size: 42rpx;
  295. color: $font-color-dark;
  296. font-weight: bold;
  297. background-repeat: no-repeat;
  298. background-position: center;
  299. }
  300. .text {
  301. color: $font-color-light;
  302. }
  303. }
  304. .row-box {
  305. margin-top: 30rpx;
  306. padding: 20rpx 30rpx;
  307. background: #fff;
  308. .title {
  309. font-size: $font-base + 2rpx;
  310. color: $font-color-dark;
  311. }
  312. .row {
  313. display: flex;
  314. align-items: center;
  315. position: relative;
  316. height: 80rpx;
  317. .tit {
  318. flex-shrink: 0;
  319. width: 40rpx;
  320. font-size: 30rpx;
  321. color: $font-color-dark;
  322. }
  323. .input {
  324. flex: 1;
  325. font-size: 30rpx;
  326. color: $font-color-dark;
  327. }
  328. .iconlocation {
  329. font-size: 36rpx;
  330. color: $font-color-light;
  331. }
  332. .buttom {
  333. color: $font-color-spec;
  334. font-size: $font-base;
  335. }
  336. }
  337. }
  338. .add-btn {
  339. &.modified {
  340. // color: #ffffff;
  341. border: 1px solid #9c0b18;
  342. // background-color: #fff;
  343. color: #9c0b18;
  344. }
  345. &.up {
  346. background: #9c0b18;
  347. color: #fff;
  348. }
  349. display: flex;
  350. align-items: center;
  351. justify-content: center;
  352. width: 690rpx;
  353. height: 80rpx;
  354. margin: 0 auto;
  355. margin-top: 30rpx;
  356. font-size: $font-lg;
  357. border-radius: 10rpx;
  358. // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  359. }
  360. .list {
  361. padding-left: 30rpx;
  362. margin-top: 30rpx;
  363. background-color: #ffffff;
  364. .box {
  365. display: flex;
  366. align-items: center;
  367. width: 100%;
  368. height: 120rpx;
  369. border-bottom: 1px solid $border-color-light;
  370. .icon {
  371. font-size: 48rpx;
  372. padding-right: 20rpx;
  373. .icon-img {
  374. height: 50rpx;
  375. width: 50rpx;
  376. }
  377. }
  378. .iconweixin1 {
  379. color: #18bf16;
  380. }
  381. .iconzhifubao {
  382. color: #08aaec;
  383. }
  384. .title-box {
  385. flex-grow: 1;
  386. text-align: left;
  387. .title {
  388. font-size: $font-base + 2rpx;
  389. color: $font-color-base;
  390. }
  391. .node {
  392. font-size: $font-sm;
  393. color: $font-color-light;
  394. }
  395. }
  396. }
  397. }
  398. /deep/ .uni-radio-input {
  399. width: 45rpx;
  400. height: 45rpx;
  401. }
  402. .row {
  403. display: flex;
  404. align-items: center;
  405. position: relative;
  406. padding: 0 30upx;
  407. height: 110upx;
  408. background: #fff;
  409. .tit {
  410. flex-shrink: 0;
  411. width: 250upx;
  412. font-size: 30upx;
  413. color: $font-color-dark;
  414. }
  415. .input {
  416. flex: 1;
  417. font-size: 30upx;
  418. color: $font-color-dark;
  419. }
  420. .iconlocation {
  421. font-size: 36upx;
  422. color: $font-color-light;
  423. }
  424. }
  425. .tip {
  426. padding: 20rpx;
  427. color: #fd3b39;
  428. }
  429. </style>