表单基础功能实现(中)

发送验证码

<template>
	<view>
		<!-- 登录 -->
		<view class="body">
			<!-- 账号密码登录 -->

			<!-- 手机号登录 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input type="text" class="uni-input common-input phone-input" placeholder="手机号" v-model="phone">
				</view>
				<view class="login-input-box">
					<input type="text" class="uni-input common-input" placeholder="请输入验证码" v-model="checknum">
					<view class="forget u-f-ajc yanzhengma" @tap="getCheckNum">
						<view class="u-f-ajc">{{!codetime?'获取验证码':codetime + ' s'}}</view>
					</view> 
				</view>
			</template>
		</view>
	</view>
</template>

<script>
		data() {
			return {
				// 倒计时
				codetime: 0
			}
		},
		methods: {
			// 获取验证码
			getCheckNum() {
				if(this.codetime > 0) {
					return
				}
				// 请求服务器 发送验证码
				// 发送成功 开启倒计时
				this.codetime = 60
				let timer = setInterval(() => {
					this.codetime--
					if(this.codetime < 1) {
						clearInterval(timer)
						this.codetime = 0
					}
				},1000)
			},
		}
	}
</script>