market-app-ui/pages/login/register.vue

<template>
	<view>
		<navigation-bar background-color="#fff" front-color="#000000" />
		<view class="remain">
			<h1>账号注册</h1>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="100px" label-position="top">
				<u-form-item label="手机号" prop="phone">
					<view class="form-input">
						<u-input v-model="form.phone" type="number" border="surround" maxlength='11'
							placeholder='请输入手机号码' :clearable='false' />
					</view>
				</u-form-item>
				<u-form-item label="验证码" prop="smsCode">
					<view class="form-input">
						<u-input placeholder="请输入验证码" v-model="form.smsCode">
							<template slot="suffix">
								<span class="code" @click="getCode">{{code}}</span>
							</template>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<view class="form-input">
						<u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
					</view>
				</u-form-item>
				<u-form-item label="确认密码" prop="rePassword">
					<view class="form-input">
						<u-input v-model="form.rePassword" type="password" placeholder='请输入密码' :clearable='false' />
					</view>
				</u-form-item>
			</u-form>
			<view class="btn">
				<view style="margin-bottom: 20rpx;font-size: 28rpx;">
					<u-checkbox-group v-model="value" :wrap="true">
						<u-checkbox name="1"></u-checkbox>注册同意<text class="blue-class">《用户协议》</text>和<text
							class="blue-class">《隐私政策》</text>
					</u-checkbox-group>
				</view>
				<view>
					<u-button type="error" shape="circle" text="注册" @click="submit()"></u-button>
				</view>
				<view class="tip" @click="toLogin()">已有账号，去<text class="blue-class"
						style="margin-left: 10rpx;">登录</text></view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const passwordValid = (rule, value, callback) => {
				value == this.form.password ? callback() : callback(new Error('两次输入密码不一致'))
			};
			return {
				time: 60,
				code: '获取验证码',
				value: ['1'],
				form: {
					phone: '',
					smsCode: '',
					password: '',
					type: '',
					rePassword: '',
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur,change'
					}],
					rePassword: [{
						validator: passwordValid,
						required: true,
						trigger:'blur'

					}],
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.form.type = options.type;
		},
		methods: {
			startCount() {
				setTimeout(() => {
					let time = this.time;
					if (time == 0) {
						this.code = '重新获取';
						this.time = 60;
						return;
					}
					this.time = --time;
					this.code = time + '后重新获取';
					this.startCount();
				}, 1000)
			},
			getCode() {
				let time = this.time;
				if (time > 0 && time < 60) {
					return;
				}
				let phone = this.form.phone;
				if (!this.$common.isPhone(phone)) {
					this.$common.toast('请输入正确的手机号');
					return;
				}
				this.startCount();
				this.$api.getPhoneSmsCode().then(resp => {
					this.$common.toast('已发送');
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let value = this.value;
					if (value.length == 0) {
						this.$common.toast('请先同意协议');
						return;
					}
					this.$api.doRefister(this.form).then(res => {
						if (res.code == 200) {
							uni.$u.toast('注册成功')
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}).catch(err => {
						console.log(err)
					})
				}).catch(errors => {})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 30px;
	}

	.remain {
		margin: 30rpx 150rpx 0;
		text-align: center;
	}

	.wel {
		margin-top: 10px;
	}

	.form {
		height: 200px;
	}

	.form-input {
		width: 100%;
		background-color: #f5f5f5;
		margin-top: 5px;
		border-radius: 20rpx;
		border: none;
	}

	.btn {
		margin: 25px 10px;
	}

	.tip {
		margin-top: 30px;
		text-align: center;
		font-size: 14px;
	}

	.code {
		color: red;
		font-size: 13px;
	}

	.blue-class {
		color: #55aaff;
		cursor: pointer;
	}
</style>