partnerApp/pages/wallet/withdraw1.vue

<template>
	<view class="withdraw">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="withdraw-head d-flex a-center">
			<view class="withdraw-head-to">到账渠道</view>
			<view class="withdraw-head-way" style="color:#576B95">{{userInfo.esmUserInternal.bankname}} ({{userInfo.esmUserInternal.accountno.substring(userInfo.esmUserInternal.accountno.length - 4)}})</view>
		</view>
		<view style="color: #ACACAC;background-color: #F7F7F7;padding: 5upx 60upx;">注：仅支持整数，72小时内到账</view>
		<view class="withdraw-body">
			<text>提现金额</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<input disabled 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  type="default" @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/common/del.png" mode="aspectFill" :lazy-load="true"></image></view>
		</view>
		
		<wyb-popup ref="withdrawPopup" type="center" height="480" width="680" radius="6" :maskClickClose="false" >
		    <view class="popup-content">
		        <view class="withdrawHeader d-flex a-center j-center">提现确认</view>
		        <view class="withdrawBody">
					<view>
						<text>提现金额：</text>
						<text class="text-red">{{ money }}元</text>
					</view>
					<view class="margin-top-sm">
						<text>实际到账：</text>
						<text class="text-red">{{ real_money }}元</text>
					</view>
					<view class="margin-top-sm">
						<text>服务费：</text>
						<text class="text-red">{{ service_fee }}元</text>
					</view>
					<view class="margin-top-sm">
						<text>服务费率：</text>
						<text class="text-red">{{ fee }}%</text>
					</view>
				</view>
		        <view class="withdrawFooter d-flex a-center j-end"><view class="d-flex a-center j-center" @tap="closeWithdrawPopup">我再想想</view><view class="d-flex a-center j-center" @tap="getMoney">确认提现</view></view>
		    </view>
		</wyb-popup>
		
	
	</view>
</template>

<script>
import {mapState} from "vuex"
import wybPopup from '@/components/common/wyb-popup/wyb-popup.vue'
export default {
	components: {
		wybPopup
	},
	computed:{
		...mapState(['userInfo'])
	},
	data() {
		return {
			lowest: 0,		//最低提现金额
			fee: 0,			//提现费率
			pool: 0,		//可提现余额
			
			extract: '',	//选择的提现金额
			service_fee: 0.0,//提现服务费
			showModal: false,
			is_out: false,
			is_lowest: false,
			is_post: false,
			money: '',		//提现金额
			real_money: '',	//实际到账
			keyboradShow: false,
			isIphoneX: false,
			isRefuse: false
		};
	},
	watch: {
		extract(oldVal, newVal) {}
	},
	async onLoad() {
		await this.getPayAccount();//获取可提现余额
		this.loadData();
	},
	methods: { 
		// 可提现余额查询
		async getPayAccount() {
			let res = await this.$http.get('/insPayApply/extendAccount?userid=' + this.userInfo.sysUser.id);
			this.pool = res.data.accountBalance;
		},
		
		showWithdrawPopup(){
			this.$refs.withdrawPopup.show() // 显示
		},
		closeWithdrawPopup(){
			this.$refs.withdrawPopup.hide() // 显示
		},
		loadData() {
			this.lowest = 10;
			this.fee = "0";
			// this.pool = "136.5";
			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;
				uni.showToast({ title: '输入金额不合法', icon:"none" });
			}
		},
		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.showWithdrawPopup();
		},
		async getMoney() {
			this.closeWithdrawPopup();
			if (this.isRefuse) return;
			this.isRefuse = true;
			let res = await this.$http.post('/insPayApply/extendApply?amount='+ this.real_money +'&userid=' + this.userInfo.sysUser.id);
			uni.showToast({ title: '提现申请已提交，等待管理员处理', icon:"none",duration:2000 });
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		}
	},
	async onPullDownRefresh() {
		this.extract = '';
		await this.getPayAccount();
		this.loadData();
		this.is_out = false;
		this.is_lowest = false;
		this.is_post = false;
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style scoped>
page {
	background-color: #ededed;
}

.withdraw{
	padding: 20px;
	background-color: #ededed;
	position:absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.withdraw-head{
	background-color: #f7f7f7;
	display: flex;
	align-content: center;
	padding: 10px 30px;
	font-size: 14px;
}
.withdraw-head-way{
	display: flex;
	flex-direction: column;
	align-content: center;
	margin-left: 20px;
}
.withdraw-head-way-1{
	color: #576b95;
	margin-bottom: 10px;
}
.withdraw-head-way-1 .way-icon{
	width: 16px;
	height: 16px;
	margin-right: 5px;
	top: 2px;
}
.withdraw-head-way-2{
	color: #acacac;
	font-size: 12px;
}

.withdraw-body{
	background-color: #fff;
	padding: 20px 30px;
	font-size: 28upx;
}
.withdraw-body .input-money{
	display: flex;
	align-content: center;
	font-weight: 600;
	border-bottom: 0.5px solid #eaeef1;
}
.withdraw-body .input-money .rmb{
	font-size: 2em;
	top: 10px;
	position: relative;
}
.withdraw-body .input-money .t-input{
	height: 1.9em;
	font-size: 2.5em;
	border: none;
	position: relative;
	left: 3.5%;
	outline: none;
}
.withdraw-body .info-money{
	margin-top: 10px;
	font-size: 12px;
	margin-bottom: 20px;
}
.withdraw-body .info-money-num{
	color: #b2b2b2;
}
.withdraw-body .info-money-all{
	color: #576b95;
}
.withdraw-body .tx button{
	color: #b2b2b2;
	font-size: 30upx;
}
.withdraw-body .tx-active button{
	font-size: 30upx;
	color: #fff;
	background: #1E85FE;
}
.withdraw .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;
}
.withdraw .active {
	bottom: -400rpx;
}
.withdraw .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;
}

.withdraw .hide {
	opacity: 0;
}
.withdraw .delte {
	background: none;
	box-shadow: none;
}
.withdraw .delte image {
	width: 60rpx;
	height: 60rpx;
}
.withdraw .isIphone {
	padding-bottom: 68rpx !important;
}
.withdraw .fee em {
	font-size: 0.5rem;
	font-style: normal;
}

.popup-content .withdrawHeader{
	height: 100upx;
	background-color: #fff;
	color: #666666;
	font-size: 32upx;
	border-radius: 10upx;
}
.popup-content .withdrawBody{
	height: 220upx;
	padding: 25upx;
	background-color: #F8F8F8;
}
.popup-content .withdrawBody view>text:nth-of-type(1){
	font-size: 26upx;
}
.popup-content .withdrawBody view.margin-top-sm {
	margin-top: 10upx;
}
.popup-content .withdrawBody .text-red{
	color: #E54D42;
}
.popup-content .withdrawFooter{
	height: 120upx;
}
.popup-content .withdrawFooter view{
	width: 120upx;
	height: 70upx;
	margin: 0upx 30upx;
	border-radius: 10upx;
	padding: 0upx 15upx;
}
.popup-content .withdrawFooter view:nth-of-type(1){
	background-color: #f0f0f0;
}
.popup-content .withdrawFooter view:nth-of-type(2){
	background-color: #1E85FE;
	color: #FFFFFF;
}
</style>