倒计时获取验证码

<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>