peixue-dev/Archive/peidu-temp-files/docs/🚀立即修复-家长端日历按钮显示问题-2026-01-24.md

🚀 立即修复 - 家长端日历按钮显示问题

日期: 2026-01-24
问题: 家长端订单详情显示"开始服务"等陪伴员专属按钮

---

🔍 问题分析

当前问题:

1. ❌ 家长端订单详情页面显示"开始服务"按钮
2. ❌ 没有根据用户角色(userType)区分显示内容
3. ❌ 家长端和陪伴员端使用相同的订单详情页面

根本原因:

• 订单详情页面(order-package/pages/order/detail.vue)没有判断用户角色
• 所有用户看到的操作按钮都一样

---

✅ 解决方案

方案: 在订单详情页面添加用户角色判断

修改文件: peidu/uniapp/src/order-package/pages/order/detail.vue

1. 添加用户角色获取逻辑

data() {
  return {
    orderId: null,
    userType: null, // ✅ 新增：用户角色
    order: {
      // ... 现有字段
    }
  }
},

onLoad(options) {
  // ✅ 获取用户角色
  const userInfo = uni.getStorageSync('userInfo')
  this.userType = userInfo?.userType || 'parent'
  
  this.orderId = parseId(options.id)
  if (!validateId(this.orderId, '订单ID')) {
    setTimeout(() => uni.navigateBack(), 1500)
    return
  }
  this.loadOrderDetail()
}

2. 修改底部操作栏显示逻辑

<!-- 底部操作栏 -->
<view class="bottom-bar" v-if="order.status !== null">
  <!-- ========== 家长端按钮 ========== -->
  <template v-if="userType === 'parent' || userType === 'user'">
    <!-- 待支付 (status=0) -->
    <template v-if="order.status === 0">
      <button class="btn-secondary" @click="cancelOrder">取消订单</button>
      <button class="btn-primary" @click="handlePay">立即支付</button>
    </template>
    
    <!-- 待接单 (status=1) -->
    <template v-else-if="order.status === 1">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="contactService">联系客服</button>
    </template>
    
    <!-- 待服务 (status=2) -->
    <template v-else-if="order.status === 2">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="contactTeacher" v-if="order.teacherPhone">联系陪伴员</button>
    </template>
    
    <!-- 服务中 (status=3) -->
    <template v-else-if="order.status === 3">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="contactTeacher" v-if="order.teacherPhone">联系陪伴员</button>
    </template>
    
    <!-- 已完成 (status=4) -->
    <template v-else-if="order.status === 4">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="goReview" v-if="!order.reviewed">去评价</button>
      <button class="btn-primary" @click="rebuy" v-else>再次预约</button>
    </template>
    
    <!-- 已取消 (status=-1) -->
    <template v-else-if="order.status === -1">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="rebuy">重新预约</button>
    </template>
  </template>
  
  <!-- ========== 陪伴员端按钮 ========== -->
  <template v-else-if="userType === 'teacher'">
    <!-- 待接单 (status=1) -->
    <template v-if="order.status === 1">
      <button class="btn-secondary" @click="rejectOrder">拒绝接单</button>
      <button class="btn-primary" @click="acceptOrder">接受订单</button>
    </template>
    
    <!-- 待服务 (status=2) -->
    <template v-else-if="order.status === 2">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="startService">开始服务</button>
    </template>
    
    <!-- 服务中 (status=3) -->
    <template v-else-if="order.status === 3">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="endService">结束服务</button>
    </template>
    
    <!-- 已完成 (status=4) -->
    <template v-else-if="order.status === 4">
      <button class="btn-secondary" @click="goBack">返回</button>
      <button class="btn-primary" @click="viewFeedback">查看反馈</button>
    </template>
    
    <!-- 其他状态 -->
    <template v-else>
      <button class="btn-secondary" @click="goBack">返回</button>
    </template>
  </template>
  
  <!-- ========== 其他角色默认按钮 ========== -->
  <template v-else>
    <button class="btn-secondary" @click="goBack">返回</button>
  </template>
</view>

3. 添加陪伴员专属方法

methods: {
  // ... 现有方法
  
  // ========== 陪伴员专属方法 ==========
  
  // 接受订单
  async acceptOrder() {
    try {
      uni.showLoading({ title: '处理中...' })
      await api.teacherApi.acceptOrder(this.orderId)
      uni.hideLoading()
      uni.showToast({ title: '接单成功', icon: 'success' })
      setTimeout(() => this.loadOrderDetail(), 1500)
    } catch (error) {
      uni.hideLoading()
      uni.showToast({ title: error.message || '接单失败', icon: 'none' })
    }
  },
  
  // 拒绝订单
  async rejectOrder() {
    const [err, res] = await uni.showModal({
      title: '拒绝接单',
      content: '确定要拒绝这个订单吗？',
      placeholderText: '请输入拒绝原因'
    })
    
    if (!res.confirm) return
    
    try {
      uni.showLoading({ title: '处理中...' })
      await api.teacherApi.rejectOrder(this.orderId, {
        reason: '陪伴员拒绝接单'
      })
      uni.hideLoading()
      uni.showToast({ title: '已拒绝', icon: 'success' })
      setTimeout(() => uni.navigateBack(), 1500)
    } catch (error) {
      uni.hideLoading()
      uni.showToast({ title: error.message || '操作失败', icon: 'none' })
    }
  },
  
  // 开始服务
  startService() {
    uni.navigateTo({
      url: `/teacher-package/pages/service/checkin?orderId=${this.orderId}`
    })
  },
  
  // 结束服务
  endService() {
    uni.navigateTo({
      url: `/teacher-package/pages/service/checkout?orderId=${this.orderId}`
    })
  },
  
  // 查看反馈
  viewFeedback() {
    uni.navigateTo({
      url: `/teacher-package/pages/service/feedback?orderId=${this.orderId}`
    })
  }
}

---

📋 修改文件清单

需要修改的文件:

1. ✅ peidu/uniapp/src/order-package/pages/order/detail.vue
   • 添加userType字段
   • 修改底部操作栏显示逻辑
   • 添加陪伴员专属方法

---

🧪 测试要点

家长端测试:

1. ✅ 待支付订单: 显示"取消订单"、"立即支付"
2. ✅ 待接单订单: 显示"返回"、"联系客服"
3. ✅ 待服务订单: 显示"返回"、"联系陪伴员"
4. ✅ 服务中订单: 显示"返回"、"联系陪伴员"
5. ✅ 已完成订单: 显示"返回"、"去评价"或"再次预约"
6. ❌ 不显示"开始服务"、"结束服务"等陪伴员按钮

陪伴员端测试:

1. ✅ 待接单订单: 显示"拒绝接单"、"接受订单"
2. ✅ 待服务订单: 显示"返回"、"开始服务"
3. ✅ 服务中订单: 显示"返回"、"结束服务"
4. ✅ 已完成订单: 显示"返回"、"查看反馈"
5. ❌ 不显示"去评价"等家长专属按钮

---

🎯 实施步骤

1. 修改订单详情页面

文件: peidu/uniapp/src/order-package/pages/order/detail.vue

2. 重新编译前端

# 在HBuilderX中
# 1. 点击"运行" -> "运行到浏览器"
# 2. 或点击"发行" -> "小程序-微信"

3. 测试验证

• 使用家长账号登录,查看订单详情
• 使用陪伴员账号登录,查看订单详情
• 确认按钮显示正确

---

💡 扩展优化

后续可以优化的点:

1. 统一角色管理

   • 使用Vuex统一管理用户角色
   • 避免每个页面都获取一次

2. 权限指令

   • 创建v-permission指令
   • 简化权限判断代码

3. 组件级权限

   • 创建权限组件
   • 自动根据角色显示/隐藏

---

📝 总结

这次修复的核心是:

• ✅ 添加用户角色判断
• ✅ 根据角色显示不同的操作按钮
• ✅ 家长端不再显示陪伴员专属功能

修复后,家长端日历和订单详情将只显示家长相关的操作,不会再出现"开始服务"等混淆的按钮。