vifo
82a19101a8
- 创建 rui-frontend 前端仓库 - 迁移 admin-ui 管理后台 - 创建 cashier-mobile 和 customer-mobile 占位项目 - 配置 pnpm workspace
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
const loading = ref(false)
|
|
|
|
const form = ref({
|
|
tenantId: '',
|
|
username: '',
|
|
password: '',
|
|
})
|
|
|
|
async function handleLogin() {
|
|
if (!form.value.username || !form.value.password) {
|
|
ElMessage.warning('请输入用户名和密码')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const success = await authStore.login({
|
|
username: form.value.username,
|
|
password: form.value.password,
|
|
tenantId: form.value.tenantId || undefined,
|
|
})
|
|
|
|
if (success) {
|
|
ElMessage.success('登录成功')
|
|
const redirect = router.currentRoute.value.query.redirect as string
|
|
router.push(redirect || '/')
|
|
} else {
|
|
ElMessage.error('登录失败，请检查用户名和密码')
|
|
}
|
|
} catch {
|
|
ElMessage.error('登录失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<h2 class="text-2xl font-bold mb-2">睿核通用平台</h2>
|
|
<p class="text-gray-500 mb-6">管理后台登录</p>
|
|
<el-form :model="form" label-position="top">
|
|
<el-form-item label="租户ID">
|
|
<el-input v-model="form.tenantId" placeholder="请输入租户ID" />
|
|
</el-form-item>
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="form.username" placeholder="请输入用户名" />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="form.password" type="password" placeholder="请输入密码" @keyup.enter="handleLogin" />
|
|
</el-form-item>
|
|
<el-button type="primary" class="w-full" :loading="loading" @click="handleLogin">登录</el-button>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.login-box {
|
|
width: 400px;
|
|
padding: 40px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|