登陆注册页面

src/views/login/register.vue

@@ -0,0 +1,110 @@
+<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: 'home' })
+	}
+	const onClickPrivacy = () => {}
+	const onClickLogin = () => {
+		router.push({ name: 'login' })
+	}
+</script>
+
+<style lang="less" scoped>
+	@import './style.less';
+</style>