# 登录显示成功但无法进入系统问题修复

## 问题描述

用户登录后显示"登录成功"，但页面一直停留在登录页面或显示空白，无法进入系统。

## 问题原因分析

### 原因 1：`getBobbiesList` 初始值为空字符串

**代码位置**：`xuniYou/pages/index/index.vue` 第 932 行

```javascript
getBobbiesList: '',  // ❌ 初始值为空字符串
```

**问题**：
- 页面使用 `v-show="getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3"` 来判断显示哪个界面
- 当 `getBobbiesList` 为空字符串时，`getBobbiesList.reg_step` 为 `undefined`
- 导致所有 `v-show` 条件都不满足，页面显示空白

### 原因 2：`getUserBasic()` 调用时机问题

**代码位置**：`xuniYou/pages/index/index.vue` 第 960-969 行

```javascript
onShow() {
    this.checkUnderAgeStatus();
    
    if (uni.getStorageSync('token')) {
        this.getUserBasic()
        this.loverBasic()
        this.loadHomeLooks()
    }
}
```

**问题**：
- 只有在 `onShow()` 时才调用 `getUserBasic()`
- 如果从登录页跳转过来，可能还没来得及执行 `onShow()`
- 或者 token 还没有正确保存到 storage

### 原因 3：API 请求失败

可能的原因：
- PHP 后端服务未启动（端口 30100）
- Token 无效或过期
- 网络请求失败
- CORS 跨域问题

---

## 解决方案

### 方案 1：修改 `getBobbiesList` 初始值（推荐）

将初始值从空字符串改为对象，并设置默认的 `reg_step`：

```javascript
// 修改前
getBobbiesList: '',

// 修改后
getBobbiesList: {
    reg_step: 1  // 默认显示第一步：完善个人资料
},
```

### 方案 2：添加加载状态

添加一个加载状态，在数据加载完成前显示加载提示：

```javascript
data() {
    return {
        isLoading: true,  // 添加加载状态
        getBobbiesList: {
            reg_step: 1
        },
        // ...
    }
}
```

在模板中添加加载提示：

```vue
<view v-if="isLoading" class="loading-container">
    <view class="loading-text">加载中...</view>
</view>

<view v-else>
    <!-- 原有内容 -->
</view>
```

在 `getUserBasic()` 成功后设置：

```javascript
getUserBasic() {
    GetUserBasic({}).then(res => {
        if (res.code == 1) {
            let data = res.data
            // ...
            this.getBobbiesList = data
            this.isLoading = false  // 加载完成
        }
    }).catch(() => {
        this.isLoading = false  // 加载失败也要隐藏加载状态
        uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
        })
    })
}
```

### 方案 3：在 `onLoad` 时也调用 `getUserBasic()`

```javascript
onLoad(options) {
    //#ifdef MP-WEIXIN
    this.checkPermission()
    //#endif
    
    // 如果有 tab 参数，切换到对应的 tab
    if (options && options.tab) {
        const tabIndex = parseInt(options.tab);
        if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tabs.length) {
            this.currentTab = tabIndex;
        }
    }
    
    // 添加：在 onLoad 时也检查并加载用户数据
    if (uni.getStorageSync('token')) {
        this.getUserBasic()
        this.loverBasic()
        this.loadHomeLooks()
    }
},

onReady() {
    this.getServerData();
},
```

---

## 快速修复步骤

### 第 1 步：检查后端服务是否运行

```bash
# Windows - 检查 PHP 服务
netstat -ano | findstr :30100

# 如果没有运行，启动 PHP 服务
cd xunifriend_RaeeC/public
php -S 0.0.0.0:30100
```

### 第 2 步：检查浏览器控制台

1. 打开浏览器开发者工具（F12）
2. 切换到 Console 标签
3. 查看是否有错误信息
4. 切换到 Network 标签
5. 查看 API 请求是否成功

**关键检查点**：
- `/api/user_basic/get_user_basic` 请求是否返回 200
- 响应数据中是否包含 `reg_step` 字段
- Token 是否正确传递

### 第 3 步：检查 Token

在浏览器控制台执行：

```javascript
// 检查 token 是否存在
console.log('Token:', uni.getStorageSync('token'))

// 检查用户信息
console.log('UserInfo:', uni.getStorageSync('userinfo'))

// 手动调用 getUserBasic
// 在 index 页面的控制台执行
this.getUserBasic()
```

### 第 4 步：修改代码（推荐方案 1）

修改 `xuniYou/pages/index/index.vue` 第 932 行：

```javascript
// 修改前
getBobbiesList: '',

// 修改后
getBobbiesList: {
    reg_step: 1,
    level: 0,
    intimacy: 0,
    next_level_intimacy: 100
},
```

### 第 5 步：重新编译前端

```bash
# 在 xuniYou 目录下
npm run dev:h5
# 或
npm run build:h5
```

---

## 调试方法

### 方法 1：添加调试日志

在 `getUserBasic()` 方法中添加日志：

```javascript
getUserBasic() {
    console.log('开始获取用户信息...')
    console.log('Token:', uni.getStorageSync('token'))
    
    GetUserBasic({}).then(res => {
        console.log('getUserBasic 响应:', res)
        
        if (res.code == 1) {
            let data = res.data
            console.log('用户数据:', data)
            console.log('reg_step:', data.reg_step)
            
            // ...
            this.getBobbiesList = data
            console.log('getBobbiesList 已更新:', this.getBobbiesList)
        } else {
            console.error('getUserBasic 失败:', res.msg)
        }
    }).catch(err => {
        console.error('getUserBasic 异常:', err)
    })
}
```

### 方法 2：检查 API 响应

使用 curl 或 Postman 测试 API：

```bash
# 替换 YOUR_TOKEN 为实际的 token
curl -X GET "http://localhost:30100/api/user_basic/get_user_basic" \
  -H "token: YOUR_TOKEN"
```

**预期响应**：

```json
{
  "code": 1,
  "msg": "成功",
  "data": {
    "id": 1,
    "username": "18800000001",
    "nickname": "用户昵称",
    "avatar": "头像URL",
    "reg_step": 4,
    "level": 1,
    "intimacy": 50,
    "next_level_intimacy": 100,
    // ...
  }
}
```

### 方法 3：临时绕过检查

如果需要紧急修复，可以临时修改 `v-show` 条件：

```vue
<!-- 修改前 -->
<view v-show="getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3">

<!-- 修改后（临时） -->
<view v-show="!getBobbiesList || getBobbiesList.reg_step == 1 || getBobbiesList.reg_step == 2 || getBobbiesList.reg_step == 3">
```

---

## 常见错误和解决方法

### 错误 1：Cannot read property 'reg_step' of ''

**原因**：`getBobbiesList` 为空字符串

**解决**：使用方案 1，将初始值改为对象

### 错误 2：Network Error

**原因**：后端服务未启动或网络问题

**解决**：
1. 检查 PHP 服务是否运行
2. 检查端口是否正确（30100）
3. 检查防火墙设置

### 错误 3：401 Unauthorized

**原因**：Token 无效或过期

**解决**：
1. 清除本地存储，重新登录
2. 检查 token 是否正确保存
3. 检查后端 token 验证逻辑

### 错误 4：页面显示空白

**原因**：所有 `v-show` 条件都不满足

**解决**：
1. 检查 `getBobbiesList.reg_step` 的值
2. 添加默认显示逻辑
3. 使用方案 2 添加加载状态

---

## 完整修复代码

### 修改 `xuniYou/pages/index/index.vue`

```javascript
data() {
    return {
        // ... 其他数据
        
        // 修改这里：添加默认值
        getBobbiesList: {
            reg_step: 1,  // 默认第一步
            level: 0,
            intimacy: 0,
            next_level_intimacy: 100
        },
        
        loverBasicList: null,  // 改为 null 而不是空字符串
        
        // 添加加载状态
        isLoading: true,
        
        // ... 其他数据
    }
},

onLoad(options) {
    //#ifdef MP-WEIXIN
    this.checkPermission()
    //#endif
    
    console.log('uni.env.', uni.env)
    
    // 如果有 tab 参数，切换到对应的 tab
    if (options && options.tab) {
        const tabIndex = parseInt(options.tab);
        if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < this.tabs.length) {
            this.currentTab = tabIndex;
        }
    }
    
    // 添加：在 onLoad 时也加载用户数据
    const token = uni.getStorageSync('token')
    console.log('onLoad - Token:', token)
    
    if (token) {
        this.getUserBasic()
        this.loverBasic()
        this.loadHomeLooks()
    } else {
        // 没有 token，显示默认状态
        this.isLoading = false
    }
},

getUserBasic() {
    console.log('开始获取用户信息...')
    
    GetUserBasic({}).then(res => {
        console.log('getUserBasic 响应:', res)
        
        if (res.code == 1) {
            let data = res.data
            const conversationStore = useConversationStore();
            let listener = {
                nickname: data.username,
                headImage: data.avatar,
                openid: data.wxapp_openid,
            }
            conversationStore.setUserInfo(listener);
            
            this.getBobbiesList = data
            this.isLoading = false  // 加载完成
            
            console.log('用户数据已更新:', this.getBobbiesList)
            this.getServerData();
        } else {
            this.isLoading = false
            uni.showToast({
                title: res.msg,
                icon: 'none',
                position: 'top'
            })
        }
    }).catch(err => {
        console.error('getUserBasic 异常:', err)
        this.isLoading = false
        uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
        })
    })
},
```

### 在模板中添加加载状态

```vue
<template>
    <view>
        <!-- 加载状态 -->
        <view v-if="isLoading" class="loading-container">
            <view class="loading-spinner"></view>
            <view class="loading-text">加载中...</view>
        </view>
        
        <!-- 原有内容 -->
        <view v-else>
            <!-- ... -->
        </view>
    </view>
</template>

<style>
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f5f5f5;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #9F47FF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-text {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}
</style>
```

---

## 测试步骤

1. **清除缓存**
   ```javascript
   // 在浏览器控制台执行
   uni.clearStorageSync()
   ```

2. **重新登录**
   - 输入手机号和密码
   - 点击登录
   - 观察是否正常跳转

3. **检查日志**
   - 查看控制台是否有错误
   - 查看 Network 标签的 API 请求
   - 查看 `getUserBasic` 的响应数据

4. **验证功能**
   - 确认能正常进入首页
   - 确认能看到用户信息
   - 确认能正常使用各个功能

---

## 预防措施

1. **始终为对象类型的数据设置默认值**
   ```javascript
   // ❌ 不好
   userData: ''
   
   // ✅ 好
   userData: {
       id: 0,
       name: '',
       // ...
   }
   ```

2. **添加错误处理**
   ```javascript
   GetUserBasic({}).then(res => {
       // ...
   }).catch(err => {
       console.error('错误:', err)
       // 显示友好的错误提示
   })
   ```

3. **添加加载状态**
   - 让用户知道系统正在处理
   - 避免用户重复点击

4. **添加调试日志**
   - 方便排查问题
   - 生产环境可以关闭

---

## 总结

登录无法进入的主要原因是 `getBobbiesList` 初始值为空字符串，导致页面判断逻辑失效。

**推荐修复方案**：
1. 将 `getBobbiesList` 初始值改为对象
2. 添加加载状态
3. 在 `onLoad` 时也调用 `getUserBasic()`
4. 添加完善的错误处理

修复后，用户登录成功就能正常进入系统了！