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

<template>
	<view class="login animated fadeInDown">
		<view class="dk" style="margin-top: 30px">
			<view class="bg">
				<text class="icon">&#xe8b9;</text>
				<input type="number" maxlength="11" v-model="item.phone" placeholder="请输入手机号" />
			</view>
			<view class="bg">
				<text class="icon">&#xe624;</text>
				<input type="number" v-model="item.smsCode" placeholder="验证码" />
				<view class="label" @click="getCode()">{{ msg }}</view>
			</view>
			<view class="bg">
				<text class="icon">&#xe8b2;</text>
				<input :password="show" v-model="item.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="item.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="item.checked">
					<u-checkbox size="15" shape="circle" label="我已阅读并同意" labelSize="13" name="true"></u-checkbox>
				</u-checkbox-group>
				<text class="a" @click="go('/pages/login/userAgreement?id=1')">《用户协议》</text>
				<text>和</text>
				<text class="a" @click="go('/pages/login/userAgreement?id=2')">《隐私政策》</text>
			</view>
			<button class="btn" @click="submit()">确定</button>
			<button class="btn register" @click="back()">返回</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
			time: 60,
			flag: true,
			msg: '获取验证码',
			item: {}
		};
	},
	onLoad(option) {
		this.item.type = option.type;
	},
	methods: {
		//发送短信验证码
		getCode() {
			if (!this.flag) {
				return;
			}
			let rule = [{ name: 'phone', checkType: 'notnull', errorMsg: '请输入正确的手机号' }];
			if (!this.verify.check(this.item, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/sp-admin/app/AppUser/getPhoneSmsCode?phone=' + this.item.phone,
				success: res => {
					uni.showToast({ title: '发送成功' });
					//一分钟倒计时
					var countdown = setInterval(() => {
						this.time--;
						if (this.time == 0) {
							this.flag = true;
							this.msg = '获取短信';
							this.time = 60;
							clearInterval(countdown);
						} else {
							this.flag = false;
							this.msg = '重新获取(' + this.time + ')';
						}
					}, 1000);
				}
			});
		},
		submit() {
			let rule = [
				{ name: 'phone', checkType: 'phone', errorMsg: '请输入正确的手机号码' },
				{ name: 'smsCode', checkType: 'notnull', errorMsg: '请输入验证码' },
				{ name: 'password', checkType: 'notnull', errorMsg: '请输入密码' },
				{ name: 'rePassword', checkType: 'same', checkRule: this.item.password, errorMsg: '两次输入不一致' },
				{ name: 'checked', checkType: 'notnull', errorMsg: '请同意并勾选协议' }
			];
			if (!this.verify.check(this.item, rule)) {
				uni.showModal({ content: this.verify.error, showCancel: false });
				return false;
			}
			this.http.request({
				url: '/sp-admin/app/AppUser/register',
				data: this.item,
				method: 'POST',
				success: resp => {
					uni.showToast({ title: '注册成功' });
					setTimeout(() => {
						uni.navigateTo({ url: '/pages/login/login' });
					}, 1000);
				}
			});
		},
		go(url) {
			uni.navigateTo({ url: url });
		},
		back() {
			uni.navigateBack();
		}
	}
};
</script>

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