本示例結(jié)合了uview的u-mask組件

一、包裝成驗(yàn)證碼組件

1.新建組件aliyun-verify組件

<template>
  <!-- 阿里云驗(yàn)證碼模態(tài)框 -->
  <u-mask :show="isShow" :mask-click-able="false" :z-index="999999">
    <view class="aliyun-verify-wrap">
      <view class="verify-show-wrap">
        <view class="verify-title">請點(diǎn)擊按鈕驗(yàn)證</view>
        <view id="ic"> </view>
        <view class="close-btn" @tap.stop="close">關(guān)閉</view>
      </view>
    </view>
  </u-mask>
  <!-- 阿里云驗(yàn)證碼模態(tài)框 -->
</template>

<script>
//加載js
let script = document.createElement('script')
script.src = 'https://g.alicdn.com/AWSC/AWSC/awsc.js'
document.body.appendChild(script)

export default {
  data() {
    return {
      //是否顯示
      isShow: false,
      //阿里云驗(yàn)證對象
      aliyunIC: null,
      //配置參數(shù)
      params: {
        //應(yīng)用類型標(biāo)識(shí)
        appkey: 'xxxxxx',
        //使用場景標(biāo)識(shí)
        scene: 'xxxxxxx'
      }
    }
  },
  methods: {
    //顯示
    show() {
      this.isShow = true
      this.initComp()
    },
    //關(guān)閉
    close() {
      this.isShow = false
    },
    //初始化方法
    initComp() {
      if (this.aliyunIC) {
        //調(diào)用重置方法
        this.aliyunIC.reset()
        return
      }
      const _this = this
      AWSC.use('ic', function (state, module) {
        //配置項(xiàng)
        let icOption = {
          // 應(yīng)用類型標(biāo)識(shí)。它和使用場景標(biāo)識(shí)（scene字段）一起決定了智能驗(yàn)證的業(yè)務(wù)場景與后端對應(yīng)使用的策略模型。您可以在阿里云驗(yàn)證碼控制臺(tái)的配置管理頁簽找到對應(yīng)的appkey字段值，請務(wù)必正確填寫。
          appkey: _this.params.appkey,
          // 使用場景標(biāo)識(shí)。它和應(yīng)用類型標(biāo)識(shí)（appkey字段）一起決定了智能驗(yàn)證的業(yè)務(wù)場景與后端對應(yīng)使用的策略模型。您可以在阿里云驗(yàn)證碼控制臺(tái)的配置管理頁簽找到對應(yīng)的scene值，請務(wù)必正確填寫。
          scene: _this.params.scene,
          // 聲明智能驗(yàn)證需要渲染的目標(biāo)元素ID。
          renderTo: 'ic',
          // 驗(yàn)證通過時(shí)會(huì)觸發(fā)該回調(diào)參數(shù)。您可以在該回調(diào)參數(shù)中將會(huì)話ID（sessionId）、簽名串（sig）、請求唯一標(biāo)識(shí)（token）字段記錄下來，隨業(yè)務(wù)請求一同發(fā)送至您的服務(wù)端調(diào)用驗(yàn)簽。
          success: function (data) {
            _this.$emit('success', data)
            //驗(yàn)證成功后關(guān)閉彈窗
            _this.close()
          },
          // 驗(yàn)證失敗時(shí)觸發(fā)該回調(diào)參數(shù)
          fail: function (failCode) {
            console.log(failCode)
          },
          // 驗(yàn)證碼加載異常時(shí)觸發(fā)該回調(diào)參數(shù)
          error: function (errorCode) {
            console.log(errorCode)
          }
        } // 智能驗(yàn)證的初始化參數(shù)對象
        // 初始化 調(diào)用module.init對智能驗(yàn)證進(jìn)行初始化
        _this.aliyunIC = module.init(icOption)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.aliyun-verify-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .verify-show-wrap {
    background: #ffffff;
    width: 680rpx;
    padding: 40rpx 0rpx;
    border-radius: 12rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .verify-title {
      margin-bottom: 40rpx;
      font-size: 40rpx;
      font-weight: 500;
    }
    .close-btn {
      width: 390rpx;
      height: 88rpx;
      background: linear-gradient(180deg, #00de76 0%, #3a9afa 100%);
      border-radius: 44rpx;
      color: #ffffff;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

二、使用

1.引入組件

//導(dǎo)入智能驗(yàn)證碼組件
import aliyunVerify from '@/components/verify-code/aliyun-verify'

components: {
    aliyunVerify,
    ...
},

2.模板中添加組件

<!-- 智能驗(yàn)證組件 -->
<aliyun-verify ref="aliyunVerify" @success="handleVerifySuccess" />
<!-- 智能驗(yàn)證組件 -->

3.驗(yàn)證成功回調(diào)方法

//驗(yàn)證成功回調(diào)
handleVerifySuccess(res) {
      //驗(yàn)證成功后返回sessionId、sig、token 一并提交給業(yè)務(wù)服務(wù)器
      //由業(yè)務(wù)服務(wù)器提交給阿里云服務(wù)器進(jìn)行二次驗(yàn)證
      console.log('======success=======')
      console.log(res)
      console.log('======success=======')
}

4.顯示組件

this.$refs.aliyunVerify.show()

三、效果

效果

四、參考文檔

阿里云驗(yàn)證碼