346 lines
8.3 KiB
Markdown
346 lines
8.3 KiB
Markdown
# 🎉 家长端日历按钮显示问题彻底修复
|
||
|
||
**日期**: 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: 添加用户角色字段
|
||
|
||
```javascript
|
||
data() {
|
||
return {
|
||
// ... 其他字段
|
||
userType: null, // ✅ 新增：用户角色
|
||
}
|
||
}
|
||
```
|
||
|
||
### 修改2: 在onLoad中获取用户角色
|
||
|
||
```javascript
|
||
onLoad() {
|
||
// ... 其他代码
|
||
|
||
// ✅ 获取用户角色
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
this.userType = userInfo?.userType || 'parent'
|
||
console.log('[服务日历] 用户角色:', this.userType)
|
||
|
||
// ... 其他代码
|
||
}
|
||
```
|
||
|
||
### 修改3: 根据角色显示不同按钮
|
||
|
||
#### 订单卡片中的按钮:
|
||
```vue
|
||
<!-- 订单底部操作 -->
|
||
<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>
|
||
```
|
||
|
||
#### 简化列表中的按钮:
|
||
```vue
|
||
<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: 添加家长端专属方法
|
||
|
||
```javascript
|
||
// ========== 家长端方法（新增 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, '')
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 修改前后对比
|
||
|
||
### 修改前:
|
||
```vue
|
||
<!-- 所有用户都看到相同的按钮 -->
|
||
<view v-if="order.status === 1" class="action-btn primary" @click.stop="startService(order)">
|
||
<text>开始服务</text>
|
||
</view>
|
||
```
|
||
|
||
### 修改后:
|
||
```vue
|
||
<!-- 根据用户角色显示不同按钮 -->
|
||
<!-- 陪伴员端 -->
|
||
<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. 重新编译前端
|
||
```bash
|
||
# 在HBuilderX中
|
||
# 运行 → 运行到浏览器/小程序
|
||
```
|
||
|
||
### 2. 清除缓存
|
||
```bash
|
||
# 在微信开发者工具中
|
||
# 点击"清缓存" → "全部清除"
|
||
```
|
||
|
||
### 3. 测试验证
|
||
- 使用家长账号测试服务日历
|
||
- 使用陪伴员账号测试服务日历
|
||
- 确认按钮显示正确
|
||
|
||
---
|
||
|
||
## 💡 经验总结
|
||
|
||
### 为什么会出现这个问题?
|
||
|
||
1. **多个页面显示相同内容**
|
||
- 订单详情页面: `order-package/pages/order/detail.vue`
|
||
- 服务日历列表: `pages/order/list.vue`
|
||
- 需要同时修复所有相关页面
|
||
|
||
2. **没有统一的权限管理**
|
||
- 每个页面都需要单独判断用户角色
|
||
- 容易遗漏某些页面
|
||
|
||
### 改进建议:
|
||
|
||
1. **创建权限指令**
|
||
```javascript
|
||
// 创建 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统一管理用户信息**
|
||
```javascript
|
||
// store/user.js
|
||
export default {
|
||
state: {
|
||
userInfo: null,
|
||
userType: null
|
||
},
|
||
getters: {
|
||
isTeacher: state => state.userType === 'teacher',
|
||
isParent: state => state.userType === 'parent'
|
||
}
|
||
}
|
||
```
|
||
|
||
3. **创建权限组件**
|
||
```vue
|
||
<!-- 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. ✅ 陪伴员端显示"开始服务"按钮
|
||
|
||
现在家长端和陪伴员端的功能已经完全区分开来,不会再出现混淆的情况!
|