vue3点击获取验证码倒计时

<template>
	<view class="page">
	  <view class="group_2">
	    <text lines="1" class="text_2">欢迎登录</text>
		<input type="text" class="text_3" v-model="formData.phone" placeholder="请输入手机号码">
	    <view class="block_1"></view>
	    <view class="text-wrapper_1">
	      <!-- <text lines="1" class="text_4">请输入手机验证码</text> -->
		  <input type="text" class="text_4" v-model="formData.code" placeholder="请输入手机验证码">
	      <text v-if="countdown == 60" lines="1" class="text_5" @click="handleCountdown()">获取验证码</text>
		  <text v-else lines="1" class="text_5_1" >发送成功 {{countdown}}s</text>
	    </view>
	    <view class="block_2"></view>
	    <button @click="handleSubmit" class="button_1">
	      <text lines="1" class="text_6">登录</text>
	    </button>
	    <view class="block_3">
	      <text lines="1" class="text_7" @click="req">新用户注册</text>
	      <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG192c1e9c2f41ac893df2f64cadf28d57.png" class="icon_1"></image>
	    </view>
	    <text lines="1" class="text_8">其他登录方式</text>
	    <image src="https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG04565294df767a71f9bf12da31ef548a.png" class="icon_2"></image>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					phone: '',
					code: '',
					type: 1,
				},
				countdown: 60,
				timer: {},
			}
		},
		methods: {
			handleCountdown() {
				// this.countdown --
				if (!this.formData.phone) {
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
					return;
				}
				
				// getCode({type:2, phone:this.form.phone}).then(res =>{
				// 	this.$u.toast(res.data.msg);
				// });
				// //点击获取验证码
				this.timer = setInterval(() => {
					if (this.countdown > 1 ) {
						this.countdown --;
					} else {
						clearInterval(this.timer);
						this.timer = null;
						this.countdown = 60;
					}
				}, 1000);
			},
			handleGetCode() {
				
			},
			handleSubmit() {
				
			},
			register() {
				
			}
		}
	}
</script>

<style>
.page {
  background-color: rgba(255,255,255,1.000000);
  position: relative;
  width: 750rpx;
  height: 1624rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.group_1 {
  width: 750rpx;
  height: 88rpx;
  flex-direction: row;
  display: flex;
}
.text_1 {
  width: 52rpx;
  height: 42rpx;
  overflow-wrap: break-word;
  color: rgba(0,0,0,1.000000);
  font-size: 30rpx;
  letter-spacing: -1rpx;
  font-family: Source Han Sans CN-ExtraLight;
  font-weight: 250;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
  margin: 28rpx 0 0 70rpx;
}
.thumbnail_1 {
  width: 34rpx;
  height: 22rpx;
  margin: 36rpx 0 0 466rpx;
}
.thumbnail_2 {
  width: 32rpx;
  height: 22rpx;
  margin: 36rpx 0 0 10rpx;
}
.image_1 {
  width: 50rpx;
  height: 24rpx;
  margin: 36rpx 26rpx 0 10rpx;
}
.group_2 {
  width: 750rpx;
  height: 1538rpx;
  margin-bottom: 2rpx;
  display: flex;
  flex-direction: column;
}
.nav-bar_1 {
  height: 94rpx;
  margin-top: 28rpx;
  display: flex;
  flex-direction: column;
  width: 750rpx;
}
.label_1 {
  width: 48rpx;
  height: 48rpx;
  margin: 26rpx 0 0 30rpx;
}
.text_2 {
  width: 282rpx;
  height: 68rpx;
  overflow-wrap: break-word;
  color: rgba(38,36,36,1.000000);
  font-size: 48rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 68rpx;
  margin: 86rpx 0 0 56rpx;
}
.text_3 {
  width: 500rpx;
  height: 42rpx;
  overflow-wrap: break-word;
  color: rgba(38,36,36,1.000000);
  font-size: 30rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 42rpx;
  margin: 98rpx 0 0 60rpx;
}
.block_1 {
  background-color: rgba(240,240,240,1.000000);
  width: 630rpx;
  height: 2rpx;
  display: flex;
  flex-direction: column;
  margin: 24rpx 0 0 60rpx;
}
.text-wrapper_1 {
  width: 630rpx;
  height: 42rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 32rpx 0 0 60rpx;
}
.text_4 {
  width: 406rpx;
  height: 42rpx;
  overflow-wrap: break-word;
  color: rgba(38,36,36,1.000000);
  font-size: 30rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 42rpx;
}
.text_5 {
  width: 118rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: rgba(233,185,33,1.000000);
  font-size: 24rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 34rpx;
  margin-top: 6rpx;
}
.text_5_1 {
  width: 118rpx;
  height: 34rpx;
  overflow-wrap: break-word;
  color: #999999;
  font-size: 24rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 34rpx;
  margin-top: 6rpx;
}
.block_2 {
  background-color: rgba(240,240,240,1.000000);
  width: 630rpx;
  height: 2rpx;
  display: flex;
  flex-direction: column;
  margin: 36rpx 0 0 60rpx;
}
.button_1 {
  background-color: rgba(244,211,152,0.600000);
  border-radius: 44rpx;
  height: 90rpx;
  display: flex;
  flex-direction: column;
  width: 630rpx;
  margin: 50rpx 0 0 60rpx;
}
.text_6 {
  width: 60rpx;
  height: 42rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1.000000);
  font-size: 30rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
  margin: 24rpx 0 0 286rpx;
}
.block_3 {
  width: 172rpx;
  height: 40rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0 0 290rpx;
}
.text_7 {
  width: 138rpx;
  height: 40rpx;
  overflow-wrap: break-word;
  color: rgba(102,98,98,1.000000);
  font-size: 28rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 40rpx;
}
.icon_1 {
  width: 10rpx;
  height: 16rpx;
  margin-top: 14rpx;
}
.text_8 {
  width: 154rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(153,147,147,1.000000);
  font-size: 26rpx;
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 426rpx 0 0 300rpx;
}
.icon_2 {
  width: 80rpx;
  height: 80rpx;
  margin: 42rpx 0 160rpx 338rpx;
}
</style>