Init project
This commit is contained in:
lifizer
@@ -0,0 +1,467 @@
|
||||
<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">
|
||||
<input
|
||||
:placeholder="'最低提现金额' + minPrice"
|
||||
placeholder-style="font-size:28rpx"
|
||||
v-model="amout"
|
||||
:maxlength='maxlength'
|
||||
@blur="balanceInputBlur"
|
||||
@input="balanceInputChange"
|
||||
type="digit"
|
||||
autofocus
|
||||
/>
|
||||
</view>
|
||||
<button class="withdraw-all-btn" @click="withdrawalAll">全部提现</button>
|
||||
</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;margin-top: 10rpx;">请输入支付密码</view>
|
||||
</block>
|
||||
<block slot='middle'>
|
||||
<view class="" style="background-color: #fff;"></view>
|
||||
</block>
|
||||
</blPaymentPasswordInput>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import {getUserInfo, getMenuUser, bindingPhone, 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';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
payPwd: "",
|
||||
selectedBank: null,
|
||||
amout: "",
|
||||
minPrice: 0,
|
||||
banks: [],
|
||||
maxlength: -1,
|
||||
commissionCount: 0, //可提现金额
|
||||
fee: 0, //手续费
|
||||
gdAmount: 0, //固定手续费
|
||||
gdLimit: 0, //最低固定费率额度
|
||||
feeRate: 0, //手续费费率
|
||||
remark: "" //提现说明
|
||||
}
|
||||
},
|
||||
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);
|
||||
|
||||
return this.$force2Decimal(sxf);
|
||||
},
|
||||
goCashRecord() {
|
||||
this.$yrouter.push("/pages/user/promotion/CashRecord/index");
|
||||
},
|
||||
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: function (e) {
|
||||
var value = e.target.value;
|
||||
this.amout = value
|
||||
var v = this.clearNoNum(value)
|
||||
setTimeout(() => {
|
||||
this.amout = v
|
||||
}, 0)
|
||||
},
|
||||
balanceInputBlur: function (e) {
|
||||
var value = e.target.value;
|
||||
|
||||
if (String(value).length == 0) {
|
||||
this.amout = 0
|
||||
}
|
||||
},
|
||||
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 () {
|
||||
let that = this;
|
||||
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 (this.commissionCount) {
|
||||
this.amout = this.commissionCount + "";
|
||||
}
|
||||
},
|
||||
getBank: function () {
|
||||
let that = this;
|
||||
getBank().then(
|
||||
res => {
|
||||
that.banks = res.data.extractBank;
|
||||
that.minPrice = res.data.minPrice;
|
||||
that.commissionCount = this.$force2Decimal(res.data.commissionCount);
|
||||
that.gdAmount = parseFloat(res.data.gdAmount);
|
||||
that.gdLimit = parseFloat(res.data.gdLimit);
|
||||
that.feeRate = parseFloat(res.data.fl);
|
||||
|
||||
//可提现金额去除手续费
|
||||
if (that.commissionCount > 0) {
|
||||
var sxf = that.calculateSxf(that.commissionCount);
|
||||
console.log('手续费:' + sxf);
|
||||
that.commissionCount = this.$force2Decimal(Math.max(0, (that.commissionCount - sxf)));
|
||||
;
|
||||
}
|
||||
},
|
||||
function (err) {
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
background: #28AAF4;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.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: #FD574B;
|
||||
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>
|
||||
Reference in New Issue
Block a user