great_distribution/pages/cash/index.vue

<template>
	<view class="cash-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="cash-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="cash-content-header">
				<customNavbar title="余额提现" bgColor="rgba(0,0,0,0)" :customNavbarInfo="{}" :contentStyle="{}"
					:leftStyle="{color: '#fff'}"></customNavbar>

				<!--  余额 开始  -->
				<view class="cash-content-money">
					<text>可提现余额（元）</text>
					<view class="cash-content-money-num">
						<text>
							<text class="inspage-userinfo-util">￥</text>
							<u-count-to :decimals="2" :startVal="0" :endVal="monry" color="#fff" />
							<text class="balance-userinfo-util">元</text>
						</text>
					</view>
				</view>
				<!--  余额 结束  -->

				<!--  提现 开始  -->
				<view class="cash-content-cash">
					<view class="cash-content-cash-box">
						<text>提现金额</text>
						<view class="cash-content-cash-money">
							<text class="cash-content-cash-money-icon">￥</text>
							<view class="cash-content-cash-input">
								<u--input placeholder="请输入内容" border="none" clearable type="number" v-model="moneyValue"
									@change="moneyAccountFun"></u--input>
							</view>

							<text class="cash-content-cash-money-all" @click="cashAll()">全部提现</text>
						</view>

						<view class="cash-content-cash-service">
							<view>
								<text>服务费</text>
								<text>{{ setServiceType(withdrawInfo)}}</text>
							</view>
							<view>
								<text>到账金额</text>
								<text>{{ moneyAccount }}</text>
							</view>
						</view>

						<view class="cash-content-cash-card">
							<u-cell-group :border="false">
								<u-cell :border="false" title="提现至" :isLink="false" :value="'微信钱包'"
									@click="openPopup()"></u-cell>
							</u-cell-group>
						</view>

						<view class="cash-content-cash-submit">
							<view @click="openModal">提现</view>
						</view>
					</view>
				</view>
				<!--  提现 结束  -->

				<!-- 选择银行卡 -->
				<u-picker :show="show" keyName="label" :columns="columns" @cancel="cancelPicker"
					@confirm="confirmPicker"></u-picker>
			</view>
			<!-- 头部主要内容 结束 -->

			<!-- 输入密码  -->
			<u-overlay :show="showModal">
				<view class="password-model">
					<view>
						<view>请输入支付密码</view>
						<view>提现</view>
						<view>￥{{ moneyValue }}</view>
						<view>
							<u-code-input @finish="marketPersons" v-model="password" :focus="true"></u-code-input>
						</view>
						<text @click="clearOverlay"><u-icon name="close-circle" size="30"></u-icon></text>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	import {
		navigateTo
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '这是我的',
				statusBarHeight: 0, // 状态栏安全距离
				monry: 0,
				moneyValue: null,
				moneyAccount: '',
				tool: [ // 我的工具
					{
						title: "支付设置",
						icon: this.$commonConfig.staticUrl + 'balance/zhifu.png',
						url: '/pages/invitationStatistics/index'
					},
					{
						title: "余额提现",
						icon: this.$commonConfig.staticUrl + 'balance/mingxi.png',
						url: '/pages/balance/index'
					},
				],
				show: false,
				columns: [
					[{
						label: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
				withdrawInfo: {},
				showModal: false,
				password: ''
			}
		},
		onLoad() {
			// #ifdef H5
			//window.addEventListener('popstate', this.browserBack)
			// #endif
		},
		onUnload() {
			// #ifdef H5
			//window.removeEventListener("popstate", this.browserBack);
			// #endif
		},
		onShow() {
			//this.statusBarHeight = getApp().globalData.statusBarHeight
			this.getWithdrawInfo()

		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun() {
				navigateTo('/pages/cash/index')
			},
			/**
			 * 数字显示格式化
			 *
			 */
			numFormat(num = 0) {
				if (num < 100000) {
					return num
				} else if (num > 100000) {
					return (num / 10000).toFixed(2)
				}
			},
			/**  全部提现  */
			cashAll() {
				this.moneyValue = this.monry
			},
			/**
			 *  打开选择器
			 */
			openPopup() {
				return
				this.show = true
			},
			/** 取消选择器  */
			cancelPicker() {
				this.show = false
			},
			/** 确认选择器  */
			confirmPicker() {
				this.show = false
			},
			/**
			 * 获取数据
			 */
			async getWithdrawInfo() {
				try {
					let res = await this.$u.api.withdrawInfo({
						noSign: 1,
						userid: this.distribution_user_info.userId
					})

					if (res && res.code === 200) {
						this.withdrawInfo = res.data
						// this.withdrawInfo.serviceType = 1
						// this.withdrawInfo.serviceCharge = 0
						this.monry = res.data.withdrawTotal
					}
				} catch (e) {
					//TODO handle the exception
					console.error("e===", e)
				}
			},
			openModal() {
				if (!this.moneyValue || this.moneyValue < this.withdrawInfo.minAmount) {
					uni.showToast({
						title: '最小提现金额' + this.withdrawInfo.minAmount,
						icon: 'none'
					});
					return
				}
				if(this.moneyValue > this.monry) {
					uni.showToast({
						title: '总金额不能大于用户可提现金额',
						icon: 'none'
					});
					return
				}
				// uni.showModal({
				//   title: '提示',
				//   content: '确定提现余额吗?',
				//   success: res => {
				//     this.orderWithdraw()
				//   },
				//   complete() {

				//   }
				// })
				this.showModal = true
				// #ifdef H5
				window.history.replaceState(null, null, document.URL)
				// #endif
			},
			/**  关闭 */
			clearOverlay() {
				this.showModal = false
			},
			/**
			 * 密码校验
			 */
			async marketPersons() {
				try {
					let res = await this.$u.api.marketPersons({
						noSign: 1,
						userid: this.distribution_user_info.userId,
						oldPassword: this.password
					})

					if (res && res.code === 200) {
						this.orderWithdraw()
					} else {
						this.password = ''
					}
				} catch (e) {
					//TODO handle the exception
					console.error("e===", e)
					this.password = ''
				}
			},
			/**
			 * 提交申请
			 */
			async orderWithdraw() {
				try {
					let res = await this.$u.api.orderWithdraw({
						noSign: 1,
						userid: this.distribution_user_info.userId,
						"withdrawType": "wechat",
						"withdrawTotal": this.moneyValue,
						"serviceAmount": 1,
						"bankId": null
					})

					if (res && res.code === 200) {
						navigateTo('pages/cashPrompt/index',{
							id: res.data.bankInfo.id,
							// ...res.data.bankInfo,
							// moneyValue: this.moneyValue,
							// withdrawType: 'wechat',
							// serviceType: this.withdrawInfo.serviceType,
							// serviceCharge: this.withdrawInfo.serviceCharge
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.showModal = false
				} catch (e) {
					//TODO handle the exception
					console.error("e===", e)
					this.showModal = false
					uni.showToast({
						title: "提交失败",
						icon: 'none'
					})
				}
			},
			/**
			 * 设置服务费显示
			 */
			setServiceType(data) {
				if (data && data.serviceType) {
					return data.serviceType == 1 ? ('￥' + data.serviceCharge) : data.serviceCharge
				}
			},
			/**
			 * 设置到账金额
			 */
			moneyAccountFun() {
				let money = ''
				if (this.withdrawInfo.serviceType == 1) {
					money = this.moneyValue - (isNaN(this.withdrawInfo.serviceCharge) ? 0 : this.withdrawInfo
						.serviceCharge)
				} else if (this.withdrawInfo.serviceType == 2) {
					let num1 = this.withdrawInfo.serviceCharge.replace("%", '')
					let num = isNaN(num1) ? 0 : (Number(num1) / 100)
					money = num ? this.moneyValue * num : Number(this.moneyValue)
				}
				this.moneyAccount = money < 0 ? '金额过小于零' : '￥' + money.toFixed(2)
			},
			browserBack() {
				console.log(1);
				// 在这里写弹框
				uni.showModal({
					title: '提示',
					content: '返回后此页面的操作将不作保留！',
					cancelText: '确定返回',
					confirmText: '留在此页',
					success: (res) => {
						if (res.confirm) {
							// 用户选择留在此页，不进行任何操作
						} else if (res.cancel) {
							//window.history.back(); // 使用window.history.back()返回上一页
						}
					}
				});
				//window.history.replaceState(null, null, document.URL); // 保留此行代码
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cash-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--header-h: 620rpx;

		.cash-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}

	/** 头部主要内容 开始 */
	.cash-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		background: var(--gd-bgm-lg-color);
		position: relative;

		::v-deep .u-search {
			padding: 0 30rpx !important;
		}

		::v-deep .u-search__action {
			color: #fff !important;
		}

		/**  余额 开始  */
		.cash-content-money {
			width: 100%;
			box-sizing: border-box;
			margin-top: 50rpx;
			padding-left: 66rpx;
			color: #fff;

			>text {
				font-size: 24rpx;
			}

			.cash-content-money-num {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				margin-top: 24rpx;

				>text:nth-child(1) {
					.balance-userinfo-util {
						font-size: 24rpx;
						margin-left: 5rpx;
					}

					::v-deep .u-count-num {
						font-weight: bold !important;
						font-size: 48rpx !important;
					}
				}

				>text:nth-child(2) {
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		/**  余额 结束  */

		/**  提现 开始  */
		.cash-content-cash {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 100%;
			transform: translateY(-50%);
			padding: 0 12rpx;

			.cash-content-cash-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221, 221, 221, 0.5);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 34rpx 30rpx 38rpx;

				>text {
					font-size: 28rpx;
					color: #363636;
				}

				.cash-content-cash-money {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 40rpx 0 20rpx;
					border-bottom: 2rpx solid #EEEEEE;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}

					.cash-content-cash-input {
						width: 100%;
						padding: 0 10rpx;
					}

					>text {
						flex-shrink: 0;
						flex-wrap: nowrap;
						white-space: nowrap;
					}

					.cash-content-cash-money-icon {
						font-size: 32rpx;
					}

					.cash-content-cash-money-all {
						color: var(--gd-but-color);
						font-size: 24rpx;
						cursor: pointer;
					}
				}

				.cash-content-cash-service {
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx 0;
					border-bottom: 2rpx solid #EEEEEE;

					>view {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #606060;
						padding: 5rpx 0 10rpx;
						font-size: 24rpx;
					}

				}

				.cash-content-cash-card {
					width: 100%;

					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}
				}

				.cash-content-cash-submit {
					width: 100%;
					height: 92rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 0 80rpx 0;
					margin-top: 70rpx;

					>view {
						width: 100%;
						height: 100%;
						border-radius: 46rpx;
						color: #fff;
						background-color: var(--gd-but-color);
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

		/**  提现 结束  */
	}

	/** 头部主要内容 结束  **/


	/**  密码弹窗  */
	.password-model {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 0 40rpx;

		>view {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #fff;
			color: #000;
			padding: 50rpx 10rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 20rpx;

			>view {
				font-size: 32rpx;
				padding: 10rpx 0;
				box-sizing: border-box;
			}

			>view:nth-child(3) {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 52rpx;
				border-bottom: 2rpx solid #ccc;
				padding: 10rpx 0 20rpx;
				color: var(--gd-bgm-color);
			}

			>view:nth-child(4) {
				margin-top: 30rpx;
			}

			>text {
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
</style>