houyi-uniapp/pages/wallet/temp.vue

<template>
	<view class="xkl-com-bg">

		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;padding: 30rpx;border-radius: 10rpx;font-size: 30rpx; color: #949494;">
			当前余额
			￥{{info.info.money}}，最低转赠￥{{info.recharge.min_money}}
		</view>
		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;padding: 30rpx;border-radius: 10rpx;">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" labelWidth="300rpx">
				<u-form-item label="转赠金额" prop="money" borderBottom>
					<u--input v-model="form.money" type="number" placeholder="请输入转赠金额" border="none"></u--input>
				</u-form-item>
				<u-form-item label="转赠给(用户名)" prop="username" borderBottom>
					<u-input v-model="form.username" placeholder="请输入用户名" border="none" />
				</u-form-item>
				<u-form-item label="手机号">
					<u-input v-model="info.info.mobile" disabled placeholder="" />
				</u-form-item>
				<u-form-item label="验证码" prop="code" borderBottom>
					<u-code-input v-model="form.code" :maxlength="4" mode="line"></u-code-input>
					<view slot="right">
						<u-toast ref="uToast"></u-toast>
						<u-code :seconds="code.seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-code>
						<u-button type="primary" @tap="getCode">{{code.tips}}</u-button>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view style="height: 20rpx;"></view>
		<view style="background-color: #ffffff;border-radius: 12rpx;padding: 30rpx;">
			<view style="color: #f29100;">温馨提示</view>
			<view style="height: 10rpx;"></view>
			<view style="font-size: 28rpx;color: #909399;">
				<view>1.只能转赠给团队成员（直线上级、直线下级）；</view>
				<view style="height: 10rpx;"></view>
				<view>2.转赠金额实时到账，不扣手续费；</view>
				<view style="height: 10rpx;"></view>
				<view>3.转赠成功后实时生效，不支持撤回。</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<u-button type="primary" @click="submit">确认</u-button>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				info: {
					recharge: {
						min_money: 0
					}
				},
				current: 0,
				items: [],
				form: {
					money: '',
					username: '',
					mobile: '',
					code: ''
				},
				rules: {
					money: [{
						required: true,
						message: '请输入转赠金额',
						trigger: ['blur', 'change']
					}],
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
				},
				code: {
					tips: '获取验证码',
					// refCode: null,
					seconds: 60,
				}
			}
		},
		onLoad(option) {
			self = this;
			if (option && option.data) {
				self.info = JSON.parse(decodeURIComponent(option.data));
			}

		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			self.$refs.uForm.setRules(self.rules)
		},
		methods: {
			codeChange(text) {
				self.code.tips = text;
			},
			getCode() {
				if (self.info.info.mobile.length != 11) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (self.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					self.$http.get('/com/sms/sendcode', {
						mobile: self.info.info.mobile
					}).then(res => {
						if (res.success) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送，有效期5分钟');
							// 通知验证码组件内部开始倒计时
							self.$refs.uCode.start();
						}
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				//uni.$u.toast('倒计时结束');
			},
			start() {
				//uni.$u.toast('倒计时开始');
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					self.$http.post('/shop/v10/wallet/temp', self.form).then(({
						data,
						success
					}) => {
						if (success) {
							uni.navigateBack();
						}
					})
				}).catch(errors => {

				})
			},
		}
	}
</script>

<style lang="scss">
	.xkl-no {
		background-color: #f1f1f1;
	}

	.xkl-cur {
		background-color: #2CCE7F;
		color: #ffffff;
	}
</style>