yicangzongtai_app_240321/pages/research/register/verification.vue

<template>
	<view class="login">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<form @submit="formSubmit">
		<view class="content">
			<view class="password">
				<view class="left">
					验证码登录
					<text @click="goToForgetPass">忘记密码</text>
				</view>
				<view class="right" @click="goToLogin">
					密码登录<text class="iconfont  u-font24 u-999">&#xe6c7;</text>
				</view>
			</view>
			<view class="phone">
				<view class="number">
					手机号
				</view>
				<input type="number" name="phone" value="" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="onPhone" maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="passpwd">
				<view class="number">
					验证码登录
				</view>
				<input type="text" value="" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="onCode" name="code" maxlength="6" placeholder="请输入验证码"/>
				<button class="obtain" :disabled="disabled" @click="judgeLogin" :class="isPhone?'active':''">
					{{verificationCode}}
				</button>
			</view>
			<view class="agreement">
				<view class="whole">
					<view class="top" v-if="flag" @click="onFlag">
						<icon type="success" color="#FF0000" size="17"  ></icon>
					</view>
					<view class="top" v-else style="width: 30rpx;height: 30rpx;border-radius: 50%;border: #ccc solid 1rpx;" @click="onFlag"></view>
					</view>
					<view class="agree">
						我已阅读并同意<text @click="goToagreement">《会员注册协议》</text>
					</view>
			</view>
			<button class="login-button" form-type="submit">
				
				登录
			</button>
			<view class="go-to-register" @click="goToregister">
				去注册
			</view>
			</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {yzmLgoin,getVerfityCode} from "@/api/login.js"
	export default{
		data(){
			return{
				config: {
					back: false,
					title: '用户登录',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
				},
				flag:false,//协议
				phone:'',	//手机号
				isPhone:false,	//手机号正则
				code:'',	//密码
				time:60,	//倒计时
				disabled:false,	//按钮
				verificationCode:"获取验证码"
			}
		},
		methods:{
			//忘记密码
			goToForgetPass(){
				uni.navigateTo({
					url:"../setup/forgetPass"
				})
				},
			//去登录
			goToLogin(){
				uni.redirectTo({
					url:"./login"
				})
			},
			//去注册
			goToregister(){
				uni.redirectTo({
					url:"./register"
				})
			},
			//去协议
			goToagreement(){
				console.log(666)
				uni.navigateTo({
					url:"./agreement"
				})
			},
			//倒计时
			countDown(){
				if(this.time<=0){
					this.disabled=false;
					this.verificationCode="重新获取";
					this.isPhone=true;
					this.time=60;
					clearInterval(this.clear)
				}else{
					--this.time;
					this.verificationCode=this.time+"s"
				}
			},
			//清楚计时器
			beforeDestroy(){
				clearInterval(this.clear)
			},
			
			judgeLogin(){
				if(this.isPhone){
					this.$http.get("/account/verify-mobile/"+this.phone).then(res=>{
						if(res&&res.code==200){
							if(res.data==false){
								this.$mUtil.toast("该手机号还未注册")
							}else if(res.data==true){
								this.obtainCode()
							}
						}
					})
				}
			},
			//获取验证码
			async obtainCode(){
				if(this.isPhone){
					 await this.$http.post(getVerfityCode,this.phone)
					 .then(res=>{
						 if(res&&res.code==200){
							 this.disabled=false;
							 this.isPhone=false;
							 this.verificationCode=this.time+"s";
							 this.$mUtil.toast("发送成功")
							 this.clear=setInterval(this.countDown,1000);
						 }
					 })
				}
			},		
			//手机号
			onPhone(e){
				this.phone=e.detail.value
				if(this.phone.match(this.$mConfig.telRegex)){
					if(this.verificationCode=='获取验证码'||this.verificationCode=='重新获取'){
						this.isPhone=true
					}
				}else{
					this.isPhone=false
				}
				
			},
			//验证码
			onCode(e){
				this.code=e.detail.value
				// console.log(this.code)
			},
			//协议
			onFlag(){
				this.flag=!this.flag
			},
			formSubmit(e){
				console.log(666)
				let target = e.detail.value;
				if(!target.phone){
					this.$mUtil.toast('请输入手机号')
					return false
				}
				if(!(target.phone.match(this.$mConfig.telRegex))){
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				if(!target.code){
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if(this.flag==false){
					this.$mUtil.toast("请先同意协议")
					return false
				}
				let param={
					mobile:target.phone,
					captcha:target.code,
          cid: uni.getStorageSync('cid')
				}
				this.$http.post(yzmLgoin,param)
				.then(res=>{
					if(res.code==200){
						this.$mUtil.toast("登录成功")
						uni.setStorageSync("token",res.data.token)
						uni.setStorageSync("shop",res.data.shop)
						this.$http.get("/account/app-account-info").then(res=>{
							uni.setStorageSync("personal",res.data)
						})
						setTimeout(function(){
							uni.navigateBack({
								delta: 1
							})
						},1000)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.go-to-register{
		padding: 22rpx 0;
		color: #FA6138;
		font-size: 32rpx;
		font-weight: Regular;
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		border: 1rpx solid #3775F6;
		border-radius: 20rpx;
	}
	.login-button{
		
		width: 100%;
		text-align: center;
		margin-top: 70rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: Regular;
		background-color: #FA6138;
		border-radius: 20rpx;
	}
	.agreement{
		margin-top: 40rpx;
		display: flex;
	}
	.agree{
		font-size: 28rpx;
		color: #999999;
		font-weight: Regular;
		margin-left: 10rpx;
		text{
			color: #0047B1;
		}
	}
	.top{
		display: flex;
		align-items: center;
	}
	.choice{
		margin: 0 50rpx;
		display: flex;
		align-items: center;
		.whole{
			display: flex;
			align-items: center;
		}
	}
	
	
	
	.passpwd{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;
		.number{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		input{
			flex: 1;
			margin-left: 40rpx;
		}
		.obtain{
			// padding: 14rpx 30rpx;
			border: 1rpx solid #b3b3b3;
			font-size: 28rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			background-color: #FFFFFF;
			color: #999999;
		}
		.active{
			background-color: #FA6138;
			color: #FFFFFF;
      border: none;
		}
	}
	.phone{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #e6e6e6;
		.number{
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}
		input{
		flex: 1;
		margin-left: 70rpx;
	}
	}
	.password{
		display: flex;
		.left{
			font-size: 38rpx;
			font-weight: Bold;
			color: #333333;
			line-height: 28rpx;
			flex: 1;
			text{
					font-size: 28rpx;
					color: #666666;
					font-weight: 400;
					margin-left: 20rpx;
				}
		}
		.right{
			color: #666666;
			font-size: 28rpx;
			font-weight: Regular;
			
		}
	}
	.content{
		margin: 80rpx 50rpx;
	}
</style>