表单基础功能实现(下)

<template>
	<view>
		<!-- 登录 -->
		<view class="body">
			<!-- 账号密码登录 -->
			<template v-if="!status">
				<input type="text" class="uni-input common-input" placeholder="昵称/手机号/邮箱" v-model="username">
				<view class="login-input-box">
					<input type="text" class="uni-input common-input" placeholder="请输入密码" v-model="password">
					<view class="forget u-f-ajc">忘记密码</view>
				</view>
			</template>

			<!-- 手机号登录 -->
			<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>

			<button class="user-set-btn " :loading="loading" :class="{'user-set-btn-disable':disabled}" type="primary" @tap="submit"
			 :disabled="disabled">登录</button>
		</view>
	</view>
</template>

<script>
		data() {
			return {
				status: false, // false代表账号密码登录 true代表验证码登录
				disabled: true,
				loading: false,
				username: '',
				password: '',
				phone: '',
				checknum: '',
				// 倒计时
				codetime: 0
			}
		},
		methods: {
			// 验证手机号码
			isPhone() {
				let mPattern = /^1[34578]\d{9}$/; 
				return mPattern.test(this.phone)
			}
			// 获取验证码
			getCheckNum() {
				if(this.codetime > 0) {
					return
				}
				// 验证手机号合法性
				if(!this.isPhone()) {
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				// 请求服务器 发送验证码
				// 发送成功 开启倒计时
				this.codetime = 60
				let timer = setInterval(() => {
					this.codetime--
					if(this.codetime < 1) {
						clearInterval(timer)
						this.codetime = 0
					}
				},1000)
			},
			// 提交登录
			submit() {
				// 账号密码登录
				if(!this.status) {
					return
				}
				// 验证码登录
				// 验证手机号合法性
				if(!this.isPhone()) {
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				console.log('提交登录')
			},
		}
	}
</script>