101 lines
4.1 KiB
Vue
101 lines
4.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { reactive, ref } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
|
|||
|
|
import { ArrowRight, LockKeyhole, UserRound } from '@lucide/vue'
|
|||
|
|
import { useAuthStore } from '@/stores/auth'
|
|||
|
|
|
|||
|
|
interface LoginForm {
|
|||
|
|
account: string
|
|||
|
|
password: string
|
|||
|
|
remember: boolean
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const auth = useAuthStore()
|
|||
|
|
const formRef = ref<FormInstance>()
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const isDevelopment = import.meta.env.DEV
|
|||
|
|
const developmentHint = isDevelopment
|
|||
|
|
? {
|
|||
|
|
title: '一期联调账号',
|
|||
|
|
message: '本地后端启动后可使用商户账号 merchant_admin 登录；密码请使用后端联调环境提供的初始密码。',
|
|||
|
|
}
|
|||
|
|
: null
|
|||
|
|
const form = reactive<LoginForm>({
|
|||
|
|
account: typeof route.query.account === 'string'
|
|||
|
|
? route.query.account
|
|||
|
|
: isDevelopment ? 'merchant_admin' : '',
|
|||
|
|
password: '',
|
|||
|
|
remember: false,
|
|||
|
|
})
|
|||
|
|
const accountPattern = /^[A-Za-z0-9_]{4,64}$/
|
|||
|
|
|
|||
|
|
const rules: FormRules<LoginForm> = {
|
|||
|
|
account: [
|
|||
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
|||
|
|
{ pattern: accountPattern, message: '用户名为 4–64 位字母、数字或下划线', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
password: [
|
|||
|
|
{ required: true, message: '请输入密码', trigger: 'blur' },
|
|||
|
|
{ min: 8, max: 72, message: '密码长度应为 8–72 位', trigger: 'blur' },
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function submit() {
|
|||
|
|
if (!formRef.value || loading.value) return
|
|||
|
|
const valid = await formRef.value.validate().catch(() => false)
|
|||
|
|
if (!valid) return
|
|||
|
|
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
await auth.login(form.account.trim(), form.password, form.remember)
|
|||
|
|
ElMessage.success('登录成功')
|
|||
|
|
await router.replace(String(route.query.redirect || '/'))
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error(error instanceof Error ? error.message : '登录失败，请检查账号后重试')
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showResetHint() {
|
|||
|
|
ElMessage.info('请联系平台客服重置密码')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="auth-page">
|
|||
|
|
<header class="auth-header">
|
|||
|
|
<RouterLink to="/login" class="auth-brand"><span>CC</span><strong>虫虫出海</strong></RouterLink>
|
|||
|
|
<div>还没有企业账号？ <RouterLink to="/register">申请入驻</RouterLink></div>
|
|||
|
|
</header>
|
|||
|
|
<main class="auth-main">
|
|||
|
|
<section class="auth-copy">
|
|||
|
|
<h1>跨境物流业务<br />一个工作台完成</h1>
|
|||
|
|
<p>从企业成员协作到头程订单跟进，统一管理业务与权限。</p>
|
|||
|
|
<div class="auth-facts"><span>企业级权限</span><span>订单全程跟进</span><span>多端业务协同</span></div>
|
|||
|
|
</section>
|
|||
|
|
<section class="auth-card" aria-labelledby="login-title">
|
|||
|
|
<h2 id="login-title">登录客户工作台</h2>
|
|||
|
|
<p>企业注册成功后即可登录；提交订单前需完成企业资料审核</p>
|
|||
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" @submit.prevent="submit">
|
|||
|
|
<el-form-item label="用户名" prop="account">
|
|||
|
|
<el-input v-model="form.account" autocomplete="username" maxlength="64" placeholder="请输入用户名" :prefix-icon="UserRound" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="密码" prop="password">
|
|||
|
|
<el-input v-model="form.password" autocomplete="current-password" maxlength="72" type="password" show-password placeholder="请输入 8–72 位密码" :prefix-icon="LockKeyhole" @keyup.enter="submit" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<div class="auth-form-options">
|
|||
|
|
<el-checkbox v-model="form.remember">记住我</el-checkbox>
|
|||
|
|
<button type="button" @click="showResetHint">忘记密码？</button>
|
|||
|
|
</div>
|
|||
|
|
<el-button native-type="submit" class="auth-submit" type="primary" :loading="loading">登录 <ArrowRight :size="17" /></el-button>
|
|||
|
|
</el-form>
|
|||
|
|
<div v-if="developmentHint" class="demo-tip" role="note"><strong>{{ developmentHint.title }}</strong><span>{{ developmentHint.message }}</span></div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</template>
|