shortPlay-mini/pages/register/register.vue

<template>
	<view class="container">
		<u--form :model="form" :rules="rules" ref="uForm" labelWidth="80">
			<u-form-item label="账户名" prop="nickName">
				<u-input v-model="form.nickName" placeholder="请输入账户名" clearable />
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="form.phone" placeholder="请输入手机号" clearable />
			</u-form-item>
			<!-- <u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
				<u-input v-model="form.code" placeholder="请填写验证码" clearable>
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
							@end="disabled1 = false"></u-code>
						<u-button @tap="getCode" :text="tips" type="primary" size="mini"
							:disabled="disabled1"></u-button>
					</template>
				</u-input>
			</u-form-item> -->
			<u-form-item label="密码" prop="password">
				<u-input v-model="form.password" password type="password" clearable placeholder="请输入密码" />
			</u-form-item>
			<u-form-item label="确认密码" prop="rePassword">
				<u-input v-model="form.rePassword" password type="password" clearable placeholder="请再次输入密码" />
			</u-form-item>
			<u-form-item label="渠道码" prop="agencyId">
				<u-input v-model="form.agencyId" placeholder="请输入渠道码" clearable />
			</u-form-item>
		</u--form>
		<view style="padding: 50rpx;">
			<u-button shape="circle" type="primary" @click="submit">进入</u-button>
		</view>


	</view>
</template>

<script>
	import {
		updateUserById
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				disabled1: false,
				tips: '',
				form: {
					nickName: '',
					phone: '',
					code: '',
					agencyId: '',
					password: '',
					rePassword: ''
				},
				rules: {
					nickName: [{
						required: true,
						message: '请输入账户名',
						trigger: ['blur', 'change']
					}],
					// 字段名称
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['blur']
					},
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					rePassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		created() {
			if (!this.userInfo) {
				uni.reLaunch({
					// #ifdef H5
					url: '/pages/login/login',
					// #endif
					// #ifdef MP-WEIXIN 
					url: '/pages/entry/entry'
					// #endif
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(async res => {
					if (this.form.password !== this.form.rePassword) {
						return uni.$u.toast('两次密码不一致，请重新输入')
					}
					const res1 = await updateUserById({
						...this.userInfo,
						...this.form
					})
					if (!res1.success) return
					uni.showToast({
						title: '操作成功',
						icon: 'success',
						duration: 1500,
						success() {
							uni.reLaunch({
								// #ifdef H5
								url: '/pages/home/h5/h5',
								// #endif
								// #ifdef MP-WEIXIN 
								url: '/pages/home/mini/mini'
								// #endif
							})
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
	}
</style>