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

🎉 家长端日历按钮显示问题彻底修复

日期: 2026-01-24
状态: ✅ 已完成

---

📋 问题回顾

用户反馈:

"还是家长端存在开始服务,逻辑没有实现"

根本原因:

之前只修复了订单详情页面(order-package/pages/order/detail.vue),但是服务日历列表页面(pages/order/list.vue)也在显示"开始服务"按钮,这个页面没有修复!

---

✅ 已修复的文件

1. 订单详情页面 (第一次修复)

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

• ✅ 添加了userType字段
• ✅ 根据角色显示不同按钮
• ✅ 家长端不显示"开始服务"

2. 服务日历列表页面 (第二次修复 - 本次)

文件: peidu/uniapp/src/pages/order/list.vue

• ✅ 添加了userType字段
• ✅ 根据角色显示不同按钮
• ✅ 家长端不显示"开始服务"
• ✅ 家长端显示"联系陪伴员"
• ✅ 添加了contactTeacher方法

---

🔍 修改详情

修改1: 添加用户角色字段

data() {
  return {
    // ... 其他字段
    userType: null, // ✅ 新增：用户角色
  }
}

修改2: 在onLoad中获取用户角色

onLoad() {
  // ... 其他代码
  
  // ✅ 获取用户角色
  const userInfo = uni.getStorageSync('userInfo')
  this.userType = userInfo?.userType || 'parent'
  console.log('[服务日历] 用户角色:', this.userType)
  
  // ... 其他代码
}

修改3: 根据角色显示不同按钮

订单卡片中的按钮:

<!-- 订单底部操作 -->
<view class="order-footer">
  <view class="order-no">
    <text>订单号: {{ order.orderNo }}</text>
  </view>
  <view class="order-actions">
    <!-- ========== 陪伴员端按钮 ========== -->
    <template v-if="userType === 'teacher'">
      <view v-if="order.status === 1" class="action-btn primary" @click.stop="startService(order)">
        <text>开始服务</text>
      </view>
      <view v-if="order.status === 2" class="action-btn success" @click.stop="completeService(order)">
        <text>完成服务</text>
      </view>
    </template>
    <!-- ========== 家长端按钮 ========== -->
    <template v-else-if="userType === 'parent' || userType === 'user'">
      <view v-if="order.teacherPhone" class="action-btn primary" @click.stop="contactTeacher(order)">
        <text>联系陪伴员</text>
      </view>
    </template>
    <!-- ========== 通用按钮 ========== -->
    <view class="action-btn default" @click.stop="goToOrderDetail(order)">
      <text>查看详情</text>
    </view>
  </view>
</view>

简化列表中的按钮:

<view class="order-footer">
  <view class="order-no">
    <text>{{ order.serviceName || '陪伴服务' }}</text>
  </view>
  <!-- ========== 陪伴员端按钮 ========== -->
  <view v-if="userType === 'teacher' && order.status === 1" class="action-btn primary" @click.stop="startService(order)">
    <text>开始服务</text>
  </view>
  <!-- ========== 家长端按钮 ========== -->
  <view v-else-if="(userType === 'parent' || userType === 'user') && order.teacherPhone" class="action-btn primary" @click.stop="contactTeacher(order)">
    <text>联系陪伴员</text>
  </view>
</view>

修改4: 添加家长端专属方法

// ========== 家长端方法（新增 2026-01-24）==========

// 联系陪伴员
contactTeacher(order) {
  if (!order.teacherPhone) {
    uni.showToast({
      title: '暂无陪伴员联系方式',
      icon: 'none'
    })
    return
  }
  
  uni.showModal({
    title: '联系陪伴员',
    content: `是否拨打陪伴员电话：${order.teacherPhone}？`,
    success: (res) => {
      if (res.confirm) {
        uni.makePhoneCall({
          phoneNumber: order.teacherPhone.replace(/\*/g, '')
        })
      }
    }
  })
}

---

📊 修改前后对比

修改前:

<!-- 所有用户都看到相同的按钮 -->
<view v-if="order.status === 1" class="action-btn primary" @click.stop="startService(order)">
  <text>开始服务</text>
</view>

修改后:

<!-- 根据用户角色显示不同按钮 -->
<!-- 陪伴员端 -->
<template v-if="userType === 'teacher'">
  <view v-if="order.status === 1" class="action-btn primary" @click.stop="startService(order)">
    <text>开始服务</text>
  </view>
</template>

<!-- 家长端 -->
<template v-else-if="userType === 'parent' || userType === 'user'">
  <view v-if="order.teacherPhone" class="action-btn primary" @click.stop="contactTeacher(order)">
    <text>联系陪伴员</text>
  </view>
</template>

---

🎯 功能区分

家长端服务日历:

• ✅ 查看服务安排
• ✅ 查看订单详情
• ✅ 联系陪伴员
• ❌ 不显示"开始服务"
• ❌ 不显示"完成服务"

陪伴员端服务日历:

• ✅ 查看工作安排
• ✅ 开始服务(签到)
• ✅ 完成服务(签退)
• ✅ 查看订单详情
• ❌ 不显示"联系陪伴员"

---

🧪 测试验证

测试步骤:

1. 家长端测试

   登录家长账号 → 进入服务日历 → 查看订单列表
   预期结果:
   - ✅ 显示"联系陪伴员"按钮
   - ✅ 显示"查看详情"按钮
   - ❌ 不显示"开始服务"按钮
   

2. 陪伴员端测试

   登录陪伴员账号 → 进入服务日历 → 查看订单列表
   预期结果:
   - ✅ 显示"开始服务"按钮
   - ✅ 显示"完成服务"按钮
   - ✅ 显示"查看详情"按钮
   - ❌ 不显示"联系陪伴员"按钮
   

3. 功能测试

   家长端:
   - 点击"联系陪伴员" → 弹出拨号确认框 → 拨打电话
   
   陪伴员端:
   - 点击"开始服务" → 跳转到签到页面
   - 点击"完成服务" → 弹出确认框 → 完成服务
   

---

📝 修复的页面清单

页面	路径	状态	说明
订单详情	order-package/pages/order/detail.vue	✅ 已修复	第一次修复
服务日历列表	pages/order/list.vue	✅ 已修复	第二次修复(本次)

---

🚀 下一步

1. 重新编译前端

# 在HBuilderX中
# 运行 → 运行到浏览器/小程序

2. 清除缓存

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

3. 测试验证

• 使用家长账号测试服务日历
• 使用陪伴员账号测试服务日历
• 确认按钮显示正确

---

💡 经验总结

为什么会出现这个问题?

1. 多个页面显示相同内容

   • 订单详情页面: order-package/pages/order/detail.vue
   • 服务日历列表: pages/order/list.vue
   • 需要同时修复所有相关页面

2. 没有统一的权限管理

   • 每个页面都需要单独判断用户角色
   • 容易遗漏某些页面

改进建议:

1. 创建权限指令

   // 创建 v-permission 指令
   Vue.directive('permission', {
     inserted(el, binding) {
       const userType = uni.getStorageSync('userInfo')?.userType
       const requiredType = binding.value
       if (userType !== requiredType) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     }
   })
   
   // 使用
   <button v-permission="'teacher'">开始服务</button>
   

2. 使用Vuex统一管理用户信息

   // store/user.js
   export default {
     state: {
       userInfo: null,
       userType: null
     },
     getters: {
       isTeacher: state => state.userType === 'teacher',
       isParent: state => state.userType === 'parent'
     }
   }
   

3. 创建权限组件

   <!-- Permission.vue -->
   <template>
     <view v-if="hasPermission">
       <slot></slot>
     </view>
   </template>
   
   <script>
   export default {
     props: ['role'],
     computed: {
       hasPermission() {
         const userType = uni.getStorageSync('userInfo')?.userType
         return userType === this.role
       }
     }
   }
   </script>
   
   <!-- 使用 -->
   <Permission role="teacher">
     <button>开始服务</button>
   </Permission>
   

---

✅ 总结

已彻底修复家长端日历按钮显示问题:

1. ✅ 修复了订单详情页面
2. ✅ 修复了服务日历列表页面
3. ✅ 添加了用户角色判断逻辑
4. ✅ 家长端不再显示"开始服务"按钮
5. ✅ 家长端显示"联系陪伴员"按钮
6. ✅ 陪伴员端显示"开始服务"按钮

现在家长端和陪伴员端的功能已经完全区分开来,不会再出现混淆的情况!