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

<template>
	<view class="login">
		<view class="dk" style="margin-top: 30px">
			<view class="bg">
				<text class="icon">&#xe8b9;</text>
				<input type="number" maxlength="11" v-model="form.phone" placeholder="请输入手机号" />
			</view>
			<view class="bg">
				<text class="icon">&#xe624;</text>
				<input type="number" v-model="form.smsCode" placeholder="验证码" />
				<view class="label">获取验证码</view>
			</view>
			<view class="bg">
				<text class="icon">&#xe8b2;</text>
				<input :password="show" v-model="form.password" placeholder="请输入密码" />
				<view class="label">
					<view class="icon" :class="{ active: !show }" @click="show = !show">&#xe7a6;</view>
				</view>
			</view>
			<view class="bg">
				<text class="icon">&#xe8b2;</text>
				<input :password="show" v-model="form.rePassword" placeholder="确认密码" />
				<view class="label">
					<view class="icon" :class="{ active: !show }" @click="show = !show">&#xe7a6;</view>
				</view>
			</view>
			<view class="xy">
				<u-checkbox-group class="checkbox" v-model="form.checked">
					<u-checkbox size="15" shape="circle" label="我已阅读并同意" labelSize="13" name="true"></u-checkbox>
				</u-checkbox-group>
				<text class="a" @click="getAgreement(1)">《用户协议》</text>
				<text>和</text>
				<text class="a" @click="getAgreement(2)">《隐私政策》</text>
			</view>
			<button class="btn" @click="submit()">确定</button>
			<button class="btn register" @click="toLogin()">返回</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				time: 60,
				code: '获取验证码',
				form: {}
			};
		},
		onLoad(option) {
			this.form.type = option.type;
		},
		created() {},
		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() {
				let rule = [{
						name: 'phone',
						checkType: 'phone',
						errorMsg: '请输入正确的手机号码'
					},
					{
						name: 'smsCode',
						checkType: 'notnull',
						errorMsg: '请输入验证码'
					},
					{
						name: 'password',
						checkType: 'notnull',
						errorMsg: '请输入密码'
					},
					{
						name: 'rePassword',
						checkType: 'same',
						checkRule: this.form.password,
						errorMsg: '两次输入不一致'
					},
					{
						name: 'checked',
						checkType: 'notnull',
						errorMsg: '请同意并勾选协议'
					}
				];
				if (!this.verify.check(this.form, rule)) {
					uni.showModal({
						content: this.verify.error,
						showCancel: false
					});
					return false;
				}
				this.http.request({
					url: '/sp-admin/app/AppUser/register',
					data: this.form,
					contentType: 'application/json; charset=utf-8',
					method: 'POST',
					success: resp => {
						setTimeout(function (){
							uni.showToast({title: '注册成功'});
							uni.navigateTo({
								url: '/pages/login/login'
							});
						},1000)
					}
				});
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			getAgreement(id) {
				uni.navigateTo({
					url: '/pages/login/userAgreement?id=' + id
				});
			}
		}
	};
</script>

<style lang="scss"></style>