withdrawal.vue 10 KB

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