app-cannengyun/pages/fastLoginVercode/fastLoginVercode.vue

<template>
	<view>
		<back :errorMsg="errorMsg" :pageNameFlag="pageNameFlag" :showFlag="showFlag" :pageName='pageName'></back>
		<view class="text_block">
			<view class="phoneNum">{{text}}</view>
			<view class="phoneNum">
				{{phoneNum}}
			</view>
			<view class="phone-block">
				<view class="vercode">
					<input class="vercode-input" placeholder="请输入验证码"  :value="vercode" placeholder-class="vercode-placeholder" type="number" @input="changeVercode" maxlength="6" confirm-type="done"/>
				</view>
				<view class="reset-block" @click="reset"  v-if="resetFlag==1">
					<image class="vercode-pic" src="/static/pic/close.png"></image>
				</view>
				<button class="vercode-button" v-if="sendAgainFlag==0" @click="sendVercodeAgain">
					{{sendAgain}}
				</button>
				<view class="vercode-button-send" v-if="sendAgainFlag==1">
					{{sendAgain}}
				</view>
			</view>
			<button class="login-vercode" v-if="nextFlag==0">
				<view class="text">下一步</view>
			</button>
			<button class="login-vercode" v-if="nextFlag==1" :disabled="disabledFlag"  :loading="loadingFlag" @click="nextPage">
				<view class="textHigh">下一步</view>
			</button>
		</view>
			<!-- 图片滑块 -->
			<tfVerify ref="tfVerifyRef" @chenggong="chenggong"/>
	</view>
</template>

<script>
	import back from '../../components/back.vue';
	import tfVerify from '@/components/tfVerify/tfVerify.vue';
	export default {
		components:{
			back,tfVerify
		},
		data() {
			return {
				phoneNum:'',
				phoneNumTrue:'',
				pageNameFlag:1,
				showFlag:0,
				pageName:'手机快速注册',
				text:'验证码将发送到绑定手机号',
				vercode:'',
				resetFlag:0,
				nextFlag:0,
				sendAgain:'发送验证码',
				sendAgainFlag:0,
				second:60,
				errorMsg:'',
				loadingFlag:false,
				disabledFlag:false
			}
		},
		methods: {
			changeVercode(e){
				var that = this;
				if(e.detail.value.length>0){
					that.vercode=e.detail.value;
					that.resetFlag=1;
				}else{
					that.vercode='';
					that.resetFlag=0;
				}
				if(e.detail.value.length==6){
					that.nextFlag=1
				}else{
					that.nextFlag=0
				}
			},
			sendVercodeAgain(){
				this.$refs.tfVerifyRef.open()
			},
			async chenggong(){
				var that = this;
				if(that.second!=60){
					return;
				}
				that.sendAgainFlag=1
				await that.authToken();
				setTimeout(() => {
				uni.request({
				    url: that.serverUrl+'/user/authCode', 
					method:'POST',
				    data: {
				       phone:that.phoneNumTrue,
					   devCode:that.cid(),
					   type:1,
					   authToken: that.authTokenId
				    },
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
					sslVerify:false,
				    success: (res) => {
						if(res.data.resultCode=='10000'){
								that.second--;
								var intervalID =setInterval(function(){
									that.sendAgain ='重新发送('+that.second-- +"S)";
								},1000);
								setTimeout(function(){
									clearInterval(intervalID);
									that.sendAgain ="发送验证码";
									that.second=60;
									that.sendAgainFlag=0
								},61000)
						}else{
							that.errorMsg=that.showError(res.data.msgCode,res.data.msg);
							that.showFlag=1
							setTimeout(function() {
								that.errorMsg='';
								that.showFlag=0;
								that.sendAgainFlag=0
							}, 5000);
						}
				    },
					fail() {
						that.sendAgainFlag=0
						uni.showModal({
						    title: '提示',
						    content: '网络或服务器异常，请稍后再试',
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				});
			}, 500);
			},

			reset(){
				this.vercode='';
				this.resetFlag=0;
				this.nextFlag=0
			},
			nextPage(){
				var that= this;
				that.disabledFlag=true;
				that.loadingFlag=true;
				that.nextFlag=0;
				uni.request({
				    url: that.serverUrl+'/user/register', 
					method:'POST',
				    data: {
				       phone:that.phoneNumTrue,
					   devCode:that.cid(),
					   code:that.vercode
				    },
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
					sslVerify:false,
				    success: (res) => {
						that.loadingFlag=false;
						if(res.data.resultCode=='10000'){
							var userInfo = eval(res.data.data);
							userInfo.phoneNum=that.phoneNumTrue;
							uni.setStorageSync('userInfo',userInfo);
							that.disabledFlag=false;
							that.nextFlag=1;
							uni.navigateTo({
								url:'../fastLoginSetPassword/fastLoginSetPassword?phoneNum='+that.phoneNumTrue
							})
						}else{
							that.errorMsg=that.showError(res.data.msgCode,res.data.msg);
							that.showFlag=1
							setTimeout(function() {
								that.errorMsg='';
								that.showFlag=0;
								that.disabledFlag=false;
								that.nextFlag=1;
							}, 5000);
							// uni.showModal({
							// 	title:'提示',
							// 	showCancel:false,
							// 	content:that.showError(res.data.msgCode,res.data.msg),
							// })
						}
				    },
					fail:(re)=>{
						that.loadingFlag=false;
						that.disabledFlag=false;
						that.nextFlag=1;
						uni.showModal({
						    title: '提示',
						    content: '网络或服务器异常，请稍后再试',
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
					}
				});
			}
		},
		onLoad(e) {
			this.phoneNumTrue = e.phoneNum;
			this.phoneNum = e.phoneNum.substr(0,3)+'****'+e.phoneNum.substr(7,11);
			this.sendVercodeAgain();
		},
	
	}
</script>

<style>
@import url("fastLoginVercode.css");
</style>