344 lines
7.7 KiB
Vue
344 lines
7.7 KiB
Vue
<template>
|
||
<view class="ithui-content">
|
||
<view class="withdraw">
|
||
<view class="withdraw-head">
|
||
<view class="withdraw-head-to">到账渠道</view>
|
||
<view class="withdraw-head-way">
|
||
<view class="withdraw-head-way-1">
|
||
<image class="way-icon" src="/static/money.png"></image>
|
||
<text class="way-text">微信零钱</text>
|
||
</view>
|
||
<view class="withdraw-head-way-2">仅支持整数，72小时内到账</view>
|
||
</view>
|
||
</view>
|
||
<view class="withdraw-body">
|
||
<text>提现金额</text>
|
||
<view class="input-money">
|
||
<text class="rmb">￥</text>
|
||
<input v-model.number="extract" type="text" @focus.prevent="stopKeyborad" class="t-input" />
|
||
</view>
|
||
<view class="info-money">
|
||
<view v-if="is_out">
|
||
<text class="info-money-num" style="color: #ff1e0f;">输入金额超过可提现余额，账户余额{{ pool }}元</text>
|
||
</view>
|
||
<view v-else-if="is_lowest">
|
||
<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ pool }}元</text>
|
||
</view>
|
||
<view v-else>
|
||
<text class="info-money-num">当前可提现余额{{ pool }}元，</text>
|
||
<text class="info-money-all" @click="getAll">全部提现</text>
|
||
</view>
|
||
</view>
|
||
<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view>
|
||
</view>
|
||
|
||
<view :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
|
||
<block v-for="(item, index) in 9" :key="index">
|
||
<view class="keyboard-item" @tap="keyboradKey(index + 1)">{{ index + 1 }}</view>
|
||
</block>
|
||
<view class="keyboard-item hide"></view>
|
||
<view class="keyboard-item" @tap="keyboradKey(0)"><text>0</text></view>
|
||
<view class="keyboard-item delte" @tap="keyboradDel()">
|
||
<image class="img" src="/static/del.png" mode="aspectFill" :lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="showModal" title="提现确认" showCancelButton cancelText="我再想想" confirmColor="#ff1e0f"
|
||
confirmText="确认提现" @confirm="getMoney" @cancel="showModal = false">
|
||
<view class="slot-content">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pool: 0,
|
||
extract: '',
|
||
service_fee: 0.0,
|
||
showModal: false,
|
||
is_out: false,
|
||
is_lowest: false,
|
||
is_post: false,
|
||
lowest: 0,
|
||
fee: 0,
|
||
money: '',
|
||
real_money: '',
|
||
keyboradShow: false,
|
||
isIphoneX: false,
|
||
isRefuse: false,
|
||
content: ""
|
||
};
|
||
},
|
||
watch: {
|
||
extract(oldVal, newVal) {}
|
||
},
|
||
onLoad() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
// this.initData();
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 500);
|
||
},
|
||
methods: {
|
||
async initData() {
|
||
// const res = await this.$api.mock('pool');
|
||
this.lowest = res.least_money;
|
||
this.fee = res.fee;
|
||
this.pool = res.pool;
|
||
this.$nextTick(() => {
|
||
this.keyboradShow = true;
|
||
});
|
||
},
|
||
stopKeyborad() {
|
||
uni.hideKeyboard();
|
||
},
|
||
keyboradKey(key) {
|
||
this.extract = this.extract * 10 + key;
|
||
this.checkMoney();
|
||
},
|
||
keyboradDel() {
|
||
if (this.extract && this.extract > 0) {
|
||
let val = parseInt(this.extract / 10);
|
||
if (val == 0) val = '';
|
||
this.extract = val;
|
||
this.checkMoney();
|
||
}
|
||
},
|
||
getAll() {
|
||
this.extract = parseInt(this.pool);
|
||
this.checkMoney();
|
||
},
|
||
checkMoney() {
|
||
if (!this.extract || this.extract < this.lowest) {
|
||
this.is_lowest = true;
|
||
this.is_post = false;
|
||
} else if (this.extract > this.pool) {
|
||
this.is_out = true;
|
||
this.is_lowest = false;
|
||
this.is_post = false;
|
||
} else {
|
||
this.is_out = false;
|
||
this.is_lowest = false;
|
||
this.is_post = true;
|
||
}
|
||
if (parseFloat(this.extract).toString() == 'NaN') {
|
||
this.is_post = false;
|
||
this.$api.msg('输入金额不合法');
|
||
}
|
||
},
|
||
handleShowModel() {
|
||
if (this.isRefuse) return;
|
||
this.checkMoney();
|
||
if (!this.is_post) return;
|
||
this.money = this.extract;
|
||
this.service_fee = Number((this.extract * (this.fee / 100)).toString().match(/^\d+(?:\.\d{0,2})?/));
|
||
this.real_money = Number((this.extract - this.service_fee).toString().match(/^\d+(?:\.\d{0,2})?/));
|
||
this.content = `<p>提现金额：<em style="font-style:normal;color:#ff1e0f">${this.money} 元</p>
|
||
<p>实际到账：<em style="font-style:normal;color:#ff1e0f">${this.real_money} 元</em></p>
|
||
<p>服务费用：<em style="font-style:normal;color:#ff1e0f">${this.service_fee} 元</em></p>
|
||
<p>服务费率：<em style="font-style:normal;color:#ff1e0f">${this.fee}%</em></p>
|
||
`
|
||
this.showModal = true;
|
||
},
|
||
getMoney() {
|
||
this.showModal = false;
|
||
if (this.isRefuse) return;
|
||
this.isRefuse = true;
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: "提现申请已提交，等待审核",
|
||
mask: false,
|
||
icon: 'none'
|
||
});
|
||
}, 500);
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.extract = '';
|
||
// this.initData();
|
||
this.is_out = false;
|
||
this.is_lowest = false;
|
||
this.is_post = false;
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh();
|
||
}, 500);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #ededed;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .u-modal__content {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.ithui {
|
||
&-content {
|
||
.withdraw {
|
||
padding: 40rpx;
|
||
|
||
&-head {
|
||
background-color: #f7f7f7;
|
||
display: flex;
|
||
align-content: center;
|
||
padding: 40rpx 60rpx;
|
||
font-size: 28rpx;
|
||
|
||
&-to {}
|
||
|
||
&-way {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-content: center;
|
||
margin-left: 40rpx;
|
||
|
||
&-1 {
|
||
color: #576b95;
|
||
margin-bottom: 20rpx;
|
||
|
||
.way-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 10rpx;
|
||
top: 4rpx;
|
||
}
|
||
}
|
||
|
||
&-2 {
|
||
color: #acacac;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-body {
|
||
background-color: #fff;
|
||
padding: 40rpx 60rpx;
|
||
font-size: 28rpx;
|
||
|
||
.input-money {
|
||
display: flex;
|
||
align-content: center;
|
||
font-weight: 600;
|
||
border-bottom: 1rpx solid #eaeef1;
|
||
|
||
.rmb {
|
||
font-size: 2em;
|
||
top: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.t-input {
|
||
height: 1.9em;
|
||
font-size: 2.5em;
|
||
border: none;
|
||
position: relative;
|
||
left: 3.5%;
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
.info-money {
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
&-num {
|
||
color: #b2b2b2;
|
||
}
|
||
|
||
&-all {
|
||
color: #576b95;
|
||
}
|
||
}
|
||
|
||
.tx {
|
||
button {
|
||
color: #b2b2b2;
|
||
}
|
||
}
|
||
|
||
.tx-active {
|
||
button {
|
||
color: #fff;
|
||
background: #07c160;
|
||
}
|
||
}
|
||
}
|
||
|
||
.keyboard {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
flex-wrap: wrap;
|
||
transition: all 0.2s ease-in 0.2s;
|
||
}
|
||
|
||
.active {
|
||
bottom: -400rpx;
|
||
}
|
||
|
||
.keyboard-item {
|
||
box-sizing: border-box;
|
||
width: 250rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
height: 99rpx;
|
||
border: 1rpx solid #ebebeb;
|
||
border-top: none;
|
||
border-left: none;
|
||
}
|
||
|
||
.hide {
|
||
opacity: 0;
|
||
}
|
||
|
||
.delte {
|
||
background: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.delte image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.isIphone {
|
||
padding-bottom: 68rpx !important;
|
||
}
|
||
|
||
.fee {
|
||
em {
|
||
font-size: 0.5rem;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|