106 lines
2.4 KiB
Vue
106 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('倒计时结束后再发送');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
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>
|