zhapp/pages/wallet/withdrawal.vue

<template>
	<view class="page">
		<view class="account dis f-c " @click="switchCard">
			<text class="title">提现账户</text>
			<view class="dis a-c ">
				<image class="logo" v-if=" bankCardInfo.stylelist  && bankCardInfo.stylelist.logo "
					:src="bankCardInfo.stylelist.logo" mode="">
				</image>
				<text v-if=" bankCardInfo.bankCardNumber"
					style="margin-left: 16rpx;">{{bankCardInfo.bankName}}（****{{bankCardInfo.bankCardNumber.slice(-4)}}）</text>
				<image class="arrowRight" src="/static/icon/my/arrowRight1.png" mode=""></image>
			</view>
		</view>
		<view class="withdraw-body">
			<view class="" style="padding: 40rpx 20rpx; box-sizing: border-box;">
				<text style="font-size: 15px;color: #333;">提现金额</text>
				<view class="input-money">
					<view class="rmb dis a-c">￥</view>
					<text class="t-input dis a-c">{{extract}}</text>
				</view>
				<view class="info-money dis a-c">
					<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>

			<view class="dis j-s keyboard">
				<view class="dis  a-s j-s f-wrap gild " 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=" grid-column: span 2" @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: 20rpx;width: 20%;">
					<view class="keyboard-item " @tap="keyboradDel()" style="width: 100%;">
						<image src="/static/image/Frame.png" mode="aspectFill" :lazy-load="true"
							style="width: 26px;height: 26px;">
						</image>
					</view>
					<u-button class="Withdrawal" :disabled="!is_post" @click="handleShowModel">提现</u-button>
				</view>

			</view>
		</view>
		<!-- 银行卡选择 -->
		<uni-Popup :show="selectbankCard" @close='selectbankCard=false' headerTitle="选择提现银行卡" overflow="auto"
			maxHeight="580rpx">
			<template #content>
				<view class="bankCardview ">
					<view class="view dis j-s" v-for="(item,index) in bankCardList" :key="index"
						@click="bankCardPopupClick(item)">
						<image class="logo" :src="item.stylelist.logo" mode=""></image>
						<view class="CardInfo">
							<view class="dis j-s" v-if="item.bankCardNumber">
								<text class="carTitle">{{item.bankName}}储蓄卡（{{item.bankCardNumber.slice(-4)}}）</text>
								<u-icon v-if="bankCardInfo.id==item.id" name="checkbox-mark" color="#333333"
									size="50rpx"></u-icon>
							</view>
							<text class="comment">72小时到账</text>
						</view>
					</view>
				</view>
			</template>
		</uni-Popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				lowest: 0, //最低提现金额
				amount: 0, //可提现余额
				extract: '', //选择的提现金额
				is_out: false,
				is_lowest: false,
				is_post: false,
				selectbankCard: false, //银行卡弹窗
				bankCardList: [], //银行卡列表
				bankCardInfo: {}, //默认显示银行卡
				bankList: [{
						bankName: "中国邮政储蓄银行",
						logo: "/static/image/bankLogo1/youzheng.png",
					},
					{
						bankName: "中国工商银行",
						logo: "/static/image/bankLogo1/gongshang.png",
					},
					{
						bankName: "中国农业银行",
						logo: "/static/image/bankLogo1/nongye.png",
					},
					{
						bankName: "中国银行",
						logo: "/static/image/bankLogo1/zhongguo.png",
					},
					{
						bankName: "中国建设银行",
						logo: "/static/image/bankLogo1/jianshe.png",
					},
					{
						bankName: "招商银行",
						logo: "/static/image/bankLogo1/zhaoshang.png",
					},
					{
						bankName: "中国民生银行",
						logo: "/static/image/bankLogo1/minsheng.png",
					},
					{
						bankName: "中国光大银行",
						logo: "/static/image/bankLogo1/guangda.png",
					},
					{
						bankName: "中信银行",
						logo: "/static/image/bankLogo1/zhongxin.png",
					},
					{
						bankName: "华夏银行",
						logo: "/static/image/bankLogo1/huaxia.png",
					},
					{
						bankName: "中国交通银行",
						logo: "/static/image/bankLogo1/jiaotong.png",
					},
					{
						bankName: "晋商银行",
						logo: "/static/image/bankLogo1/jinshang.png",
					},
					{
						bankName: "山西银行",
						logo: "/static/image/bankLogo1/shanxi.png",
					},
					{
						bankName: "农村商业银行",
						logo: "/static/image/bankLogo1/nongcun.png",
					},
				],
			}
		},
		onShow() {

		},
		onLoad(options) {
			if (options) {
				this.amount = options.amount;
				this.getcardPack();
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//选择银行卡
			bankCardPopupClick(item) {
				this.bankCardInfo = item;
				this.selectbankCard = false;
			},
			//提现
			async handleShowModel() {
				let params = {
					withdrawAmount: this.extract,
					bankCardId: this.bankCardInfo.id,
				}
				let res = await this.$http.post('/amountAuditing/applyWithdraw', params);
				if (res.code == '200') {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					setTimeout(() => {
						return uni.navigateBack(1);
					}, 2000);
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
			},
			//输入事件
			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();
			},
			//金额计算
			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"
					});
				}
			},
			//全部提现
			getAll() {
				this.extract = this.amount;
				this.checkMoney();
			},
			//切换银行卡
			switchCard() {
				this.selectbankCard = true;
			},
			arrinput(val) {
				console.log(val);
			},
			async getcardPack() {
				let res = await this.$http.post('/userBankCard/queryUserBankCardList', {
					userId: this.userInfo.sysUser.userId,
					auditStatus: '1'
				});
				if (res.code == '200' && res.data.records.length) {
					res.data.records.map(val => {
						let name = this.bankList.find(ele => ele.bankName === val.bankName || ele.bankName
							.includes(val.bankName))
						if (name) {
							val.stylelist = {
								...name
							};
						} else {
							val.stylelist = {
								logo: "",
							}
						}
						val.isDefault == 1 ? val.isDefault = true : val.isDefault = false
						const resultArray = [];
						for (let i = 0; i < val.bankCardNumber.length; i += 4) {
							resultArray.push(val.bankCardNumber.substring(i, i + 4));
						}
						val.bankArray = resultArray;
						return val;
					})
					this.bankCardList = res.data.records;
					let bankinfo = res.data.records.find(val => val.isDefault == 1)
					if (bankinfo) {
						this.bankCardInfo = bankinfo;
					} else {
						this.bankCardInfo = res.data.records[0]
					}
					console.log(this.bankCardList);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		padding: 20rpx;
		box-sizing: border-box;
		height: calc(100vh - 88rpx);
	}

	.account {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #333;

		.title {
			margin-bottom: 25rpx;
		}

		.logo {
			width: 40rpx;
			height: 40rpx;

		}

		.arrowRight {
			width: 22rpx;
			height: 22rpx;
			margin-left: auto;
		}
	}

	.bankCardview {
		padding: 18rpx 40rpx 30rpx;
		box-sizing: border-box;
		width: 100%;

		.view {
			margin-bottom: 15rpx;
		}

		.logo {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
			margin-top: 3rpx;

		}

		.CardInfo {
			width: 90%;
			border-bottom: 1rpx solid #EFEFEF;
			padding-bottom: 15rpx;
			box-sizing: border-box;

			.carTitle {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.comment {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.withdraw-body {
		position: relative;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 28upx;
		height: calc(100vh - 344rpx);
		margin-top: 20rpx;
	}

	.withdraw-body .input-money {
		display: flex;
		align-content: center;
		border-bottom: 0.5px solid #eaeef1;
	}

	.withdraw-body .input-money .rmb {
		font-size: 52rpx;
		line-height: 1.8;
	}

	.withdraw-body .input-money .t-input {
		height: 1.9em;
		font-size: 52rpx;
		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-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;
		}


	}

	//自定义键盘
	.keyboard {
		position: absolute;
		bottom: 0;
		height: 210px;
		width: 100%;
		background: #F7F7F7;
		margin-top: 20rpx;
		padding: 20rpx 0;

		.gild {
			display: grid;
			/* 启用网格布局 */
			grid-template-columns: repeat(3, 1fr);
			/* 3 列，每列等宽 */
			grid-template-rows: auto;
			/* 行高自适应 */
			row-gap: 20rpx;
			/* 只设置行间距（上下） */
			column-gap: 20rpx;

			/* 列间距设为 0（可选） */

		}

		.keyboard-item {
			background: #ffffff;
			font-size: 40rpx;
			color: #333;
			height: 84rpx;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.Withdrawal {
			width: 100%;
			height: 310rpx;
			background: #FDEA3E;
			border-radius: 4px;
			text-align: center;
			color: #1F1F1F;
			font-size: 36rpx;
			font-weight: bold;
			border: none;
		}
	}
</style>