massage-front/pages_order/mine/withdraw.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="提现" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view class="content">

			<!-- 佣金信息 -->
			<view class="info">
				<image class="info-bg" src="../static/withdraw/bg.png"></image>

				<view class="info-content">
					<view class="label">佣金（元）</view>
					<view class="value">{{ userInfo.recommendAmount || 0 }}</view>
					<view class="flex desc">
						<!-- todo: 对接接口字段 -->
						<view>{{ `累积提现：${userInfo.cashoutSum || 0} 元` }}</view>
						<button plain class="btn" @click="toRunningWater">
							<text>提现记录</text>
							<image class="btn-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image>
						</button>
					</view>
				</view>
			</view>

			<!-- 我要提现 -->
			<view class="form">
				<view class="form-title">我要提现</view>
				<view class="form-item">
  				<uv-input 
						v-model.number="form.money"
						placeholder="请输入提现金额"
						:placeholderStyle="placeholderStyle"
						:customStyle="customStyle"
						color="#FF2A2A"
					>
						<template #prefix>
							<view class="unit">￥</view>
						</template>
					</uv-input>
				</view>
				<view class="form-item">
  				<uv-input 
						v-model.trim="form.name"
						placeholder="请输入真实姓名"
						:placeholderStyle="placeholderStyle"
						:customStyle="customStyle"
					></uv-input>
				</view>
			</view>

			<!-- 提现说明 -->
			<view class="desc">
				<view class="desc-title">提现说明</view>
				<!-- todo: check -->
				<uv-parse class="desc-content" :content="configList.recharge_instructions"></uv-parse>
				<!-- <view v-html="configList.recharge_instructions" class="withdrawal-statement" style="color: #666666;"></view> -->
			</view>
			
			<view class="tools">
				<button class="flex btn" @click="withdraw">立即提现</button>
			</view>

		</view>

	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [mixinsList],
		computed: {
			...mapState(['userInfo', 'riceInfo']),
		},
		data() {
			return {
				form: {
					money: '',
					name: '',
				},
				placeholderStyle: {
					color: '#999999',
					fontSize: '28rpx',
				},
				customStyle: {
					backgroundColor: '#F5F5F5',
					border: 'none',
					borderRadius: '16rpx',
					padding: '28rpx 35rpx'
				}
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
			this.$store.commit('getRiceInfo')
		},
		methods: {
			withdraw() { //立即提现
				if (!this.form.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					})

					return
				}
				if (this.form.money < 1) {
					return uni.showToast({
						title: '提现只能是整数必须大于1！',
						icon: 'none'
					})
				}

				// todo
				// if (this.form.money < 300) {
				// 	return uni.showToast({
				// 		title: '未满300元不可提现哦！',
				// 		icon: 'none'
				// 	})
				// }
				let isOk = this.parameterVerification();
				if (isOk && !isOk.auth) {
					return uni.showToast({
						title: isOk.title,
						icon: 'none'
					})
				}
				// this.$api('recharge', this.form, res => {
				// 	if (res.code == 200) {
				// 		uni.showToast({
				// 			title: '提现成功',
				// 			icon: 'none'
				// 		})
				// 		this.$store.commit('getUserInfo')
				// 		this.$store.commit('getRiceInfo')
				// 	}
				// })
				
				
				// 显示提交中状态
				uni.showLoading({
				    title: '提交中...'
				})
				
				// 提现
				this.$api('cashout', { transferAmount: this.form.money, userName: this.form.name }, res => {
				    uni.hideLoading()
				    if (res.code === 200) {
				        // 处理待收款用户确认的情况
				        if (res.result && res.result.state === 'WAIT_USER_CONFIRM' && res.result.packageInfo && res.result.outBillNo) {
				            // 拉起微信收款确认页面
				            if (!wx.canIUse('requestMerchantTransfer')) {
				                wx.showModal({
				                    content: '你的微信版本过低，请更新至最新版本。',
				                    showCancel: false,
				                });
				                return
				            }
							
							let data = res.result
				            
				            // 在真机环境中，调用API
				            wx.requestMerchantTransfer({
								mchId: this.$config.mchId,
				                appId: wx.getAccountInfoSync().miniProgram.appId,
				                package: res.result.packageInfo,
				                success: (res) => {
				                    uni.showToast({
				                        title: '提现申请已提交',
				                        icon: 'success'
				                    })
				                    this.form.money = ''
				                    this.form.name = ''
									
									this.$api('getMoney', {
										id : data.outBillNo,
									}).then(res => {
										this.$store.commit('getUserInfo')
										this.$store.commit('getRiceInfo')
									})
				                },
				                fail: (res) => {
				                    console.log('fail:', res);
				                    uni.showToast({
				                        title: '提现失败，请稍后再试',
				                        icon: 'none'
				                    })
				                },
				                complete: (res) => {
				                    console.log('requestMerchantTransfer完成:', res);
				                }
				            });
				        } else {
				            uni.showToast({
				                title: '提现成功',
				                icon: 'success'
				            })
				            this.$store.commit('getUserInfo')
				            this.form.money = ''
				            this.form.name = ''
				        }
				    }else{
						uni.showToast({
						    title: res.message,
						    icon: 'none'
						})
					}
				})
				
			},
			
			

			parameterVerification() { //验证用户参数合法性
				let {
					money
				} = this.form
				if (!money) {
					return {
						title: '请填写提现金额',
						auth: false
					}
				}
				return {
					title: '验证通过',
					auth: true
				}
			},

			toRunningWater() {
				uni.navigateTo({
					url: "/pages_order/mine/runningWater"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: $uni-fg-color;
		min-height: 100vh;
    		
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

	.content {
		padding: 28rpx 13rpx;
	}

	.info {
		position: relative;
		width: 100%;
		height: 290rpx;

		&-bg {
			width: 100%;
			height: 100%;
		}

		&-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 42rpx 48rpx 0 35rpx;

			color: $uni-text-color-inverse;

			.label {
				font-size: 30rpx;
			}

			.value {
				margin-top: 18rpx;
				font-weight: 700;
				font-size: 55rpx;
			}

			.desc {
				justify-content: space-between;
				font-size: 22rpx;
				margin-top: 58rpx;
			}

			.btn {
				border: none;
				font-size: 22rpx;
				color: $uni-text-color-inverse;

				&-icon {
					width: 16rpx;
					height: 16rpx;
					margin-left: 7rpx;
				}
			}
		}
	}

	.form {
		margin-top: 30rpx;

		&-title {
			color: #000000;
			font-size: 28rpx;
			padding: 0 35rpx;
		}

		&-item {
			margin-top: 18rpx;


			.unit {
				color: #FF2A2A;
				padding-left: 42rpx;
			}
		}
	}

	.desc {
		margin-top: 45rpx;
		padding: 0 42rpx;
		font-size: 28rpx;

		&-title {
			color: #000000;
		}

		&-content {
			margin-top: 10rpx;
			color: #707070;
		}
	}

	.tools {
		margin-top: 166rpx;
		padding: 0 69rpx;
	
		.btn {
			width: 100%;
			padding: 29rpx 0;
			color: $uni-text-color-inverse;
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 49rpx;
			border: none;
			background-image: linear-gradient(to right, #84A73F, #D8FF8F);
		}
	}
</style>