agent-app/agentApp/pages/withdrawal-management/withdrawal-management.vue

<template>
	<view class="app-container" style="background-color: #f7f7f7;">
		<view class="agent-content">
			<view class="ag-sign" @click="cashManager">
				提现历史
			</view>
			<view class="agent-top">
				<view class="ag-num">
					<view class="au-font">
						￥
					</view>
					<view class="au-num">
						{{accountInfo.wallet_balance}}
					</view>
				</view>
				<view class="age-font">
					可提现
				</view>
				<view class="age-line">
					<img src="../../static/page/line-style.png" style="width: 200rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<view class="age-wait">
					总提现：￥{{accountInfo.withdraw_total}}
				</view>
				<view class="age-linemore">
					<img src="../../static/page/divider-style.png" style="width: 690rpx;height: 2rpx;" alt="" srcset="" />
				</view>
				<div class="age-mnum">
					<view class="mtext">
						待入账：{{accountInfo.waiting_amount}}元
					</view>
					<view class="mline">

					</view>
					<view class="mtext">
						提现中：{{accountInfo.withdrawing_amount}}元
					</view>
				</div>
			</view>
			<view class="ag-paylist">
				<view class="agp-item">
					<view class="agp-title">
						<view class="zhifubao">
							支付宝账户
						</view>
					</view>
					<view class="agp-detail" v-if="!accountInfo.alipay_account">
						<view class="agp-make" @click="showInputForm(1)">
							去开通
						</view>
					</view>
				</view>

				<template v-if="isInputForm">
					<view class="apt-main u-border-top u-border-bottom" v-if="isInputForm">
						<view class="apm-cell">
							<view class="am-title">
								支付宝账号
							</view>
							<view class="am-value" style="width:70%;">
								<u--input placeholder="绑定的手机号或邮箱" border="surround" v-model="inputAlipayAccount"></u--input>
							</view>
						</view>
						<view class="apm-cell">
							<view class="am-title">
								支付宝姓名
							</view>
							<view class="am-value" style="width:70%;">
								<u--input placeholder="账号真实姓名" border="surround" v-model="inputAlipayName"></u--input>
							</view>
						</view>
					</view>
					<view class="apt-btn">
						<view class="savebtn" @click="saveAlipayAccount">
							保存
						</view>
					</view>
				</template>

				<template v-if="accountInfo.alipay_account && !isInputForm">
					<view class="apt-main u-border-top u-border-bottom">
						<view class="apm-cell">
							<view class="am-title">
								提现账户
							</view>
							<view class="am-value">
								<view class="mphone">
									{{accountInfo.alipay_account}}
								</view>
								<view class="mlink" @click="showInputForm(2)">
									修改
								</view>
							</view>
						</view>
						<view class="apm-cell">
							<view class="am-title">
								可提现金额
							</view>
							<view class="am-value">
								<view class="mnum">
									￥{{accountInfo.wallet_balance}}
								</view>
							</view>
						</view>
					</view>
					<view class="apt-btn">
						<view class="cashbtn" @click="showWithdrawForm">
							提现
						</view>
					</view>
				</template>
			</view>
		</view>

		<u-modal title="确认提现金额" :show="isWithdrawForm" :showCancelButton="true" @confirm="confirmWithdraw"
			@cancel="isWithdrawForm=false">
			<view class="withdraw-form">
				<u--input prefixIcon="￥" placeholder="提现金额" border="surround" v-model="inputAmount"></u--input>
				<view class="fee-desc">
					扣手续费{{calcFee}}元，实际到账{{calcReceiveAmount}}元
				</view>
				<view class="tips">
					<view class="tips-item" v-for="(line,index) in sysConfig.withdraw_tips.split('\n')" :key="index">{{line}}</view>
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import {
		userAccountInfo,
		userFillAlipayAccount,
		userWithdraw,
		publicSysConfig
	} from '../../common/api.js'

	export default {
		data() {
			return {
				accountInfo: {},
				isInputForm: false,
				inputAlipayAccount: '',
				inputAlipayName: '',
				isWithdrawForm: false,
				inputAmount: '',
				sysConfig: {}
			}
		},
		computed: {
			calcFee() {
				if (!this.inputAmount || isNaN(this.inputAmount)) {
					return '--';
				}
				if (!this.sysConfig.withdraw_fee_rate) {
					return '--';
				}
				let fee = (this.inputAmount * this.sysConfig.withdraw_fee_rate / 100).toFixed(2);
				return fee;
			},
			calcReceiveAmount() {
				if (!this.inputAmount || isNaN(this.inputAmount)) {
					return '--';
				}
				if (!this.sysConfig.withdraw_fee_rate) {
					return '--';
				}
				let fee = this.calcFee;
				let receiveAmount = (this.inputAmount - parseFloat(fee)).toFixed(2);
				return receiveAmount;
			}
		},
		onLoad() {
			this.getAccountInfo();
			this.getSysConfig();
		},
		methods: {
			getAccountInfo() {
				userAccountInfo().then(data => this.accountInfo = data)
			},
			saveAlipayAccount() {
				userFillAlipayAccount({
					alipay_account: this.inputAlipayAccount,
					alipay_name: this.inputAlipayName,
				}).then(() => {
					this.getAccountInfo()
					this.isInputForm = false
				})
			},
			showInputForm(flag) {
				this.isInputForm = true
				if (flag == 2) {
					this.inputAlipayAccount = this.accountInfo.alipay_account
					this.inputAlipayName = this.accountInfo.alipay_name
				}
				// uni.navigateTo({
				// 	url: '/pages/account-opened/account-opened'
				// });
			},
			showWithdrawForm() {
				this.isWithdrawForm = true
				this.inputAmount = this.accountInfo.wallet_balance
			},
			confirmWithdraw() {
				userWithdraw({
					amount: this.inputAmount
				}).then(() => {
					this.getAccountInfo()
					this.isWithdrawForm = false
				})
			},
			cashManager() {
				uni.navigateTo({
					url: '/pages/withdrawal-history/withdrawal-history'
				});
			},
			getSysConfig() {
				publicSysConfig().then(data => this.sysConfig = data)
			},
		}
	}
</script>

<style lang="scss">
	.uni-page-body {
		background: #f7f7f7;
	}

	.agent-content {
		position: relative;
		width: 100%;
		height: 1400rpx;

		background: url(../../static/page/merchant-account-opening-bg.png) no-repeat top center;
		background-size: 100% 414rpx;
		box-sizing: border-box;

		.ag-sign {
			position: absolute;
			right: 0;
			top: 0;
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 40rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			color: #fff;
			font-size: 12px;
			background: #FCC565;
			box-sizing: border-box;
			cursor: pointer;
		}

		.agent-top {
			text-align: center;
			padding-top: 40rpx;

			.ag-num {
				display: flex;
				justify-content: center;
				padding-top: 20rpx;
				color: #fff;

				.au-font {
					margin-top: 40rpx;
					font-size: 14px;
					margin-right: 10rpx;
					line-height: 1.5;
				}

				.au-num {
					font-size: 30px;
					font-weight: bold;
				}
			}

			.age-font {
				margin-top: 10rpx;
				font-size: 16px;
				line-height: 1.5;
				color: #fff;
			}

			.age-line {
				margin: 20rpx auto 0;
				width: 200rpx;
				height: 2rpx;

				img {
					display: block;
					margin: 0 auto;
				}
			}

			.age-wait {
				margin-top: 20rpx;
				color: #fff;
				font-size: 14px;
			}

			.age-linemore {}

			.age-mnum {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				.mtext {
					color: #fff;
					font-size: 14px;
					margin: 0 20rpx;
					line-height: 1.5;
				}

				.mline {
					height: 28rpx;
					width: 2rpx;
					background: #F86E78;
				}
			}
		}

		.ag-paylist {
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-top: 36rpx;
			background: #fff;

			.agp-item {
				display: flex;
				justify-content: space-between;
				height: 100rpx;

				.agp-title {

					.zhifubao {
						padding-left: 55rpx;
						height: 100rpx;
						line-height: 100rpx;
						color: #454545;
						font-size: 14px;
						font-weight: bold;
						background: url(../../static/page/payment-icon.png) no-repeat left center;
						background-size: 40rpx 40rpx;
					}
				}

				.agp-detail {

					.agp-make {
						padding-right: 30rpx;
						height: 100rpx;
						line-height: 100rpx;
						color: #999;
						font-size: 12px;
						background: url(../../static/page/open-icon.png) no-repeat right center;
						background-size: 14rpx 24rpx;
						cursor: pointer;
					}
				}
			}
		}

		.apt-main {
			padding: 10rpx 0;

			.apm-cell {
				display: flex;
				justify-content: space-between;

				.am-title {
					height: 70rpx;
					line-height: 70rpx;
					color: 454545;
					font-size: 12px;
				}

				.am-value {
					display: flex;
					justify-content: flex-end;
					height: 70rpx;
					line-height: 70rpx;

					.mphone {
						margin-right: 20rpx;
						font-size: 12px;
						color: #454545;
					}

					.mlink {
						font-size: 12px;
						color: #32A2FC;
					}

					.mnum {
						font-size: 14px;
						color: 454545;
						font-weight: bold;
					}
				}
			}
		}

		.u-border-bottom,
		.u-border-top {
			border-color: #eee !important;
		}

		.apt-btn {
			display: flex;
			justify-content: flex-end;
			padding: 30rpx 0;

			.cashbtn {
				width: 110rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 12px;
				background: #F52F3E;
				border-radius: 100rpx;
			}

			.savebtn {
				width: 110rpx;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 12px;
				background: #00aaff;
				border-radius: 100rpx;
			}
		}
	}

	.withdraw-form {
		font-size: 28rpx;
		.tips {
			margin-top: 20rpx;

			.tips-item {
				margin-top: 6rpx;
			}
		}
	}
</style>