why_reg_h5/pages/login/smscode.vue

<template>
	<view class="phone_code">
		<view class="kbzone"></view>
		<text class="phone_code_label">验证码已发送至</text>
		<view class="phone_code_count">
			<text class="phone_code_count_new">{{ newPhone }}</text>
			<view v-if="isReget" class="phone_code_count_reget">
				<button plain="true" type="warn" size="mini" @click="getCode">重新获取</button>
			</view>
			<text v-else class="phone_code_count_down">获取验证码<text>{{count}}</text>s</text>
		</view>
		<view class="phone_code_single">
			<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun"
				@input="codeNumInputFun" :focus="focus" v-model="code" type="number" maxlength="6" />
			<view class="phone_code_single_codeinput">
				<view v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)"
					:style="(index == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
					{{code[index]}}
				</view>
			</view>
		</view>
		<button :disabled="isCode" class="btn" type="warn" @click="submitFun()">确定</button>
	</view>
</template>


<script>
import store from '@/store'
import * as LoginApi from '@/api/login'
export default {
data() {
	return {
	newPhone: "13800138000", // 当前显示电话
	isReget: false, // 判断是否显示 ‘重新获取’按钮    
	timer: null, // 定时器
	count: 20, // 时间
	code:"", // 验证码  
	focus:true, // 焦点
	// 正在加载
	isLoading: false,
	isParty: false,
	isCode:true // ‘确定’按钮是否禁用
	}
},
onLoad(options) {
	// console.log(options)
	if(options.rt!=""){
		this.newPhone = options.rt
	}
	this.getTimer() // 开启定时器
	this.getCode() // 获取验证码 
},
watch: {
	count(val) {
		if (val == 0) {
			this.isReget = true
			clearInterval(this.timer)
		}
	},
},
methods: {
	/**
	 * AUTHOR: 单乘风
	 * DESC: 定时器  
	 * */
	getTimer() {
		this.timer = setInterval(() => {
			if (this.count == 0) {
				clearInterval(this.timer)
				uni.navigateBack({
					delta: 1
				})
				return
			}
			this.count--
		}, 1000)
	},

	/**
	 * AUTHOR: 单乘风
	 * DESC: 获取验证码   
	 * */
	getCode() {
		// console.log("获取验证码", this.newPhone)
		if (this.count == 0) {
			this.count = 60
			this.isReget = false
			this.getTimer()
		}
	},
	/**
	 * AUTHOR: 单乘风
	 * DESC: 输入框输入事件 
	 * */
	codeNumInputFun(e) {
		let val = e.detail.value
		this.code = val
		if (val.length == 6) this.isCode = false
		else this.isCode = true
	},
	/**
	 * AUTHOR: 单乘风
	 * DESC: 输入框失去焦点事件 
	 * */
	codeNumBlurFun(e) {
		let val = e.detail.value
		this.focus = false
		if (val.length == 6) this.isCode = false
		else this.isCode = true
	},
	/**
	 * AUTHOR: 单乘风
	 * DESC: 输入框点击事件
	 * @param {Number} index 当前点击框索引
	 * */
	codefocusFun(index) {
		this.focus = true
	},
	/**
	 * AUTHOR: 单乘风
	 * DESC: 按钮点击事件
	 * */
	submitFun() {
		const app = this
		app.isLoading = true
		store.dispatch('Login', {
			smsCode: app.code,
			mobile: app.newPhone
			// isParty: false,
			// partyData: ""
		  })
		  .then(result => {
			// 显示登录成功
			app.$toast(result.message)
			// 相应全局事件订阅: 刷新上级页面数据
			uni.$emit('syncRefresh', true)
			this.$navTo("pages/home")
			// 跳转回原页面
			//setTimeout(() => app.onNavigateBack(1), 2000)
		  })
		  .catch(err => {
			// 跳转回原页面
			if (err.result.data.isBack) {
			  setTimeout(() => app.onNavigateBack(1), 2000)
			}
		  })
		  .finally(() => app.isLoading = false)
		//console.log("确认更换手机号")
	},
}
}
</script>

<style lang="scss" scoped>
	.phone {
		background-color: #FFF;
		width: 100vw;
		height: 100vh;

		&_code {
			padding: 30rpx;
			
			.kbzone{
				width: 100%;
				height: 32vh;
			}

			&_label {
				font-size: 30rpx;
				color: #999;
			}

			&_count {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				&_new {
					color: #FEF2F2;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_down {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					color: #999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}

			// 单独的数字
			&_single {
				margin-top: 30rpx;

				&_cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
					border-bottom: #313131 solid 2rpx;
				}

				&_codeinput {
					margin: auto;
					width: 650rpx;
					height: 100rpx;
					display: flex;
				}

				&_codeinput>view {
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 86rpx;
					height: 86rpx;
					line-height: 86rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;
					border-radius: 10rpx;
				}

				&_codeinput>view:nth-child(1) {
					margin-left: 0rpx;
				}
			}
			
		}
	}
	// .btn{
	// 	background-color: #FEF2F2;
	// }
</style>