sugarpark-mini-program/pages/login/loginByCode.vue

<template>
	<view class="container">
		<TopBar :icon="topbarIcon" :title="topbarTitle"></TopBar>
		<view class="tip font44 fw600" style="margin-top: 100rpx;">
			验证码登录
		</view>
		<view class="phone-tip font28 fw400" style="margin-top: 24rpx;">
			短信验证码已发送至：
		</view>
		<view class="phone-tip font28 fw400">
			{{phone}}
		</view>
		<view class="input-box flex-between">
			<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#494667;font-size:28rpx;" class="input fw500 font32" v-model="code" @input="inputChange" focus="true">
			<image src="../../static/input-clear.png" mode="aspectFill" class="clear" v-show="phone!==''" @click="clear"></image>
		</view>
		<view class="btn font32 fw400" :class="timer===null?'primarybg':''" @click="reGetCode">
			{{btnStr}}
		</view>
	</view>
</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:'',
					wxLoginInfo:{
						openId:null,
						unionId:null
					},
				},
			};
		},
		onLoad(option) {
			console.log(option)
			this.phone=option.phone;
			this.reGetCode()
		},
		methods:{
			clear(){
				this.code='';
			},
			inputChange(e){
				if(e.detail.value.length===6){
						const that=this;
						uni.login({//免密登录
							success:(res)=>{
								that.$api.login.wxLogin({
									scene: "WxMPLogin",
									miniProgramEncryUserInfoParam:{
										jsCode:res.code
									}
								}).then(result=>{
									if(result.status==='Succ'){
										uni.setStorageSync('openId',result.data.wxLoginInfo.openId);
										uni.setStorageSync('unionId',result.data.wxLoginInfo.unionId);
										let deviceConfig=uni.getSystemInfoSync();
										this.verCodeOption.verCodeLogin.phone=this.phone;
										this.verCodeOption.verCodeLogin.verCode=this.code;
										this.verCodeOption.model=deviceConfig.model;
										this.verCodeOption.wxLoginInfo.openId=result.data.wxLoginInfo.openId;
										this.verCodeOption.wxLoginInfo.unionId=result.data.wxLoginInfo.unionId;
										this.$api.login.login(this.verCodeOption).then(res=>{
											if(res.data.frozen){
												uni.showToast({
													icon:"none",
													title:res.data.msg
												});
												return;
											}
											if(res.data.succ){
												uni.setStorageSync('LL_Ukn',res.data.userToken.ukn);
												uni.setStorageSync('token',res.data.userToken.token);
												uni.setStorageSync('userInfo',JSON.stringify(res.data));
												uni.setStorageSync('user',JSON.stringify(res.data.userToken.user));
												uni.setStorageSync('isLogin','yes');
												this.$api.public.aliossCdn({}).then(cdnRes=>{
													this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
													this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
												})
												if(res.data.isNew){
													uni.navigateTo({
														url:'/pages/info/sex'
													})
													return;
												}
												this.getMineDetail(res.data.regStepNew);
												//全局分享
												uni.onAppRoute(()=>{
													const pages=getCurrentPages();
													let page=pages[pages.length-1];
													if(page.route!=='pages/friends/user'){
														let inviteCode=JSON.parse(uni.getStorageSync('userInfo')).inviteCode
														page.onShareAppMessage=()=>{
															return{
																title:'我在糖果公园等你哟~',
																page:`pages/friends/friends?inviteCode=${inviteCode}`,
																imageUrl:'https://zhenyanapp-gen.oss-cn-qingdao.aliyuncs.com/wechat-mini-pro/app-share.png'
															}
														}
													}
													
												})
												
											}
											else{
												uni.showToast({
													title:res.data.msg,icon:'none'
												})
											}
										})
										this.$api.public.aliossCdn({}).then(cdnRes=>{
											this.$store.commit('setImageCdn',cdnRes.data.pictureCdn);
											this.$store.commit('setVideoCdn',cdnRes.data.videoCdn);
										})
									}
									
									
								})
							},
							fail: (err) => {
								console.log(err)
							}
						});
					
				}
			},
			reGetCode(){
					this.time=60;
					this.btnStr=`重新获取(${--this.time}s)`;
					clearInterval(this.timer);
					this.timer=null;
					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(uni.getStorageSync('user'));
				this.$api.public.mineDetail({
					getAlbum:true,
					completeUser:user
				}).then(res=>{
					this.$store.commit('setUserInfo',res.data);
					uni.setStorageSync('userInfo',JSON.stringify(res.data));//正式环境删除
					let step=regStepNew||uni.getStorageSync('regStep');
					switch(step){
						case 'Sex':
							uni.navigateTo({
								url:'/pages/info/sex'
							})
						break;
						case 'SocialImage':
							uni.navigateTo({
								url:'/pages/info/figure'
							})
						break;
						case 'SocialData':
							uni.navigateTo({
								url:'/pages/info/datum'
							})
						break;
						case 'CityStay':
							uni.navigateTo({
								url:'/pages/info/city'
							})
						break;
						case 'WxInfo':
							uni.navigateTo({
								url:'/pages/info/wechat'
							})
						break;
						case 'Basic':
						case 'Index':
							uni.switchTab({
								url:'/pages/friends/friends'
							})
						break;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.container{
	background-color: $bgcolor1;
	width: 100vw;
	height: 100vh;
	.tip{
		color: $fontcolor5;
		padding-left: 60rpx;
	}
	.phone-tip{
		color: $fontcolor2;
		padding-left: 60rpx;
		
	}
	.input-box{
		
		margin: 0rpx 60rpx;
		margin-top: 160rpx;
		background-color: $bgcolor3;
		border-radius: 16rpx;
		height: 112rpx;
		padding: 0rpx 32rpx;
		.input{
			color: $fontcolor5;
		}
		.clear{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.btn{
		margin: 0rpx 60rpx;
		margin-top: 120rpx;
		background-color: $fontcolor1;
		height: 104rpx;
		border-radius: 52rpx;
		line-height: 104rpx;
		text-align: center;
		color: $fontcolor3;
	}
	.link{
		box-sizing: border-box;
		margin: 0rpx 60rpx;
		margin-top: 30rpx;
		background-color: transparent;
		height: 104rpx;
		border-radius: 52rpx;
		line-height: 104rpx;
		text-align: center;
		color: $fontcolor3;
		border: 1rpx solid $fontcolor1;
	}
	.primarybg{
		background-color: $primary !important;
		color: $fontcolor5 !important;
	}
}
</style>