120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<template>
|
||
<view @tap.stop="handleSendVerCode">
|
||
<template v-if="timer">
|
||
{{ `${time}s ${afterText}` }}
|
||
</template>
|
||
<template v-else>
|
||
{{ beforeText }}
|
||
</template>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import md5 from '@/common/md5.js'
|
||
import { validate } from '@/common/utils/index'
|
||
import { IS_DEV } from '@/common/config.js'
|
||
export default {
|
||
name: 'benben-send-verification-code',
|
||
props: {
|
||
phone: {
|
||
//发送短信的验证码
|
||
type: [String, Number],
|
||
default: '',
|
||
},
|
||
type: {
|
||
//发送短信类型
|
||
type: [String, Number],
|
||
default: 1,
|
||
},
|
||
afterText: {
|
||
//发送成功后展示的文本
|
||
type: [String, Number],
|
||
default: '后重新获取',
|
||
},
|
||
beforeText: {
|
||
//未发送时展示的文本
|
||
type: [String, Number],
|
||
default: '请发送验证码',
|
||
},
|
||
},
|
||
computed: {},
|
||
data() {
|
||
return {
|
||
time: 60, // 倒计时60S,@Number
|
||
timer: null, // 计时器,@Function
|
||
}
|
||
},
|
||
methods: {
|
||
async handleSendVerCode() {
|
||
// 从this里结构出来phone
|
||
let { type, phone } = this
|
||
// 验证手机号strat
|
||
if (!phone) {
|
||
this.$message.info(global.i18n.t('请输入手机号'))
|
||
return false
|
||
}
|
||
let noPhone = !validate(phone, 'phone')
|
||
let noemail = !validate(phone, 'email')
|
||
if (noPhone && noemail) {
|
||
return this.$message.info(global.i18n.t('请输入正确手机号'))
|
||
}
|
||
// 验证手机号 end
|
||
// 如果有倒计时，return false
|
||
if (this.flag) return false
|
||
this.flag = true
|
||
uni.showLoading({
|
||
title: '发送中...',
|
||
mask: true,
|
||
})
|
||
/**
|
||
* @desc 请求验证码接口
|
||
* @param {Object} {} - 参数
|
||
* @param {Boolean} {}.is_test - 是否是测试环境
|
||
* @param {String} {}.mobile - 手机号
|
||
* @param {String} {}.type - 类型
|
||
*/
|
||
try {
|
||
let res = await this.$api.post(global.apiUrls.GetVerifyCode, {
|
||
is_test: IS_DEV != 0 ? 1 : 0,
|
||
mobile: phone,
|
||
type: type,
|
||
salts: md5(phone + 'sjwj2025')
|
||
})
|
||
uni.hideLoading()
|
||
if (res.data.code != 1) {
|
||
this.$message.info(res.data.msg)
|
||
this.flag = false
|
||
return
|
||
}
|
||
// 清除倒计时,防抖作用
|
||
this.timer && clearInterval(this.timer)
|
||
this.timer = setInterval(() => {
|
||
if (this.time == 1) {
|
||
//倒计时结束就清楚这个倒计时
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
this.flag = false
|
||
this.time = 60 // 倒计时60s
|
||
return
|
||
}
|
||
this.time--
|
||
}, 1000)
|
||
// 向用户发送提示
|
||
if (IS_DEV != 0) {
|
||
this.$message.info(res.data.data.code)
|
||
} else {
|
||
this.$message.info(global.i18n.t('验证码发送成功'))
|
||
}
|
||
} catch (error) {
|
||
this.flag = false
|
||
uni.hideLoading()
|
||
// 接口错误打印错误
|
||
console.log(error)
|
||
}
|
||
},
|
||
},
|
||
created() { },
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|