integral-shop/frontend/docs/商品寄卖服务模块-路由配置说明.md

# 商品寄卖服务模块 - 路由配置说明

## ✅ 配置完成

已成功为商品寄卖服务模块创建并注册路由配置。

---

## 📁 文件清单

### 1. 路由模块文件
**文件路径**: `/src/router/modules/consignment.js`

**路由配置**:
```javascript
{
  path: '/consignment',
  component: Layout,
  redirect: '/consignment/merchandise',
  name: 'Consignment',
  meta: {
    title: '商品寄卖服务',
    icon: 'clipboard',
  },
  children: [...]
}
```

### 2. 主路由文件更新
**文件路径**: `/src/router/index.js`

**更新内容**:
- ✅ 导入 consignmentRouter 模块
- ✅ 在 constantRoutes 中注册路由（位于财务路由之后）

---

## 🎯 路由列表

### 一级菜单
```
/consignment - 商品寄卖服务
```

### 二级菜单及页面

#### 1. 寄售商品管理
| 路由路径 | 组件路径 | 名称 | 标题 | 显示 |
|---------|---------|------|------|------|
| `/consignment/merchandise` | `@/views/consignment/merchandise/index` | Merchandise | 寄售商品管理 | 显示 |
| `/consignment/merchandise/detail` | `@/views/consignment/merchandise/detail` | MerchandiseDetail | 寄售商品详情 | 隐藏 |

**特性**:
- 列表页显示在菜单中
- 详情页隐藏，通过列表页跳转
- 详情页激活菜单：`/consignment/merchandise`
- 详情页不缓存（noCache: true）

#### 2. 提现管理
| 路由路径 | 组件路径 | 名称 | 标题 | 显示 |
|---------|---------|------|------|------|
| `/consignment/withdraw` | `@/views/consignment/withdraw/index` | Withdraw | 提现管理 | 显示 |
| `/consignment/withdraw/detail` | `@/views/consignment/withdraw/detail` | WithdrawDetail | 提现详情 | 隐藏 |

**特性**:
- 列表页显示在菜单中
- 详情页隐藏，通过列表页跳转
- 详情页激活菜单：`/consignment/withdraw`
- 详情页不缓存（noCache: true）

#### 3. 财务日志管理
| 路由路径 | 组件路径 | 名称 | 标题 | 显示 |
|---------|---------|------|------|------|
| `/consignment/financial-log` | `@/views/consignment/financial-log/index` | FinancialLog | 财务日志管理 | 显示 |

**特性**:
- 单页面，无详情页
- 包含4种日志类型（优惠券、个人奖金、推广奖金、余额）

---

## 📊 路由结构图

```
商品寄卖服务 (/consignment)
├── 寄售商品管理 (/merchandise)
│   └── 寄售商品详情 (/merchandise/detail) [hidden]
├── 提现管理 (/withdraw)
│   └── 提现详情 (/withdraw/detail) [hidden]
└── 财务日志管理 (/financial-log)
```

---

## 🔧 路由配置说明

### 基础配置
```javascript
{
  path: '/consignment',           // 路由路径
  component: Layout,              // 使用Layout布局
  redirect: '/consignment/merchandise', // 默认重定向到寄售商品管理
  name: 'Consignment',           // 路由名称（必须唯一）
  meta: {
    title: '商品寄卖服务',        // 菜单显示标题
    icon: 'clipboard',           // 菜单图标
  }
}
```

### 子路由配置

#### 显示在菜单中的页面
```javascript
{
  path: 'merchandise',
  component: () => import('@/views/consignment/merchandise/index'),
  name: 'Merchandise',
  meta: { title: '寄售商品管理', icon: '' }
}
```

#### 隐藏的详情页
```javascript
{
  path: 'merchandise/detail',
  component: () => import('@/views/consignment/merchandise/detail'),
  name: 'MerchandiseDetail',
  meta: { 
    title: '寄售商品详情',
    noCache: true,                    // 不缓存页面
    activeMenu: '/consignment/merchandise' // 高亮父菜单
  },
  hidden: true                        // 隐藏在侧边栏
}
```

---

## 🔗 路由跳转示例

### 从列表页跳转到详情页

#### 寄售商品详情
```javascript
// 在 merchandise/index.vue 中
handleDetail(row) {
  this.$router.push({
    path: '/consignment/merchandise/detail',
    query: { id: row.id }
  });
}
```

#### 提现详情
```javascript
// 在 withdraw/index.vue 中
handleDetail(row) {
  this.$router.push({
    path: '/consignment/withdraw/detail',
    query: { id: row.id }
  });
}
```

### 从详情页返回列表页
```javascript
// 在详情页中
goBack() {
  this.$router.go(-1);  // 返回上一页
  // 或
  this.$router.push('/consignment/merchandise'); // 跳转到指定页面
}
```

---

## 🎨 菜单图标配置

### 当前图标
所有菜单使用 `clipboard` 图标（默认配置）

### 自定义图标
可以在 `meta.icon` 中指定不同的图标：

```javascript
meta: {
  title: '寄售商品管理',
  icon: 'shopping', // 可自定义图标名称
}
```

**可用图标**: 参考项目中的SVG图标库或Element UI图标

---

## 🔐 权限控制

### 路由级权限（待配置）
如需添加路由级权限控制，在meta中添加roles配置：

```javascript
meta: {
  title: '寄售商品管理',
  icon: '',
  roles: ['admin', 'editor'] // 指定可访问的角色
}
```

### 按钮级权限（已实现）
页面中的按钮已使用 `v-hasPermi` 指令进行权限控制：

```vue
<el-button 
  v-hasPermi="['admin:merchandise:update']"
  @click="handleEdit"
>
  编辑
</el-button>
```

---

## ✅ 验证清单

完成以下步骤后，路由配置即可正常使用：

- [x] 创建路由模块文件 `src/router/modules/consignment.js`
- [x] 在 `src/router/index.js` 中导入模块
- [x] 在 `constantRoutes` 中注册路由
- [ ] 重启开发服务器
- [ ] 验证菜单显示正常
- [ ] 验证页面跳转正常
- [ ] 验证详情页返回正常

---

## 🐛 常见问题

### 1. 菜单不显示
**原因**: 路由配置问题或权限问题
**解决**: 
- 检查路由是否正确导入和注册
- 检查meta.title是否配置
- 检查是否有权限限制

### 2. 页面跳转404
**原因**: 路由路径配置错误
**解决**: 
- 检查path配置是否正确
- 检查组件import路径是否正确
- 检查组件文件是否存在

### 3. 详情页刷新后菜单高亮不对
**原因**: 缺少activeMenu配置
**解决**: 
- 在详情页meta中添加activeMenu配置
- 指向对应的列表页路径

### 4. 页面缓存问题
**原因**: keep-alive缓存了页面
**解决**: 
- 在需要每次都刷新的页面meta中添加 `noCache: true`
- 或在页面切换时清除缓存

---

## 📝 后续配置

### 1. 菜单图标优化
根据业务需求，为各个子菜单配置更合适的图标。

### 2. 权限配置
如需要路由级权限控制，在后台权限管理中添加对应的权限配置。

### 3. 面包屑配置
如需自定义面包屑显示，可在meta中添加breadcrumb配置。

---

## 🚀 启动验证

### 1. 重启开发服务器
```bash
npm run dev
```

### 2. 访问路由
- 主菜单: http://localhost:9527/consignment
- 寄售商品: http://localhost:9527/consignment/merchandise
- 提现管理: http://localhost:9527/consignment/withdraw
- 财务日志: http://localhost:9527/consignment/financial-log

### 3. 验证功能
- ✅ 菜单显示正确
- ✅ 页面能正常访问
- ✅ 详情页跳转正常
- ✅ 返回功能正常
- ✅ 菜单高亮正确

---

## 📞 技术支持

如有问题，请参考：
1. [商品寄卖服务模块-开发说明.md](./商品寄卖服务模块-开发说明.md)
2. [商品寄卖服务模块-文件清单.md](./商品寄卖服务模块-文件清单.md)
3. Vue Router 官方文档: https://router.vuejs.org/zh/

---

**创建日期**: 2025-11-13  
**版本**: V1.0  
**状态**: ✅ 配置完成  
**维护团队**: 开发团队