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
},}