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接口规范

/**
 * 功能描述
 * @param params
 */
export function apiNameApi(params) {
  return request({
    url: '/app/admin/module/action',
    method: 'get', // 或 'post'
    params, // GET请求用params
    // data, // POST请求用data
  });
}

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接口

import { 
  merchandiseListApi, 
  merchandiseUpdateApi 
} from '@/api/consignment';

2. 调用API示例

// 获取列表
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 指令：

<el-button 
  v-hasPermi="['admin:merchandise:update']"
  @click="handleUpdate"
>
  更新
</el-button>

权限标识规范：

• admin:merchandise:info - 查看寄售商品详情
• admin:merchandise:update - 更新寄售商品
• admin:withdraw:info - 查看提现详情
• admin:withdraw:audit - 审核提现申请

📋 路由配置

需要在路由配置文件中添加以下路由：

{
  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 的栅格系统：

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
2. 数据库设计说明.md
3. Element UI官方文档: https://element.eleme.cn/

---

创建日期: 2025-11-13
版本: V1.0
维护: 开发团队