# 🔍 订单详情打卡记录不显示 - 调试指南

**日期：** 2026-01-26  
**问题：** 前端已重新编译，但订单详情页面仍然没有显示打卡记录入口

---

## 🔍 问题排查步骤

### 步骤1：确认文件是否正确修改

检查源文件是否包含修改：

```bash
# 在项目根目录执行
grep -n "checkin-entry-section" peidu/uniapp/src/order-package/pages/order/detail.vue
```

**预期输出：**
```
203:      <view class="checkin-entry-section" v-if="userType === 'parent' || userType === 'user'">
1441:.checkin-entry-section {
```

✅ 如果有输出，说明文件已正确修改

### 步骤2：检查编译输出目录

你的项目可能有两个目录：
- `peidu/uniapp/src/` - 源代码目录
- `peidu/uniapp/` - 编译输出目录（或 `dist/`）

检查哪个目录被使用：

```bash
# 查看项目结构
ls -la peidu/uniapp/

# 查看是否有 dist 目录
ls -la peidu/uniapp/dist/
```

### 步骤3：清除缓存并重新编译

#### 方法1：清除微信开发者工具缓存

1. 在微信开发者工具中：
   - 点击菜单栏 "工具" → "清除缓存"
   - 选择 "清除全部缓存"
   - 点击 "确定"

2. 重新编译：
   ```bash
   cd peidu/uniapp
   npm run dev:mp-weixin
   ```

3. 在微信开发者工具中：
   - 点击 "编译" 按钮
   - 或按 `Ctrl + B` (Windows) / `Cmd + B` (Mac)

#### 方法2：删除 node_modules 和重新安装

```bash
cd peidu/uniapp
rm -rf node_modules
rm -rf dist
npm install
npm run dev:mp-weixin
```

### 步骤4：检查 userType 值

在订单详情页面的控制台查看：

1. 打开微信开发者工具的控制台
2. 打开订单详情页面
3. 查看控制台输出：

```
[订单详情] 用户角色: parent
```

如果输出是 `undefined` 或其他值，说明 userType 判断有问题。

### 步骤5：手动添加调试日志

在 `peidu/uniapp/src/order-package/pages/order/detail.vue` 的 `onLoad` 方法中添加：

```javascript
onLoad(options) {
  // ✅ 获取用户角色
  const userInfo = uni.getStorageSync('userInfo')
  this.userType = userInfo?.userType || 'parent'
  
  // 🔍 调试日志
  console.log('=== 订单详情调试 ===')
  console.log('userInfo:', userInfo)
  console.log('userType:', this.userType)
  console.log('是否显示打卡记录入口:', this.userType === 'parent' || this.userType === 'user')
  
  // ... 其他代码
}
```

---

## 🛠️ 可能的原因和解决方案

### 原因1：编译目录不对

**问题：** 修改了 `src` 目录，但运行的是根目录的文件

**解决方案：**

检查 `peidu/uniapp/package.json` 中的编译命令：

```json
{
  "scripts": {
    "dev:mp-weixin": "uni -p mp-weixin",
    "build:mp-weixin": "uni build -p mp-weixin"
  }
}
```

确认编译输出目录，然后在微信开发者工具中打开正确的目录。

### 原因2：缓存问题

**问题：** 微信开发者工具缓存了旧版本

**解决方案：**

1. 清除微信开发者工具缓存
2. 删除 `dist` 目录
3. 重新编译

```bash
cd peidu/uniapp
rm -rf dist
npm run dev:mp-weixin
```

### 原因3：userType 值不正确

**问题：** `userType` 不是 `'parent'` 或 `'user'`

**解决方案：**

检查 `userInfo` 中的 `userType` 字段：

```javascript
// 在控制台执行
const userInfo = uni.getStorageSync('userInfo')
console.log('userInfo:', userInfo)
console.log('userType:', userInfo?.userType)
```

如果 `userType` 是其他值（如 `'customer'`、`'家长'` 等），需要修改判断条件：

```vue
<!-- 修改前 -->
<view class="checkin-entry-section" v-if="userType === 'parent' || userType === 'user'">

<!-- 修改后（根据实际情况调整） -->
<view class="checkin-entry-section" v-if="userType === 'parent' || userType === 'user' || userType === 'customer'">
```

### 原因4：条件渲染被其他条件覆盖

**问题：** 可能有其他条件导致整个 `scroll-view` 没有渲染

**解决方案：**

检查 `scroll-view` 的父元素是否有条件渲染：

```vue
<scroll-view scroll-y class="content-scroll">
  <!-- ... 其他内容 ... -->
  
  <!-- 打卡记录入口 -->
  <view class="checkin-entry-section" v-if="userType === 'parent' || userType === 'user'">
    ...
  </view>
</scroll-view>
```

确保 `scroll-view` 本身没有 `v-if` 条件。

---

## ⚡ 快速修复方案

### 方案1：临时移除条件判断（测试用）

暂时移除 `v-if` 条件，看看是否显示：

```vue
<!-- 临时修改 -->
<view class="checkin-entry-section">
  <view class="section-title">打卡记录</view>
  <view class="entry-card" @click="goToCheckInRecords">
    <view class="entry-icon">📋</view>
    <view class="entry-info">
      <view class="entry-title">查看打卡记录</view>
      <view class="entry-desc">查看陪伴员的签到签退记录</view>
    </view>
    <view class="entry-arrow">›</view>
  </view>
</view>
```

如果这样能显示，说明是 `userType` 判断的问题。

### 方案2：使用计算属性

使用计算属性来判断是否显示：

```javascript
computed: {
  shouldShowCheckInEntry() {
    console.log('[计算属性] userType:', this.userType)
    const result = this.userType === 'parent' || this.userType === 'user'
    console.log('[计算属性] 是否显示:', result)
    return result
  }
}
```

```vue
<view class="checkin-entry-section" v-if="shouldShowCheckInEntry">
  ...
</view>
```

---

## 🧪 测试步骤

### 1. 清除缓存
```bash
# 在微信开发者工具中
工具 → 清除缓存 → 清除全部缓存
```

### 2. 重新编译
```bash
cd peidu/uniapp
npm run dev:mp-weixin
```

### 3. 刷新页面
在微信开发者工具中：
- 点击 "编译" 按钮
- 或按 `Ctrl + B`

### 4. 查看控制台
打开订单详情页面，查看控制台输出：
```
[订单详情] 用户角色: parent
```

### 5. 检查页面
滚动到底部，查看是否显示"打卡记录"入口。

---

## 📝 检查清单

- [ ] 源文件已正确修改（包含 `checkin-entry-section`）
- [ ] 已清除微信开发者工具缓存
- [ ] 已重新编译项目
- [ ] 已刷新页面
- [ ] 控制台显示正确的 `userType`
- [ ] 页面滚动到底部
- [ ] 仍然没有显示打卡记录入口

如果以上都检查了还是不显示，请提供：
1. 控制台的完整输出
2. `userInfo` 的完整内容
3. 编译命令的输出

---

## 🔧 终极解决方案

如果以上方法都不行，直接在费用明细部分内部添加（确保一定能看到）：

```vue
<!-- 费用明细 -->
<view class="price-section">
  <view class="section-title">费用明细</view>
  <view class="price-row">
    <text class="label">服务费用</text>
    <text class="value">¥{{ order.servicePrice }}</text>
  </view>
  <view class="price-row" v-if="order.discount">
    <text class="label">优惠金额</text>
    <text class="value discount">-¥{{ order.discount }}</text>
  </view>
  <view class="price-row total">
    <text class="label">实付金额</text>
    <text class="value">¥{{ order.totalPrice }}</text>
  </view>
  
  <!-- 🔥 直接在这里添加 -->
  <view class="checkin-entry-btn" @click="goToCheckInRecords" 
        style="margin-top: 30rpx; padding: 24rpx; background: linear-gradient(135deg, rgba(45, 150, 135, 0.1) 0%, rgba(61, 168, 150, 0.1) 100%); border-radius: 12rpx; display: flex; align-items: center; justify-content: space-between;">
    <view style="display: flex; align-items: center; gap: 20rpx;">
      <text style="font-size: 40rpx;">📋</text>
      <text style="font-size: 28rpx; color: #333; font-weight: bold;">查看打卡记录</text>
    </view>
    <text style="font-size: 40rpx; color: #2d9687;">›</text>
  </view>
</view>
```

这样直接使用内联样式，确保一定能显示。