手機APP---驗證碼
最近公司在開發手機APP，app避不可免的就是登錄了，emmmm 登錄驗證碼那必須的是有的，我們公司發給我們的圖片是醬紫的~~
這個要求大家應該都能看懂，做這個手機號啊，驗證碼啊，讀秒這些啊，這都emmmm分分鍾完成了？但是這個四位數的驗證碼整整折磨了我四天，啊！！！！ 惡龍咆哮~
其實這個實現 並不難，剛進入頁面的時候，獲取第一個input的焦點，最大長度為1，輸入完成后自動跳到下一個input框，最開始的時候，focus全部為false，跳到是變為true，然后刪除時，跳回到上一個input，真的是這樣說的很溜，但是這個真的折磨了我四天，想了我能想到的，結果這個方案還是廢棄掉了，（不包含我很菜的原因），我在解決這個問題的時候發現了一個很嚴重的問題，就是在uni-app上的時候使用他的input這個輸入框的時候，使用它的@input的時候，他會跟v-model emmmm，怎么說，，，，姑且說是沖突把，它獲取不到第一個輸入數據的內容，像我上面的有四個input，但是就只能獲取到他的三個數據，第一個數據是獲取不到的，input出來的值跟v-model的值是對不上的，后來，我解決了這個問題，我將input里面的。detail.value的值直接賦值給了model對應的字段，‘強行’讓他們一樣的，BUT！！！這個問題解決完之后，還有一系列，，，直接把我逼瘋emmmm，后來項目更新在急，就把這個先廢棄了，等有空了向大佬請教再去研究他，然后我換了另一種方法，手動搭建還原了一個鍵盤，通過鍵盤的點擊，獲取值，然后我在顯示在view中
具體如下：
說起這個樣式，不得不說自己今天剛剛認識的一個display:table ,才發現自己是真的菜啊，別人不是白說的，我以前用display僅僅限於 none，block，inline，flex。我今天看見display：table的時候震驚壞了，后來我上了W3C仔細看了看，他講的是將元素座位塊集表格來顯示，是一個類似於table的，表格前后還是帶有 換行符的，看一下具體代碼
html:
<view class="dialog-bd">
<view class="code-view">
<view v-for="(code,index) of codeAry" :v-key="index" class="code-item">{{code.val}}</view>
</view>
</view>
js：
codeAry: [{"val": ""}, {"val": ""}, {"val": ""}, {"val": ""}], //將四位驗證碼寫成數組遍歷
css樣式：
.code-view {
height: 150upx;
display: table;
text-align: center;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 5px;
}
.code-item {
display: table-cell;
border-bottom: 1px solid #999;
width: 136upx;
font-size: 90upx;
margin-left: 5px;
}
這樣就達到了一下的效果：
最下面的這段就是我手寫的一個鍵盤，通過點擊鍵盤來獲取鍵盤對應的值，然后顯示在上面
詳細代碼為：
<!-- 確認驗證碼 -->
<template>
<view class="register">
<view class="been-sent">驗證碼已發送至手機</view>
<view class="phone-number">{{loginForm.phone}}</view>
<view class="code">請輸入驗證碼</view>
<view class="dialog-bd">
<view class="code-view">
<view v-for="(code,index) of codeAry" :v-key="index" class="code-item">{{code.val}}</view>
</view>
</view>
<!-- 驗證碼判斷 -->
<view class="time" v-if="ashow">
<view class="date">{{num}}</view>
<view class="date-content">后 可重發驗證碼</view>
</view>
<view v-else>
<view class="again-content">還收不到驗證碼？請先確認手機是否安裝了短信攔截軟件或是欠費停機。均若不是，請嘗試以下方式</view>
<view class="again-send" @click="again">重發驗證碼</view>
</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>
import middle from "../../middleware/login.js"
export default {
data() {
return {
// 驗證碼四位數組
codeAry: [{
"val": ""
}, {
"val": ""
}, {
"val": ""
}, {
"val": ""
}],
// 個數
currItem: 0,
// 驗證碼
callResult: {
type:0,
code:null
},
// 倒數重發顯示切換
ashow:true,
// 驗證碼長度
len: '4',
// 發送參數
loginForm:{
isLogin: true,
codeType:2
},
// 獲取的類型 判斷為注冊用戶還是忘記密碼
type:0,
// 倒計時
num:60,
// 發送參數 判斷用戶是否存在
numlist:{
number:'',
},
}
},
onLoad(options) {
//接收上個頁面的type
this.type = options.type
if(this.type == 1){
this.loginForm.codeType = 3
}
// 頁面加載獲取上個頁面穿的手機號碼
this.loginForm.phone = options.tel
// 清除定時器
clearInterval(this.timer);
// 進入頁面后就開始60秒倒數
this.timer = setInterval(() => {
this.num--;
if(this.num == 0) {
this.ashow =false
clearInterval(this.timer)
}
},1000)
},
methods: {
/**
* @author 宮麗穎
* @date 2019-06-19
* @information 鍵盤點擊事件
*/
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;
}
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 拼接驗證碼
*/
getCodeValue:function(){
var codeStr = "";
this.codeAry.forEach(function(code){
codeStr+=code.val;
})
return codeStr;
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 清空內容
*/
init: function() {
var codeAry = [];
for (var i = 0; i < this.len; i++) {
codeAry.push({
val: ""
})
}
this.codeAry = codeAry;
this.currItem = 0;
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 清空內容事件
*/
clearCode: function() {
this.init();
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 回退x 事件
*/
deleteCode: function() {
if (this.currItem > 0) {
this.codeAry[this.currItem - 1].val = "";
this.currItem--;
}
},
/**
* @author 宮麗穎
* @date 2019-06-19
* @information 輸入內容
*/
inputVal: function(val) {
if (this.currItem < this.len) {
this.codeAry[this.currItem].val = val;
this.currItem++;
}
if (this.currItem == this.len) {
this.execuCall(1);
}
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 輸入完成后驗證驗證碼
*/
execuCall:function(type){
let _this = this
this.callResult.type = type;
if(type == 1){
this.callResult.code = this.getCodeValue();
this.loginForm.code = this.callResult.code
middle.codeLogin(this.loginForm).then(res => {
if(res.statusCode == 1000){
uni.setStorage({
key: "phone",
data: this.loginForm.phone
})
uni.showToast({
title: '驗證通過：'+ this.loginForm.code,
duration: 2000
});
setTimeout(() => {
uni.navigateTo({
url:`/pages/login/SetUpPassword?tel=${this.loginForm.phone}&type=${this.type}`
})
},500)
}
clearInterval(this.timer)
})
.catch(error =>{
uni.showModal({
title: '提示',
content: '驗證碼錯誤，請重新輸入',
showCancel:false,
confirmColor:'#00c16f',
success: function (res) {
_this.init()
}
});
})
}
},
/*
* @author 宮麗穎
* @date 2019-06-19
* @information 重新發送驗證碼
*/
again:function () {
this.ashow = true
this.num = 60;
this.timer = setInterval(() => {
this.num--;
if(this.num == 0) {
this.ashow =false
clearInterval(this.timer)
}
},1000)
// 將手機號賦值給number
this.numlist.number = this.loginForm.phone
// 訪問驗證碼接口
middle.getCode(this.numlist)
},
}
}
</script>
<style>
</style>
各位大佬，代碼僅供參考，若有不足，還請改正~~~