159 lines
3.9 KiB
Vue
159 lines
3.9 KiB
Vue
<template>
|
||
<div class="login-page">
|
||
<div class="login-form">
|
||
<h2>DMA服务手册 - 登录</h2>
|
||
<div class="form-item">
|
||
<label>账号：</label>
|
||
<input v-model="form.username" type="text" placeholder="请输入账号" />
|
||
</div>
|
||
<div class="form-item">
|
||
<label>密码：</label>
|
||
<input v-model="form.password" type="password" placeholder="请输入密码" />
|
||
</div>
|
||
<button class="login-btn" @click="handleLogin" :disabled="loading">
|
||
{{ loading ? '登录中...' : '立即登录' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import request from '../../utils/request';
|
||
import { useUserStore } from '../store/modules/user';
|
||
import { showToast } from '../../utils/request';
|
||
import { SITE_BASE } from '../constants.js';
|
||
|
||
// const VUEPRESS_BASE = '/dma_handbook/';
|
||
|
||
// 登录表单
|
||
const form = ref({
|
||
username: '15622316024',
|
||
password: '123',
|
||
});
|
||
// 加载状态
|
||
const loading = ref(false);
|
||
// 获取用户仓库
|
||
const userStore = useUserStore();
|
||
// 跳转地址（从URL参数中获取）
|
||
const redirect = ref('');
|
||
|
||
// 初始化，获取跳转前地址
|
||
onMounted(() => {
|
||
const searchParams = new URLSearchParams(window.location.search);
|
||
console.log(searchParams,'searchParams');
|
||
// 获取URL中的redirect参数
|
||
const rawRedirect = searchParams.get('redirect') || '';
|
||
if (rawRedirect) {
|
||
// 解析参数，若解析失败则兜底到首页
|
||
try {
|
||
redirect.value = decodeURIComponent(rawRedirect);
|
||
} catch (e) {
|
||
redirect.value = '';
|
||
}
|
||
}
|
||
// 兜底：若redirect为空/不是以VUEPRESS_BASE开头，默认跳项目首页
|
||
if (!redirect.value || !redirect.value.startsWith(SITE_BASE)) {
|
||
redirect.value = `${SITE_BASE}`; // 首页地址：/dma_handbook/
|
||
}
|
||
console.log(redirect.value,'searchParams');
|
||
});
|
||
|
||
// 处理登录
|
||
const handleLogin = async () => {
|
||
// 表单验证
|
||
if (!form.value.username) {
|
||
showToast('请输入账号');
|
||
return;
|
||
}
|
||
if (!form.value.password) {
|
||
showToast('请输入密码');
|
||
return;
|
||
}
|
||
loading.value = true;
|
||
let data = {
|
||
mobile: '15622316024',
|
||
area_code: 86,
|
||
code: '009527',
|
||
}
|
||
try {
|
||
// 调用后端登录接口（替换为你的实际登录接口地址）
|
||
const res = await request({
|
||
url: '/go/api/app/server/mobile/code/login', // 示例接口，需替换
|
||
method: 'POST',
|
||
data: data,
|
||
hideLoading: true, // 手动控制loading，避免重复提示
|
||
});
|
||
// 登录成功，回填数据（假设后端返回{token: 'xxx', userInfo: {id: 1, name: 'xxx', roles: ['coach']}}）
|
||
userStore.setToken(res.api_token);
|
||
showToast('登录成功');
|
||
// 跳转到目标页面
|
||
setTimeout(() => {
|
||
window.location.href = decodeURIComponent(redirect.value);
|
||
}, 1000);
|
||
} catch (err) {
|
||
console.log('登录失败：', err);
|
||
showToast(err.msg || err.message || '登录失败，请检查账号密码');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-page {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
}
|
||
.login-form {
|
||
width: 350px;
|
||
padding: 30px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.login-form h2 {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
color: #333;
|
||
}
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.form-item label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 6px;
|
||
}
|
||
.form-item input {
|
||
padding: 10px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
outline: none;
|
||
}
|
||
.form-item input:focus {
|
||
border-color: #299764;
|
||
}
|
||
.login-btn {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background: #299764;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
.login-btn:disabled {
|
||
background: #96d8b7;
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|