vue-insagent-app/pages/wallet/withdraw1.vue

<template>
	<view class="withdraw">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<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: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			// 可提现余额查询
			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>