小程序发送短信验证码组件的封装（演示demo）

最终效果图：

image.png

wxml:

view class="wx-popup" hidden="{{flag}}">
  <form name="frm" bindsubmit="_success" bindreset="formReset">

    <view class='popup-container'>
      <view class="wx-popup-title">提示</view>
      <view class="wx-popup-con">{{content}}</view>


      <view class='class-phone' style="margin-bottom: 30rpx;">
        <!-- 验证码输入框 -->
        <input placeholder-class="phcolor" class='class-input-code' bindinput="" name="code" placeholder="验证码" maxlength="6" type="number"></input>
        <!-- 发送验证码按钮 -->
        <button class="class-send-code" disabled='{{disabled}}' bindtap="_bindGetCode">
          {{time}}
        </button>
      </view>


      <view class="wx-popup-btn">
        <view style="flex:1">
          <button formType="submit"
          style='border:2rpx solid #42a2eb;color:#42a2eb;background: white;height: 65rpx;line-height: 65rpx;width: 150rpx;font-size: 30rpx;'>确定</button>
        </view>
        <view style="flex:1">
          <button bindtap='_error' 
          style='border:2rpx solid #42a2eb;color:#42a2eb;background: white;height: 65rpx;line-height: 65rpx;width: 150rpx;font-size: 30rpx;'>取消</button>

        </view>


      </view>
    </view>
  </form>

</view>

js代码

Component({
  options: {
    multipleSlots: true  // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {

    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },


  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
    time: '获取验证码', //倒计时 
    currentTime: 60, //60秒
    interval: null //倒计时函数//

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function() {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    // 启动发送验证码倒计时的计时器
    getCode: function(options) {
      var that = this;
      var currentTime = that.data.currentTime
      this.data.interval = setInterval(function() {
        currentTime--;
        that.setData({
          time: currentTime + '秒'
        })
        if (currentTime <= 0) {
          clearInterval(that.data.interval)
          that.setData({
            time: '重新发送',
            currentTime: 60,
            disabled: false
          })
        }
      }, 1000)
    },
    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */
    _error () {
      //触发取消回调
      this.triggerEvent("error")
    },
    _success (e) {

      var code = e.detail.value.code;
      if (code.length == 0) {
        wx.showToast({
          title: '请先填写验证码！',
          icon: 'none',
          duration: 2000
        })
        return;
      }
      let detail = {
        code, 
       
      };
      let option = {};
      //触发成功回调
      this.triggerEvent("success", detail, option);


    },

    _bindGetCode: function() {

      this.getCode();
      this.setData({
        disabled: true
      })
      this.triggerEvent("sendcode");

    }
  }
})

组件的使用：

页面的wxml：

<popup id='popup' content='您在医院检查预留的手机号为{{reportMobile}}，若手机号已变更，请前往医院修改。' bind:error="_no" bind:success="_yes" bind:sendcode="_bindGetCode">
</popup>

页面的js：

_no() {
    this.popup.hidePopup();

  },
  _yes(e) {
    console.log(e)
    var code = e.detail.code; //短信验证码
    this.data.reportMobileCode = code;
    this.popup.hidePopup();

  },
  _bindGetCode() {
    console.log("_bindGetCode");


  },

有问题的，欢迎下方留言交流