<template>
<div class="message">
<span class="acquire" @click="getCode" v-if="show">{{text}}</span>
<span class="acquire" v-else>{{text}} {{ count }} (s)</span>
</div>
</template>
<script>
import { SMS_SEND} from "@/api";
export default {
name: "Verify",
data() {
return {
/* -------- 验证码----- */
show: true,
count: "",
timer: null,
};
},
props: ['phone','countDown','text'],
methods: {
//点击获取验证码
async getCode() {
this.showKeyboard = true
let params = {
applyId: "",
content: "",
phoneNo: this.phone,
templeteNo: "",
};
await this.axios.post(SMS_SEND, params)
.then(({ data }) => {
if (data.success) {
const TIME_COUNT = this.countDown || 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 1 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
} else {
this.__toast(data.errorMsg || "核心数据异常");
}
});
},
},
};
</script>
<style lang='less' rel="stylesheet/less" scoped>
.message {
.acquire {
display: block;
margin: 20px auto;
text-align: center;
color: #24b13f;
}
}
</style>
需要引用的页面
<template>
<div class="Verify">
<message
:phone="phone"
:countDown="countDown"
text='获取短信验证码'
>
</message>
</div>
</template>
<script>
import message from './message'
export default {
name: "Verify",
components: {
message
},
data() {
phone:'13112345678',
countDown:120,
};
},
}
</script>
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/14070.html