Vue 腾讯防水墙验证

1、

data() {

    return {

      requestId: '', // 验证码接口返回信息

      areaCode: 86, // 区号

      phoneNum: '', // 手机号

      phoneCode: '', // 验证码

      countTime: '', // 倒计时

      appId: '10000003', // appId

      wallId: '2025180241', // 腾讯防水墙id

      regionCode: 'CN' // 必填 地区代码

    }

  },

2、created() {

    this.initCaptcha()

  },

 3、 methods: {

    initCaptcha() {

      if (window.TencentCaptcha === undefined) {

        let script = document.createElement('script')

        let head = document.getElementsByTagName('head')[0]

        script.type = 'text/javascript'

        script.charset = 'UTF-8'

        script.src = 'https://ssl.captcha.qq.com/TCaptcha.js'

        head.appendChild(script)

      }

    },

   handleGetCode() {

      let result = this.phoneVerify()

      if (!result) return

      let params = {}

      let regionCode = this.regionCode // 区号

      let userMobile = this.phoneNum // 区号加手机号

      console.log('开启腾讯防水图')

      var captcha = new TencentCaptcha(this.wallId, async response => {

        console.log('response', response)

        if (response.ret === 0) {

          const verifyTicket = response.ticket // 腾讯验证码票据

          const verifyRandomStr = response.randstr // 腾讯验证码随机字符串

          params = {

            userMobile,

            regionCode,

            verifyTicket,

            verifyRandomStr

          }

          console.log(params)

          try {

            let res = await apis.sendAuthorizationCode(params)

            // console.log('res', res)

            if (res) {

              this.requestId = res.data

              this._countDown(60)

              this.$toast('验证码已发送')

            }

          } catch (e) {

            console.log(e)

          }

        } else {

          this.$toast('请先完成滑块验证')

        }

      })

      captcha.show()

    },

 

    phoneVerify() {

      if (this.phoneNum == '') {

        this.$toast('手机号不能为空!')

        return false

      }

      // const phreg = /^[1][3,4,5,6,7,8][0-9]{9}$/

      const phreg = /^[0-9]{5,13}$/

      if (!phreg.test(this.phoneNum)) {

        this.$toast('手机号填写不符合规则!')

        return false

      } else {

        return true

      }

    },

 

    _countDown(time) {

      let interval = null

      this.countTime = this._handleTime(time)

      console.log(this.countTime)

      interval = setInterval(() => {

        time -= 1

        this.countTime = this._handleTime(time)

        if (time <= 0) {

          this.countTime = null

          window.clearInterval(interval)

        }

      }, 1000)

      this.$once('hook:beforeDestroy', () => {

        window.clearInterval(interval)

      })

    },

 

    _handleTime(val) {

      val = val < 10 && val >= 0 ? '0' + val : val

      return val

    },}