186 lines
3.9 KiB
Markdown
186 lines
3.9 KiB
Markdown
# 快速派单页面分离修复
|
||
|
||
> 创建时间：2026-02-26
|
||
> 问题：管理师首页的"快速派单"按钮跳转到 tabBar 的"快速预约"页面，导致功能混乱
|
||
|
||
---
|
||
|
||
## 问题描述
|
||
|
||
用户反馈：
|
||
- 管理师首页点击"快速派单"按钮 → 跳转到底部导航栏的"快速预约"页面
|
||
- 底部导航栏的"快速预约" → 应该显示家长端预约界面
|
||
- 两个入口功能混淆，需要分离
|
||
|
||
---
|
||
|
||
## 解决方案
|
||
|
||
### 1. 创建独立的管理师派单页面
|
||
|
||
**新建文件：** `peidu/uniapp/manager-package/pages/manager/quick-assign.vue`
|
||
|
||
```vue
|
||
<template>
|
||
<view class="container">
|
||
<!-- 管理师派单界面 -->
|
||
<ManagerBooking />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ManagerBooking from '@/pages/booking/components/ManagerBooking.vue'
|
||
|
||
export default {
|
||
components: {
|
||
ManagerBooking
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 2. 修改管理师首页跳转逻辑
|
||
|
||
**文件：** `peidu/uniapp/src/pages/index/components/ManagerHome.vue`
|
||
|
||
**修改前：**
|
||
```javascript
|
||
goQuickBooking() {
|
||
uni.switchTab({
|
||
url: '/pages/booking/quick-booking'
|
||
})
|
||
}
|
||
```
|
||
|
||
**修改后：**
|
||
```javascript
|
||
goQuickBooking() {
|
||
// 跳转到管理师派单页面（独立页面）
|
||
uni.navigateTo({
|
||
url: '/manager-package/pages/manager/quick-assign'
|
||
})
|
||
}
|
||
```
|
||
|
||
### 3. 恢复快速预约页面为家长端
|
||
|
||
**文件：** `peidu/uniapp/src/pages/booking/quick-booking.vue`
|
||
|
||
**修改前：** 根据角色显示不同组件（管理师、陪伴员、分销员等）
|
||
|
||
**修改后：** 只显示家长端预约界面
|
||
```vue
|
||
<template>
|
||
<view class="container">
|
||
<!-- 快速预约页面：显示家长端预约界面 -->
|
||
<!-- 游客模式：可浏览，点击预约时拦截登录 -->
|
||
<ParentBooking :isGuestMode="!isLoggedIn" />
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### 4. 修复返回按钮路径
|
||
|
||
**文件：** `peidu/uniapp/src/pages/booking/components/ManagerBooking.vue`
|
||
|
||
**修复：**
|
||
```javascript
|
||
goBack() {
|
||
// 返回到管理师首页
|
||
uni.switchTab({
|
||
url: '/pages/index/index' // 修复：之前是 '/pages/index'
|
||
})
|
||
}
|
||
```
|
||
|
||
### 5. 标题居中显示
|
||
|
||
**文件：** `peidu/uniapp/src/pages/booking/components/ManagerBooking.vue`
|
||
|
||
**修改样式：**
|
||
```scss
|
||
.header {
|
||
position: relative; // 添加相对定位
|
||
|
||
.back-button {
|
||
position: absolute; // 改为绝对定位
|
||
left: 30rpx;
|
||
z-index: 10;
|
||
// 移除 margin-right: 20rpx
|
||
}
|
||
|
||
.header-content {
|
||
flex: 1;
|
||
text-align: center; // 标题居中
|
||
}
|
||
}
|
||
```
|
||
|
||
### 6. 注册新页面
|
||
|
||
**文件：** `peidu/uniapp/pages.json`
|
||
|
||
在 `manager-package` 分包中添加：
|
||
```json
|
||
{
|
||
"path": "pages/manager/quick-assign",
|
||
"style": {
|
||
"navigationBarTitleText": "快速派单",
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 修改文件清单
|
||
|
||
1. ✅ 新建：`manager-package/pages/manager/quick-assign.vue`
|
||
2. ✅ 修改：`src/pages/index/components/ManagerHome.vue`
|
||
3. ✅ 修改：`src/pages/booking/quick-booking.vue`
|
||
4. ✅ 修改：`src/pages/booking/components/ManagerBooking.vue`
|
||
5. ✅ 修改：`pages.json`
|
||
|
||
---
|
||
|
||
## 功能说明
|
||
|
||
### 管理师首页 → 快速派单
|
||
- 点击"快速派单"按钮
|
||
- 跳转到独立的派单页面（`/manager-package/pages/manager/quick-assign`）
|
||
- 显示管理师派单界面，包含：
|
||
- 返回按钮（左上角）
|
||
- 标题居中显示
|
||
- 待派单统计
|
||
- 待派单订单列表
|
||
|
||
### 底部导航栏 → 快速预约
|
||
- 点击"快速预约" tab
|
||
- 显示家长端预约界面
|
||
- 游客可浏览，点击预约时拦截登录
|
||
|
||
---
|
||
|
||
## 测试步骤
|
||
|
||
1. 以管理师身份登录
|
||
2. 在首页点击"快速派单"按钮
|
||
3. 验证跳转到独立的派单页面
|
||
4. 验证标题居中显示
|
||
5. 点击左上角返回按钮，验证返回首页
|
||
6. 点击底部导航栏"快速预约"
|
||
7. 验证显示家长端预约界面
|
||
|
||
---
|
||
|
||
## 完成状态
|
||
|
||
✅ 已完成所有修改
|
||
✅ 页面分离成功
|
||
✅ 返回按钮正常
|
||
✅ 标题居中显示
|
||
|
||
---
|
||
|
||
**修复完成时间：** 2026-02-26
|