yiliangyiyun-app/pages/public/code.vue

<template>
	<view class="top">
		<view class="back-btn cuIcon-back" @click="navBack"></view>
			<!-- 文字 -->
			<view class="top_one">请输入验证码</view>
			<view class="top_two">验证码已发送到<text class="text">{{phone}}</text></view>
			<!-- 六个显示框 -->
			<view class="top_three">
				<view :class="[ !inputList[0]||inputList.length>0 ? 'inb' : '' ]" class="input">
					<text>{{inputList[0]}}</text>
					<view v-if="!inputList[0]"  class="fours"></view>
				</view>
				<view :class="[ inputList[0] && !inputList[1]||inputList.length>1 ? 'inb' : '' ]" class="input">
					<text>{{inputList[1]}}</text>
					<view v-if="inputList[0] && !inputList[1]"  class="fours"></view>
				</view>
				<view :class="[ inputList[1] && !inputList[2]||inputList.length>2 ? 'inb' : '' ]" class="input">
					<text>{{inputList[2]}}</text>
					<view v-if="inputList[1] && !inputList[2]"  class="fours"></view>
				</view>
				<view :class="[ inputList[2] && !inputList[3]||inputList.length>3 ? 'inb' : '' ]" class="input">
					<text>{{inputList[3]}}</text>
					<view v-if="inputList[2] && !inputList[3]"  class="fours"></view>
				</view>
				<view :class="[ inputList[3] && !inputList[4]||inputList.length>4 ? 'inb' : '' ]" class="input">
					<text>{{inputList[4]}}</text>
					<view v-if="inputList[3] && !inputList[4]"  class="fours"></view>
				</view>
				<view :class="[ inputList[4] && !inputList[5]||inputList.length>5 ? 'inb' : '' ]" class="input">
					<text>{{inputList[5]}}</text>
					<view v-if="inputList[4] && !inputList[5]"  class="fours"></view>
				</view>
			</view>
			<!-- 隐藏的input -->
			<view class="top_four">
				<input type="text" class="input_show" maxlength="6" @input='submit' v-model="inputList" focus="true"/>
			</view>
			<!-- 重新获取 -->
			<view class="top_five" @click='regain' :class="!status ? 'active' : '' "><text v-if="!status">重新发送</text><text v-if="status">{{count_down}}秒后重新发送</text></view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				// 电话
				phone:'',
				// 跟隐藏input绑定的数组
				inputList:[],
				//计时器
				count_down:60,
				status:false
			}
		},
		methods: {
			
			//因项目原型要求 所以用了onshow页面加载触发函数，可换成单击事件@click
			onShow:function(e){
				
				
			},
			onLoad:function(options){
				this.phone=this.options.phone
				if(this.phone){
					this.regain()
				}else{
					uni.showToast({
						title: '请输入正确的手机号',
						icon:'none',
						duration: 2000
					})
				}
			},
			regain(){
				this.status=true
				// console.log(e)150500
				// 设定一个定时器 1000是1秒的意思
				var interval = setInterval(() =>{
					--this.count_down
				},1000) 
				// 设定一个定时器 60000就是六十秒
				setTimeout(() =>{
					this.status=false
					clearInterval(interval)//括号里面的名字要与setInterval定义的相同
				},60000)
				this.$api.doRequest('get','/commonUser/sendVerifyCode',{phone:this.phone}).then(res => {
				                // 获得数据
								if(res.statusCode!=200){
									uni.showToast({
										title: res.data.message,
										icon:'none',
										duration: 2000
									})
								}
				                console.log(res);
				            })
				            .catch(res => {
				                uni.showToast({
				                	title: res.errMsg,
				                	icon:'none',
				                	duration: 2000
				                })
				            });
			},
			submit(e){
				if(e.detail.value.length==6){
					this.$api.doRequest('get','/commonUser/loginVerifyCode',{phone:this.phone,verifyCode:this.inputList}).then(res => {
					                // 获得数据
					                console.log(res);
					            })
					            .catch(res => {
					                console.log(res);
					            });
				}
			}
			
		}
	}
</script>1

<style>
	.top{
	padding-top: 85px;
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: url('../../static/img/login/bg.png');
	background-size:100%;}
	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}
	/* 文字 */
	.top_one{width: 90%; height: 90rpx; line-height: 90rpx; font-size: 44rpx; margin: auto; font-weight: bold;}
	.top_two{width: 90%; height: 40rpx; line-height: 40rpx; font-size: 24rpx; margin: auto; color: #545454;}
	.text{font-weight: bold;}
	
	/* 六个显示框容器 */
	.top_three{width: 80%; height: 200rpx; margin: auto;
		display: flex; align-items: center; justify-content: center;
	}
	/* 六个框显示框 */
	.input{width: 14%; height: 80rpx; background-color: #F5F5F5; margin-right: 12rpx;
		text-align: center; line-height: 80rpx; font-size: 50rpx;
		border-radius:3px;
		color:#181818;
	}
	/* 模拟的焦点 */
	.inb{
		background:#FFFFFF;
		box-shadow: 0px 9px 10px 4px rgba(0, 0, 0, 0.07);
		}
	.fours{width: 5rpx; height: 40rpx; margin: auto; background-color: #000000;
		margin-top: 20rpx;	animation: show .8s linear infinite;
	}
	/* 模拟焦点动画  更改animation以更改动画样式*/
	@keyframes show{
		from{background-color: #000000;}
		to{background-color: #ffffff;}
	}
	/* 隐藏的inpit容器 */
	.top_four{width: 80%; height: 100rpx; margin: auto; margin-top: -140rpx;}
	.input_show{width: 100%; height: 100rpx; border-bottom: 2rpx solid #000000; margin: auto;
		opacity: 0;background-color: #c6c6c6; 
	}
	/* 重新获取 */
	.top_five{width: 100%; height: 60rpx; margin-top: 180rpx; text-align: center; line-height: 60rpx; 
		color: #959595;
	}
	/* 定时器结束的字体样式 */
	.active{color: #22C572;}
	.button{width: 80%; height: 100rpx; line-height: 100rpx; background-color: #5473E8; border-radius: 60rpx;
		
	}
</style>