feat 搭建架构骨架
This commit is contained in:
Ironsp
232
src/views/login/index.vue
Normal file
232
src/views/login/index.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { isPhone } from '@/utils/validate'
|
||||
import LoginForm from './cpns/LoginForm.vue'
|
||||
import SmsLoginForm from './cpns/SmsLoginForm.vue'
|
||||
|
||||
type LoginTab = 'account' | 'sms'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const activeTab = ref<LoginTab>('account')
|
||||
|
||||
const account = ref('')
|
||||
const password = ref('')
|
||||
const phone = ref('')
|
||||
const code = ref('')
|
||||
const agree = ref(false)
|
||||
|
||||
function goAfterLogin(): void {
|
||||
void router.push(String(route.query.redirect ?? '/'))
|
||||
}
|
||||
|
||||
async function onAccountSubmit(): Promise<void> {
|
||||
if (!account.value.trim() || !password.value) {
|
||||
ElMessage.warning('请输入账号和密码')
|
||||
return
|
||||
}
|
||||
if (!agree.value) {
|
||||
ElMessage.warning('请先阅读并同意《用户协议》和《隐私政策》')
|
||||
return
|
||||
}
|
||||
const ok = await userStore.loginByAccount({ account: account.value.trim(), password: password.value })
|
||||
if (ok) goAfterLogin()
|
||||
}
|
||||
|
||||
async function onSmsSubmit(): Promise<void> {
|
||||
if (!isPhone(phone.value)) {
|
||||
ElMessage.warning('手机号格式不正确')
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
ElMessage.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
if (!agree.value) {
|
||||
ElMessage.warning('请先阅读并同意《用户协议》和《隐私政策》')
|
||||
return
|
||||
}
|
||||
const ok = await userStore.loginBySms({ phone: phone.value, code: code.value })
|
||||
if (ok) goAfterLogin()
|
||||
}
|
||||
|
||||
async function onGetCode(target: string): Promise<void> {
|
||||
if (!isPhone(target)) {
|
||||
ElMessage.warning('手机号格式不正确')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await userStore.sendSmsCode(target)
|
||||
}
|
||||
catch {
|
||||
// 失败提示已由 store 统一弹出，此处仅避免未处理的 rejection
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<aside class="auth-page__brand">
|
||||
<div class="auth-page__brand-inner">
|
||||
<p class="auth-page__logo">
|
||||
虫子智造研发一体化平台
|
||||
</p>
|
||||
<p class="auth-page__slogan">
|
||||
安全 · 高效 · 可控
|
||||
</p>
|
||||
<RouterLink class="auth-page__guest" to="/">
|
||||
游客模式 →
|
||||
</RouterLink>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="auth-page__main">
|
||||
<div class="auth-page__card">
|
||||
<div class="auth-page__tabs">
|
||||
<button
|
||||
class="auth-page__tab"
|
||||
:class="{ 'is-active': activeTab === 'account' }"
|
||||
@click="activeTab = 'account'"
|
||||
>
|
||||
账号密码登录
|
||||
</button>
|
||||
<button
|
||||
class="auth-page__tab"
|
||||
:class="{ 'is-active': activeTab === 'sms' }"
|
||||
@click="activeTab = 'sms'"
|
||||
>
|
||||
手机验证码登录
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<LoginForm
|
||||
v-if="activeTab === 'account'"
|
||||
v-model:account="account"
|
||||
v-model:password="password"
|
||||
v-model:agree="agree"
|
||||
@submit="onAccountSubmit"
|
||||
/>
|
||||
<SmsLoginForm
|
||||
v-else
|
||||
v-model:phone="phone"
|
||||
v-model:code="code"
|
||||
v-model:agree="agree"
|
||||
@get-code="onGetCode"
|
||||
@submit="onSmsSubmit"
|
||||
/>
|
||||
|
||||
<p class="auth-page__switch">
|
||||
没有账号？<RouterLink class="auth-page__link" to="/register">立即注册</RouterLink>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.auth-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: @bg-color;
|
||||
|
||||
&__brand {
|
||||
flex: 0 0 44%;
|
||||
.flex(row, center, center);
|
||||
background: linear-gradient(135deg, @primary-color 0%, #1b4fd8 100%);
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&__brand-inner {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-lg;
|
||||
padding: @spacing-xxl;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&__slogan {
|
||||
font-size: @font-size-xl;
|
||||
opacity: 0.85;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
|
||||
&__guest {
|
||||
margin-top: @spacing-xl;
|
||||
padding: @spacing-sm @spacing-base;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: @radius-base;
|
||||
color: @white;
|
||||
font-size: @font-size-base;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
.flex(row, center, center);
|
||||
padding: @spacing-xl;
|
||||
}
|
||||
|
||||
&__card {
|
||||
.flex(column, flex-start);
|
||||
gap: @spacing-lg;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: @spacing-xl @spacing-lg;
|
||||
border-radius: @radius-lg;
|
||||
background: @white;
|
||||
box-shadow: @shadow-lg;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
.flex(row, center);
|
||||
gap: @spacing-lg;
|
||||
border-bottom: 1px solid @border-color;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: @spacing-sm 0;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: transparent;
|
||||
font-size: @font-size-lg;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: @primary-color;
|
||||
color: @primary-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__switch {
|
||||
text-align: center;
|
||||
font-size: @font-size-base;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: @primary-color;
|
||||
|
||||
&:hover {
|
||||
color: @primary-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user