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

<template>
	<view class="withdraw">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="withdraw-head dis f-c" @click="bankCardOption">
			<text class="withdraw-head-to mb-2">到账银行卡</text>
			<view class="dis a-start j-s">
				<view class="dis j-s a-start">
					<image class="bankLogo" :src="bankCardInfo.logo" mode=""></image>
					<view class="dis a-start f-c bankName" v-if="bankCardInfo.bankAccount && bankCardInfo.bankNumber">
						<text>{{bankCardInfo.bankAccount}}（****{{bankCardInfo.bankNumber.slice(-4)}}）</text>
						<text>注：仅支持整数，72小时内到账</text>
					</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="30"></u-icon>
			</view>

		</view>
		<view class="withdraw-body">
			<text style="font-size: 15px;color: #333;">提现金额</text>
			<view class="input-money">
				<text class="rmb">￥</text>
				<input v-model.number="extract" disabled type="text" @input="arrinput" 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="dis j-s" :class="['keyboard', keyboradShow ? '' : 'active', isIphoneX ? 'isIphone' : '']">
				<view class="dis  a-s j-s f-wrap" style="width: 80%;">
					<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" style="width: 66%;" @tap="keyboradKey(0)"><text>0</text></view>
					<view class="keyboard-item " @tap="keyboradKey('.')">.</view>
				</view>
				<view class="dis f-c j-s" style="margin-left: 8px;width: 20%;">
					<view class="keyboard-item " @tap="keyboradDel()" style="width: 100%;">
						<image src="/static/image/bindBank/Frame.png" mode="aspectFill" :lazy-load="true"
							style="width: 26px;height: 26px;">
						</image>
					</view>
					<u-button class="Withdrawal" type="primary" :disabled="!is_post"
						@click="handleShowModel">提现</u-button>
				</view>

			</view>
			<!-- <view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">提现</button></view> -->
		</view>
		<u-popup v-model="bankCardListShow" mode="bottom" height="660" border-radius="20">
			<view class="bankCardPopup dis f-c j-s a-c">
				<view class="title dis f-c a-c">
					<text>选择到账银行卡</text>
					<text>请留意各银行到账时间</text>
				</view>
				<scroll-view scroll-y="true" class="" style="height:auto;background-color: #fff;border-radius: 6px;
		position: relative;">
					<view class="PopupSet">
						<view class=" dis j-s" v-for="(bankitem,bankindex) in bankCardList" :key="bankitem.id"
							@click="bankCardPopupClick(bankitem)">
							<view class="setLeft">
								<image :src="bankitem.logo" mode="" style="width: 100%;height: 100%;"></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="#0052FF"
									size="50"></u-icon>
							</view>
						</view>

					</view>

				</scroll-view>
				<view class="bankAdd dis j-s a-c" @click="bank">
					<view class="dis a-c">
						<image src="/static/image/bindBank/add.png" mode=""
							style="width: 20px;height: 20px;margin-right: 20px;">
						</image>
						<text>添加银行卡提现</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="30"></u-icon>
				</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 {
				bankList: [{
						bankName: "中国邮政储蓄银行",
						logo: "/static/image/bankLogo/youzheng.png",
						background: "linear-gradient(90deg, rgba(79, 136, 69, 0.7) 0%, #4f8845 100%)"
					},
					{
						bankName: "中国工商银行",
						logo: "/static/image/bankLogo/gongshang.png",
						background: "linear-gradient(90deg, rgba(177, 0, 13, 0.7) 0%, #b1000d 100%)"
					},
					{
						bankName: "中国农业银行",
						logo: "/static/image/bankLogo/nongye.png",
						background: "linear-gradient(90deg, rgba(86,152, 130, 0.7) 0%, #569882 100%)"
					},
					{
						bankName: "中国银行",
						logo: "/static/image/bankLogo/zhongguo.png",
						background: "linear-gradient(90deg, rgba(157, 32, 40, 0.7) 0%, #9d2028 100%)"
					},
					{
						bankName: "中国建设银行",
						logo: "/static/image/bankLogo/jianshe.png",
						background: "linear-gradient(90deg, rgba(6, 89, 159, 0.7) 0%, #06569F 100%)"
					},
					{
						bankName: "招商银行",
						logo: "/static/image/bankLogo/zhaoshang.png",
						background: "linear-gradient(90deg, rgba(197, 0, 25, 0.7) 0%, #c50019 100%)"
					},
					{
						bankName: "中国民生银行",
						logo: "/static/image/bankLogo/minsheng.png",
						background: "linear-gradient(90deg, rgba(84,149, 92, 0.7) 0%, #54955c 100%)"
					},
					{
						bankName: "中国光大银行",
						logo: "/static/image/bankLogo/guangda.png",
						background: "linear-gradient(90deg, rgba(93, 30, 131, 0.7) 0%, #5d1e83 100%)"
					},
					{
						bankName: "中信银行",
						logo: "/static/image/bankLogo/zhongxin.png",
						background: "linear-gradient(90deg, rgba(184, 0,22, 0.7) 0%, #b80016 100%)"
					},
					{
						bankName: "华夏银行",
						logo: "/static/image/bankLogo/huaxia.png",
						background: "linear-gradient(90deg, rgba(216, 12, 24, 0.7) 0%, #d80c18 100%)"
					},
					{
						bankName: "中国交通银行",
						logo: "/static/image/bankLogo/jiaotong.png",
						background: "linear-gradient(90deg, rgba(33, 58, 120, 0.7) 0%, #213a78 100%)"
					},
					{
						bankName: "晋商银行",
						logo: "/static/image/bankLogo/jinshang.png",
						background: "linear-gradient(90deg, rgba(224, 150, 165, 0.7) 0%, #e096a5 100%)"
					},
					{
						bankName: "山西银行",
						logo: "/static/image/bankLogo/shanxi.png",
						background: "linear-gradient(90deg, rgba(192, 19, 73, 0.7) 0%, #c01349 100%)"
					},
					{
						bankName: "农村商业银行",
						logo: "/static/image/bankLogo/nongcun.png",
						background: "linear-gradient(90deg, rgba(0, 155, 77, 0.7) 0%, #009b4d 100%)"
					},
				],
				lowest: 0, //最低提现金额
				amount: 500, //可提现余额
				extract: '', //选择的提现金额
				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.loadData();
			this.getbankCard();
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			arrinput(val) {
				console.log(val);
			},
			bank() {
				this.navigate({
					url: "/pages/wallet/bindBank"
				}, "navigateTo", true);
			},
			bankCardPopupClick(info) {
				this.bankCardInfo = info;
				this.bankCardListShow = false;
			},
			bankCardOption() {
				this.bankCardListShow = true;
			},
			async getbankCard() {
				let res = await this.$http.post('/userBank/getUserBankList', {
					auditStatus: "1",
					delFlag: '0'
				});
				this.bankList.map(val => {
					res.data.map(ele => {
						if (val.bankName == ele.bankAccount) {
							ele.logo = val.logo;
							return ele;
						}
					})
				})
				let bankinfo = res.data.find(val => val.isDefault == 1)
				if (bankinfo) {
					this.bankCardInfo = bankinfo;
				} else {
					this.bankCardInfo = res.data[0]
				}
				this.bankCardList = res.data;
			},
			loadData() {
				this.lowest = 20;
				this.$nextTick(() => {
					this.keyboradShow = true;
				});
			},
			//隐藏原生
			stopKeyborad() {
				uni.hideKeyboard();
			},
			//输入事件
			keyboradKey(key) {
				// this.extract = this.extract * 10 + key;
				this.extract += key;
				this.checkMoney();
			},
			//键盘递减事件
			keyboradDel() {
				if (this.extract.length) this.extract = this.extract.substr(0, this.extract.length - 1);
				this.checkMoney();
			},
			//全部提现
			getAll() {
				this.extract = this.amount;
				this.checkMoney();
			},
			//提现
			async handleShowModel() {
				let params = {
					amount: this.extract,
					fromBankCardId: this.bankCardInfo.bankNumber,
				}
				let res = await this.$http.post('/sysUserAccount/insert', params);
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					setTimeout(() => {
						return uni.navigateBack(1);
					}, 2000);
				}

			},
			//金额计算
			checkMoney() {
				if (!this.extract || parseFloat(this.extract) < parseFloat(this.lowest)) {
					this.is_lowest = true;
					this.is_post = false;
				} else if (parseFloat(this.extract) > parseFloat(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 lang="scss" scoped>
	page {
		background-color: #F8FAFE;
	}

	/deep/ .uni-scroll-view-content {
		background-color: #F8FAFE;
	}

	.bankCardPopup {
		padding: 10px 16px;
		background-color: #F8FAFE;

		.bankAdd {
			background-color: #fff;
			font-size: 15px;
			width: 100%;
			color: #333;
			padding: 15px 8px;

		}

		.title {
			color: #000;
			font-weight: bold;
			padding-bottom: 10px;
			font-size: 15px;

			text:last-child {
				font-size: 12px;
				color: rgba(51, 51, 51, 0.8);
				font-weight: 400;
			}
		}

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

		.PopupSet {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 6px;
			padding: 18rpx 16rpx;

			.setLeft {
				width: 35px;
				height: 30px;
				margin-right: 5px;
				margin-right: 20px;
				margin-top: 2px;

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

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

				text {
					font-size: 12px;
					color: rgba(51, 51, 51, 0.6);
				}

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



		}

	}

	.withdraw {
		background-color: #ededed;
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	.withdraw-head {
		background-color: #F8FAFE;
		padding: 16px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		font-size: 14px;

		.withdraw-head-to {
			font-size: 16px;
			font-weight: bold;
			color: #333333;

		}
	}

	.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: 12px 16px;
		font-size: 28upx;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin-top: -20px;
		height: calc(100vh - 170px);
	}

	.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: 2.6em;
		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: rgba(51, 51, 51, 0.6);
		font-size: 13px;
	}

	.withdraw-body .info-money-all {
		color: #2D4D89;
	}

	.withdraw-body .tx button {
		color: #b2b2b2;
		font-size: 30upx;
	}

	.withdraw-body .tx-active button {
		font-size: 30upx;
		color: #fff;
		background: #1E85FE;
	}

	.withdraw .keyboard {
		height: 210px;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #F7F7F7;
		z-index: 2;
		padding: 23rpx 16rpx 0rpx 16rpx;
		transition: all 0.2s ease-in 0.2s;
	}

	.Withdrawal {
		width: 100%;
		height: 141px;
		background: #0052FF;
		border-radius: 4px;
		text-align: center;
		line-height: 286rpx;
		color: #fff;
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.withdraw .keyboard-item {
		box-sizing: border-box;
		width: 32.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		font-size: 40rpx;
		color: #333;
		height: 84rpx;
		border-top: none;
		border-left: none;
		border-radius: 4px;
	}

	.keyboard-item:active {
		background-color: #e6e5ea;
	}

	.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: 25px;
		height: 25px;
		margin-right: 8px;
	}

	.bankName {
		text:first-child {
			margin-bottom: 10px;
			line-height: 1;
			font-weight: bold;
			font-size: 16px;
		}

		text:last-child {
			margin-bottom: 20px;
			font-size: 12px;
			color: #999;
		}


	}

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