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">{{ riceInfo.canWithdraw || 0 }}</view>
					<view class="flex desc">
						<!-- todo: 对接接口字段 -->
						<view>{{ `累积提现：${123 || 0} 元` }}</view>
						<button plain class="btn">
							<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
				}

				// 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')
					}
				})
			},

			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>