286 lines
7.9 KiB
Vue
286 lines
7.9 KiB
Vue
<!-- 提现 -->
|
||
|
||
<template>
|
||
<view class="user-withdraw">
|
||
<!-- Tabs -->
|
||
<view class="withdraw-tabs">
|
||
<u-tabs :list="tabsList" :is-scroll="true" :current="currentTab" :bold="true" height="100" font-size="30rpx"
|
||
active-color="#333333" inactive-color="#666666" :bar-style="styleTabsBarStyle" @change="changeTab" />
|
||
</view>
|
||
|
||
|
||
<!-- 微信钱包 -->
|
||
<view v-if="currentValue == 3" class="withdraw-wechat m-t-20 bg-white">
|
||
<!-- Account -->
|
||
<u-field label-width="160" label="微信账号" v-model="form.account" placeholder="请输入微信账号" />
|
||
<!-- Name -->
|
||
<u-field label-width="160" label="真实姓名" v-model="form.real_name" placeholder="请输入真实姓名" />
|
||
<!-- Remark -->
|
||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||
|
||
<!-- 上传图片 -->
|
||
<view class="flex-col m-t-20">
|
||
<u-upload ref="uUpload" :header="{token: $store.getters.token}" :auto-upload="true"
|
||
:show-progress="false" max-count="1" width="142" height="142" :custom-btn="true" :action="action"
|
||
@on-success="onSuccess" @on-remove="onRemove">
|
||
<view slot="addBtn" class="flex-col col-center row-center">
|
||
<view class="upload-image flex-col col-center row-center">
|
||
<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
|
||
</view>
|
||
|
||
<view class="xs m-t-10">微信收款码</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付宝 -->
|
||
<view v-else-if="currentValue == 4" class="withdraw-alipay m-t-20 bg-white">
|
||
<!-- Account -->
|
||
<u-field label-width="160" label="支付宝账号" v-model="form.account" placeholder="请输入支付宝账号" />
|
||
<!-- Name -->
|
||
<u-field label-width="160" label="真实姓名" v-model="form.real_name" placeholder="请输入真实姓名" />
|
||
<!-- Remark -->
|
||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||
|
||
<!-- 上传图片 -->
|
||
<view class="flex-col m-t-20">
|
||
<u-upload ref="uUpload" :header="{token: $store.getters.token}" :auto-upload="true"
|
||
:show-progress="false" max-count="1" width="142" height="142" :custom-btn="true" :action="action"
|
||
@on-success="onSuccess" @on-remove="onRemove">
|
||
<view slot="addBtn" class="flex-col col-center row-center">
|
||
<view class="upload-image flex-col col-center row-center">
|
||
<u-icon name="/bundle/static/icon_camera_line.png" width="54" />
|
||
</view>
|
||
|
||
<view class="xs m-t-10">支付宝收款码</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 银行卡 -->
|
||
<view v-else-if="currentValue == 5" class="withdraw-alipay m-t-20 bg-white">
|
||
<!-- Account -->
|
||
<u-field label-width="160" label="银行卡账号" v-model="form.account" placeholder="请输入银行卡账号" />
|
||
<!-- Name -->
|
||
<u-field label-width="160" label="持卡人姓名" v-model="form.real_name" placeholder="请输入持卡人姓名" />
|
||
<!-- Name -->
|
||
<u-field label-width="160" label="提现银行" v-model="form.bank" placeholder="请输入银行名称" />
|
||
<!-- Remark -->
|
||
<u-field label-width="160" label="银行支行" v-model="form.subbank" placeholder="如：金湾支行" />
|
||
<!-- Remark -->
|
||
<u-field label-width="160" label="备注" v-model="form.remark" placeholder="(选填)" />
|
||
</view>
|
||
|
||
<!-- 提现金额 -->
|
||
<view class="withdraw-money-wrap m-t-20 bg-white">
|
||
<view class="flex withdraw-money p-b-20">
|
||
<view class="flex flex-1">
|
||
<text class="font-size-46 m-r-10 normal">¥</text>
|
||
<u-input v-model="form.money" placeholder="0.00" :custom-style="{
|
||
'font-size': '66rpx'
|
||
}" />
|
||
</view>
|
||
<view class="flex-col flex-1 text-right">
|
||
<text class="xs primary" @tap="form.money=widthDrawConfig.able_withdraw">全部提现</text>
|
||
<text class="xs muted m-t-10">可提现金额 ¥ {{widthDrawConfig.able_withdraw}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="muted xs m-t-30" v-if="widthDrawConfig.poundage_percent && currentValue != 1">
|
||
提示：提现需扣除税率{{widthDrawConfig.poundage_percent}}%</view>
|
||
</view>
|
||
|
||
<!-- 确认提交 -->
|
||
<button class="withdraw-submit m-t-30 white br60" @tap="$u.throttle(startPay, 1000)" size="lg">确认提交</button>
|
||
|
||
<!-- 提现记录 -->
|
||
<router-link to="/bundle/pages/user_withdraw_code/user_withdraw_code">
|
||
<view class="withdraw-log m-t-40 text-center muted">提现记录</view>
|
||
</router-link>
|
||
|
||
<pay-keyboard :showPay="showPay" :money="payMoney" :info="payInfo" @paySuccess="onSubmit" @closeKeyboard="closeKeyboard"></pay-keyboard>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import {
|
||
applyWithdraw,
|
||
getWithdrawConfig
|
||
} from "@/api/user";
|
||
import {
|
||
trottle
|
||
} from "@/utils/tools";
|
||
import {
|
||
baseURL
|
||
} from '@/config/app';
|
||
export default {
|
||
data() {
|
||
return {
|
||
action: baseURL + '/api/file/formimage',
|
||
currentTab: 0, // Tabs当前位置
|
||
// Tabs 列表
|
||
tabsList: [],
|
||
// Tabs滑块样式
|
||
styleTabsBarStyle: {
|
||
bottom: '12rpx',
|
||
width: '50rpx',
|
||
height: '6rpx',
|
||
background: 'green',
|
||
borderRadius: '50px',
|
||
backgroundImage: 'linear-gradient(to right, \#F79C0C, \#FF2C3C)'
|
||
},
|
||
// 表单数据
|
||
form: {
|
||
money: '', // 提现金额
|
||
account: '', // 账户名称
|
||
real_name: '', // 真实姓名
|
||
money_qr_code: '', // 收款二维码
|
||
bank: '', // 银行
|
||
subbank: '', // 支行
|
||
remark: '', // 备注
|
||
},
|
||
widthDrawConfig: {},
|
||
showPay: false,
|
||
payMoney: '',
|
||
payInfo: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getWithdrawConfigFun();
|
||
this.onSubmit = trottle(this.onSubmit, 1000, this)
|
||
},
|
||
methods: {
|
||
// 改变当前的Tabs位置
|
||
changeTab(index) {
|
||
this.currentTab = index;
|
||
this.form = {
|
||
money: '',
|
||
account: '',
|
||
real_name: '',
|
||
money_qr_code: '',
|
||
remark: '',
|
||
bank: '',
|
||
subbank: ''
|
||
};
|
||
},
|
||
async getWithdrawConfigFun() {
|
||
const {
|
||
code,
|
||
data
|
||
} = await getWithdrawConfig({
|
||
hide: 'balance'
|
||
})
|
||
|
||
if (code == 1) {
|
||
this.widthDrawConfig = data
|
||
this.tabsList = data.type
|
||
}
|
||
},
|
||
closeKeyboard() {
|
||
this.showPay = false
|
||
},
|
||
startPay() {
|
||
const data = {...this.form}
|
||
if (!data.money) {
|
||
this.$toast({
|
||
title: '请输入提现金额'
|
||
});
|
||
return;
|
||
}
|
||
|
||
this.payMoney = data.money
|
||
this.payInfo = '分销佣金提现 ￥' + data.money + ' 到账户'
|
||
this.showPay = true
|
||
},
|
||
// 提交表单
|
||
onSubmit(flag) {
|
||
if (flag) {
|
||
this.showPay = false
|
||
const data = {
|
||
...this.form
|
||
}
|
||
data.type = this.currentValue
|
||
|
||
applyWithdraw(data).then(res => {
|
||
if (res.code == 1) {
|
||
this.$toast({
|
||
title: '提交成功'
|
||
}, {
|
||
tab: 2,
|
||
// url: '/bundle/pages/widthdraw_result/widthdraw_result?id=' + res.data.id
|
||
url: '/bundle/pages/user_withdraw_code/user_withdraw_code'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onSuccess(e) {
|
||
this.form.money_qr_code = e.data.base_uri
|
||
},
|
||
onRemove(index) {
|
||
this.form.money_qr_code = ""
|
||
},
|
||
},
|
||
computed: {
|
||
currentValue(val) {
|
||
const {
|
||
currentTab,
|
||
tabsList
|
||
} = this
|
||
return tabsList[currentTab] ? tabsList[currentTab].value : ''
|
||
}
|
||
},
|
||
watch: {
|
||
widthDrawConfig() {
|
||
if (this.widthDrawConfig.able_withdraw) {
|
||
this.widthDrawConfig.able_withdraw = (parseInt(this.widthDrawConfig.able_withdraw * 100) / 100)
|
||
.toFixed(2)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.user-withdraw {
|
||
padding: 20rpx 30rpx;
|
||
|
||
.withdraw-tabs {
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.withdraw-money-wrap {
|
||
padding: 50rpx 66rpx;
|
||
border-radius: 10px;
|
||
|
||
.withdraw-money {
|
||
border-bottom: $-solid-border;
|
||
}
|
||
}
|
||
|
||
.withdraw-wechat,
|
||
.withdraw-alipay {
|
||
padding: 0 36rpx 20rpx;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.upload-image {
|
||
width: 142rpx;
|
||
height: 142rpx;
|
||
border: 2rpx dashed #CCCCCC;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.withdraw-submit {
|
||
background: linear-gradient(11deg, #F95F2F, #FF2C3C);
|
||
}
|
||
|
||
::v-deep .u-field {
|
||
padding: 26rpx 0;
|
||
}
|
||
}
|
||
</style> |