109 lines
3.1 KiB
Vue
109 lines
3.1 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>Log on to</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="Email" prop="email">
|
|
<el-input v-model="formData.email" placeholder="Enter your email" name="email" />
|
|
</el-form-item>
|
|
<el-form-item label="Password" prop="password">
|
|
<el-input
|
|
v-model="formData.password"
|
|
placeholder="Enter your password"
|
|
type="password"
|
|
show-password
|
|
name="password"
|
|
/>
|
|
</el-form-item>
|
|
<div class="forgetPassword">
|
|
<span>forget password?</span>
|
|
</div>
|
|
<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">Log in</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="tip-2">
|
|
Don't have an account? <span @click.prevent="onClickRegister">Sign up</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 { 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' })
|
|
}
|
|
const onClickPrivacy = () => {}
|
|
const onClickRegister = () => {
|
|
router.push({ name: 'register' })
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './style.less';
|
|
</style>
|