partnerApp/pages/wallet/withdraw.vue

<template>
	<view class="withdraw">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="withdraw-head dis f-c" @click="bankCardOption">
			<view class="dis a-c j-s">
				<view class="withdraw-head-to">到账银行卡</view>
				<view class="dis a-c" style="font-weight: bold;font-size: 12px;">
					<view class="bankLogo">
						<image src="/static/icon/bjdcar.png" mode="" style="width: 100%;height: 100%;"></image>
					</view>
					<text
						v-if="bankCardInfo.bankAccount && bankCardInfo.bankNumber">{{bankCardInfo.bankAccount.slice(-4)}}（{{ bankCardInfo.bankNumber.slice(-4)}}）</text>
				</view>
				<u-icon name="arrow-right" color="#999" size="30"></u-icon>
			</view>
			<text style="color: #999;background-color: #F7F7F7;font-size: 12px;">注：仅支持整数，72小时内到账</text>
		</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;">输入金额超过可提现余额，账户余额{{ amount }}元</text>
				</view>
				<view v-else-if="is_lowest">
					<text class="info-money-num" style="color: #ff1e0f;">最低{{ lowest }}元起提现，账户余额{{ amount }}元</text>
				</view>
				<view v-else>
					<text class="info-money-num">当前可提现余额{{ amount }}元，</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/common/del.png" mode="aspectFill" :lazy-load="true"></image>
			</view>
		</view>
		<u-popup v-model="bankCardListShow" mode="bottom" height="700" border-radius="20">
			<view class="bankCardPopup">
				<view class="title dis f-c a-c">
					<text>选择到账银行卡</text>
					<text>请留意各银行到账时间</text>
				</view>
				<scroll-view scroll-y="true" style="height: 480rpx;">
					<view class="PopupSet dis j-s" v-for="(bankitem,bankindex) in bankCardList" :key="bankitem.id"
						@click="bankCardPopupClick(bankitem)">
						<view class="setLeft">
							<image src="../../static/icon/bjdcar.png" mode=""></image>
						</view>
						<view class="setRight dis j-s a-c">
							<view class="dis f-c">
								<text v-if="bankitem.bankAccount && bankitem.bankNumber">
									{{bankitem.bankAccount.slice(-4)}} 储蓄卡（{{bankitem.bankNumber.slice(-4)}}）</text>
								<text>72小时到账</text>
							</view>
							<u-icon v-if="bankCardInfo.id==bankitem.id" name="checkbox-mark" color="#02c25d"
								size="50"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-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, //最低提现金额
				amount: 0, //可提现余额
				extract: '', //选择的提现金额
				amountStatus: "", //提现类型
				is_out: false,
				is_lowest: false,
				is_post: false,
				money: '', //提现金额
				real_money: '', //实际到账
				keyboradShow: false,
				isIphoneX: false,
				isRefuse: false,
				bankCardList: [],
				bankCardInfo: {},
				bankCardListShow: false, //银行卡选择
			};
		},
		watch: {
			extract(oldVal, newVal) {}
		},

		async onLoad(params) {
			if (!!params.amount) {
				this.amount = params.amount
				this.amountStatus = params.amountStatus
			}
			this.loadData();
			this.getbankCard();
		},
		methods: {
			bankCardPopupClick(info) {
				this.bankCardInfo = info;
				this.bankCardListShow = false;
			},
			bankCardOption() {
				this.bankCardListShow = true;
			},
			async getbankCard() {
				let res = await this.$http.get('/userBank/getUserBankList');
				this.bankCardList = res.data;
				this.bankCardInfo = this.bankCardList.find(val => val.isDefault == 1)
				console.log(this.bankCardInfo);
			},
			loadData() {
				this.lowest = 50;
				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);
					this.extract = val;
					this.checkMoney();
				}
			},
			//全部提现
			getAll() {
				this.extract = parseInt(this.amount);
				this.checkMoney();
			},
			//提现
			async handleShowModel() {
				let params = {
					amount: this.extract,
					amountStatus: this.amountStatus,
					fromBankCardId: this.bankCardInfo.id,
				}
				let res = await this.$http.post('/sysUserAccount/insert', params);
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					setTimeout(() => {
						return uni.navigateBack();
					}, 2000);
				}

			},
			//金额计算
			checkMoney() {
				if (!this.extract || this.extract < this.lowest) {
					this.is_lowest = true;
					this.is_post = false;
				} else if (this.extract > this.amount) {
					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"
					});
				}
			},
			StringSlice(val) {
				let data = val.slice(-4)
				return data
			},
			async getMoney() {
				this.closeWithdrawPopup();
				if (this.isRefuse) return;
				this.isRefuse = true;
				let res = await this.$http.post('/insPayApply/applyPay?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;
	}

	.bankCardPopup {
		padding: 10px 30px;

		.title {
			color: #000;
			font-weight: bold;
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 10px;

			text:last-child {
				font-size: 12px;
				color: #999;
				font-weight: 400;
			}
		}

		.scroll {
			min-height: 200px;
			overflow-y: auto;
		}

		.PopupSet {
			padding-top: 15px;

			.setLeft {
				width: 25px;
				height: 25px;
				background-color: #fff;
				border-radius: 50%;
				padding: 4px;
				box-sizing: border-box;
				margin-right: 5px;
				box-shadow: 0px 1px 4px #c3c3c3;
				margin-right: 20px;
				margin-top: 2px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.setRight {
				width: 100%;
				padding: 0 2px 15px 0;
				border-bottom: 1px solid #f2f2f2;

				text {
					font-size: 12px;
					color: #999;
				}

				text:first-child {
					font-size: 15px;
					color: #000;
					font-weight: bold;
				}
			}

		}

	}

	.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: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		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;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin-top: -20px;
	}

	.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;
	}

	.bankLogo {
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 50%;
		padding: 4px;
		box-sizing: border-box;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.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>