Files
frontend-app/pages/mine_purse_bonus_withdraw/mine_purse_bonus_withdraw.vue
T

310 lines
7.3 KiB
Vue
Raw Normal View History

2025-05-07 10:09:55 +08:00
<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>
2025-05-10 18:17:24 +08:00
<view>手续费:{{form.rateAmount}}({{(ruleObj && ruleObj.rate * 100) || 0}}%)</view>
2025-05-07 10:09:55 +08:00
</view>
</view>
</view>
<view class="withdraw_but" @click="withdrawFun">提现</view>
<view class="warm_reminder">
<view>温馨提示</view>
<view>
2025-05-10 18:17:24 +08:00
<view>1、提现T+1到账,节假日顺延!</view>
<view>2、单笔最小提现金额:{{(ruleObj && ruleObj.minAmount) || 0}}</view>
<view>3、单日最大提现金额:{{(ruleObj && ruleObj.dayAmount) || 0}}</view>
<view>4、单日最大提现次数:{{(ruleObj && ruleObj.dayTimes) || 0}}</view>
2025-05-07 10:09:55 +08:00
</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;
}
2025-05-10 18:17:24 +08:00
const withdrawAmount = this.withdrawAmount;
if(!withdrawAmount && withdrawAmount !=="0"){
this.$refs.uToastRef.show({
type: 'error',
message: "可提现余额不足",
});
return;
}
2025-05-07 10:09:55 +08:00
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){
2025-05-10 18:17:24 +08:00
const withdrawAmount = this.withdrawAmount;
if(!withdrawAmount && withdrawAmount !=="0"){
return;
}
2025-05-07 10:09:55 +08:00
const rate = this.ruleObj.rate;
if(rate && amount){
2025-05-10 18:17:24 +08:00
const rateAmount = amount * rate;
2025-05-07 10:09:55 +08:00
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>