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

// components/send-code/send-code.js
let setInter = null;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    phone: {
      type: String,
      value: ' '
    },
    url: {
      type: String,
      value: ''
    },
    reset: {
      type: String,
    }
  },
  observers: {
    'reset': function() {
      this.setData({
        code: []
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    up: true,
    speed: 1000,
    countdown: '点击发送验证码',
    code: [],
    numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
    keybord: [],
    time: 60
  },
  ready() {
    // this.countdown();
    const arr = this.data.numbers;
    const nums = [];
    for (let i = 0; i < 4; i++) {
      nums.push(arr.slice(i * 3, (i + 1) * 3))
    }
    this.setData({
      keybord: nums,
      up: false
    })

  },
  detached() {
    clearInterval(setInter)
  },
  /**
   * 组件的方法列表
   */
  methods: {
    keyboard(e) {
      const {
        value
      } = e.currentTarget.dataset;
      const code = this.data.code;
      if (code.length < 6) {
        code.push(value);
        this.setData({
          code
        })
        if (code.length === 6) {
          this.triggerEvent('done', {
            code: this.data.code.join('')
          })
          // wx.navigateTo({
          //   url: this.data.url,
          //   success: () => {
          //     this.setData({
          //       code: []
          //     })
          //   }
          // })
        }
      }
    },
    del() {
      const code = this.data.code;
      code.pop();
      this.setData({
        code
      })
    },
    send() {
      const time = this.data.time;
      if (time === 60) {
        this.countdown();
        this.setData({
          up: false
        })
        this.triggerEvent('send')
      }
    },
    cancel() {
      this.setData({
        up: true
      })
    },
    showFlash(e) {
      this.setData({
        up: 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.speed)
    }
  }
})