480 lines
12 KiB
Vue
480 lines
12 KiB
Vue
<template>
|
||
<view class="user-withdrawal">
|
||
|
||
<view class="bold">提现到</view>
|
||
<view class="bank-box acea-row row-between row-middle" @click="bankSelect">
|
||
<view class="acea-row row-middle" v-if="selectedBank">
|
||
<image class="icon-card" :src="webUrl+'/20220924105211695252.png'"/>
|
||
<view class="acea-row row-column">
|
||
<span class="bold">{{ selectedBank.bankName }}</span>
|
||
<span class="bold">{{ selectedBank.cardNo }}/{{ selectedBank.name }}</span>
|
||
</view>
|
||
</view>
|
||
<view class="flex ai-center bold" v-else>
|
||
<image class="icon-card" :src="webUrl+'/20220924105211695252.png'"/>
|
||
请选择银行卡
|
||
</view>
|
||
</view>
|
||
|
||
<view class="amount-box">
|
||
<view class="title bold">提现金额：</view>
|
||
<view class="item acea-row row-middle">
|
||
<view class="dollar bold">￥</view>
|
||
<view class="input">
|
||
<u--input
|
||
v-model="amout"
|
||
:placeholder="'最低提现金额' + minPrice"
|
||
:maxlength="-1"
|
||
:customStyle="{
|
||
'border': 0
|
||
}"
|
||
:disabled="commissionCount <= 0"
|
||
placeholder-style="font-size:28rpx"
|
||
type="digit"
|
||
autofocus
|
||
@blur="balanceInputBlur"
|
||
@input="balanceInputChange"
|
||
/>
|
||
</view>
|
||
<view
|
||
:class="commissionCount <= 0 ? 'grey' : ''"
|
||
class="withdraw-all-btn"
|
||
@click="withdrawalAll"
|
||
>全部提现</view>
|
||
</view>
|
||
<view class="vline"></view>
|
||
<view class="acea-row row-between row-middle" style="margin-top: 22rpx;">
|
||
<view class="bold">可提现金额：{{ commissionCount }}</view>
|
||
<view class="bold">手续费：
|
||
<text class="red">{{ totalFee }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="acea-row row-column row-middle">
|
||
<button class="confirm-btn" @click="confrimBtnClick">提现</button>
|
||
<view class="record-btn" style="" @click="goCashRecord">提现记录</view>
|
||
</view>
|
||
|
||
|
||
<uni-popup ref="popup" type="bottom">
|
||
<blPaymentPasswordInput hideTopBorder ref="secrity" @input="onInput" @confirm="onConfirm">
|
||
<block slot='header' style='width: 100%;'>
|
||
<view style="font-size: 36rpx;color: #8B8F99;line-height: 80rpx;">请输入支付密码</view>
|
||
<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">手续费：{{ totalFee }}</view>
|
||
</block>
|
||
<block slot='middle'>
|
||
<view class="" style="background-color: #fff;"></view>
|
||
</block>
|
||
</blPaymentPasswordInput>
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import { getBank, bankCardList, postCashInfo } from "@/api/user";
|
||
import NP from "number-precision";
|
||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||
import blPaymentPasswordInput from '@/components/blPaymentPasswordInput.vue';
|
||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||
|
||
export default {
|
||
mixins: [pageListenMixins],
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
payPwd: "",
|
||
selectedBank: null,
|
||
amout: "",
|
||
minPrice: 0,
|
||
banks: [],
|
||
commissionCount: 0, //可提现金额
|
||
fee: 0, //手续费
|
||
gdAmount: 0, //固定手续费
|
||
gdLimit: 0, //最低固定费率额度
|
||
feeRate: 0, //手续费费率
|
||
remark: "", //提现说明
|
||
pageKeyId: Object.freeze('userExtractIndex')
|
||
}
|
||
},
|
||
components: {
|
||
uniPopup,
|
||
blPaymentPasswordInput
|
||
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
//计算手续费
|
||
totalFee() {
|
||
/*
|
||
if( 提现金额 < gdLimit ) sxf = gdAmount
|
||
if( 提现金额 >= gdLimit ) sxf = 提现金额*fl
|
||
*/
|
||
return this.calculateSxf(this.amout)
|
||
}
|
||
},
|
||
onLoad: function (e) {
|
||
this.getBank();
|
||
this.getDefaultBankCards();
|
||
},
|
||
onShow() {
|
||
if (this.$store.getters.token) {
|
||
this.$store.dispatch("getUser", true);
|
||
}
|
||
|
||
//获取选择的银行卡
|
||
let card = uni.getStorageSync('selectedBankCard');
|
||
if (card) {
|
||
console.log("card:" + JSON.parse(card));
|
||
this.selectedBank = JSON.parse(card);
|
||
//清空存储
|
||
uni.removeStorageSync('selectedBankCard');
|
||
}
|
||
},
|
||
methods: {
|
||
calculateSxf: function (amout) {
|
||
var sxf = 0;
|
||
if (amout == 0) {
|
||
return sxf;
|
||
}
|
||
|
||
if (parseFloat(this.gdLimit) > 0 && amout < parseFloat(this.gdLimit)) {
|
||
sxf = parseFloat(this.gdAmount);
|
||
console.log("fixed");
|
||
} else {
|
||
if (parseFloat(this.feeRate) > 0) {
|
||
sxf = NP.times(amout, NP.divide(parseFloat(this.feeRate), 100));
|
||
}
|
||
console.log("variable");
|
||
}
|
||
console.log("sxf:" + sxf);
|
||
// fix bug#1202
|
||
// 四舍五入，再保留两位小数
|
||
return (Math.round(sxf * 100) / 100).toFixed(2);
|
||
},
|
||
goCashRecord() {
|
||
this.$yrouter.push('/pkg_user/views/withdrawalLog');
|
||
},
|
||
clearNoNum: function (value) {
|
||
|
||
var str = value;
|
||
var len1 = str.substr(0, 1);
|
||
var len2 = str.substr(1, 1);
|
||
//如果第一位是0，第二位不是点，就用数字把点替换掉
|
||
if (str.length > 1 && len1 == 0 && len2 != ".") {
|
||
str = str.substr(1, 1);
|
||
}
|
||
//第一位不能是.
|
||
if (len1 == ".") {
|
||
str = "";
|
||
}
|
||
//限制只能输入一个小数点
|
||
if (str.indexOf(".") != -1) {
|
||
var str_ = str.substr(str.indexOf(".") + 1);
|
||
if (str_.indexOf(".") != -1) {
|
||
str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
|
||
}
|
||
}
|
||
|
||
value = str
|
||
|
||
var index = String(value).indexOf('.');
|
||
|
||
value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
|
||
|
||
// value = value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
|
||
// value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
|
||
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
|
||
|
||
//修复可输入3位小数的bug
|
||
if (index != -1) {
|
||
var arrStr = [];
|
||
arrStr = String(value).split('.');
|
||
//当小数位数达两位的时候，设备最大输入长度为当前长度
|
||
if (arrStr[1] && arrStr[1].length == 2) {
|
||
this.maxlength = String(value).length
|
||
} else {
|
||
this.maxlength = -1//恢复
|
||
}
|
||
} else {
|
||
this.maxlength = -1//恢复
|
||
}
|
||
|
||
return value
|
||
},
|
||
balanceInputChange(value) {
|
||
let v = this.clearNoNum(value)
|
||
if (v >= this.commissionCount) {
|
||
v = this.commissionCount
|
||
}
|
||
setTimeout(() => {
|
||
this.amout = v
|
||
}, 0)
|
||
},
|
||
balanceInputBlur(value) {
|
||
console.log(value)
|
||
if (String(value).length == 0) {
|
||
this.amout = ''
|
||
return
|
||
}
|
||
if (value > this.commissionCount) {
|
||
this.amout = this.commissionCount
|
||
} else {
|
||
this.amout = value
|
||
}
|
||
},
|
||
openPwdInput() {
|
||
this.$refs.popup.open();
|
||
},
|
||
//支付密码输入监听
|
||
onInput(e) {
|
||
|
||
},
|
||
// 支付密码输入确认
|
||
onConfirm(e) {
|
||
let password = e.value;
|
||
|
||
this.payPwd = password;
|
||
|
||
if (this.payPwd.length == 0 || this.payPwd.length < 6) {
|
||
uni.showToast({
|
||
title: '请输入正确的支付密码'
|
||
});
|
||
return;
|
||
}
|
||
|
||
//网络请求
|
||
//网络请求
|
||
/*
|
||
extractType 填 'bank'
|
||
realName 持卡人姓名
|
||
bankAddress 支行地址
|
||
bankCode 卡号
|
||
money 提现金额
|
||
*/
|
||
var that = this;
|
||
this.$dialog.loading.open();
|
||
postCashInfo({
|
||
extractType: 'bank',
|
||
realName: this.selectedBank.name,
|
||
bankCode: this.selectedBank.cardNo,
|
||
bankAddress: this.selectedBank.bankSub,
|
||
money: this.amout,
|
||
passwordPay: this.payPwd
|
||
}).then(
|
||
res => {
|
||
that.$dialog.loading.close();
|
||
that.$dialog.message(res.msg);
|
||
|
||
that.$refs.popup.close();
|
||
that.$refs.secrity.clear();
|
||
|
||
setTimeout(function () {
|
||
that.$yrouter.replace("/pages/user/promotion/CashAudit/index");
|
||
}, 1000);
|
||
|
||
},
|
||
error => {
|
||
that.$dialog.loading.close();
|
||
that.$dialog.message(error.msg);
|
||
|
||
that.$refs.popup.close();
|
||
that.$refs.secrity.clear();
|
||
}
|
||
);
|
||
},
|
||
|
||
getDefaultBankCards() {
|
||
let that = this;
|
||
bankCardList({
|
||
limit: 1,
|
||
page: 1
|
||
})
|
||
.then(response => {
|
||
// 请求的列表数据
|
||
let arr = response.data.records;
|
||
//取第一张银行卡做为默认
|
||
if (arr != undefined && arr.length > 0) {
|
||
that.selectedBank = arr[0];
|
||
}
|
||
})
|
||
.catch(err => {
|
||
});
|
||
},
|
||
confrimBtnClick: function () {
|
||
if (!this.selectedBank) {
|
||
this.$dialog.error("请选择提现银行卡");
|
||
return;
|
||
}
|
||
|
||
if (this.amout.length == 0) {
|
||
this.$dialog.error("请输入提现金额");
|
||
return;
|
||
} else if (
|
||
parseFloat(this.amout) > parseFloat(this.commissionCount) ||
|
||
parseFloat(this.commissionCount) == 0
|
||
) {
|
||
this.$dialog.error("可提现金额不足");
|
||
return;
|
||
} else if (parseFloat(this.amout) < parseFloat(this.minPrice)) {
|
||
this.$dialog.error("金额不能小于最低提现金额" + this.minPrice);
|
||
return;
|
||
}
|
||
|
||
//先判断用户是否绑定过手机
|
||
if (this.userInfo.phone) {
|
||
//再判断用户是否设置过支付密码
|
||
if (this.userInfo.hasPwdPay) {
|
||
//显示支付密码输入框
|
||
this.openPwdInput();
|
||
} else {
|
||
//设置支付密码
|
||
this.$yrouter.push({path: "/pkg_user/views/payPassword?isSetMode=true"});
|
||
}
|
||
} else {
|
||
//跳转到绑定手机
|
||
this.$yrouter.push({path: "/pkg_user/views/bindPhone"});
|
||
}
|
||
},
|
||
onBackClick: function () {
|
||
console.log("back");
|
||
this.$yrouter.back();
|
||
},
|
||
//选择银行卡
|
||
bankSelect: function () {
|
||
console.log("bankSelect");
|
||
this.$yrouter.push({
|
||
path: "/pkg_user/views/bankCardList",
|
||
query: {
|
||
isSelected: true
|
||
}
|
||
});
|
||
},
|
||
withdrawalAll: function () {
|
||
if (parseFloat(this.commissionCount) > 0) {
|
||
this.amout = this.commissionCount + ''
|
||
}
|
||
},
|
||
getBank: function () {
|
||
getBank().then(
|
||
res => {
|
||
this.banks = res.data.extractBank
|
||
this.minPrice = res.data.minPrice
|
||
this.commissionCount = parseFloat(this.$force2Decimal(res.data.commissionCount))
|
||
this.gdAmount = parseFloat(res.data.gdAmount)
|
||
this.gdLimit = parseFloat(res.data.gdLimit)
|
||
this.feeRate = parseFloat(res.data.fl)
|
||
}
|
||
)
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.user-withdrawal {
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
padding: 42rpx 32rpx;
|
||
background: #F9F9F9;
|
||
color: #333333;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
|
||
.icon-card {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.bank-box {
|
||
margin: 10rpx 0 40rpx;
|
||
padding: 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #FFFFFF;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.amount-box {
|
||
padding: 32rpx 24rpx 54rpx;
|
||
border-radius: 12rpx;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
margin-bottom: 30rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.amount-box .item {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.red {
|
||
color: #E91717;
|
||
}
|
||
|
||
.dollar {
|
||
font-size: 32rpx;
|
||
line-height: 48rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.withdraw-all-btn {
|
||
width: 148rpx;
|
||
height: 56rpx;
|
||
padding: 0;
|
||
border-radius: 4rpx;
|
||
border: 0;
|
||
color: #FFFFFF;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
line-height: 56rpx;
|
||
text-align: center;
|
||
box-shadow: none;
|
||
background: #28AAF4;
|
||
&.grey {
|
||
background-color: #f1f1f1;
|
||
color: #dcdcdc;
|
||
}
|
||
}
|
||
|
||
.vline {
|
||
height: 0;
|
||
border: 1rpx solid #E8E9E9;
|
||
}
|
||
|
||
.input {
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 686rpx;
|
||
height: 80rpx;
|
||
margin: 54rpx 0 40rpx;
|
||
border-radius: 8rpx;
|
||
background: #C52733;
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.record-btn {
|
||
color: #776A89;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
text-decoration: underline;
|
||
}
|
||
</style> |