universal-wechat-uniapp-241007/pages_order/mine/purse.vue

<template>
	<view class="purse">
		<navbar title="立即提现" leftClick @leftClick="$utils.navigateBack" />

		<!-- 水洗店 -->
		<view class="userShop">
			<userShopCommission purse/>
		</view>

		<view class="from-body">
			<view>我要提现</view>
			<view class="from-line">
				<input placeholder="请输入提现金额" v-model="form.price"/>
			</view>
			<view class="from-line">
				<input placeholder="请输入姓名（选填）"  v-model="form.name"/>
			</view>
			
			<!-- 手续费和最低提现金额提示 -->
			<view class="fee-info">
				<view class="fee-item">
					<text class="fee-label">手续费：</text>
					<text class="fee-value">{{ withdrawalFeePercent }} ({{ withdrawalFeeAmount }}元)</text>
				</view>
				<view class="fee-item">
					<text class="fee-label">最低提现金额：</text>
					<text class="fee-value">2元</text>
				</view>
			</view>
			
			<!-- <view class="from-line">
				<input placeholder="请输入开户行" />
			</view>
			<view class="from-line">
				<input placeholder="请输入银行卡卡号" />
			</view> -->
			<!-- <view class="mt56">提现说明</view>
			<view 
			style="line-height: 45rpx; font-size: 24rpx;color: #666666;" 
			v-html="notice">
			</view> -->
		</view>
		
		<view style="padding: 30rpx;">
			<uv-parse :content="configListMax.withdraw_money.keyDetails"></uv-parse>
		</view>


		<view class="b-fiexd">
			<view class="button-submit"
			@click="submit">提交</view>
		</view>

		<!-- 加入我们 -->
		<certificationPopup ref="certificationPopup" />

	</view>
</template>

<script>
	import userShopCommission from '@/components/userShop/userShopCommission.vue'
	import certificationPopup from '@/components/user/certificationPopup.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			userShopCommission,
			certificationPopup,
		},
		computed: {
			...mapState(['configListMax']),
			// 计算手续费百分比（从获取，转换为百分比显示）
			withdrawalFeePercent() {
				const feeRate = this.configListMax.withdraw_money?.keyMoney || 0
				return (feeRate * 100).toFixed(1) + '%'
			},
			// 计算实际手续费金额
			withdrawalFeeAmount() {
				if (!this.form.price) return '0.00'
				const feeRate = this.configListMax.withdraw_money?.keyMoney || 0
				const amount = parseFloat(this.form.price) * feeRate
				return amount.toFixed(2)
			}
		},
		data() {
			return {
				notice : '',
				form:{
					price:null,
					name:'',
				}
			}
		},
		methods: {
			submit() {
				
				if(this.userInfo.idCardOpen == 0){
					uni.showToast({
						title: '认证审核中...',
						icon:'none'
					})
					return
				}else if(!this.userInfo.idCardOpen){
					this.$refs.certificationPopup.open()
					return
				}
				
				if (this.$utils.verificationAll(this.form, {
						price: '请输入提现金额',
						// name: '请输入姓名',
					})) {
					return
				}
				
				// 验证最低提现金额
				if (!this.form.price || parseFloat(this.form.price) < 2) {
					uni.showToast({
						title: '最低提现金额为2元',
						icon: 'none'
					})
					return
				}
				
				this.$api('storeWithdrawalApplication', this.form, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功，待后台审核！',
							icon: 'none',
						})
						
						this.$store.commit('getUserInfo')
						
						setTimeout(uni.redirectTo, 800, {
							url: '/pages_order/mine/runningWater?status=0'
						})
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.purse{
		min-height: 100vh;
		background-color: #ffffff;
		.from-body {
			padding: 40rpx 20rpx;
		
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			line-height: 40px;
			padding-bottom: 60rpx;
		
			.from-line {
				margin-top: 40rpx;
			}
		
			input {
				width: 612rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #F5F5F5;
				border-radius: 46rpx;
		
				padding: 0 50rpx;
		
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333;
			}
			
			.fee-info {
				margin-top: 40rpx;
				padding: 30rpx;
				background: #F8F9FA;
				border-radius: 20rpx;
				
				.fee-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.fee-label {
						font-size: 26rpx;
						color: #666666;
					}
					
					.fee-value {
						font-size: 26rpx;
						color: $uni-color;
						font-weight: 600;
					}
				}
			}
		}
		
		.button-submit {
			width: 596rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: $uni-color;
			border-radius: 46rpx;
		
			margin: 20rpx auto;
		
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}
	
</style>