支付寶小程序 UI·獲取手機(jī)驗(yàn)證碼

掃碼體驗(yàn)

前提條件

使用獲取手機(jī)驗(yàn)證碼的前提條件如下：

• 已完成 開發(fā)者入駐 與 小程序創(chuàng)建 。
• 已下載并安裝 小程序開發(fā)者工具。

獲取模板代碼

下載 獲取手機(jī)驗(yàn)證碼 Demo.zip 文件，并解壓至本地。

頁面使用

page.axml

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

組件傳參說明

示例代碼

index.axml

<view class="atd-verify-wrapper {{className}}">
  <view class="atd-title-wrapper">
    <text>{{txt}}發(fā)送驗(yàn)證碼到以下手機(jī)        
    </text>
  </view>
  <view class="atd-tel-wrapper">
    <label for="mobile" class="atd-input-con">
      <view class="atd-title-field">手機(jī)號(hào)        
      </view>
      <el-input name="mobile" placeholder="請(qǐng)輸入正確的手機(jī)號(hào)" 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">驗(yàn)證碼                        
        </view>
        <el-input name="verifyCode" maxlength="{{verifyCodeLength}}" placeholder="請(qǐng)輸入驗(yàn)證碼" 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>請(qǐng)輸入正確的手機(jī)號(hào)                        
            </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: { // 組件傳參默認(rèn)值
    className: '', // 父級(jí)加入className
    verifyCodeLength: 6, // 驗(yàn)證碼長度
    mobile: '', // 父傳的手機(jī)號(hào)
    numberCode: true, // 是否是是數(shù)字鍵盤
    codeTime: 60, // 倒計(jì)時(shí)時(shí)間
    disabled: false, // 手機(jī)號(hào)是否可以編輯
    onSendCode: () => { }, // 點(diǎn)擊發(fā)送驗(yàn)證碼
    onCodeInput: () => { } // 輸入驗(yàn)證碼事件
  },
  data: {
    version: '1.0.0', // 組件版本信息
    btnName: '發(fā)送驗(yàn)證碼', // 按鈕顯示名稱
    canSend: false, // 是否可以發(fā)送驗(yàn)證嗎
    hasSend: false, // 是否已經(jīng)發(fā)送
    popoverShow: false, // 彈窗
    mobileValue: '', // 組件手機(jī)號(hào)的值
    mobileSafe: '', // 脫敏后的值
    txt: '', // 文本賦值
    mobileDisabled: false, // 手機(jī)號(hào)是否禁止輸入
    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: {
    /**
     * 點(diǎn)擊清除手機(jī)號(hào)
     * @method onMobileClear
     */
    onMobileClear() {
      this.setData({
        mobileValue: '',
        mobileSafe: '',
        canSend: false,
        hasSend: false,
        btnName: '發(fā)送驗(yàn)證碼'
      });
    },
    /**
     * 點(diǎn)擊獲取驗(yàn)證碼觸發(fā)
     * @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();
        }
      }
    },
    /**
     * 輸入驗(yàn)證碼觸發(fā)事件并傳給父
     * @method onCodeInput
     * @param {*} e
     */
    onCodeInput(e) {
      this.props.onCodeInput && this.props.onCodeInput(e);
    },
    /**
     * 正則校驗(yàn) 獲取值 改變
     * @method onMobileInput
     * @param {*} e
     */
    onMobileInput(e) {
      const {
        value
      } = e.detail;
      const result = this.verifyTel(value);
      if (result) { // 11位數(shù)字
        this.setData({
          mobileValue: value,
          canSend: true,
          btnName: '發(fā)送驗(yàn)證碼'
        });
      } else {
        this.setData({
          canSend: false,
          btnName: '發(fā)送驗(yàn)證碼'
        });
      }
    },
    /**
     * 彈窗去抖（3秒后彈窗強(qiáng)制消失）
     * @method showPopover
     */
    showPopover() { 
      this.setData({
        popoverShow: true
      }, () => {
        setTimeout(() => {
          this.setData({
            popoverShow: false
          });
        }, 3000);
      });
    },
    /**
     * 倒計(jì)時(shí)定時(shí)器
     * @method settimer
     */
    settimer() {
      let timer;
      let codeTime = this.props.codeTime;
      const {
        disabled
      } = this.props;
      clearInterval(timer);
      timer = setInterval(() => {
        codeTime--;
        this.setData({
          btnName: `倒計(jì)時(shí)${codeTime}秒`
        });
        if (codeTime === 0) {
          clearInterval(timer);
          const box = this.data.othervalue;
          this.setData({
            btnName: '重新發(fā)送',
            mobileDisabled: disabled ? true : false,
            canSend: true,
            txt: ''
          });
        }
      }, 1000);
    },
    /**
     * 檢驗(yàn)手機(jī)號(hào)是否正確
     * @method verifyTel
     * @param {*} number // 手機(jī)號(hào)
     */
    verifyTel(number) { // 手機(jī)號(hào)正則校驗(yàn)
      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"
  }
}