withdrawal.vue 10 KB

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