refactor: frontend 重命名为 backend-adminend,新增 shccd159/shjjy153 配置

- frontend 目录迁移至 backend-adminend(管理后台前端)
- 新增 application-shccd159.yml、application-shjjy153.yml
- 更新 deploy.conf、DEPLOY.md、application.yml

Made-with: Cursor
This commit is contained in:
apple
2026-03-16 09:33:54 +08:00
parent 0cd7ebe202
commit 4b0afb3951
738 changed files with 292 additions and 89 deletions

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,293 @@
# 商品寄卖服务模块 - 开发说明
## 📁 文件结构
### API接口文件
```
src/api/consignment.js // 商品寄卖服务API接口
```
### 页面文件
```
src/views/consignment/
├── merchandise/ # 寄售商品管理
│ ├── index.vue # 寄售商品列表
│ └── detail.vue # 寄售商品详情
├── withdraw/ # 提现管理
│ ├── index.vue # 提现列表
│ └── detail.vue # 提现详情
└── financial-log/ # 财务日志管理
└── index.vue # 财务日志包含4种类型
```
## 🔌 API接口列表
### 寄售商品模块
- `merchandiseListApi()` - 获取寄售商品列表
- `merchandiseInfoApi()` - 获取寄售商品详情
- `merchandiseUpdateApi()` - 更新寄售商品
- `merchandiseBatchUpdateApi()` - 批量更新寄售商品
### 提现管理模块
- `withdrawListApi()` - 获取提现列表
- `withdrawInfoApi()` - 获取提现详情
- `withdrawAuditApi()` - 审核提现申请
- `withdrawStatisticsApi()` - 获取提现统计数据
### 财务日志模块
- `couponLogListApi()` - 获取优惠券日志列表
- `couponLogStatisticsApi()` - 获取优惠券统计
- `selfBonusLogListApi()` - 获取个人奖金日志列表
- `selfBonusLogStatisticsApi()` - 获取个人奖金统计
- `shareBonusLogListApi()` - 获取推广奖金日志列表
- `shareBonusLogStatisticsApi()` - 获取推广奖金统计
- `moneyLogListApi()` - 获取余额日志列表
- `moneyLogStatisticsApi()` - 获取余额统计
### 寄售订单模块
- `consignmentOrderListApi()` - 获取寄售订单列表
- `consignmentOrderInfoApi()` - 获取寄售订单详情
- `consignmentOrderUpdateApi()` - 更新寄售订单
- `consignmentOrderStatisticsApi()` - 获取订单统计
## 🛠️ 技术栈
- **前端框架**: Vue.js 2.x
- **UI组件库**: Element UI
- **HTTP请求**: Axios (通过 @/utils/request 封装)
- **路由**: Vue Router
- **状态管理**: Vuex (如有使用)
## 📝 代码规范
### API接口规范
```javascript
/**
* 功能描述
* @param params
*/
export function apiNameApi(params) {
return request({
url: '/app/admin/module/action',
method: 'get', // 或 'post'
params, // GET请求用params
// data, // POST请求用data
});
}
```
### Vue组件规范
```vue
<template>
<div class="divBox relative">
<el-card class="box-card">
<!-- 页面内容 -->
</el-card>
</div>
</template>
<script>
import { apiNameApi } from '@/api/consignment';
export default {
name: 'ComponentName',
data() {
return {
// 数据定义
};
},
mounted() {
// 初始化逻辑
},
methods: {
// 方法定义
},
};
</script>
<style scoped lang="scss">
// 样式定义
</style>
```
## 🚀 使用步骤
### 1. 导入API接口
```javascript
import {
merchandiseListApi,
merchandiseUpdateApi
} from '@/api/consignment';
```
### 2. 调用API示例
```javascript
// 获取列表
async getList() {
try {
const res = await merchandiseListApi({
page: 1,
limit: 10,
status: 1
});
this.tableData = res.data.data;
this.total = res.data.count;
} catch (e) {
this.$message.error(e.message || '获取列表失败');
}
}
// 更新数据
async update() {
try {
await merchandiseUpdateApi({
id: this.id,
is_show: 1
});
this.$message.success('更新成功');
} catch (e) {
this.$message.error(e.message || '更新失败');
}
}
```
## 🎯 功能特性
### 寄售商品管理
- ✅ 商品列表展示(支持分页、搜索、筛选)
- ✅ 商品详情查看
- ✅ 商品状态管理(上架/下架)
- ✅ 批量操作(批量显示/隐藏)
- ✅ 图片预览功能
### 提现管理
- ✅ 提现申请列表支持多状态Tab切换
- ✅ 提现详情查看
- ✅ 提现审核(通过/驳回)
- ✅ 统计数据展示
- ✅ 收款账号信息展示
### 财务日志
- ✅ 4种日志类型切换优惠券、个人奖金、推广奖金、余额
- ✅ 日志列表展示
- ✅ 统计数据(总收入、总支出、净额)
- ✅ 时间范围筛选
- ✅ 用户筛选
## 🔐 权限控制
所有页面和操作都支持权限控制,使用 `v-hasPermi` 指令:
```vue
<el-button
v-hasPermi="['admin:merchandise:update']"
@click="handleUpdate"
>
更新
</el-button>
```
权限标识规范:
- `admin:merchandise:info` - 查看寄售商品详情
- `admin:merchandise:update` - 更新寄售商品
- `admin:withdraw:info` - 查看提现详情
- `admin:withdraw:audit` - 审核提现申请
## 📋 路由配置
需要在路由配置文件中添加以下路由:
```javascript
{
path: '/consignment',
component: Layout,
redirect: '/consignment/merchandise',
name: 'Consignment',
meta: { title: '商品寄卖服务', icon: 'el-icon-goods' },
children: [
{
path: 'merchandise',
name: 'Merchandise',
component: () => import('@/views/consignment/merchandise/index'),
meta: { title: '寄售商品管理', icon: 'el-icon-shopping-bag-1' }
},
{
path: 'merchandise/detail',
name: 'MerchandiseDetail',
component: () => import('@/views/consignment/merchandise/detail'),
meta: { title: '寄售商品详情', activeMenu: '/consignment/merchandise' },
hidden: true
},
{
path: 'withdraw',
name: 'Withdraw',
component: () => import('@/views/consignment/withdraw/index'),
meta: { title: '提现管理', icon: 'el-icon-wallet' }
},
{
path: 'withdraw/detail',
name: 'WithdrawDetail',
component: () => import('@/views/consignment/withdraw/detail'),
meta: { title: '提现详情', activeMenu: '/consignment/withdraw' },
hidden: true
},
{
path: 'financial-log',
name: 'FinancialLog',
component: () => import('@/views/consignment/financial-log/index'),
meta: { title: '财务日志', icon: 'el-icon-document' }
}
]
}
```
## 🎨 样式说明
### 通用样式类
- `.divBox` - 页面容器
- `.box-card` - 卡片容器
- `.selWidth` - 表单项宽度100%
- `.price` - 价格样式(红色加粗)
- `.income` - 收入样式(绿色)
- `.expense` - 支出样式(红色)
### 响应式布局
使用 Element UI 的栅格系统:
```javascript
grid: {
xl: 8, // ≥1920px
lg: 8, // ≥1200px
md: 12, // ≥992px
sm: 24, // ≥768px
xs: 24 // <768px
}
```
## 🐛 常见问题
### 1. API请求失败
- 检查后端接口是否正常
- 检查请求参数格式是否正确
- 检查token是否有效
### 2. 图片显示问题
- 确认图片URL格式JSON数组或字符串
- 使用 `getFirstImage()``getImageList()` 方法解析
### 3. 权限问题
- 确认权限标识配置正确
- 检查用户角色是否有对应权限
## 📞 技术支持
如有问题,请查阅:
1. [商品寄卖服务系统管理后台API接口PRD-完整版.md](./商品寄卖服务系统管理后台API接口PRD-完整版.md)
2. [数据库设计说明.md](./数据库设计说明.md)
3. Element UI官方文档: https://element.eleme.cn/
---
**创建日期**: 2025-11-13
**版本**: V1.0
**维护**: 开发团队

View File

@@ -0,0 +1,347 @@
# 商品寄卖服务模块 - 文件清单
## 📦 已创建文件列表
### 1. API接口文件
#### `/src/api/consignment.js` (227行)
商品寄卖服务模块的所有API接口封装文件。
**包含接口**
- 寄售商品管理 (4个接口)
- `merchandiseListApi` - 寄售商品列表
- `merchandiseInfoApi` - 寄售商品详情
- `merchandiseUpdateApi` - 更新寄售商品
- `merchandiseBatchUpdateApi` - 批量更新寄售商品
- 提现管理 (4个接口)
- `withdrawListApi` - 提现列表
- `withdrawInfoApi` - 提现详情
- `withdrawAuditApi` - 审核提现
- `withdrawStatisticsApi` - 提现统计
- 财务日志管理 (12个接口)
- 优惠券日志 (2个)
- 个人奖金日志 (2个)
- 推广奖金日志 (2个)
- 余额日志 (2个)
- 寄售订单管理 (4个接口)
- `consignmentOrderListApi` - 订单列表
- `consignmentOrderInfoApi` - 订单详情
- `consignmentOrderUpdateApi` - 更新订单
- `consignmentOrderStatisticsApi` - 订单统计
**总计**: 24个API接口
---
### 2. 视图页面文件
#### 寄售商品管理模块
##### `/src/views/consignment/merchandise/index.vue` (约400行)
**功能**
- ✅ 寄售商品列表展示
- ✅ 多条件搜索筛选商品ID、用户ID、标题、状态、显示状态、时间范围
- ✅ 展开/收起搜索条件
- ✅ 商品图片预览(支持多图)
- ✅ 显示状态快速切换Switch开关
- ✅ 批量操作(批量显示/隐藏)
- ✅ 分页功能
- ✅ 编辑对话框
- ✅ 权限控制
**主要组件**
- el-table - 数据表格
- el-form - 搜索表单
- el-dialog - 编辑对话框
- el-image - 图片预览
- el-pagination - 分页
##### `/src/views/consignment/merchandise/detail.vue` (约220行)
**功能**
- ✅ 寄售商品详情展示
- ✅ 基本信息ID、用户、状态、价格等
- ✅ 商品标题展示
- ✅ 商品图片列表展示(支持预览)
- ✅ 快速编辑功能
- ✅ 返回列表
**主要组件**
- el-descriptions - 描述列表
- el-image - 图片展示
- el-dialog - 编辑对话框
---
#### 提现管理模块
##### `/src/views/consignment/withdraw/index.vue` (约450行)
**功能**
- ✅ 提现申请列表展示
- ✅ 状态Tab切换全部、待审核、已通过、已驳回
- ✅ 多条件搜索提现编号、用户ID、提现类型、账号类型、时间范围
- ✅ 统计数据展示(总申请数、总金额、待审核、已通过)
- ✅ 金额信息展示(提现金额、手续费、实际到账)
- ✅ 快速审核(通过/驳回)
- ✅ 审核对话框(支持备注)
- ✅ 分页功能
- ✅ 权限控制
**主要组件**
- el-tabs - 状态切换
- el-table - 数据表格
- el-form - 搜索表单
- el-dialog - 审核对话框
- 统计数据卡片
##### `/src/views/consignment/withdraw/detail.vue` (约300行)
**功能**
- ✅ 提现详情完整展示
- ✅ 基本信息(编号、用户、类型、状态)
- ✅ 金额信息卡片展示(提现金额、手续费、实际到账)
- ✅ 收款账号信息展示(支持银行卡和支付宝)
- ✅ 审核信息展示(申请时间、处理时间、备注)
- ✅ 详情页快速审核
- ✅ 返回列表
**主要组件**
- el-descriptions - 描述列表
- el-dialog - 审核对话框
- 金额卡片组件
---
#### 财务日志管理模块
##### `/src/views/consignment/financial-log/index.vue` (约400行)
**功能**
- ✅ 4种日志类型Tab切换优惠券、个人奖金、推广奖金、余额
- ✅ 多条件搜索用户ID、类型、备注、时间范围
- ✅ 统计数据展示(总记录数、总收入、总支出、净额)
- ✅ 收入/支出颜色区分
- ✅ 变更前后金额对比
- ✅ 分页功能
- ✅ 动态API调用根据日志类型切换
**主要组件**
- el-tabs - 日志类型切换
- el-table - 数据表格
- el-form - 搜索表单
- 统计数据卡片
**特色功能**
- 一个页面管理4种财务日志类型
- 自动根据Tab切换调用不同API
- 收入显示绿色,支出显示红色
- 实时统计数据更新
---
### 3. 文档文件
#### `/docs/商品寄卖服务模块-开发说明.md`
完整的开发文档,包含:
- 文件结构说明
- API接口列表
- 技术栈说明
- 代码规范
- 使用步骤
- 功能特性
- 权限控制
- 路由配置
- 样式说明
- 常见问题
#### `/docs/商品寄卖服务模块-文件清单.md` (本文件)
所有创建文件的详细清单和功能说明
---
## 📊 统计数据
### 代码量统计
- **API接口文件**: 1个文件227行代码24个接口
- **视图页面文件**: 6个文件约2200行代码
- **文档文件**: 2个文件
### 功能模块统计
- **寄售商品管理**: 2个页面列表+详情)
- **提现管理**: 2个页面列表+详情)
- **财务日志**: 1个页面4种类型合并
### 接口统计
- **查询接口**: 16个
- **更新接口**: 4个
- **统计接口**: 4个
- **总计**: 24个接口
---
## 🎯 核心功能实现
### 1. 寄售商品管理 ✅
- [x] 商品列表展示
- [x] 搜索筛选
- [x] 批量操作
- [x] 状态管理
- [x] 图片预览
- [x] 商品详情
- [x] 快速编辑
### 2. 提现管理 ✅
- [x] 提现列表展示
- [x] 状态Tab切换
- [x] 统计数据展示
- [x] 审核功能(通过/驳回)
- [x] 提现详情
- [x] 收款账号展示
- [x] 金额计算展示
### 3. 财务日志 ✅
- [x] 4种日志类型切换
- [x] 日志列表展示
- [x] 统计数据展示
- [x] 收入支出颜色区分
- [x] 时间范围筛选
- [x] 用户筛选
### 4. 通用功能 ✅
- [x] 分页功能
- [x] 权限控制
- [x] 响应式布局
- [x] 加载状态
- [x] 错误处理
- [x] 消息提示
---
## 🎨 界面特色
### 1. 统计数据卡片
- 美观的统计数据展示
- 不同数据类型颜色区分
- 响应式布局
### 2. 表格功能
- 支持排序
- 支持筛选
- 支持分页
- 支持选择
- 操作按钮权限控制
### 3. 表单功能
- 展开/收起高级搜索
- 多种表单控件
- 时间范围选择
- 快速重置
### 4. 对话框
- 居中显示
- 表单验证
- 取消/确定操作
- 加载状态
---
## 🔄 与现有项目的兼容性
### 代码风格
✅ 完全遵循项目现有代码风格
- 使用CRMEB版权注释
- API函数命名规范xxxApi
- Vue组件命名规范
- 样式命名规范
### 技术栈
✅ 完全兼容项目技术栈
- Vue.js 2.x
- Element UI
- Axios请求封装
- Scss样式
### 权限系统
✅ 使用项目现有权限系统
- v-hasPermi指令
- 权限标识规范
---
## 📝 后续配置
### 1. 路由配置
需要在路由文件中添加商品寄卖服务模块的路由配置(详见开发说明文档)
### 2. 权限配置
需要在后台权限管理中添加对应的权限标识:
- `admin:merchandise:info`
- `admin:merchandise:update`
- `admin:withdraw:info`
- `admin:withdraw:audit`
### 3. 菜单配置
需要在菜单管理中添加商品寄卖服务相关菜单项
---
## ✅ 质量保证
### 代码质量
- [x] 遵循项目编码规范
- [x] 统一的错误处理
- [x] 完整的注释说明
- [x] 响应式布局支持
### 功能完整性
- [x] 所有核心功能实现
- [x] 权限控制完善
- [x] 异常处理完整
- [x] 用户体验友好
### 文档完整性
- [x] API接口文档
- [x] 开发说明文档
- [x] 文件清单文档
- [x] 代码注释完整
---
## 🚀 部署建议
1. **测试环境部署**
- 先在测试环境部署测试
- 验证所有功能正常
- 检查API接口对接情况
2. **权限配置**
- 添加对应的权限标识
- 配置角色权限
- 测试权限控制
3. **菜单配置**
- 添加菜单项
- 设置菜单图标
- 配置菜单顺序
4. **生产环境部署**
- 代码审查通过后部署
- 监控系统运行状况
- 收集用户反馈
---
## 📞 技术支持
如有问题,请参考:
1. [商品寄卖服务系统管理后台API接口PRD-完整版.md](./商品寄卖服务系统管理后台API接口PRD-完整版.md)
2. [商品寄卖服务模块-开发说明.md](./商品寄卖服务模块-开发说明.md)
3. [数据库设计说明.md](./数据库设计说明.md)
---
**创建日期**: 2025-11-13
**版本**: V1.0
**状态**: ✅ 已完成
**维护团队**: 开发团队

View File

@@ -0,0 +1,316 @@
# 商品寄卖服务模块 - 路由配置说明
## ✅ 配置完成
已成功为商品寄卖服务模块创建并注册路由配置。
---
## 📁 文件清单
### 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
**状态**: ✅ 配置完成
**维护团队**: 开发团队

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,311 @@
# 商品寄卖服务系统管理后台 - 项目启动说明
## ✅ 环境配置完成
已成功解决 Node.js 兼容性问题,项目可以正常启动。
---
## 🔧 已完成的修复
### 1. Node.js 兼容性问题
- ✅ 修改 `package.json` 添加 `--openssl-legacy-provider` 配置
- ✅ 安装 `cross-env@7.0.3`(兼容 Node.js v16
### 2. 商品寄卖服务模块
- ✅ API 接口文件:`src/api/consignment.js`
- ✅ 视图页面:`src/views/consignment/`
- ✅ 路由配置:`src/router/modules/consignment.js`
- ✅ 已注册到主路由
---
## 🚀 启动项目
### 开发环境启动
```bash
cd /Users/a123/Documents/UthinkH5V2/single_admin22miao
npm run dev
```
启动成功后,浏览器会自动打开:
- **地址**http://localhost:9527
- **登录账号**:根据实际配置
- **登录密码**:根据实际配置
### 生产环境构建
```bash
npm run build:prod
```
---
## 📊 当前环境信息
### Node.js 版本
```
Node.js: v16.18.0
npm: v8.19.4
```
### 关键依赖版本
```json
{
"vue": "2.6.10",
"element-ui": "2.13.0",
"vue-router": "3.0.2",
"vuex": "3.1.0",
"axios": "^0.24.0",
"cross-env": "7.0.3"
}
```
---
## 🎯 商品寄卖服务模块访问路径
### 菜单路由
- **主菜单**:商品寄卖服务 `/consignment`
- **寄售商品管理**`/consignment/merchandise`
- **寄售商品详情**`/consignment/merchandise/detail?id=xxx`
- **提现管理**`/consignment/withdraw`
- **提现详情**`/consignment/withdraw/detail?id=xxx`
- **财务日志管理**`/consignment/financial-log`
### 完整URL示例
```
http://localhost:9527/consignment/merchandise
http://localhost:9527/consignment/withdraw
http://localhost:9527/consignment/financial-log
```
---
## 📝 项目脚本说明
### package.json scripts
```json
{
"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --open",
"build:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
"build:stage": "cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --mode staging"
}
```
**说明**
- `cross-env`:跨平台环境变量设置工具
- `NODE_OPTIONS=--openssl-legacy-provider`:启用旧版 OpenSSL 提供程序
- `--open`:自动打开浏览器
---
## 🔍 常见问题
### 1. 端口被占用
**错误**`Error: listen EADDRINUSE: address already in use :::9527`
**解决方案**
```bash
# macOS/Linux 查找并杀掉占用端口的进程
lsof -ti:9527 | xargs kill -9
# 或者修改 vue.config.js 中的端口号
```
### 2. 模块找不到
**错误**`Cannot find module 'xxx'`
**解决方案**
```bash
# 删除 node_modules 重新安装
rm -rf node_modules package-lock.json
npm install
```
### 3. 编译错误
**错误**`Syntax Error` 或其他编译错误
**解决方案**
1. 检查代码语法
2. 清除缓存:`npm cache clean --force`
3. 重启开发服务器
### 4. 热更新不生效
**解决方案**
1. 检查 vue.config.js 配置
2. 重启开发服务器
3. 清除浏览器缓存
---
## 📂 项目结构
```
single_admin22miao/
├── docs/ # 文档目录
│ ├── Node.js版本兼容性-问题修复.md
│ ├── 商品寄卖服务模块-开发说明.md
│ ├── 商品寄卖服务模块-文件清单.md
│ ├── 商品寄卖服务模块-路由配置说明.md
│ ├── 商品寄卖服务系统管理后台API接口PRD-完整版.md
│ ├── 数据库设计说明.md
│ └── 项目启动说明.md (本文件)
├── src/
│ ├── api/
│ │ └── consignment.js # 商品寄卖服务API接口
│ ├── views/
│ │ └── consignment/ # 商品寄卖服务页面
│ │ ├── merchandise/ # 寄售商品管理
│ │ ├── withdraw/ # 提现管理
│ │ └── financial-log/ # 财务日志
│ └── router/
│ ├── index.js # 主路由配置
│ └── modules/
│ └── consignment.js # 商品寄卖服务路由
├── package.json # 项目配置
└── vue.config.js # Vue CLI 配置
```
---
## 🎨 开发规范
### API 接口调用
```javascript
import { merchandiseListApi } from '@/api/consignment';
async getList() {
try {
const res = await merchandiseListApi({
page: 1,
limit: 10
});
this.tableData = res.data.data;
} catch (e) {
this.$message.error(e.message);
}
}
```
### 路由跳转
```javascript
// 跳转到详情页
this.$router.push({
path: '/consignment/merchandise/detail',
query: { id: row.id }
});
// 返回上一页
this.$router.go(-1);
```
### 权限控制
```vue
<el-button
v-hasPermi="['admin:merchandise:update']"
@click="handleEdit"
>
编辑
</el-button>
```
---
## 📚 相关文档
### 开发文档
1. [商品寄卖服务模块-开发说明.md](./商品寄卖服务模块-开发说明.md)
2. [商品寄卖服务模块-文件清单.md](./商品寄卖服务模块-文件清单.md)
3. [商品寄卖服务模块-路由配置说明.md](./商品寄卖服务模块-路由配置说明.md)
### API文档
1. [商品寄卖服务系统管理后台API接口PRD-完整版.md](./商品寄卖服务系统管理后台API接口PRD-完整版.md)
2. [数据库设计说明.md](./数据库设计说明.md)
### 问题修复
1. [Node.js版本兼容性-问题修复.md](./Node.js版本兼容性-问题修复.md)
---
## ✅ 验证清单
启动项目前,请确认:
- [x] Node.js v16.x 已安装
- [x] npm 依赖已安装
- [x] cross-env@7.0.3 已安装
- [x] package.json 已配置 NODE_OPTIONS
- [x] 路由模块已注册
- [ ] 后端API服务已启动
- [ ] 数据库连接正常
启动后,请验证:
- [ ] 项目成功启动,无报错
- [ ] 浏览器自动打开
- [ ] 可以正常登录
- [ ] 商品寄卖服务菜单显示正常
- [ ] 各个页面可以正常访问
- [ ] API接口调用正常
---
## 🚀 快速开始
```bash
# 1. 进入项目目录
cd /Users/a123/Documents/UthinkH5V2/single_admin22miao
# 2. 启动项目(如果还没启动)
npm run dev
# 3. 等待编译完成,浏览器自动打开
# 4. 登录系统
# 5. 在左侧菜单找到"商品寄卖服务"模块
# 6. 开始使用功能
```
---
## 💡 开发建议
### 1. 代码编辑器
推荐使用 **VS Code** 并安装以下插件:
- VeturVue 语法支持)
- ESLint代码检查
- Prettier代码格式化
### 2. 浏览器开发工具
推荐使用 **Chrome** 并安装:
- Vue DevtoolsVue 调试工具)
### 3. Git 版本控制
```bash
# 查看修改
git status
# 提交代码
git add .
git commit -m "feat: 添加商品寄卖服务模块"
git push
```
---
## 📞 技术支持
如遇到问题,请:
1. 查看相关文档
2. 检查控制台错误信息
3. 查看网络请求是否正常
4. 确认后端API服务状态
---
**创建日期**: 2025-11-13
**版本**: V1.0
**状态**: ✅ 项目配置完成,可以正常启动
**维护团队**: 开发团队