支付宝小程序 UI·获取手机验证码

扫码体验

获取手机验证码二维码.png

前提条件

使用获取手机验证码的前提条件如下：

已完成开发者入驻与小程序创建。
已下载并安装小程序开发者工具。

获取模板代码

下载获取手机验证码 Demo.zip 文件，并解压至本地。

页面使用

page.axml

<mobile-code 
    onSendCode="onSendCode"
    onCodeInput="onCodeInput"/>

组件传参说明

字段名	简介	类型	默认值
mobile	手机号	String	-
verifyCodeLength	验证码长度	Number	6
numberCode	验证码是否只能输入数字	Boolen	true
codeTime	验证码倒计时	Number	60
onSendCode	点击发送\|重新发送验证码时触发onSendCode(Object)Object: { mobile }	EventHandle	-
disabled	手机号是否可以编辑	Boolen	false
onCodeInput	验证码输入时事件onCodeInput(e)	EventHandle	-
className	自定义组件最外级class	String	-

示例代码

index.axml

<view class="atd-verify-wrapper {{className}}">
  <view class="atd-title-wrapper">
    <text>{{txt}}发送验证码到以下手机        
    </text>
  </view>
  <view class="atd-tel-wrapper">
    <label for="mobile" class="atd-input-con">
      <view class="atd-title-field">手机号        
      </view>
      <el-input name="mobile" placeholder="请输入正确的手机号" type="number" maxlength="{{11}}" disabled="{{mobileDisabled}}" onInput="onMobileInput"  clear="{{true}}" value="{{hasSend ? mobileSafe : mobileValue}}" onClear="onMobileClear" />
    </label>
    <view class="send-code-wrapper">
      <label for="verifyCode" class="atd-input-con">
        <view class="atd-title-field">验证码                        
        </view>
        <el-input name="verifyCode" maxlength="{{verifyCodeLength}}" placeholder="请输入验证码" type="{{numberCode ? 'number': 'text'}}" onInput="onCodeInput"  value="{{verifyCode}}" />
      </label>
      <popover position="{{position}}" show="{{popoverShow}}" showMask="{{false}}">
        <view onTap="onSendCode" class="msg {{canSend ? 'active':''}}">{{btnName}}                       
        </view>
        <view slot="items">
          <popover-item className="popover">
            <text>请输入正确的手机号                        
            </text>
          </popover-item>
        </view>
      </popover>
    </view>
  </view>
</view>

index.acss

.atd-verify-wrapper {
  width: 100%;
  padding: 32rpx 0;
}


.atd-verify-wrapper .atd-title-wrapper {
  padding-top: 32rpx;
  padding-bottom: 16rpx;
  padding-left: 32rpx;
  font-size: 24rpx;
  color: #999;
}


.atd-verify-wrapper .atd-tel-wrapper {
  background-color: #fff;
  padding-left: 32rpx;
}


.atd-verify-wrapper .atd-tel-wrapper .atd-input-con .atd-input-box {
  padding-left: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}


.atd-tel-wrapper .atd-input-con {
  border-bottom: 1rpx solid #f5f5f5;
}


.atd-verify-wrapper .atd-tel-wrapper .atd-input-con .atd-title-field {
  color: rgb(51, 51, 51);
}


.atd-verify-wrapper .am-input-item {
  flex: 1;
  box-sizing: border-box;
}


.atd-verify-wrapper .send-code-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
}


.atd-verify-wrapper .send-code-wrapper .atd-input-con {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: none;
}


.atd-verify-wrapper .send-code-wrapper .atd-input-box {
  padding-left: 8rpx;
}


.atd-verify-wrapper .send-code-wrapper .msg {
  height: 48rpx;
  line-height: 48rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
  text-align: center;
  font-size: 34rpx;
  color: #999;
  border-left: 1rpx solid #ddd;
}


.atd-verify-wrapper .send-code-wrapper .msg.active {
  color: #108EE9;
}


.atd-verify-wrapper .atd-input-con .atd-title-field {
  align-self: center;
  color: rgb(51, 51, 51);
}


.atd-input-con {
  flex: 1;
  height: 100%;
  display: flex;
  font-size: 34rpx;
}


.atd-verify-wrapper .popover {
  width: 300rpx;
}


.atd-input-box {
  flex: 1;
  box-sizing: border-box;
}


.atd-verify-wrapper  .am-input-item {
  background: none !important
}


.atd-verify-wrapper  .am-input-line {
  position: static !important
}


.atd-verify-wrapper input {
  padding: 0px !important
}

index.js

Component({
  props: { // 组件传参默认值
    className: '', // 父级加入className
    verifyCodeLength: 6, // 验证码长度
    mobile: '', // 父传的手机号
    numberCode: true, // 是否是是数字键盘
    codeTime: 60, // 倒计时时间
    disabled: false, // 手机号是否可以编辑
    onSendCode: () => { }, // 点击发送验证码
    onCodeInput: () => { } // 输入验证码事件
  },
  data: {
    version: '1.0.0', // 组件版本信息
    btnName: '发送验证码', // 按钮显示名称
    canSend: false, // 是否可以发送验证吗
    hasSend: false, // 是否已经发送
    popoverShow: false, // 弹窗
    mobileValue: '', // 组件手机号的值
    mobileSafe: '', // 脱敏后的值
    txt: '', // 文本赋值
    mobileDisabled: false, // 手机号是否禁止输入
    position: 'bottomRight' // 弹窗位置
  },
  didMount() {
    const {
      mobile,
      disabled
    } = this.props;
    let flag = mobile && this.verifyTel(mobile);
    this.setData({
      mobileValue: mobile,
      mobileDisabled: disabled,
      canSend: flag
    });
    console.log('载入mobileCode组件:' + this.data.version);
  },
  didUpdate(prevProps) {
    const {
      mobile,
      disabled
    } = prevProps;
    const {
      mobileValue
    } = this.data;


    if (mobile !== this.props.mobile && this.props.mobile !== mobileValue) {
      let flag = this.props.mobile && this.verifyTel(this.props.mobile);
      this.setData({
        mobileValue: this.props.mobile,
        canSend: flag
      });
    }
    if (disabled !== this.props.disabled) {
      this.setData({
        mobileDisabled: this.props.disabled
      });
    }
  },
  methods: {
    /**
     * 点击清除手机号
     * @method onMobileClear
     */
    onMobileClear() {
      this.setData({
        mobileValue: '',
        mobileSafe: '',
        canSend: false,
        hasSend: false,
        btnName: '发送验证码'
      });
    },
    /**
     * 点击获取验证码触发
     * @method onSendCode
     */
    onSendCode() {
      if (this.data.canSend) {
        const {
          mobileValue
        } = this.data;
        this.settimer();
        const pat = /(\d{3})\d*(\d{4})/;
        let str = mobileValue.replace(pat, '$1***$2');
        this.props.onSendCode({
          mobile: mobileValue
        });
        this.setData({
          mobileSafe: str,
          hasSend: true,
          txt: '已',
          mobileDisabled: true,
          canSend: false
        });
      } else {
        const {
          popoverShow,
          hasSend
        } = this.data;
        if (!hasSend && !popoverShow) {
          this.showPopover();
        }
      }
    },
    /**
     * 输入验证码触发事件并传给父
     * @method onCodeInput
     * @param {*} e
     */
    onCodeInput(e) {
      this.props.onCodeInput && this.props.onCodeInput(e);
    },
    /**
     * 正则校验 获取值 改变
     * @method onMobileInput
     * @param {*} e
     */
    onMobileInput(e) {
      const {
        value
      } = e.detail;
      const result = this.verifyTel(value);
      if (result) { // 11位数字
        this.setData({
          mobileValue: value,
          canSend: true,
          btnName: '发送验证码'
        });
      } else {
        this.setData({
          canSend: false,
          btnName: '发送验证码'
        });
      }
    },
    /**
     * 弹窗去抖（3秒后弹窗强制消失）
     * @method showPopover
     */
    showPopover() { 
      this.setData({
        popoverShow: true
      }, () => {
        setTimeout(() => {
          this.setData({
            popoverShow: false
          });
        }, 3000);
      });
    },
    /**
     * 倒计时定时器
     * @method settimer
     */
    settimer() {
      let timer;
      let codeTime = this.props.codeTime;
      const {
        disabled
      } = this.props;
      clearInterval(timer);
      timer = setInterval(() => {
        codeTime--;
        this.setData({
          btnName: `倒计时${codeTime}秒`
        });
        if (codeTime === 0) {
          clearInterval(timer);
          const box = this.data.othervalue;
          this.setData({
            btnName: '重新发送',
            mobileDisabled: disabled ? true : false,
            canSend: true,
            txt: ''
          });
        }
      }, 1000);
    },
    /**
     * 检验手机号是否正确
     * @method verifyTel
     * @param {*} number // 手机号
     */
    verifyTel(number) { // 手机号正则校验
      const reg = /^1[3|4|5|7|8|9]\d{9}$/;
      return reg.test(number);
    }
  }
});```
> index.json


```javascript
{
  "component": true,
  "usingComponents": {
    "popover": "mini-ali-ui/es/popover/index",
    "popover-item": "mini-ali-ui/es/popover/popover-item/index",
    "el-input": "mini-ali-ui/es/input-item/index"
  }
}