109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<template>
|
|
<div class="login">
|
|
<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>{{ $t('Login.LoginTo') }}</span>
|
|
<img src="@/assets/images/logo-2.png" />
|
|
</div>
|
|
<div class="tip">{{ $t('Login.LoginTitle') }}</div>
|
|
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
|
<el-form-item :label="$t('Login.email')" prop="email">
|
|
<el-input
|
|
v-model="formData.email"
|
|
:placeholder="$t('Login.enterEmail')"
|
|
name="email"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('Login.password')" prop="password">
|
|
<el-input
|
|
v-model="formData.password"
|
|
:placeholder="$t('Login.enterPassword')"
|
|
type="password"
|
|
show-password
|
|
name="password"
|
|
/>
|
|
</el-form-item>
|
|
<div class="forgetPassword">
|
|
<span>{{ $t('Login.forgetPassword') }}</span>
|
|
</div>
|
|
<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.Login')
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="tip-2" v-html="$t('Login.noAccountToSignUp')"></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 { validateEmail, validatePass, validatePrivacy } from './tools'
|
|
import OtherLogin from './other-login.vue'
|
|
import VisibleCode from './visible-code.vue'
|
|
const router = useRouter()
|
|
const ruleForm = reactive({
|
|
email: [{ validator: validateEmail, trigger: 'blur' }],
|
|
password: [{ validator: validatePass, trigger: 'blur' }],
|
|
privacy: [{ validator: validatePrivacy, trigger: 'change' }]
|
|
})
|
|
const isVisible = ref(false)
|
|
const formData = reactive({
|
|
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' })
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './less/style.less';
|
|
</style>
|