integral-shop/frontend/docs/商品寄卖服务模块-开发说明.md

# 商品寄卖服务模块 - 开发说明

## 📁 文件结构

### 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  
**维护**: 开发团队