145 lines
3.8 KiB
Vue
145 lines
3.8 KiB
Vue
<template>
|
|
<div class="login">
|
|
<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.loginTo')"></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="forgotPassword">
|
|
<span @click="onForgotPassword">{{ $t('Login.forgotPassword') }}</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-show="isVisible"
|
|
type="LOGIN"
|
|
:password="formData.password"
|
|
ref="visibleCodeRef"
|
|
:email="formData.email"
|
|
@submit="onVerifyCode"
|
|
/>
|
|
<other-login />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import md5 from 'md5'
|
|
import { Login } from '@/api/user'
|
|
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'
|
|
import { useUserInfoStore } from '@/stores'
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
const userInfoStore = useUserInfoStore()
|
|
const router = useRouter()
|
|
const ruleForm = reactive({
|
|
email: [{ validator: validateEmail, trigger: 'change' }],
|
|
password: [
|
|
{
|
|
min: 6,
|
|
max: 12,
|
|
message: t('Login.passwordLengthError', { min: 6, max: 12 }),
|
|
trigger: 'change'
|
|
}
|
|
],
|
|
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.push({ name: 'index' })
|
|
}
|
|
}
|
|
const onForgotPassword = () => {
|
|
router.push({ name: 'retrievepass' })
|
|
}
|
|
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) => {
|
|
// console.log(code)
|
|
Login({
|
|
email: formData.email,
|
|
password: md5(formData.password),
|
|
verificationCode: code
|
|
})
|
|
.then((res) => {
|
|
if (res) {
|
|
userInfoStore.setToken(res)
|
|
userInfoStore.setUserInfo({
|
|
email: formData.email
|
|
})
|
|
router.push({ name: 'mainInput' })
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.warn(error)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './less/style.less';
|
|
</style>
|