前言:我是用uniapp写的,有些地方有使用uniapp语法。
源码:
<template>
<view>
<view class="captch">
<view class="title-h1">短信验证码</view>
<view class="title-h2">
<view>已向您尾号 {{ tail }} 的手机发送验证码</view>
<view class="count-down">
<text>{{ seconds }} 秒后重新发送验证码</text>
<button v-show="isSend" class="send-btn" @tap="getVerifyCode">获取验证码</button>
</view>
</view>
<!-- 验证码输入框 -->
<view class="inputing">
<input v-model="num1" class="auth-code" maxlength="1" @focus="noKeybord" />
<input v-model="num2" class="auth-code" maxlength="1" @focus="noKeybord" />
<input v-model="num3" class="auth-code" maxlength="1" @focus="noKeybord" />
<input v-model="num4" class="auth-code" maxlength="1" @focus="noKeybord" />
<input v-model="num5" class="auth-code" maxlength="1" @focus="noKeybord" />
<input v-model="num6" class="auth-code" maxlength="1" @focus="noKeybord" />
</view>
<view class="wrap"><button size="large" class="btn" @tap="onLogin">登录</button></view>
<!-- 数字键 -->
<view class="keyboard">
<view class="key" v-for="(number, index) in 9" :key="index">
<view class="btn" @tap="inputing(index + 1)">{{ index + 1 }}</view>
</view>
<view class="key"><view class="btn" @tap="a" style="visibility: hidden;">#</view></view>
<view class="key"><view class="btn" @tap="inputing(0)">0</view></view>
<view class="key"><view class="btn" @tap="delet">×</view></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
seconds: 180,
isSend: false,
showModal: false,
num1: '',
num2: '',
num3: '',
num4: '',
num5: '',
num6: '',
tail: '1111',
phone: ''
};
},
onLoad(option) {
this.countDown(); // 开始倒数计时
this.phone = option.phone;
// this.tail = ;
},
onUnload() {
clearInterval(timers); // 删除定时器
uni.removeStorageSync('count_down'); // 移除缓存里的定时器
},
methods: {
countDown() {
uni.setStorageSync('count_down', this.seconds);
var timers = setInterval(() => {
this.seconds--;
// console.log(this.seconds);
uni.setStorageSync('count_down', this.seconds);
if (this.seconds === 0) {
this.isSend = true;
clearInterval(timers);
this.seconds = 180;
uni.setStorageSync('count_down', this.seconds);
}
}, 1000);
},
noKeybord() {
//document.activeElement.blur(); // 禁止输入框对焦(禁止弹出原生键盘)
uni.hideKeyboard();
},
// 数字键盘
inputing(num) {
if (this.num1.length == '') {
this.num1 = num;
} else if (this.num2.length == '') {
this.num2 = num;
} else if (this.num3.length == '') {
this.num3 = num;
} else if (this.num4.length == '') {
this.num4 = num;
} else if (this.num5.length == '') {
this.num5 = num;
} else if (this.num6.length == '') {
this.num6 = num;
} else {
uni.showToast({
title: '输入已够6位!',
icon: 'none'
});
}
},
// 删除键
delet() {
if (this.num6.length == 1 && this.num5.length == 1 && this.num4.length == 1 && this.num3.length == 1 && this.num2.length == 1 && this.num1.length == 1) {
this.num6 = '';
} else if (this.num5.length == 1 && this.num4.length == 1 && this.num3.length == 1 && this.num2.length == 1 && this.num1.length == 1) {
this.num5 = '';
} else if (this.num4.length == 1 && this.num3.length == 1 && this.num2.length == 1 && this.num1.length == 1) {
this.num4 = '';
} else if (this.num3.length == 1 && this.num2.length == 1 && this.num1.length == 1) {
this.num3 = '';
} else if (this.num2.length == 1 && this.num1.length == 1) {
this.num2 = '';
} else if (this.num1.length == 1) {
this.num1 = '';
}
},
//重新获取验证码
getVerifyCode() {
this.isSend = false;
this.countDown();
uni.showToast({
title: '已发送验证码',
icon: 'none'
});
},
// 登录
onLogin() {
let params = this.num1 + this.num2 + this.num3 + this.num4 + this.num5 + this.num6;
if(params.length<6){
uni.showToast({
title: '验证码不足6位!',
icon: 'none'
});
}else{
console.log(params);
}
}
}
};
</script>
<style lang="scss" scoped>
uni-page-body {
background-color: #76d767;
}
.captch {
height: 100%;
background-color: #76d767;
background-image: url(/static/login-bj.png);
background-position: 100% 100%;
background-size: cover;
padding: 54rpx;
.title-h1 {
font-size: 28rpx;
line-height: 50rpx;
color: #ffffff;
width: 100%;
text-align: center;
margin-top: 12%;
font-weight: 600;
letter-spacing: 1px;
}
.title-h2 {
font-size: 24rpx;
color: #ffffff;
width: 480rpx;
text-align: left;
font-weight: 400;
line-height: 40rpx;
margin: 40rpx auto 0;
}
.count-down {
}
.send-btn {
width: 160rpx;
height: 44rpx;
background: #ffffff;
box-shadow: 1px 1px 1px 0px #3ebe2a;
border-radius: 22rpx;
font-size: 20rpx;
height: 40rpx;
line-height: 40rpx;
font-weight: 400;
color: #3ebe2a;
display: inline-block;
transform: translateY(4rpx);
float: right;
}
.inputing {
margin: 60rpx 0 80rpx;
color: #ffffff;
font-size: 32rpx;
display: flex;
justify-content: space-between;
.auth-code {
font-weight: 600;
border-bottom: 1px solid #f1f1f1;
margin: 0px 16rpx;
text-align: center;
padding-bottom: 17rpx;
height: 80rpx;
}
}
.keyboard {
margin-top: 60rpx;
padding-bottom: 60rpx;
display: grid;
grid-template-columns: 25% 25% 25%;
grid-auto-rows: 25% 25% 25% 25%;
justify-content: space-between;
.key {
text-align: center;
color: white;
margin-bottom: 50rpx;
.btn {
border-bottom: 1px solid white;
padding-bottom: 18rpx;
font-size: 40rpx;
font-weight: 500;
}
}
}
.wrap {
margin-top: 40px;
.btn {
background: #3ebe2a;
color: #ffffff;
font-size: 32rpx;
}
uni-button:after {
border: none;
}
}
}
</style>
重点部分: