从 shccd159 合并 backend-adminend 子项目到 main
Made-with: Cursor
This commit is contained in:
apple
293
backend-adminend/docs/商品寄卖服务模块-开发说明.md
Normal file
293
backend-adminend/docs/商品寄卖服务模块-开发说明.md
Normal 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
|
||||
**维护**: 开发团队
|
||||
|
||||
Reference in New Issue
Block a user