<template>
<view class="content">
<view class="inps">
<input class="inp" type="text" v-model="verify" value="" placeholder="请输入验证码"/>
<button type="default" @click="yanzheng" v-show="show">获取验证码</button>
<button type="default" v-show="!show">已发送({{time}})</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time:60,
show:true,
}
},
onLoad() {
},
methods: {
timed(){
var that=this
var times=setInterval(function(){
that.time--;
if(that.time == 0){
clearInterval(times)
that.time = 60
that.show = true
}
},1000)
},
yanzheng(){
if(this.phone){
this.$myRequest({
url: `url`,
method:'post',
data:{
phone: this.phone,
type:'2',
}
}).then(data=>{
var message = data.data.message
var phone = this.phone
this.$myRequest({
url: `/app/sms/sendMessage?phone=${phone}&verifyCode=${message}`,
method:'post',
data:{
phone: this.phone,
type:'',
verifyCode:data.data.message
}
}).then(data=>{
console.log(data)
if(data.data.code == 200){
this.show = false
this.timed();
} else {
uni.showToast({
title: data.data.message,
icon: 'none', //如果要纯文本,不要icon,将值设为'none'
duration: 2000 //持续时间为 2秒
})
}
})
})
} else {
uni.showToast({
title: '请填写手机号',
icon: 'none', //如果要纯文本,不要icon,将值设为'none'
duration: 2000 //持续时间为 2秒
})
}
}
}
}
</script>
<style>
page{
width: 100%;
height: 100%;
}
</style>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
background: #F5F5F5;
position: relative;
overflow: auto;
box-sizing: border-box;
.rongli{
width: 240rpx;
height: 80rpx;
display: block;
margin: 0 auto;
margin-top: 15%;
}
.mycontent{
width: 100%;
height: 380rpx;
background: url(../../static/image/ju.png) no-repeat;
background-size: 100% 100%;
color: #FFFFFF;
padding: 20rpx;
}
.inps{
width: 100%;
height: 100rpx;
padding: 15rpx;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #C8C9CC;
button{
font-size: 26rpx;
width: 200rpx;
color: #FFFFFF;
background: #f02e4b;
border-radius: 50rpx;
}
.inp{
flex: 1;
}
}
.xiabut{
width: 90%;
height: 100rpx;
border-radius: 50rpx;
margin-top: 80rpx;
line-height: 100rpx;
background: #f02e4b;
color: #FFFFFF;
}
}
</style>
获取验证码倒计时60秒
最新推荐文章于 2024-07-31 09:47:05 发布