flying-monkey/pages/register/register.vue

<template>
	<view>
		<status-nav-slot>
			<view slot="leftContent" @tap="goLogin"><image class="register-close" src="/static/public/icon-close.png" mode="widthFix" lazy-load></image></view>
			<view slot="rightContent" @tap="goLogin">登录</view>
		</status-nav-slot>
		<container-subgroup-two>
			<view slot="content">
				<view class="disjcac">
					<image src="/static/public/icon-register.png" mode="widthFix" lazy-load></image>
				</view>
				<view class="register-title line-h56">
					<view class="fon40 bold">注册</view>
					<view class="fon28">欢迎来到飞猴云服务平台</view>
				</view>
				<view class="fon24">
					<!-- 手机号 -->
					<view class="disac mar-s30">
						<view class="disac fon30">+86 <view class="register-phone-img"></view></view>
						<view class="posir width100">
							<input @blur="inputBlurEv(0)" @focus="inputFocusEv(0)" @input="inputFocusEv(0)" class="clear-input" type="number" maxlength="11" v-model="register_phone" placeholder="请输入手机号" placeholder-class="placeholderColor" />
							<!-- 清除按钮 -->
							<view class="clear-box" v-show="ifPhone" @tap="clearInput(0)"><view class="clear-close"><span></span><span></span></view></view>
						</view>
					</view>
					<!-- 验证码 -->
					<view class="disjbac mar-s50">
						<view class="posir width100">
							<input @blur="inputBlurEv(1)" @focus="inputFocusEv(1)" @input="inputFocusEv(1)" class="clear-input" type="number" maxlength="6" v-model="register_code" placeholder="请输入验证码" placeholder-class="placeholderColor" />
							<!-- 清除按钮 -->
							<view class="clear-box" v-show="ifCode" @tap="clearInput(1)"><view class="clear-close"><span></span><span></span></view></view>
						</view>
						<!-- 获取验证码按钮 -->
						<view class="obtain-code" :class="!flagCode ? 'obtainIng' : ''" @tap="getCode">{{codeText}}</view>
					</view>
					<!-- 密码 -->
					<view class="disjbac mar-s50">
						<view class="posir width100">
							<input @blur="inputBlurEv(2)" @focus="inputFocusEv(2)" @input="inputFocusEv(2)" class="clear-input" type="text" password maxlength="16" v-model="register_password" placeholder="请输入密码" placeholder-class="placeholderColor" />
							<!-- 清除按钮 -->
							<view class="clear-box" v-show="ifPassword" @tap="clearInput(2)"><view class="clear-close"><span></span><span></span></view></view>
						</view>
					</view>
					<!-- 确认密码 -->
					<view class="disjbac mar-s50">
						<view class="posir width100">
							<input @blur="inputBlurEv(3)" @focus="inputFocusEv(3)" @input="inputFocusEv(3)" class="clear-input" type="text" password maxlength="16" v-model="register_qpassword" placeholder="请再次确认密码" placeholder-class="placeholderColor" />
							<!-- 清除按钮 -->
							<view class="clear-box" v-show="ifqpssword" @tap="clearInput(3)"><view class="clear-close"><span></span><span></span></view></view>
						</view>
					</view>
					<!-- 单位名称 -->
					<view class="disjbac mar-s50">
						<view class="posir width100">
							<input @blur="inputBlurEv(4)" @focus="inputFocusEv(4)" @input="inputFocusEv(4)" class="clear-input" type="text" v-model="register_unitName" placeholder="请输入单位名称" placeholder-class="placeholderColor" />
							<!-- 清除按钮 -->
							<view class="clear-box" v-show="ifunitName" @tap="clearInput(4)"><view class="clear-close"><span></span><span></span></view></view>
						</view>
					</view>
					<!-- 协议、政策 -->
					<view class="disac mar-s50">
						<label class="radio disac col9" @tap="chooseXY">
							<radio class="register-radio" color="#03affb" :checked="ifAgreen"/><view>我已阅读并同意 <text @tap.stop="goXY(0)" class="register-agree-policy">《飞猴用户服务协议》</text>和 <text @tap.stop="goXY(1)" class="register-agree-policy">《飞猴隐私政策》</text></view>
						</label>
					</view>
					<!-- 免费注册 -->
					<view class="register-btn" @tap="submitEv">免费注册</view>
				</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	export default {
		components:{
			statusNavSlot,
			containerSubgroupTwo
		},
		data() {
			return {
				ifPhone:false, // 是否显示手机号清空按钮
				register_phone:'', // 注册时的手机号
				ifCode:false,
				register_code:'', // 注册时的验证码
				ifPassword:false,
				register_password:'', // 注册时的密码
				ifqpssword:false,
				register_qpassword:'', // 注册时的确认密码
				ifunitName:false,
				register_unitName:'', // 注册时的单位名称
				ifAgreen:false ,// 注册时是否勾选协议与政策
				codeText:'获取验证码' ,// 获取验证码按钮文字
				flagCode:true ,// 允许点击获取验证码
				countDown:null//验证码倒计时事件
			}
		},
		methods: {
			// 提交事件
			submitEv(){
				if(this.checkEmpty()){
					let params = {
						phone: this.register_phone, // 手机号码  
						sms_code:this.register_code, // 短信验证码  
						password: this.register_password, // 密码  
						confirm_password: this.register_qpassword, // 确认密码  
						affiliation: this.register_unitName //单位名称  
					}
					this.$requst.post('/universal/api.login/register',params).then(res=>{
						if(res.code==1) {
							this.$toolAll.tools.showToast('注册成功');
							setTimeout(()=>{
								// 调用前往登录页
								this.goLogin();
							},1000)
						} else {
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}
			},
			// 获取验证码
			getCode(){
				if(this.$toolAll.tools.isPhone(this.register_phone)) {
					this.$toolAll.tools.showToast('请输入正确的手机号');
				} else {
					if(this.flagCode) {
						this.flagCode = false;
						let count = 60;
						this.codeText = `${count}S重新获取`
						this.countDown = setInterval(()=>{
							count--;
							count < 10 ? this.codeText = `0${count}S重新获取` : this.codeText = `${count}S重新获取`;
							if(count==0) {
								this.codeText = `重新获取`;
								clearInterval(this.countDown);
								this.flagCode = true;
							}
						},1000)
						// 调用获取短信事件
						this.getMessage(this.register_phone);
					}
				}
			},
			// 获取短信事件
			getMessage(phone){
				this.$requst.post('/universal/api.login/send_sms',{phone}).then(res=>{
					this.$toolAll.tools.showToast(res.msg);
					if(res.code==0) {
						clearInterval(this.countDown);
						this.codeText = `获取验证码`
						this.flagCode = true;
					}
				})
			},
			// 检测是否某个输入框为空
			checkEmpty(){
				let ifEmpty = true;
				if(this.$toolAll.tools.isPhone(this.register_phone)) {
					this.$toolAll.tools.showToast('手机号格式不正确');
					ifEmpty = false;
					return;
				}
				if(!this.register_code) {
					this.$toolAll.tools.showToast('请输入验证码');
					ifEmpty = false;
					return;
				}
				if(!this.register_password) {
					this.$toolAll.tools.showToast('密码不能为空');
					ifEmpty = false;
					return;
				}
				if(!this.register_qpassword) {
					this.$toolAll.tools.showToast('确认密码不能为空');
					ifEmpty = false;
					return;
				}
				if(this.register_password != this.register_qpassword) {
					this.$toolAll.tools.showToast('两次输入的密码必须相同');
					ifEmpty = false;
					return;
				}
				if(!this.register_unitName) {
					this.$toolAll.tools.showToast('请输入单位名称');
					ifEmpty = false;
					return;
				}
				if(!this.ifAgreen) {
					this.$toolAll.tools.showToast('请勾选协议与政策');
					ifEmpty = false;
					return;
				}
				return ifEmpty;
			},
			// 关闭当前页返回到登录页
			goLogin(){
				uni.navigateBack({delta:1})
			},
			// 输入框获取焦点
			inputFocusEv(index){
				switch (index){
					case 0:
					this.register_phone ? this.ifPhone = true : this.ifPhone = false;
						break;
					case 1:
					this.register_code ? this.ifCode = true : this.ifCode = false;
						break;
					case 2:
					this.register_password ? this.ifPassword = true : this.ifPassword = false;
						break;
					case 3:
					this.register_qpassword ? this.ifqpssword = true : this.ifqpssword = false;
						break;
					case 4:
					this.register_unitName ? this.ifunitName = true : this.ifunitName = false;
						break;
				}
			},
			// 输入框失去焦点
			inputBlurEv(index){
				switch (index){
					case 0:
					setTimeout(()=>{this.ifPhone = false;},100)
						break;
					case 1:
					setTimeout(()=>{this.ifCode = false;},100)
						break;
					case 2:
					setTimeout(()=>{this.ifPassword = false;},100)
						break;
					case 3:
					setTimeout(()=>{this.ifqpssword = false;},100)
						break;
					case 4:
					setTimeout(()=>{this.ifunitName = false;},100)
						break;
				}
			},
			// 清除手机号
			clearInput(index){
				switch (index){
					case 0:
					this.register_phone = '';
					console.log(this.register_phone);
						break;
					case 1:
					this.register_code = '';
						break;
					case 2:
					this.register_password = '';
						break;
					case 3:
					this.register_qpassword = '';
						break;
					case 4:
					this.register_unitName = '';
						break;
				}
			},
			// 勾选协议
			chooseXY(){
				this.ifAgreen = !this.ifAgreen;
			},
			// 前往协议或政策
			goXY(index){
				uni.navigateTo({
					url:`/pages/login/agreement?type=${index}`
				})
			}
		}
	}
</script>

<style scoped>
	
</style>