mh/pages/login/register.vue

<template>
	<view class="register">
		<view class="vheight"></view>
		<view class="register_head">
			<text>注册账号</text>
			<text>请使用手机号注册账号</text>
		</view>
		<view class="register_ul">
			<view class="register_li flex">
				<view class="register_ipt"><input type="number" v-model="form.mobile" maxlength="11" placeholder="请输入手机号" placeholder-style="color:#999999" /></view>
			</view>
			<view class="register_li flex">
				<view class="register_ipt"><input type="number" v-model="form.captcha" maxlength="11" placeholder="请输入验证码" placeholder-style="color:#999999" /></view>
				<view class="code center" @click="getCode">{{ codeTxt }}</view>
			</view>
			<view class="register_li flex">
				<view class="register_ipt">
					<input type="password" v-model="form.password" maxlength="12" placeholder="设置密码：（8-12位数字和字母）" placeholder-style="color:#999999" />
				</view>
			</view>
			<view class="register_li flex">
				<view class="register_ipt"><input type="password" v-model="passwordValid" maxlength="12" placeholder="请再次输入密码" placeholder-style="color:#999999" /></view>
			</view>
			<view class="register_li flex">
				<view class="register_ipt"><input type="text" v-model="form.sharecode" placeholder="请输入邀请码(选填)" placeholder-style="color:#999999" /></view>
			</view>
		</view>
		<button class="register_btn" hover-class="hover-view" @click="submit">注册并登录</button>
		<view class="register_consent center">
			<image :src="isConsent ? '/static/image/publice/xuanzhong@2x.png' : '/static/image/publice/weixuanzhong1@2x.png'" mode="" @click="isConsent = !isConsent"></image>
			<text>阅读并同意</text>
			<text class="blue" @click="goUser">《用户协议》</text>
			<text>和</text>
			<text class="blue" @click="goPrivacy">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
import $DB from '../../http/debounce.js';
export default {
	data() {
		return {
			isConsent: false, //是否同意
			form: {
				mobile: '',
				password: null,
				captcha: null,
				sharecode: uni.getStorageSync('sharecode')
			},
			passwordValid: null,
			sending: true,
			second: 60,
			disabled: false,
			flag: true,
			codeTxt: '获取验证码'
		};
	},
	created() {
		console.log(this.form);
	},
	methods: {
		submit() {
			if (!this.form.mobile.match(/^(0|86|17951)?1[3456789]\d{9}$/)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.form.captcha) return uni.showToast({ title: '请输入验证码', icon: 'none' });
			if (this.form.password != this.passwordValid) return uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
			if (!this.flag) return;
			this.flag = false;
			this.$api.register({ ...this.form, msg: '提交中' }).then(res => {
				if (res.data.registerurl) {
					//存在跳转链接
					location.href = res.data.registerurl;
					return;
				}
				if (res.code === 1) {
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('is_notice', res.data.is_notice);
					uni.removeStorageSync('is_channel');
					uni.switchTab({ url: '/pages/tabbar/index' });
				} else {
					this.flag = true;
				}
			});
		},
		//获取验证码
		getCode: $DB(function() {
			if (!this.sending) return;
			if (!this.form.mobile.match(/^(0|86|17951)?1[3456789]\d{9}$/)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			if (!this.isConsent) return uni.showToast({ title: '请阅读并同意用户和隐私协议', icon: 'none' });
			this.$api.send({ mobile: this.form.mobile, msg: '发送中', event: 'register' }).then(res => {
				this.sending = false;
				this.disabled = true;
				if (res.code === 1) {
					this.timeDown();
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			});
		}),
		//去隐私协议
		goPrivacy() {
			uni.navigateTo({ url: '/pagesA/pages/privacy' });
		},
		//去用户协议
		goUser() {
			uni.navigateTo({ url: '/pagesA/pages/user' });
		},
		timeDown() {
			let result = setInterval(() => {
				--this.second;
				this.codeTxt = this.second + 'S';
				if (this.second < 0) {
					clearInterval(result);
					this.sending = true;
					this.disabled = false;
					this.second = 60;
					this.codeTxt = '获取验证码';
				}
			}, 1000);
		}
	}
};
</script>
<style lang="scss">
page {
	background: #ffffff;
}
.vheight {
	height: var(--status-bar-height);
	width: 100%;
}
.register {
	min-height: 100vh;
	padding: 0 42rpx;
	position: relative;
	.register_head {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0 40rpx 0;
		text {
			&:first-child {
				font-size: 40rpx;
				font-weight: bold;
			}
			&:last-child {
				color: #999999;
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
	}
	.register_li {
		padding: 40rpx 0;
		border-bottom: 2rpx solid #dddddd;
		.register_ipt {
			flex: 1;
			input {
				width: 100%;
				font-size: 30rpx;
			}
		}
		.code {
			width: 150rpx;
			color: #4eabfc;
			font-size: 28rpx;
		}
	}
}
.register_btn {
	height: 80rpx;
	margin-top: 50rpx;
	background-image: linear-gradient(45deg, #89f7fe, #7c66ff);
	border-radius: 40rpx;
}
.register_consent {
	width: 100%;
	position: absolute;
	left: 50%;
	bottom: 70rpx;
	transform: translateX(-50%);
	image {
		width: 30rpx;
		height: 30rpx;
		flex-shrink: 0;
		margin-right: 10rpx;
	}
	.blue {
		color: #4eabfc;
	}
}
</style>