前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码
前端Vue自定义发送短信验证码弹框popup 实现剩余秒数计数 重发短信验证码，
阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下：
实现代码如下:
cc-codeDialog
使用方法
<!-- show:是否显示弹框 phone:手机号 autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认事件 -->
<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog" @confirmClick="confirmClick"></cc-codeDialog>
HTML代码实现部分
<template>
<view class="content">
<button @click="showCodeDialog" style="margin-top: 39px;">发送短信验证码 </button>
<!-- show:是否显示弹框 phone:手机号 autoCountdown:自动时间秒数 len:短信验证码长度 @closeClick:关闭弹框 @confirmClick:确认弹框 -->
<cc-codeDialog :show="show" phone="1900000000" :autoCountdown="true" :len="6" @closeClick="closeCodeDialog"
@confirmClick="confirmClick"></cc-codeDialog>
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showCodeDialog(item) {
this.show = true;
},
closeCodeDialog(item) {
this.show = false;
},
confirmClick(result) {
console.log("result = " + JSON.stringify(result));
this.show = false;
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
background-color: aliceblue;
height: 100vh;
}
</style>
组件实现代码
<template>
<view v-if="show" class="codedialog">
<view class="mask"></view>
<view class="dialog-view">
<text class="dialog-close" @click="closeDialog()"></text>
<view class="dialog-hd">
<view class="codedialog-maintitle">
<text>发送验证码</text>
</view>
<view v-if="phone!='' && phone !=null " class="codedialog-subtitle">
<text>已发送到手机号：{{phoneStr}}</text>
</view>
</view>
<view class="dialog-bd">
<view class="code-view">
<view v-for="(code,index) of codeAry" :key="index" class="code-item">{{code.val}}</view>
</view>
</view>
<view class="dialog-ft">
<view v-if="countdown==60" @click="resend" class="resend">重新发送</view>
<view v-if="countdown<60" class="countdown">{{countdown}}s</view>
</view>
<button style="margin-top: 20px; width: 88%;background-color: royalblue;color: white;"
@click="confirmClick">确定</button>
</view>
<view class="keyboard">
<view class="keyboard-line">
<view data-val="1" @click="bindKeyEvent" class="button-item">1</view>
<view data-val="2" @click="bindKeyEvent" class="button-item">2</view>
<view data-val="3" @click="bindKeyEvent" class="button-item">3</view>
</view>
<view class="keyboard-line">
<view data-val="4" @click="bindKeyEvent" class="button-item">4</view>
<view data-val="5" @click="bindKeyEvent" class="button-item">5</view>
<view data-val="6" @click="bindKeyEvent" class="button-item">6</view>
</view>
<view class="keyboard-line">
<view data-val="7" @click="bindKeyEvent" class="button-item">7</view>
<view data-val="8" @click="bindKeyEvent" class="button-item">8</view>
<view data-val="9" @click="bindKeyEvent" class="button-item">9</view>
</view>
<view class="keyboard-line">
<view data-val="clear" @click="bindKeyEvent" class="button-item">清空</view>
<view data-val="0" @click="bindKeyEvent" class="button-item">0</view>
<view data-val="delete" @click="bindKeyEvent" class="button-item">x</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
autoCountdown: {
type: Boolean,
default: true
},
phone: {
type: String,
default: ""
},
len: {
type: Number,
default: 6
}
},
data() {
return {
codeAry: [{
"val": ""
}, {
"val": ""
}, {
"val": ""
}, {
"val": ""
},
{
"val": ""
},
{
"val": ""
}
],
currItem: 0,
countdown: 60,
cTimer: null,
callResult: {
type: 0,
code: ''
},
suspend: false
};
},
computed: {
phoneStr() {
return this.phone.substr(0, 3) + "****" + this.phone.substr(7);
}
},
watch: {
show: function() {
console.log(this.show)
if (this.show) {
if (!this.suspend) {
this.init();
}
} else {
if (!this.suspend) {
this.clearTimer();
}
this.clearCode();
}
}
},
methods: {
init: function() {
var codeAry = [];
for (var i = 0; i < this.len; i++) {
codeAry.push({
val: ""
})
}
this.codeAry = codeAry;
this.currItem = 0;
if (this.autoCountdown) {
this.startTimer();
}
},
bindKeyEvent: function(e) {
var _this = this;
var val = e.currentTarget.dataset.val;
switch (val) {
case "clear":
_this.clearCode();
break;
case "delete":
_this.deleteCode();
break;
default:
_this.inputVal(val);
break;
}
},
inputVal: function(val) {
if (this.currItem < this.len) {
this.codeAry[this.currItem].val = val;
this.currItem++;
}
if (this.currItem == this.len) {
this.execuCall(1);
}
},
clearCode: function() {
this.init();
},
deleteCode: function() {
if (this.currItem > 0) {
this.codeAry[this.currItem - 1].val = "";
this.currItem--;
}
},
closeDialog: function() {
this.execuCall(-1);
this.$emit("closeClick");
},
startTimer: function() {
var _this = this;
if (_this.cTimer == null) {
_this.cTimer = setInterval(function() {
_this.countdown--;
if (_this.countdown == 0) {
_this.clearTimer();
}
}, 1000)
}
},
clearTimer: function() {
var _this = this;
clearInterval(_this.cTimer);
_this.cTimer = null;
_this.countdown = 60;
},
getCodeValue: function() {
var codeStr = "";
this.codeAry.forEach(function(code) {
codeStr += code.val;
})
return codeStr;
},
execuCall: function(type) {
this.callResult.type = type;
if (type == 1) {
this.callResult.code = this.getCodeValue();
this.clearTimer();
} else {
this.suspend = true;
this.callResult.code = '';
}
this.$emit("change", this.callResult);
},
resend: function() {
var _this = this;
_this.callResult.code = '';
_this.callResult.type = 0;
// _this.callResult.resendCall = function() {
// }
_this.init();
_this.$emit("change", _this.callResult);
},
confirmClick() {
console.log("result = " + JSON.stringify(this.callResult));
if (this.callResult.code.length < 6) {
uni.showModal({
title: '温馨提示',
content: '输入短信验证码长度有误'
})
} else {
this.$emit("confirmClick", this.callResult);
}
}
}
}
</script>
<style scoped>
.button-item:active {
background: #d4d4d4;
}
.button-item+.button-item {
border-left: 0.1px solid #d4d4d4;
}
.button-item {
flex: 1;
padding: 14px 0px;
}
.keyboard-line+.keyboard-line {
border-top: 0.1px solid #d4d4d4;
}
.keyboard-line {
display: flex;
}
.keyboard {
background: #fff;
position: absolute;
z-index: 999;
width: 100%;
left: 0;
bottom: 0;
font-size: 17px;
}
.dialog-close {
color: #999;
height: 28px;
width: 28px;
font-size: 19px;
top: 5px;
left: 5px;
position: absolute;
}
.dialog-close:before {
content: "\2716";
}
.countdown {
color: #666;
font-size: 16px;
}
.resend {
color: #007aff;
font-size: 16px;
}
.dialog-ft {
margin-top: 10px;
}
.code-view {
display: flex;
text-align: center;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 5px;
}
.code-item+.code-item {
margin-left: 5px;
}
.code-item {
flex: 1;
border-bottom: 1px solid #999;
padding-bottom: 2px;
height: 60upx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30upx;
}
.dialog-bd {
margin-top: 5px;
}
.codedialog-subtitle {
margin-top: 5px;
padding: 5px 0px;
font-size: 15px;
line-height: 1.4;
word-wrap: break-word;
word-break: break-all;
color: #999;
}
.dialog-view {
position: fixed;
z-index: 999;
width: 70%;
max-width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -120%);
background-color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
padding: 20px 10px;
}
.mask {
position: fixed;
z-index: 999;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
}
.codedialog {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
text-align: center;
}
</style>
