front-end/mobile-code/src/pages/user/register.vue

<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">手机号</div>
					<input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell code-wrap" :hover="false">
					<div class="tui-title">验证码</div>
					<input v-model="form.code" placeholder-class="phcolor" class="tui-input" name="code" placeholder="请输入验证码" type="number" />
					<div class="tui-code" v-if="isSend">{{ countDown + 's' }}</div>
					<div class="tui-code" v-else @click="getCode">获取验证码</div>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">姓名</div>
					<input v-model="form.realName" placeholder-class="phcolor" class="tui-input" name="realName" placeholder="选填" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">生日</div>
					<picker mode="date" :value="form.birthday" @change="selTimeFn" class="tui-input">
						<input v-model="form.birthday" hidden placeholder-class="phcolor" class="tui-input" name="birthday" />
						<div v-if="form.birthday">{{ form.birthday }}</div>
						<div class="tui-placeholder" v-else>请选择生日</div>
					</picker>
					<!-- <input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" /> -->
				</tui-list-cell>
				<div class="btn-wrap">
					<button class="button-com red big" formType="submit">确认</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
// api
import { register } from '@/api/login'
import { sendSms } from '@/api/common'
export default {
	name: 'register',
	components: {
		TuiListCell
	},
	data() {
		return {
			form: {
				mobile: '',
				code: '',
				realName: '',
				birthday: 0
			},
			isSend: 0,
			countDown: 119,
			timer: null
		}
	},
	onLoad(option) {},
	methods: {
		getCode() {
			if (!this.form.mobile || !this.$util.checkMobile(this.form.mobile)) {
				this.$msg('请输入正确的手机号！')
				return false
			}
			this.isSend = 1
			sendSms({
				type: 1,
				mobile: this.form.mobile
			})
				.then(res => {
					this.beginCountDown()
					this.$msg('发送成功！')
				})
				.catch(() => {
					this.isSend = 0
					this.$msg('发送失败！')
				})
		},
		selTimeFn(e) {
			this.form.birthday = e.detail.value
		},
		confirmFn() {
			register(this.form).then(res => {
				this.$msg('注册成功！')
				setTimeout(() => {
					this.$util.pageTo('/pages/home/user')
				})
			})
		},
		// 倒计时
		beginCountDown() {
			this.countDown = 119
			this.timer = setInterval(() => {
				if (this.countDown === 0) {
					clearInterval(this.timer)
					this.isSend = 0
					return
				}
				this.countDown -= 1
			}, 1000)
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'mobile',
					rule: ['required'],
					msg: ['请输入手机号']
				},
				{
					name: 'code',
					rule: ['required'],
					msg: ['请输入验证码']
				},
				{
					name: 'realName',
					rule: ['required'],
					msg: ['请输入名字']
				},
				{
					name: 'birthday',
					rule: ['required'],
					msg: ['请选择生日']
				}
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				setTimeout(() => {
					this.confirmFn()
				})
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	// 公共
	.line-cell {
		.tui-title {
			width: 210px;
			color: $fontColor2;
		}
		.tui-input {
			width: calc(100% - 210px);
			font-size: 28px;
		}
		.tui-placeholder {
			color: #ccc;
		}
		.phcolor {
			color: #ccc;
		}
	}
	.btn-wrap {
		width: 90%;
		margin: 60px auto;
		.button-com {
			width: 100%;
			margin: 0 auto;
		}
	}
	.code-wrap {
		.tui-input {
			width: calc(100% - 410px);
			font-size: 28px;
		}
		.tui-code {
			width: 200px;
			text-align: center;
			border-left: 1px solid $borderColor;
			color: $mainColor;
		}
	}
</style>