Mina/components/send-code/send-code.js

// components/send-code/send-code.js
let setInter = null;
import {
  imgServerUrl,
  captcha
} from '../../config/config.js'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 需要发送验证码的电话号码
    phone: {
      type: String,
      value: ' ',
      observer(data) {
        if (data) {
          const _data = data.toString();
          const format_phone = _data.substring(0, 3) + ' ' + _data.substring(3, 7) + ' ' + _data.substring(7, 11);
          this.setData({
            format_phone
          })
        }
      }
    },
    // 需要跳转的地址  暂未使用
    url: {
      type: String,
      value: ''
    },
    // 自动清除已输入文字
    reset: {
      type: String,
      observer() {
        this.setData({
          code: []
        })
      }
    },
    // 自动发送  主要用于绑定手机号码时 
    auto_send: {
      type: Boolean,
      value: false,
      observer(data) {
        if (data === true) {
          // this.toTCaptcha()
        }
      }
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    img: imgServerUrl + '/images/happyjob/login_xiaobai.png',
    hidden: true, //键盘是否抬起  默认是
    step: 1000, // 倒计时的步长
    countdown: '点击发送验证码', //点击的按钮文字
    code: [], // 验证码
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], // 键盘原始数组
    keybord: [], //键盘实际渲染数组
    time: 60, // 倒计时时长
    format_phone: '', //整理格式后的电话号码
    captcha
  },
  pageLifetimes: {
    show() {
      // const captchaResult = getApp().captchaResult;
      // getApp().captchaResult = null; // 验证码的票据为一次性票据，取完需要置空
      // if (captchaResult && captchaResult.ret === 0) {
      //   // 将验证码的结果返回至服务端校验
      //   const ticket = captchaResult.ticket;
      //   const randstr = captchaResult.randstr;
  
      // }
    },
  },
  ready() {
    // 初始化界面
    this.init();
  },
  detached() {
    clearInterval(setInter)
  },
  /**
   * 组件的方法列表
   */
  methods: {
    toTCaptcha: function () {
      // wx.navigateToMiniProgram({
      //   appId: 'wx5a3a7366fd07e119',
      //   path: '/pages/captcha/index',
      //   extraData: {
      //     appId: captcha //您申请的验证码的 appId
      //   }
      // })
      this.selectComponent('#captcha').show()
    },
    // 初始化方法  生成键盘布局数组
    init(status) {
      //  原始数组
      const arr = this.data.numbers;
      // 实际渲染数组
      let keybord = [];
      // 如果status = true  则打乱排序生成新的原始数组
      if (status) {
        for (let i = 0, len = arr.length * 2; i < len; i++) {
          var rdm = Math.floor(Math.random() * arr.length)
          arr.push(arr[rdm])
          arr.splice(rdm, 1)
        }
      }
      // 将原始数组切割成四个小数组  方便渲染
      for (let i = 0; i < 4; i++) {
        keybord.push(arr.slice(i * 3, (i + 1) * 3))
      }
      this.setData({
        keybord,
        hidden: false
      })
    },
    // 键盘事件  点击之后
    keyboard(e) {
      const {
        value
      } = e.currentTarget.dataset;
      const code = this.data.code;
      // push 进入验证码数组  
      if (code.length < 6) {
        code.push(value);
        this.setData({
          code
        })
        // 当数组长度达到的时候  触发完成方法
        if (code.length === 6) {
          this.triggerEvent('done', {
            code: this.data.code.join('')
          })
        }
      }
    },
    // 删除验证码
    del() {
      const code = this.data.code;
      code.pop();
      this.setData({
        code
      })
    },
    // 发送验证码
    send(data) {
      const time = this.data.time;
      if (time === 60) {
        this.countdown();
        this.setData({
          hidden: false
        })
        this.triggerEvent('send', data)
      }
    },
    // 取消按键   点击键盘收起
    cancel() {
      this.setData({
        hidden: true
      })
    },
    // 键盘唤醒时  添加标签闪烁效果
    showFlash(e) {
      this.setData({
        hidden: false
      })
    },
    // 倒计时
    countdown() {
      let _time = this.data.time;
      _time--;
      this.setData({
        time: _time,
        countdown: `${_time}s后重新发送`
      })
      setInter = setInterval(() => {
        let _time = this.data.time;
        if (_time > 1) {
          _time--;
          this.setData({
            time: _time,
            countdown: `${_time}s后重新发送`
          })
        } else {
          clearInterval(setInter);
          this.setData({
            time: 60,
            countdown: `重新发送验证码`
          }, _ => {
            setInter = null;
          })
        }
      }, this.data.step)
    },
    // 验证码验证结果回调
    handlerVerify: function (ev) {
      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
      if (ev.detail.ret === 0) {
        // 验证成功
        console.log('randstr:', ev.detail.randstr)
        console.log('ticket:', ev.detail.ticket)
        this.send({
          ticket: ev.detail.ticket,
          randstr: ev.detail.randstr
        })
      } else {
        // 验证失败
        // 请不要在验证失败中调用refresh，验证码内部会进行相应处理
      }
    },
    // 验证码准备就绪
    handlerReady: function () {
      console.log('验证码准备就绪')
    },
    // 验证码弹框准备关闭
    handlerClose: function (ev) {
      // 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail,ret为0是验证完成后自动关闭验证码弹窗，ret为2是用户主动点击了关闭按钮关闭验证码弹窗
      if (ev && ev.detail.ret && ev.detail.ret === 2) {
        console.log('点击了关闭按钮，验证码弹框准备关闭');
      } else {
        console.log('验证完成，验证码弹框准备关闭');
      }
    },
    // 验证码出错
    handlerError: function (ev) {
      console.log(ev.detail.errMsg)
      wx.showModal({
        title: '提示',
        content: ev.detail.errMsg,
        showCancel: false
      })
    },
  }
})