138 lines
4.0 KiB
Vue
138 lines
4.0 KiB
Vue
<template>
|
||
<div class="common-login">
|
||
<el-form ref="loginFormRef" :model="authStore.loginForm"
|
||
:rules="rules" class="login-form"
|
||
autocomplete="on" label-position="left"
|
||
@submit.native.prevent>
|
||
<!-- 账户名表单选项 -->
|
||
<el-form-item prop="username" class="form-item">
|
||
<el-input
|
||
v-model="authStore.loginForm.username"
|
||
placeholder="请输入账号" clearable
|
||
>
|
||
<template #prefix>
|
||
<i class="fa-solid fa-user"></i>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<!-- password表单选项 -->
|
||
<el-form-item prop="password" class="form-item">
|
||
<el-input
|
||
v-model="authStore.loginForm.password"
|
||
placeholder="请输入密码" type="password"
|
||
show-password clearable
|
||
@keyup.enter.native="handleLogin('common')"
|
||
>
|
||
<template #prefix>
|
||
<i class="fa-solid fa-lock"></i>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<login-auth />
|
||
</el-form-item>
|
||
|
||
<el-form-item class="login-option">
|
||
<el-checkbox v-model="authStore.loginForm.isRemember">记住密码</el-checkbox>
|
||
<el-link type="primary">忘记密码？</el-link>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-button type="primary" style="width: 100%;"
|
||
:disabled="!authStore.isVerified"
|
||
:loading="authStore.loginLoading"
|
||
@click.prevent="handleLogin('common')">登录
|
||
</el-button>
|
||
<div />
|
||
|
||
<div class="login-type">
|
||
<el-button>手机号登录</el-button>
|
||
<el-button>扫码登录</el-button>
|
||
</div>
|
||
|
||
<div class="login-others-type">
|
||
<el-divider content-position="center">其他登录方式</el-divider>
|
||
|
||
<div class="type-list">
|
||
<i class="fa-brands fa-weixin" style="color: #3CB034"></i>
|
||
<i class="fa-brands fa-qq" style="color: #29A4D9"></i>
|
||
<i class="fa-solid fa-envelope" style="color: #4971B8"></i>
|
||
<i class="fa-brands fa-github" style="color: #555555"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="login-register">
|
||
<span>还没有账户？</span>
|
||
<el-link type="primary" @click="authStore.changeLoginType('register')">创建账户</el-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import LoginAuth from '@/components/Login/LoginAuth.vue'
|
||
import { useAuthStore } from '@/store/auth'
|
||
import { useRouter } from 'vue-router'
|
||
import { useUserStore } from '@/store/user'
|
||
import { ElMessage } from 'element-plus'
|
||
import type { FormRules } from 'element-plus'
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
import { loginRules } from '@/utils/element/elRules'
|
||
import { getLocalStorage, setLocalStorage } from 'vue3-common/utils/storageUtil'
|
||
import type { ILoginType } from '@/types/auth'
|
||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||
|
||
const rules = reactive<FormRules>(loginRules)
|
||
const authStore = useAuthStore()
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
|
||
const loginFormRef = ref()
|
||
|
||
onMounted(async () => {
|
||
const storageLoginForm = getLocalStorage('loginForm')
|
||
if (storageLoginForm) {
|
||
authStore.loginForm = JSON.parse(storageLoginForm)
|
||
|
||
if (!authStore.isLogout) {
|
||
await doLogin('common')
|
||
}
|
||
}
|
||
})
|
||
|
||
const handleLogin = async (type: ILoginType) => {
|
||
loginFormRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
if (!isMobile()) {
|
||
ElMessage.error('目前只支持移动端')
|
||
return
|
||
}
|
||
|
||
authStore.loginLoading = true
|
||
|
||
try {
|
||
await doLogin(type)
|
||
} finally {
|
||
authStore.loginLoading = false
|
||
}
|
||
} else {
|
||
ElMessage.error('请输入正确的信息')
|
||
return false
|
||
}
|
||
})
|
||
}
|
||
|
||
const doLogin = async (type: ILoginType) => {
|
||
await authStore.handleLogin(type)
|
||
userStore.handleSession(authStore.session)
|
||
|
||
// 2. 存储账户密码到localStorage中
|
||
if (authStore.loginForm.isRemember) {
|
||
setLocalStorage('loginForm', JSON.stringify(authStore.loginForm))
|
||
}
|
||
|
||
await router.push('/record')
|
||
}
|
||
</script>
|