nzhbsr/pages/public/register.vue

<template>
	<view class="container">
		<view class="wjmm" style="text-align: right;padding-right: 30rpx;font-size: 36rpx;" @click="dl()">{{ $t('login.dl') }}</view>
		<view class="tit" style="padding-top:120rpx;">{{ $t('login.yx') }}</view>
		<input type="text" class="shuru" :placeholder="$t('login.qsryx')" v-model="email" />
		<view class="tit">{{ $t('login.yxyzm') }}</view>
		<view class="flex" style="width: 673rpx;justify-content: space-between;margin: auto;">
			<input type="text" class=" yzm" :placeholder="$t('login.qsryzm')" v-model="code" />
			<view class="code yzmbtn" @click="verification">{{ countDown == 0 ? $t('login.yzm') : countDown }}</view>
		</view>

		<view class="tit">{{ $t('login.mm') }}</view>
		<input type="password" class="shuru" :placeholder="$t('login.qsrmm')" v-model="lpwd" />
		<view class="tit">{{ $t('login.qrmm') }}</view>
		<input type="password" class="shuru" :placeholder="$t('login.qsrmm')" v-model="relpwd" />
		<view class="tit">{{ $t('login.yqm') }}</view>
		<input type="text" class="shuru" :placeholder="$t('login.qsryqm')" v-model="invit" />
		<view class="flex" style="justify-content: space-between;padding: 50rpx 30rpx;align-items: flex-start;">
			<view class="">
				{{ $t('login.zcjbsty') }}
				<text style="color: #fcd535;">{{ $t('login.yhfwxy') }}</text>
			</view>
			<image src="../../static/icon/goto.png" mode="" style="width: 97rpx;height: 97rpx;" @click="register()"></image>
		</view>
		<!-- <view class="login_text">
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img03.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img04.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="password" focus placeholder="请输入密码" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img04.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus placeholder="请重复输入密码" /></view>
			</view>
			<view class="login_input flex" style="display: none;">
				<view class="login_img"><image src="/static/icon/img07.png"></image></view>
				<view class="login_name"><input class="uni-input" type="text" v-model="invitation" focus placeholder="请输入邀请码" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img06.png"></image></view>
				<view class="login_name flex">
					<input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
					<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
				</view>
			</view>
			<view><button type="green" @click="register" class="uni-button uni-button-green">注册账号</button></view>
			<view><button class="uni-button uni-button-green uni-button-green-plain" type="green" plain="true" hover-class="none" @click="login">返回登录</button></view>
		</view> -->
	</view>
</template>
<script>
import { register, verify, getYzm, zc } from '@/api/login.js';
export default {
	data() {
		return {
			loaded: false,
			lpwd: '',
			relpwd: '',
			invit: '',
			email: '',
			phone: '', //用户
			password: '', //密码
			repassword: '',
			invitation: '', //邀请码
			code: '', //验证码
			time: '', //保存倒计时对象
			countDown: 0 //倒计时
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: this.$t('login.zc') });
		// 获取扫码邀请人id
		this.invitation = uni.getStorageSync('spread') || '';
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	methods: {
		dl() {
			uni.navigateTo({
				url: '/pages/public/login'
			});
		},
		// 注册
		register() {
			let obj = this;
			if (obj.loaded) {
				return;
			}
			if (obj.email == '') {
				obj.$api.msg(this.$t('login.qsryx'));
				return;
			}
			if (obj.lpwd == '') {
				obj.$api.msg(this.$t('login.qsrmm'));
				return;
			}
			if (obj.relpwd == '') {
				obj.$api.msg(this.$t('mm.qsrqrmm'));
				return;
			}
			if (obj.relpwd != obj.lpwd) {
				obj.$api.msg(this.$t('mm.lcmmbyz'));
				return;
			}
			// if ((obj.invitation = '')) {
			// 	obj.$api.msg('请输入邀请码');
			// 	return;
			// }
			if (obj.code == '') {
				obj.$api.msg(this.$t('login.qsryzm'));
				return;
			}
			obj.loaded = true;
			zc({
				email: obj.email,
				lpwd: obj.lpwd,
				invit: obj.invit,
				phone: obj.phone,
				yincang: 1,
				ecode: obj.code
			})
				.then(function(e) {
					obj.loaded = false;
					uni.showToast({
						title: this.$t('login.zccg'),
						duration: 2000,
						position: 'top'
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}, 1000);
				})
				.catch(err => {
					obj.loaded = false;
				});
			//调用注册接口，成功跳转登录页
		},
		isEmailAvailable(obj) {
			let email = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
			if (!email.test(obj)) {
				return false;
			}
			return true;
		},
		//发送验证码
		verification() {
			let obj = this;
			if (obj.email == '') {
				return obj.$api.msg(this.$t('login.qsryx'));
			}
			if (!obj.isEmailAvailable(obj.email)) {
				return obj.$api.msg(this.$t('login.qsrzqdyx'));
			}
			// 判断是否在倒计时
			if (obj.countDown > 0) {
				return false;
			} else {
				obj.countDown = 60;
				obj.time = setInterval(() => {
					obj.countDown--;
				}, 1000);
				//调用验证码接口
				getYzm({
					email: obj.email
					// type: 'register'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		login() {
			//返回登录
			uni.navigateTo({
				url: '/pages/public/login'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #fff;
	font-size: 32rpx;
}

.container {
	width: 100%;
	height: 100%;
	background-size: 100%;
}

.shuru {
	display: block;
	background-color: #f5f5f5;
	width: 673rpx;
	height: 95rpx;
	margin: auto;
	padding-left: 30rpx;
	text-align: 95rpx;
}

.tit {
	padding: 40rpx 48rpx 20rpx;
}

.gologin {
	width: 204rpx;
	height: 98rpx;
	line-height: 98rpx;
	background-color: #fcd535;
	text-align: center;
	border-radius: 20rpx;
}

.wjmm {
	color: #fcd535;
}

.yzm {
	width: 400rpx;
	height: 95rpx;
	padding-left: 30rpx;
	background-color: #f5f5f5;
}

.yzmbtn {
	width: 234rpx;
	height: 95rpx;
	background-color: #f5f5f5;
	text-align: center;
	line-height: 95rpx;
	color: #fcd535;
}
</style>