admin123
/
shop-wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
shop-wx/doc/Shop运行模式文档.md

6.5 KiB
Raw Blame History

Shop运行模式文档

本文档详细说明项目中Shop的mode运行模式相关处理逻辑。运行模式决定了商店的业务流程、支付方式以及用户交互方式。

运行模式定义

在 src/api/shop/types.ts 中定义了Shop实体和运行模式：

export interface ShopEntity {
  /** 主键ID */
  shopId: number;
  /** 商店名称 */
  shopName: string;
  /** 企业微信id */
  corpid: string;
  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
  mode?: number;
  /** 借呗支付（1-正常使用 0-禁止使用） */
  balanceEnable?: number;
  /** 封面图URL */
  coverImg?: string;
}

运行模式的具体含义：

模式值 模式名称 说明
0 支付模式 用户直接支付购买商品
1 审批模式 需要审批流程后才能购买
2 借还模式 借还物品模式
3 会员模式 会员租用模式
4 耗材模式 耗材领用模式

支付方式映射

不同运行模式支持不同的支付方式，映射关系定义在 src/utils/maps/payment.ts：

export const modeToPaymentMethodMap: Record<number, number[]> = {
  0: [0],        // 支付模式：微信支付
  1: [0, 1],     // 审批模式：微信支付、借呗支付
  2: [0, 1],     // 借还模式：微信支付、借呗支付
  3: [0],        // 会员模式：微信支付
  4: [2],        // 耗材模式：要呗支付
};

支付方式的枚举值：

  • 0: 微信支付
  • 1: 借呗支付
  • 2: 要呗支付

业务逻辑处理

1. 首页模式切换 (pages/index/index.vue)

首页根据选中的商店模式决定显示内容：

// 当选择商店时触发
if (selectedShop.mode == 3) {
  // 会员模式：进入租用模式
  rentingCabinetStore.fetchRentingCabinetDetail(selectedShopId);
} else {
  // 其他模式：获取普通商品列表
  productStore.getGoods(selectedShopId);
}

2. 结账页面处理 (pages/index/checkout.vue)

结账页面使用 isRentingMode 计算属性区分模式：

// 是否为租用模式（会员模式）
const isRentingMode = computed(() => {
  return selectedShop.value?.mode === 3;
});

根据模式渲染不同的商品列表：

  • 普通模式：显示普通购物车商品
  • 租用模式：显示租用购物车商品

支付方式动态确定：

// 根据模式获取支持的支付方式
const paymentMethodList = computed(() => {
  const mode = selectedShop.value?.mode || 0;
  const methods = modeToPaymentMethodMap[mode] || [0];
  return methods;
});

订单提交时传递模式参数：

// 在 SubmitOrderRequestData 中包含 mode 字段
const submitData: SubmitOrderRequestData = {
  // ... 其他字段
  mode: selectedShop.value?.mode || 0,
  goodsList: [
    {
      // ... 商品信息
      mode: selectedShop.value?.mode || 0, // 每个商品项也包含 mode
    }
  ]
};

3. 购物车管理 (pages/index/components/cart.vue)

购物车组件支持两种模式：

  • 普通购物车：用于模式 0,1,2,4
  • 租用购物车：用于模式 3

提供统一的购物车操作方法，内部根据模式区分处理。

4. 租用模式专门处理 (pages/index/components/renting-cabinet-container.vue)

专门为会员模式（租用模式）设计的组件，提供：

  • 租用格口的选择界面
  • 不同尺寸格口的展示（使用SVG图标）
  • 加入租用购物车功能
  • 租用时长和费用计算

相关API端点

获取店铺列表

GET /shop/list

支持根据mode参数过滤店铺。

提交订单

POST /order/submit

请求体需要包含 mode 字段，表示订单的运行模式。

订单数据模型

在 SubmitOrderRequestData 中：

export interface SubmitOrderRequestData {
  // ... 其他字段
  /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
  mode: number;
  /** 订单商品明细列表 */
  goodsList: Array<{
    // ... 商品信息
    /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */
    mode: number;
  }>;
}

组件和页面

主要页面

  1. 首页 (pages/index/index.vue)

    • 模式切换和渲染
    • 根据模式调用不同的数据获取方法

  2. 结账页面 (pages/index/checkout.vue)

    • 模式支付处理
    • 订单提交逻辑

主要组件

  1. 购物车组件 (pages/index/components/cart.vue)

    • 模式购物车管理
    • 统一的操作接口

  2. 租用柜格容器组件 (pages/index/components/renting-cabinet-container.vue)

    • 租用模式专门UI
    • 格口选择和租用逻辑

  3. 商品容器组件 (pages/index/components/product-container.vue)

    • 普通商品展示
    • 适用于非租用模式

模式处理流程图

graph TD
    A[用户访问首页] --> B{选择商店}
    B --> C[获取商店信息]
    C --> D{检查商店模式}
    D -->|模式=3| E[进入租用模式]
    D -->|模式≠3| F[进入普通模式]

    E --> E1[显示租用柜格容器]
    E --> E2[使用租用购物车]
    E --> E3[租用结算流程]

    F --> F1[显示商品容器]
    F --> F2[使用普通购物车]
    F --> F3[普通结算流程]

    E3 --> G[提交订单]
    F3 --> G

    G --> H{根据模式确定支付方式}
    H --> I[完成订单]

开发注意事项

  1. 模式判断一致性

    • 始终使用 selectedShop.value?.mode 获取当前模式
    • 模式判断应集中在业务逻辑入口处

  2. 支付方式配置

    • 修改支付方式映射时更新 payment.ts 文件
    • 确保前端支付方式与后端一致

  3. 租用模式特殊处理

    • 模式3有专门的组件和流程
    • 租用购物车与普通购物车数据分离

  4. 扩展新模式

    • 在 types.ts 中更新模式注释
    • 更新 payment.ts 中的支付方式映射
    • 根据需要添加新的业务逻辑分支

常见问题

Q: 如何添加新的运行模式？ A: 1. 在 types.ts 中更新模式定义注释；2. 在 payment.ts 中添加支付方式映射；3. 在业务逻辑中添加新的处理分支。

Q: 模式如何影响支付方式？ A: 通过 modeToPaymentMethodMap 映射关系确定，前端根据当前模式过滤可用的支付方式。

Q: 租用模式与其他模式的主要区别？ A: 租用模式使用独立的购物车系统、专门的UI组件和不同的结算逻辑。

文档最后更新：2025-12-15 维护者：Claude Code