FiDA_Front/src/views/login/register.vue

<template>
	<div class="register">
		<div class="left">
			<img class="bg" src="@/assets/images/login/left-bg.png" />
			<div class="logo">
				<img src="@/assets/images/logo.png" />
				<span>FiDA</span>
			</div>
		</div>
		<div class="right">
			<div class="top">
				<button class="back" @click="onBack">
					<svg-icon name="arrow-left" size="37" />
				</button>
			</div>
			<div class="box">
				<img src="@/assets/images/login/elephant.png" />
				<template v-if="!isVisible">
					<div class="title">
						<span>Register for</span>
						<img src="@/assets/images/logo-2.png" />
					</div>
					<div class="tip">A multi-agent canvas for rapid, trend driven design iteration.</div>
					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
						<el-form-item label="Name" prop="name">
							<el-input name="name" v-model="formData.name" placeholder="Enter your name" />
						</el-form-item>
						<el-form-item label="Password" prop="password">
							<el-input
								name="password"
								v-model="formData.password"
								placeholder="Enter your password"
								type="password"
								show-password
							/>
						</el-form-item>
						<el-form-item label="Email" prop="email">
							<el-input name="email" v-model="formData.email" placeholder="Enter your email" />
						</el-form-item>
						<el-form-item prop="privacy" class="privacy">
							<el-checkbox v-model="formData.privacy">
								I agree to the <span @click.prevent="onClickPrivacy">Terms, Policy</span> and Fees.
							</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button class="submit" type="primary" @click="onSubmit">Register</el-button>
						</el-form-item>
					</el-form>
					<div class="tip-2">
						Already have an account? <span @click.prevent="onClickLogin">Log in</span>
					</div>
				</template>
				<visible-code v-else :email="formData.email" @submit="onVerifyCode" />
				<other-login />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
	import OtherLogin from './other-login.vue'
	import VisibleCode from './visible-code.vue'
	const router = useRouter()
	const ruleForm = reactive({
		name: [{ validator: validateName, trigger: 'blur' }],
		email: [{ validator: validateEmail, trigger: 'blur' }],
		password: [{ validator: validatePass, trigger: 'blur' }],
		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
	})
	const isVisible = ref(false)
	const formData = reactive({
		name: '',
		email: '',
		password: '',
		privacy: false
	})
	const formRef = ref(null)
	const onBack = () => {
		if (isVisible.value) {
			isVisible.value = false
		} else {
			router.back()
		}
	}
	const onSubmit = () => {
		formRef.value?.validate?.((valid) => {
			if (valid) {
				console.log('submit!')
				isVisible.value = true
			} else {
				console.log('error submit!')
			}
		})
	}
	const onVerifyCode = (code: string) => {
		console.log(code)
		router.push({ name: 'nuic' })
	}
	const onClickPrivacy = () => {}
	const onClickLogin = () => {
		router.push({ name: 'login' })
	}
</script>

<style lang="less" scoped>
	@import './style.less';
</style>