297 lines
7.0 KiB
Vue
297 lines
7.0 KiB
Vue
<template>
|
||
<view class="mine_purse_bonus_waithdraw">
|
||
<view class="waithdraw_header_">
|
||
<view style="margin-top: 10rpx;" @click="jumpPurse">
|
||
<up-image src="/static/common/left.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
|
||
</view>
|
||
<view>提现</view>
|
||
<view @click="jumpLog">提现记录</view>
|
||
</view>
|
||
<view class="waithdraw_content_">
|
||
<view class="content_bank_item">
|
||
<view class="title_comm">提现账户</view>
|
||
<view class="bank_" @click="bankShowCheck(true)">
|
||
<view>{{form.bankName || '请选择'}}</view>
|
||
<up-image src="/static/common/right.png" width="16" height="16" bgColor="#f1f6ff00"></up-image>
|
||
</view>
|
||
</view>
|
||
<view class="content_amout_item">
|
||
<view class="title_comm">提现金额</view>
|
||
<up-input
|
||
placeholder="请输入提现金额"
|
||
border="none"
|
||
v-model="form.amount"
|
||
:customStyle="{
|
||
'height':'110rpx',
|
||
'background-color':'#F8F8F8',
|
||
'margin':'10rpx 0',
|
||
'padding':'0 20rpx',
|
||
}"
|
||
type="number"
|
||
@change="amountChange"
|
||
>
|
||
<template #suffix>
|
||
<text>元</text>
|
||
<text class="all_" @click="allFun">全部</text>
|
||
</template>
|
||
</up-input>
|
||
</view>
|
||
<view class="content_amout_item" style="margin-top: 20rpx;">
|
||
<view class="title_comm">实际到账</view>
|
||
<up-input
|
||
placeholder="请输入需要提现金额"
|
||
border="none"
|
||
v-model="form.dzAmount"
|
||
:customStyle="{
|
||
'height':'110rpx',
|
||
'background-color':'#F8F8F8',
|
||
'margin':'10rpx 0',
|
||
'padding':'0 20rpx',
|
||
}"
|
||
disabled
|
||
>
|
||
<template #suffix>
|
||
<text>元</text>
|
||
</template>
|
||
</up-input>
|
||
<view class="amount_">
|
||
<view>可提现金额：￥{{withdrawAmount}}</view>
|
||
<view>手续费：{{form.rateAmount}}（{{(ruleObj && ruleObj.rate) || 0}}%）</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="withdraw_but" @click="withdrawFun">提现</view>
|
||
<view class="warm_reminder">
|
||
<view>温馨提示</view>
|
||
<view>
|
||
<view>单笔最小提现金额：{{(ruleObj && ruleObj.minAmount) || 0}}</view>
|
||
<view>单日最大提现金额：{{(ruleObj && ruleObj.dayAmount) || 0}}</view>
|
||
<view>单日最大提现次数：{{(ruleObj && ruleObj.dayTimes) || 0}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<up-picker
|
||
:show="bankShow"
|
||
:columns="bankOption"
|
||
keyName="bankName"
|
||
itemHeight="34"
|
||
@confirm="bankConfirm"
|
||
:loading="bankLoading"
|
||
@cancel="bankShow=false"
|
||
@close="bankShow=false"
|
||
></up-picker>
|
||
<up-toast ref="uToastRef"></up-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getWithdrawalRule,withdrawal } from '@/api/finance.js';
|
||
import { getBankList } from '@/api/bank.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form:{
|
||
category:null,//账户类型
|
||
amount:null,// 提现金额
|
||
dzAmount:0,// 到账金额
|
||
rateAmount:0,// 手续费
|
||
bankId:null,// 提现银行卡
|
||
bankName:null,// 提现银行卡名称
|
||
},
|
||
withdrawAmount:0,
|
||
ruleObj:{},// 规则
|
||
bankOption:[],
|
||
bankShow:false,
|
||
bankLoading:false,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
const amount = option.amount || 0;
|
||
if(amount && amount !== "null"){
|
||
this.withdrawAmount = amount || 0;
|
||
}
|
||
const category = option.category;
|
||
if(category && category !== "null"){
|
||
this.form.category = category;
|
||
this.getWithdrawalRule();
|
||
}
|
||
},
|
||
methods: {
|
||
jumpPurse(){
|
||
uni.navigateTo({
|
||
url:"/pages/mine_purse/mine_purse",
|
||
})
|
||
},
|
||
allFun(){
|
||
const amount = this.withdrawAmount;
|
||
this.form.amount = amount;
|
||
this.amountChange(amount);
|
||
},
|
||
jumpLog(){
|
||
uni.navigateTo({
|
||
url:"/pages/mine_purse_bonus_withdraw_log/mine_purse_bonus_withdraw_log?category="+this.form.category,
|
||
})
|
||
},
|
||
async withdrawFun(){
|
||
const params={
|
||
...this.form,
|
||
}
|
||
if(!params.bankId){
|
||
this.$refs.uToastRef.show({
|
||
type: 'error',
|
||
message: "请选择提现银行卡",
|
||
});
|
||
return;
|
||
}
|
||
if(!params.amount){
|
||
this.$refs.uToastRef.show({
|
||
type: 'error',
|
||
message: "请输入需要提现余额",
|
||
});
|
||
return;
|
||
}
|
||
delete params.bankName;
|
||
const resp = await withdrawal(params);
|
||
if(resp && resp.bizcode === 100){
|
||
this.$refs.uToastRef.show({
|
||
type: 'success',
|
||
message: "已成功申请提现",
|
||
});
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/pages/mine_purse/mine_purse'
|
||
});
|
||
},1500)
|
||
}
|
||
},
|
||
/**
|
||
* 查询规则
|
||
*/
|
||
async getWithdrawalRule(){
|
||
const params={
|
||
category:this.form.category
|
||
}
|
||
const resp = await getWithdrawalRule(params);
|
||
if(resp && resp.bizcode ===100){
|
||
this.ruleObj = resp.data;
|
||
}
|
||
},
|
||
// 选择银行的弹框
|
||
async bankShowCheck(status){
|
||
if(status){
|
||
this.bankLoading = true;
|
||
const resp = await getBankList();
|
||
if(resp && resp.bizcode === 100){
|
||
if(!resp.data){
|
||
this.$refs.uToastRef.show({
|
||
type: 'warring',
|
||
message: "请先去银行卡管理绑定银行卡",
|
||
});
|
||
return;
|
||
}
|
||
this.bankOption = [resp.data || []];
|
||
}
|
||
this.bankLoading = false;
|
||
}else{
|
||
this.bankOption = [[]];
|
||
}
|
||
this.bankShow = status;
|
||
},
|
||
// 提交地址
|
||
bankConfirm(e){
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values,
|
||
index,
|
||
} = e;
|
||
const data = value[0];
|
||
this.form.bankId = data.id;
|
||
this.form.bankName = data.bankName;
|
||
this.bankShowCheck(false);
|
||
},
|
||
amountChange(amount){
|
||
const rate = this.ruleObj.rate;
|
||
if(rate && amount){
|
||
const rateAmount = amount * (rate / 100);
|
||
this.form.rateAmount = rateAmount.toFixed(2);
|
||
this.form.dzAmount = (amount - rateAmount).toFixed(2);
|
||
}else{
|
||
this.form.rateAmount =0;
|
||
this.form.dzAmount =0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.mine_purse_bonus_waithdraw{
|
||
background-color: $app-bj;
|
||
height: calc(100vh - 130rpx);
|
||
padding: 100rpx 30rpx 30rpx;
|
||
overflow: auto;
|
||
.waithdraw_header_{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.waithdraw_content_{
|
||
margin-top: 40rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
padding:30rpx;
|
||
.content_bank_item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #EEEEEE;
|
||
padding-bottom: 30rpx;
|
||
.bank_{
|
||
display: flex;
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
.title_comm{
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.content_amout_item{
|
||
margin: 20rpx 0;
|
||
.amount_{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #808080;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.all_{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: $app-bt-bj;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdraw_but{
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
background-color: $app-bt-bj;
|
||
margin-top: 100rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.warm_reminder{
|
||
margin: 60rpx 0;
|
||
}
|
||
}
|
||
</style>
|