views.wxml

views.js

Page({ data: { text: ‘獲取驗證碼’, //按鈕文字 currentTime: 61, //倒計時 disabled: false, //按鈕是否禁用 phone: ‘’ //獲取到的手機欄中的值

}, //獲取手機欄input中的值 phoneInput: function (e) { this.setData({ phone: e.detail.value }) }, //獲取驗證碼按鈕 bindButtonTap: function () { var that = this;

that.setData({
  disabled: true, 
  color: '#ccc',
})

var phone = that.data.phone;
var currentTime = that.data.currentTime //把手機號跟倒計時值變例成js值

var warn = null; //warn為當手機號為空或格式不正確時提示使用者的文字，預設為空

if (phone == '') {
  warn = "號碼不能為空";
} else if (phone.trim().length != 11 || ! /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/.test(phone)) {
  warn = "手機號格式不正確";
} else {
  //當手機號正確的時候提示使用者簡訊驗證碼已經發送
  wx.showToast({
    title: '簡訊驗證碼已傳送',
    icon: 'none',
    duration: 2000
  });

  //設定一分鐘的倒計時
  var interval = setInterval(function () {
    currentTime--; //每執行一次讓倒計時秒數減一
    that.setData({
      text: currentTime + 's', //按鈕文字變成倒計時對應秒數

    })
    //如果當秒數小於等於0時 停止計時器 且按鈕文字變成重新發送 且按鈕變成可用狀態 倒計時的秒數也要恢復成預設秒數 即讓獲取驗證碼的按鈕恢復到初始化狀態只改變按鈕文字
    if (currentTime <= 0) {
    ?clearInterval(interval)
      that.setData({
        text: '重新發送',
        currentTime: 61,
        disabled: false,
        color: '#59b550'
      })
    }
  }, 1000);

};

//判斷 當提示錯誤資訊文字不為空 即手機號輸入有問題時提示使用者錯誤資訊 並且提示完之後一定要讓按鈕為可用狀態 因為點選按鈕時設定了只要點選了按鈕就讓按鈕禁用的情況
if (warn != null) {
  wx.showModal({
    title: '提示',
    content: warn
  })

  that.setData({
    disabled: false,
    color: '#59b550'
  })
  return;

};
 

},

/**

• 生命週期函式–監聽頁面載入 */ onLoad: function (options) {

},

})

views.css

page{ font-size: 30rpx; }

.left{ float: left} .right{float: right}

.info_list { height: 103rpx; line-height: 103rpx; width: 80%; border-bottom: 1px solid #bcbcbd; padding-left: 24rpx; display: inline-block; font-size: 33rpx; margin-left: 10%; }

.shouji_info input { margin-top: 25rpx; }

.yanzheng_btn { width: 207rpx; background: #59b550; margin-right: 20rpx; height: 82rpx; margin-top: 12rpx; text-align: center; line-height: 82rpx; border-radius: 15rpx; color: #fff; font-size: 33rpx; padding: 0 10rpx; }