FiDA_Front/src/views/login/register.vue

<template>
	<div class="register">
		<div class="left">
			<img class="bg" src="@/assets/images/login/left-bg.png" />
			<img class="logo" src="@/assets/images/logo-1.png" />
		</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" v-html="$t('Login.signUpFor')"></div>
					<div class="tip">{{ $t('Login.registerTip') }}</div>
					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
						<el-form-item :label="$t('Login.name')" prop="name">
							<el-input
								name="name"
								v-model="formData.name"
								:placeholder="$t('Login.enterName')"
							/>
						</el-form-item>
						<el-form-item :label="$t('Login.password')" prop="password">
							<password-tip :value="formData.password" v-show="showPasswordTip" />
							<el-input
								name="password"
								v-model="formData.password"
								:placeholder="$t('Login.enterPassword')"
								type="password"
								show-password
								@blur="showPasswordTip = false"
								@focus="showPasswordTip = true"
							/>
						</el-form-item>
						<el-form-item :label="$t('Login.email')" prop="email">
							<el-input
								name="email"
								v-model="formData.email"
								:placeholder="$t('Login.enterEmail')"
							/>
						</el-form-item>
						<el-form-item prop="privacy" class="privacy">
							<el-checkbox v-model="formData.privacy">
								<div v-html="$t('Login.agreeTermsPolicy')"></div>
							</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button class="submit" type="primary" @click="onSubmit">{{
								$t('Login.register')
							}}</el-button>
						</el-form-item>
					</el-form>
					<div class="tip-2" v-html="$t('Login.havenAccountToLogin')"></div>
				</template>
				<visible-code
					v-show="isVisible"
					type="REGISTER"
					ref="visibleCodeRef"
					:email="formData.email"
					@submit="onVerifyCode"
				/>
				<other-login />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import md5 from 'md5'
	import { Register } from '@/api/user'
	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'
	import PasswordTip from './password-tip.vue'
	import { useUserInfoStore } from '@/stores'
	const userInfoStore = useUserInfoStore()
	const router = useRouter()
	const ruleForm = reactive({
		name: [{ validator: validateName, trigger: 'change' }],
		email: [{ validator: validateEmail, trigger: 'change' }],
		password: [{ validator: validatePass, trigger: 'change' }],
		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
	})
	const isVisible = ref(false)
	const showPasswordTip = 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 visibleCodeRef = ref(null)
	const onSubmit = () => {
		formRef.value?.validate?.((valid) => {
			if (valid) {
				// console.log('submit!')
				visibleCodeRef.value?.onSendCode().then(() => {
					isVisible.value = true
				})
			} else {
				console.warn('error submit!')
			}
		})
	}

	const onVerifyCode = (code: string) => {
		Register({
			username: formData.name,
			email: formData.email,
			password: md5(formData.password),
			verificationCode: code
		})
			.then((res) => {
				if (res) {
					userInfoStore.setToken(res)
					userInfoStore.setUserInfo({
						username: formData.name,
						email: formData.email
					})
					router.push({ name: 'nuic' })
				}
			})
			.catch(() => {
				console.warn('error verify code!')
			})
		// router.push({ name: 'nuic' })
	}
</script>

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