vue 中添加手機驗證碼組件

寫在前面： 今天要實現的功能是在 完善個人信息頁面（vue）中添加手機驗證碼組件，當用戶點擊 手機選項時，彈出獲取驗證碼組件，完成驗證手機的功能：

這裡考慮到功能的復用，我把當前彈出手機驗證碼的操作放在了單獨的組件中：

 1 <template >
 2     <div>
 3         <div class="bind-phone-box">
 4             <div class="phone-title">綁定手機</div>
 5             <div class="phone-content" v-on:click.stop="fillContent">
 6                 <input v-model="phoneNum" class="phone-num" type="text" placeholder="請輸入手機號碼">
 7                 <div class="verify-box clearfix">
 8                     <input class="verify-num" v-model="verifyNum" type="text" placeholder="請輸入驗證碼"><input v-on:click="sendSmsCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}">
 9                 </div>
10             </div>
11             <div class="phone-submit clearfix">
12                 <input class="submit-cancel" type="button" value="取消">
13                 <input class="submit-confirm" v-on:click.stop="verificationCode" type="button" value="確定">
14             </div>
15         </div>
16     </div>
17 </template>

並把當前組件放在需要使用它的組件中，這裡需要註意的是，在控制 綁定手機組件的顯示和隱藏的時候，出現了一個小問題：點擊 “手機” 按鈕需要顯示當前組件，但什麼時候去隱藏當前的組件呢，我是這樣想的：

　　情況1：用戶已經輸完了手機號並通過了驗證，點擊"確定"按鈕的時候需要隱藏當前組件；

　　情況2：用戶沒有完成手機驗證，但又不想繼續，點擊當前手機的任意位置（除去“確定”按鈕、手機號輸入框和 驗證碼輸入框）都應該隱藏當前組件；

基於這兩種情況，我在父組件中給子組件添加了一個容器：

1     <li class="mui-table-view-cell phone-li">
2     　　<span v-on:click="verifyPhone" class="mui-navigate-right"><span>手機號<span class="necessary">*</span></span></span>
3    　　 <!-- 手機驗證碼 -->
4         <div class="shade" v-show="verifyShow" v-on:click="verifyPhone">
5              <!-- 手機驗證碼子組件 -->
6               <phoneVerify></phoneVerify>
7          </div>
8　　 </li>

通過控制 父div 的顯示狀態來控制子組件的顯示狀態，

1     methods:{
2        // 手機號驗證
3        verifyPhone(){
4           this.verifyShow=!this.verifyShow;
5        },
6    },

在驗證組件中的邏輯控制如下：

 1 <script>
 2     // 引入彈窗組件
 3     import { Toast } from 'mint-ui';
 4     export default {
 5         data(){
 6             return {
 7                 phoneNum:"", //手機號
 8                 verifyNum:"", //驗證碼
 9                 btnContent:"獲取驗證碼", //獲取驗證碼按鈕內文字
10                 time:0, //發送驗證碼間隔時間
11                 disabled:false //按鈕狀態
12             }
13         },
14         created(){
15 
16         },
17         methods:{
18             // 獲取驗證碼
19             sendSmsCode(){
20                 var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手機號正則驗證
21                 var phoneNum = this.phoneNum;
22                 if(!phoneNum){//未輸入手機號
23                     Toast("請輸入手機號碼");
24                     return;
25                 }
26                 if(!reg.test(phoneNum)){//手機號不合法
27                     Toast("您輸入的手機號碼不合法，請重新輸入");
28                 }
29                 this.time = 60;
30                 this.timer();
31 
32                 // 獲取驗證碼請求
33                 var url = 'http://bosstan.asuscomm.com/api/common/sendSmsCode';
34                 this.$http.post(url,{username:phoneNum},{emulateJSON:true}).then((response)=>{
35                     console.log(response.body);
36                 });
37 
38             },
39             timer(){
40                 if(this.time>0){
41                     this.time--;
42                     this.btnContent = this.time+"s後重新獲取";
43                     this.disabled = true;
44                     var timer = setTimeout(this.timer,1000);
45                 }else if(this.time == 0){
46                     this.btnContent = "獲取驗證碼";
47                     clearTimeout(timer);
48                     this.disabled = false;
49                 }
50             },
51             // 驗證驗證碼
52             verificationCode(){
53                 var phoneNum = this.phoneNum;//手機號
54                 var verifyNum = this.verifyNum;//驗證碼
55 
56                 var  url = 'http://bosstan.asuscomm.com/api/common/verificationCode';
57                 this.$http.post(url,{
58                     username:phoneNum,
59                     code:verifyNum
60                 },{
61                     emulateJSON:true
62                 }).then((response)=>{
63                     console.log(response.body);
64                 });
65             },
66             fillContent(){
67                 // console.log("fillContent");
68             }
69         }
70     }
71 </script>

其中，獲取驗證碼和驗證簡訊驗證碼的邏輯還沒有寫入