h5-sugarpark/src/views/login/loginByCode.vue

<template>
	<div class="container">
		<!-- <TopBar :icon="topbarIcon" :title="topbarTitle"></TopBar> -->
		<div class="tip font44 fw600" style="padding-top: 50px;">
			验证码登录
		</div>
		<div class="phone-tip font28 fw400" style="margin-top: 12px;">
			短信验证码已发送至：
		</div>
		<div class="phone-tip font28 fw400">
			{{phone}}
		</div>
		<div class="input-box flex-between">
			<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#494667;font-size:14px;" class="input fw500 font32" v-model="code" @input="inputChange" focus="true">
			<img src="../../static/input-clear.png" mode="aspectFill" class="clear" v-show="phone!==''" @click="clear"/>
		</div>
		<div class="btn font32 fw400" :class="timer===null?'primarybg':''" @click="reGetCode">
			{{btnStr}}
		</div>
	</div>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		components:{TopBar},
		data() {
			return {
				topbarIcon:'back',
				topbarTitle:'',
				phone:'',
				code:'',
				btnStr:'',
				time:0,
				timer:'',
				verCodeOption:{
					scene: "VerCodeLogin",
					verCodeLogin:{
						phone: "",
						verCode: ""
					},
					androidMarket:'WechatMP',
					model:''
				},
			};
		},
		mounted() {
			this.phone=this.$route.params.phone;
			this.reGetCode()
		},
		methods:{
			clear(){
				this.code='';
			},
			inputChange(e){
				console.log(this.code)
				if(this.code.length===6){
					this.verCodeOption.verCodeLogin.phone=this.phone;
					this.verCodeOption.verCodeLogin.verCode=this.code;
					this.$api.login.login(this.verCodeOption).then(res=>{
						if(res.data.frozen){
							this.$toast(res.data.msg);
						}
						else if(res.data.succ){
							localStorage.setItem('LL_Ukn',res.data.userToken.ukn);
							localStorage.setItem('token',res.data.userToken.token);
							localStorage.setItem('userInfo',JSON.stringify(res.data));
							localStorage.setItem('user',JSON.stringify(res.data.userToken.user));
							this.$api.public.aliossCdn({}).then(cdnRes=>{
								this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
								this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
							})
							if(res.data.isNew){
								this.$router.replace({name:'sex'})
								return;
							}
							this.getMineDetail(res.data.regStepNew);
							
							
						}
						else{
							this.$toast(res.data.msg);
						}
					})
				}
			},
			reGetCode(){
					this.time=60;
					this.btnStr=`重新获取(${--this.time}s)`
					this.timer=setInterval(()=>{
						if(this.time<=1){
							clearInterval(this.timer);
							this.timer=null;
							this.btnStr="重新获取"
						}
						else{
							this.btnStr=`重新获取(${--this.time}s)`
						}
					},1000)
			},
			getMineDetail(regStepNew){
				let user=JSON.parse(localStorage.getItem('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					localStorage.setItem('userInfo',JSON.stringify(res.data));//正式环境删除
					let step=regStepNew||localStorage.getItem('regStep');
					switch(step){
						case 'Sex':
							this.$router.replace({name:'sex'});
						break;
						case 'SocialImage':
							this.$router.replace({name:'figure'});
						break;
						case 'SocialData':
							this.$router.replace({name:'datum'});
						break;
						case 'CityStay':
							this.$router.replace({name:'city'});
						break;
						case 'WxInfo':
							this.$router.replace({name:'wechat'});
						break;
						case 'Basic':
						case 'Index':
							this.$router.replace({name:'main'});
						break;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "../../public.scss";
.container{
	background-color: $bgcolor1;
	width: 100vw;
	height: 100vh;
	.tip{
		color: $fontcolor5;
		padding-left: 30px;
	}
	.phone-tip{
		color: $fontcolor2;
		padding-left: 30px;
		
	}
	.input-box{
		
		margin: 0px 30px;
		margin-top: 80px;
		background-color: $bgcolor3;
		border-radius: 8px;
		height: 56px;
		padding: 0px 16px;
		.input{
			color: $fontcolor5;
			background-color: $bgcolor3;
		}
		.clear{
			width: 16px;
			height: 16px;
		}
	}
	.btn{
		margin: 0px 30px;
		margin-top: 60px;
		background-color: $fontcolor1;
		height: 52px;
		border-radius: 26px;
		line-height: 52px;
		text-align: center;
		color: $fontcolor3;
	}
	.link{
		box-sizing: border-box;
		margin: 0px 30px;
		margin-top: 15px;
		background-color: transparent;
		height: 52px;
		border-radius: 26px;
		line-height: 52px;
		text-align: center;
		color: $fontcolor3;
		border: 1px solid $fontcolor1;
	}
	.primarybg{
		background-color: $primary !important;
		color: $fontcolor5 !important;
	}
}
</style>