修改页面
This commit is contained in:
wangxiaowei
@ -1,117 +1,118 @@
|
||||
<template>
|
||||
<view @tap.stop="handleSendVerCode">
|
||||
<template v-if="timer">
|
||||
{{ `${time}s ${afterText}` }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ beforeText }}
|
||||
</template>
|
||||
</view>
|
||||
<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 {
|
||||
console.log('global.apiUrls=', global.apiUrls)
|
||||
let res = await this.$api.post(global.apiUrls.GetVerifyCode, {
|
||||
is_test: IS_DEV != 0 ? 1 : 0,
|
||||
mobile: phone,
|
||||
type: type,
|
||||
})
|
||||
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() {},
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user