<template>
<view>
<view class="inxasputjsiconaaa" v-if="isfokszc">
<uni-icons type="chatbubble" class="isnf" size="20"></uni-icons>
<view class="inputsajaaaax">
<input type="text" class="jksnagasx" v-model="data.code" placeholder="请输入验证码" style="color: #4c4c4c;" placeholder-style="font-size: 30rpx;" />
</view>
<button class="yzmmasr" :class="iscodae ? 'asf' : ''" :disabled="iscodae" @click="codeasac()">
{{codevalus}} {{iscodae ? tiem : ''}}
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
codevalus: '获取验证码',
iscodae: false,
tiem: 60,
data: {
code: ''
}
}
},
methods: {
loginwjmm() {
uni.navigateTo({
url:'/pages/my/deitpasswoder/deitpasswoder'
})
},
codeasac() {
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.data.value))) {
uni.showToast({
title: '手机号填写有误',
icon: 'none'
})
return
}
// 验证码请求
// this.http.post('yzm接口', {
// phone: this.data.value
// }).then(res => {
// // console.log(res)
// if (res.data.code != 200) {
// uni.showToast({
// title: res.data.msg,
// icon: 'none'
// })
// return
// }else {
// uni.showToast({
// title: res.data.msg,
// icon: 'none'
// })
// }
// })
var that = this
this.iscodae = true
if (this.codevalus == '重新发送') {
that.tiem = 60
}
this.codevalus = '重新发送'
var set = setInterval(function() {
that.tiem = that.tiem - 1
}, 1000);
setTimeout(function() {
that.iscodae = false
that.tiem = ''
clearInterval(set);
}, 60000);
},
kuaishuzc() {
this.isfokszc = !this.isfokszc
}
}
}
</script>
<style>
.asf {
color: #ccc !important;
}
.yzmmasr:after {
border: 0 !important;
}
.yzmmasr{
padding: 0;
border-radius: 0 !important;
width: 29%;
/* border: 1rpx solid #ccc; */
font-size: 28rpx;
color: #d8a854;
margin-left: 1%;
z-index: 99;
}
.wzcjmima{
font-size: 30rpx;
color: #d8a854;
}
.weijmim{
font-size: 30rpx;
color: #808080;
}
.paswoerdwjmm{
width: 70%;
margin: auto;
display: flex;
justify-content: space-around;
padding-top: 50rpx;
}
.saxsfbuton{
margin: auto;
width: 70%;
}
.denglubutton{
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 35rpx;
color: #fff;
background-color: #d8a854;
margin-top: 70rpx;
border-radius: 40rpx;
}
.isnf{
width: 20%;
line-height: 100rpx;
}
.jksnagasx{
width: 100%;
height: 100%;
line-height: 100rpx;
}
.inputsajaaaax{
width: 50%;
line-height: 100rpx;
}
.inputsajx{
width: 80%;
line-height: 100rpx;
}
.imiczhanghao{
width: 70%;
margin: auto;
}
.inxasputjsiconaaa{
height: 100rpx;
line-height: 100rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #ebebeb;
}
.inxasputjsicon{
height: 100rpx;
line-height: 100rpx;
margin-top: 50rpx;
display: flex;
align-items: center;
border-bottom: 2rpx solid #ebebeb;
}
</style>
倒计时获取验证码
最新推荐文章于 2024-05-22 10:11:16 发布