107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
Vue
<!-- 短信验证码
|
||
父组件 只需要调用 传 1、手机号 2、类型
|
||
-->
|
||
<template>
|
||
<view class="wrap">
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
|
||
<view class="view_getcode" @tap="getCode">{{tips}}</view>
|
||
<!-- 提示框 -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
smslog_type: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
member_mobile: {
|
||
type: String,
|
||
required: true
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
tips: '',
|
||
// refCode: null,
|
||
seconds: 60,
|
||
}
|
||
},
|
||
onReady() {
|
||
// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
|
||
// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
|
||
// this.refCode = this.$refs.uCode;
|
||
},
|
||
methods: {
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
this.$emit('tochange');
|
||
let member_mobile = this.member_mobile;
|
||
// 校验手机号
|
||
let type_phone = this.$u.test.mobile(member_mobile)
|
||
console.log(member_mobile)
|
||
console.log(this.smslog_type)
|
||
// 判断是否有手机号为空
|
||
if (type_phone == false) {
|
||
this.$refs.uToast.show({
|
||
title: '手机号格式不正确',
|
||
type: 'error'
|
||
})
|
||
} else {
|
||
// 验证码倒计时
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
} else {
|
||
// this.$u.toast('倒计时结束后再发送');
|
||
console.log("倒计时结束后再发送");
|
||
}
|
||
}
|
||
|
||
},
|
||
end() {
|
||
this.$u.toast('倒计时结束');
|
||
},
|
||
start() {
|
||
// this.$u.toast('倒计时开始');
|
||
console.log(this.smslog_type)
|
||
// 倒计时请求
|
||
this.$u.api.sendSmsCode({
|
||
member_mobile: this.member_mobile,
|
||
smslog_type: this.smslog_type
|
||
}).then((res) => {
|
||
console.log(res)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.labales {
|
||
position: relative;
|
||
}
|
||
|
||
.wrap {
|
||
position: absolute;
|
||
top: -18rpx;
|
||
right: 20rpx;
|
||
color: #ff780f;
|
||
}
|
||
</style>
|