peixue-dev/Archive/peidu-temp-files/docs/[一次性]订单详情打卡记录不显示-调试指南-2026-01-26.md

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

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

---

🔍 问题排查步骤

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

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

# 在项目根目录执行
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/）

检查哪个目录被使用：

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

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

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

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

1. 在微信开发者工具中：

   • 点击菜单栏 "工具" → "清除缓存"
   • 选择 "清除全部缓存"
   • 点击 "确定"

2. 重新编译：

   cd peidu/uniapp
   npm run dev:mp-weixin
   

3. 在微信开发者工具中：

   • 点击 "编译" 按钮
   • 或按 Ctrl + B (Windows) / Cmd + B (Mac)

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

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 方法中添加：

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 中的编译命令：

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

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

原因2：缓存问题

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

解决方案：

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

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

原因3：userType 值不正确

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

解决方案：

检查 userInfo 中的 userType 字段：

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

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

<!-- 修改前 -->
<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 的父元素是否有条件渲染：

<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 条件，看看是否显示：

<!-- 临时修改 -->
<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：使用计算属性

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

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

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

---

🧪 测试步骤

1. 清除缓存

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

2. 重新编译

cd peidu/uniapp
npm run dev:mp-weixin

3. 刷新页面

在微信开发者工具中：

• 点击 "编译" 按钮
• 或按 Ctrl + B

4. 查看控制台

打开订单详情页面，查看控制台输出：

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

5. 检查页面

滚动到底部，查看是否显示"打卡记录"入口。

---

📝 检查清单

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

如果以上都检查了还是不显示，请提供：

1. 控制台的完整输出
2. userInfo 的完整内容
3. 编译命令的输出

---

🔧 终极解决方案

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

<!-- 费用明细 -->
<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>

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