dma_handbook/docs/.vuepress/components/Login.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>