shop-applet/pages/withdrawal/index.vue

<!-- 提现管理 -->
<template>
	<view class="shop_type">
		<view class="shop_type-head">
			<view style="height: var(--status-bar-height);"></view>
			<view class="shop-type-navbar">
				<u-icon name="arrow-left" size="18" color="#fff" @click="handleBack" />
				<text class="shop-type-navbar-title">提现</text>
				<text></text>
			</view>
		</view>

		<view class="withdrawal-con">
			<view class="withdrawal">
				<view class="withdrawal-left">
					<text class="withdrawal-left-to">提现至</text>
					<text
						class="withdrawal-left-empty">{{!bankInfo?'请绑定账户': bankInfo.is_own === 0 ? '法人账户' : '对公账户'}}</text>
				</view>

				<view class="withdrawal-right" @click.stop="handleToAdd" v-if="isShowAdd()">
					<text class="withdrawal-right-add">添加账户</text>
					<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
				</view>

				<view class="withdrawal-right"
					v-if="!isShowAdd() && userInfo.mer_info.is_company == 1 && bankList.length == 2"
					@click="handleAddAccount">
					<text class="withdrawal-right-add">切换账户</text>
					<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
				</view>
			</view>

			<!-- 提现信息 法人账户-->
			<view class="withdrawal-info" v-if="bankInfo && bankInfo.is_own === 0">
				<view class="withdrawal-form">
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">开户银行</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">持卡人</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.name}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">银行账号</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_code}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">开户网点</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_branch}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">提现金额</view>
						<view class="withdrawal-form-item-val">
							<input @input="onInput" type="number" placeholder="请输入提现金额"
								placeholder-class="placeholderClass" :value="payForm.extract_money">
						</view>
					</view>
				</view>

				<!-- 协议 -->
				<view class="withdrawal-pro">
					<text class="withdrawal-pro-progress" @click="viewProgress">账户开通审核进度</text>
					<text class="withdrawal-pro-txt" @click="handlePreview">《企业授权法人提现书》</text>
				</view>

				<!-- 提示 -->
				<view class="tips">
					<view>当前可提现金额:￥{{extract_money || '0.00'}},暂存金额: ￥{{lock_money || '0.00'}}</view>
					<view>当前商户押金:￥{{ot_margin || '0.00'}}</view>
					<view>说明:用户下单后该订单金额存放在暂存金额中，用户确认收货后次日18:00才可提现该笔订单金额
						提货付款订单在完成后次日18:00才可提现</view>
				</view>
			</view>

			<!-- 提现信息 对公账户-->
			<view class="withdrawal-info" v-if="bankInfo && bankInfo.is_own === 1">
				<view class="withdrawal-form">
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">开户银行</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">对公账户</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.name}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">银行账号</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_code}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">开户网点</view>
						<view class="withdrawal-form-item-val">{{bankInfo.financial_account.bank_branch}}</view>
					</view>
					<view class="withdrawal-form-item">
						<view class="withdrawal-form-item-label">提现金额</view>
						<view class="withdrawal-form-item-val">
							<input @input="onInput" type="number" placeholder="请输入提现金额" v-model="payForm.extract_money"
								placeholder-class="placeholderClass">
						</view>
					</view>
				</view>

				<!-- 协议 -->
				<view class="withdrawal-pro">
					<text class="withdrawal-pro-progress" @click="viewProgress">账户开通审核进度</text>
				</view>

				<!-- 提示 -->
				<view class="tips">
					<view>当前可提现金额:￥{{extract_money || '0.00'}},暂存金额: ￥{{lock_money || '0.00'}}</view>
					<view>当前商户押金:￥{{ot_margin || '0.00'}}</view>
					<view>说明:用户下单后该订单金额存放在暂存金额中，用户确认收货后次日18:00才可提现该笔订单金额
						提货付款订单在完成后次日18:00才可提现</view>
				</view>
			</view>

			<!-- 暂未添加银行卡 -->
			<u-empty v-if="!bankInfo || (bankInfo.is_own !== 1 && bankInfo.is_own !== 0)" text='您尚未绑定提现账户,\n点击右上角"添加账户"'
				mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>

		<!-- 提现btn -->
		<view class="withdrawal-btn tapActive" @click="handleSubmit">
			<view class="withdrawal-btn-wrap" v-if="bankList.length != 0">
				<text>点击提现</text>
			</view>
			<view class="withdrawal-btn-wrap" v-if="bankList.length == 0 && progressCount > 0">
				<text>点击查看提现进度</text>
			</view>
		</view>

		<!-- 明细按钮 -->
		<view class="saomaCode" @click="navigator(`/pages/users/gather_list/index?mer_id=${mer_id}`)"
			v-if="bankList.length != 0">明细</view>

		<!-- 提现提示 -->
		<u-modal :show="tipShow" title="提示"
			content='工作日当日10点前提现当日12点到账, 当日16点前提现当日18点到账, 当日18点后提现次日12点到账, 周末节假日提现, 下一工作日18点前到账'
			@confirm="tipShow = false"></u-modal>

		<!-- 支付密码 键盘 -->
		<popups ref="popups" :isPay="true" @confirm="handleConfirm" @clear="handleClear" @change="handleChange" />

		<!-- 密码错误事件处理 -->
		<payPwd ref="payPwd" @left="handleLeft" @right="handleRight"></payPwd>
	</view>
</template>

<script>
	import {
		postCreateApplyAPI,
		getAdminApplyAPI,
		progressBankList
	} from '@/api/user.js'
	import {
		searchBank
	} from "@/api/user.js";
	import payPwd from "@/components/payPwd/index.vue";
	import popups from "@/components/popups/index.vue";
	export default {
		components: {
			popups,
			payPwd
		},
		data() {
			return {
				tipShow: false,
				bankList: [],
				bankInfo: undefined,
				type: 0, //初始话类型 0 法人 1 对公账号
				payForm: {
					extract_money: "",
					financial_bank_bank: "",
					financial_bank_branch: "",
					financial_bank_code: "",
					financial_bank_name: "",
					financial_type: 1,
					withdrawal_pwd: "",
				},
				value: '12311',
				mer_id: '',
				ot_margin: '', //押金
				extract_money: '', //可提现金额
				lock_money: '', //暂存金额
				userInfo: {},
				progressCount: 0
			}
		},

		onLoad(opt) {
			this.mer_id = opt.mer_id;
			this.getBankInfo();
			// 用户信息
			this.userInfo = JSON.parse(this.$Cache.get("USER_INFO"));
		},

		onShow() {
			this.getBankProgress();
		},

		methods: {
			limitDecimalToTwo(input) {
				console.log(input);
				var regex = /^(\d+)?(\.\d{1,2})?$/;
				var cleanInput = input.value.replace(regex, '$1$2');
				if (cleanInput !== input.value) {
					input.value = cleanInput;
				};
			},

			// 限制输入两个小数
			onInput(e) {
				let value = e.target.value;
				// 使用正则表达式限制只能输入两位小数
				value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
				this.$nextTick(() => {
					this.payForm.extract_money = value;
				})
				this.$forceUpdate();
			},

			//添加账户
			isShowAdd() {
				if (this.bankList.length == 0) return true;
				if (this.bankList.length == 1 && this.userInfo.mer_info.is_company == 1) return true;
				return false;
			},

			// 图片预览
			handlePreview() {
				let that = this;
				if (this.bankInfo && this.bankInfo.financial_account.financial_img) {
					uni.previewImage({
						urls: that.bankInfo.financial_account.financial_img.split(','),
						current: 0
					})
				}
			},

			// 第一次审核拒绝 查询审核过程 
			getBankProgress() {
				progressBankList(this.mer_id).then(res => {
					this.progressCount = res.data.count;
				})
			},

			// 添加账户
			handleToAdd() {
				//如果绑定银行卡用户为个体户 则不能添加对公账户,只能添加法人账户  is_company =0 个体户
				const isCompany = JSON.parse(this.$Cache.get("USER_INFO")).mer_info.is_company;
				if (isCompany != 1 && this.bankInfo && this.bankInfo.is_own === 0) return;

				let strUrl = "?mer_id=" + this.mer_id;
				if (this.bankInfo) strUrl += "&isOwn=" + this.bankInfo.is_own
				uni.navigateTo({
					url: "/pages/withdrawal/add" + strUrl
				})
			},

			// 提现信息
			getBankInfo() {
				uni.showLoading({
					title: "加载中...",
				})
				searchBank(this.mer_id).then(res => {
					uni.hideLoading();
					this.bankList = res.data.bank;
					this.bankInfo = this.bankList[this.type];

					this.ot_margin = res.data.ot_margin; //押金
					this.extract_money = res.data.extract_money //可提现金额
					this.lock_money = res.data.lock_money //暂存金额
				}).catch(err => {
					uni.hideLoading();
				})
			},

			// 切换账号
			handleAddAccount() {
				if (this.bankList.length == 0) return this.$util.Tips({
					title: "请先添加一个账户!"
				});

				if (this.type === 0)
					this.type = 1;
				else
					this.type = 0;
				this.bankInfo = this.bankList[this.type];
			},

			// 查看进度
			viewProgress() {
				uni.navigateTo({
					url: "/pages/withdrawal/progress?mer_id=" + this.mer_id
				})
			},

			// 提交
			async handleSubmit() {
				if (this.bankList.length == 0) {
					this.viewProgress();
				} else {
					this.payForm.financial_bank_bank = this.bankInfo.financial_account.bank;
					this.payForm.financial_bank_branch = this.bankInfo.financial_account.bank_branch;
					this.payForm.financial_bank_code = this.bankInfo.financial_account.bank_code;
					this.payForm.financial_bank_name = this.bankInfo.financial_account.name;

					if (!this.payForm.extract_money) return this.$util.Tips({
						title: '请输入提现金额'
					});

					if (Number(this.payForm.extract_money) < 0) return this.$util.Tips({
						title: '请输入正确的提现金额'
					});

					// 是否输入密码
					const result = await this.$util.checkPassword();
					if (result.data.code == 101) { //未设置支付密码
						return this.$util.Tips({
							title: "您暂未设置支付密码,请前往设置!"
						}, () => {
							uni.navigateTo({
								url: "/pages/users/user_modify_pwd/index?type=payPwd"
							});
						})
					}
					this.$refs.popups.handleOpen();
				}
			},

			// 输入密码回调
			async handleConfirm(e) {
				const result = await this.$util.checkPassword(e);
				// 验证密码正确
				if (result.data.code == 100) {
					this.$set(this.payForm, 'withdrawal_pwd', e);
					this.submit();
				} else {
					this.$refs.payPwd.handleOpen(result.data.code);
				}
			},

			// 弹框左边按钮 101 未设置密码  102 忘记密码 都去设置密码
			handleLeft(code) {
				uni.navigateTo({
					url: "/pages/users/user_modify_pwd/index?type=payPwd"
				});
				this.$refs.payPwd.handleClose();
			},

			// 弹框右边按钮 取消 重试
			handleRight(code) {
				if (code == 101) { //取消
					this.$refs.payPwd.handleClose(code);
				} else {
					this.$refs.payPwd.handleClose();
					this.$refs.popups.handleOpen();
				}
			},

			handleClear() {},
			handleChange(val) {
				if (!val)
					this.load = false;
			},

			submit() {
				uni.showLoading({
					title: '申请提现中~',
					mask: true
				});
				postCreateApplyAPI(this.mer_id, this.payForm).then(res => {
					uni.hideLoading();
					this.$util.Tips({
						title: "提现申请成功,请等待审核!"
					}, () => {
						this.payForm.extract_money = '';
						this.getBankInfo();
					})
				}).catch(err => {
					uni.hideLoading();
					this.$util.Tips({
						title: err
					})
				})
			},

			//明细跳转
			navigator(url, t) {
				uni.navigateTo({
					url: url
				})
			},

			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F8F9FA;
	}

	.shop_type {
		padding-bottom: 184rpx;

		.shop_type-head {
			background-color: #40AE36;
			margin-bottom: 30rpx;

			.shop-type-navbar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				height: 88rpx;

				.shop-type-navbar-title {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.withdrawal-con {
		height: calc(100vh - 88rpx - 184rpx - var(--status-bar-height) - 30rpx);
		overflow: auto;
		padding-bottom: 30rpx;
	}

	.withdrawal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 102rpx;
		border-radius: 20rpx;
		margin: 0 30rpx 26rpx;
		padding: 0 26rpx 0 30rpx;

		.withdrawal-left {
			display: flex;

			.withdrawal-left-to {
				margin-right: 42rpx;
				font-size: 30rpx;
				color: #333333;
			}

			.withdrawal-left-empty {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.withdrawal-right {
			display: flex;
			align-items: center;

			.withdrawal-right-add {
				font-size: 28rpx;
				color: #40AE36;
			}
		}
	}

	.withdrawal-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 184rpx;
		width: 100%;
		padding-top: 32rpx;
		box-sizing: border-box;
		background-color: #f7f8f9;
		z-index: 10;

		.withdrawal-btn-wrap {
			height: 88rpx;
			background: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
			border-radius: 88rpx;
			margin: 0 30rpx;

			line-height: 88rpx;
			text-align: center;

			text {
				font-weight: bold;
				font-size: 30rpx;
				color: #F5F5F5;
			}
		}
	}

	.withdrawal-info {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 38rpx;

		.withdrawal-form {
			padding: 0 30rpx;
			margin-bottom: 30rpx;

			.withdrawal-form-item {
				display: flex;
				align-items: center;
				height: 102rpx;
				border-bottom: 2rpx solid #FBFCFC;

				.withdrawal-form-item-label {
					width: 120rpx;
					margin-right: 42rpx;
					font-size: 30rpx;
					color: #333333;
					text-align: left;
					white-space: nowrap;
				}

				.withdrawal-form-item-val {
					font-size: 30rpx;
					color: #333;

					input {}

					.placeholderClass {
						font-size: 30rpx;
						color: #666666;
					}
				}
			}
		}

		.withdrawal-pro {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 30rpx;

			.withdrawal-pro-txt {
				font-size: 24rpx;
				color: #F66C42;
			}

			.withdrawal-pro-progress {
				font-size: 24rpx;
				color: #40AE36;
			}
		}

		.tips {
			margin: 0 30rpx;

			view {
				margin-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
				line-height: 36rpx;

				text {
					color: #F55726;
				}
			}
		}
	}

	.saomaCode {
		z-index: 1;
		position: fixed;
		bottom: 190rpx;
		right: 28.07rpx;
		width: 87.72rpx;
		height: 87.72rpx;
		border-radius: 175.44rpx;
		background-image: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
		color: #fff;
		text-align: center;
		line-height: 87.72rpx;
	}
</style>