From b6d905157f0924f78689cbf8d6fc88c2a0a35f9a Mon Sep 17 00:00:00 2001 From: dzq Date: Wed, 17 Dec 2025 15:19:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(shop):=20=E6=B7=BB=E5=8A=A0=E6=9A=82?= =?UTF-8?q?=E5=AD=98=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=E5=8F=8A=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在商店运行模式中新增暂存模式(模式5) - 更新模式与支付方式映射关系，暂存模式无支付方式 - 添加格口密码字段支持暂存模式使用 - 更新相关组件和文档说明 --- doc/Shop运行模式文档.md | 268 ++++++++++++++++++ src/api/cabinet/cabinet-cell.ts | 4 + src/api/shop/shop.ts | 11 +- src/utils/maps/payment.ts | 1 + .../cabinet/cabinet-cell/cell-edit-modal.vue | 7 +- src/views/cabinet/shop/card.vue | 2 + src/views/cabinet/shop/shop-form-modal.vue | 5 +- .../cabinet/smart-cabinet-card/detail.vue | 7 +- 8 files changed, 296 insertions(+), 9 deletions(-) create mode 100644 doc/Shop运行模式文档.md diff --git a/doc/Shop运行模式文档.md b/doc/Shop运行模式文档.md new file mode 100644 index 0000000..ebd199a --- /dev/null +++ b/doc/Shop运行模式文档.md @@ -0,0 +1,268 @@ +# Shop 运行模式文档 + +## 概述 + +在智柜宝商店管理系统中，每个商店（Shop）都有一个运行模式（Mode）属性，用于定义商店的业务流程和支付方式。运行模式决定了用户在该商店下单、支付、审批等操作的行为逻辑。 + +本文档详细介绍了 Shop 运行模式的定义、使用场景、相关 API 接口、前端组件实现以及模式与支付方式的映射关系。 + +## 模式枚举定义 + +运行模式使用数字枚举值表示，具体定义如下： + +| 数值 | 模式名称 | 描述 | +|------|----------|------| +| 0 | 支付模式 | 用户直接支付完成订单 | +| 1 | 审批模式 | 订单需要管理员审批后才能支付 | +| 2 | 借还模式 | 适用于借用和归还物品的场景 | +| 3 | 会员模式 | 仅限会员使用，可能涉及会员积分或余额 | +| 4 | 耗材模式 | 针对耗材管理场景，支持特定支付方式 | +| 5 | 暂存模式 | 临时存储物品，使用密码打开，无支付环节 | + +## API 接口定义 + +### 数据结构 + +在 `src/api/shop/shop.ts` 中定义了与模式相关的数据结构： + +```typescript +/** 商店分页查询参数 */ +export interface ShopQuery extends BasePageQuery { + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ + mode?: number; +} + +/** 商店DTO */ +export interface ShopDTO { + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ + mode?: number; +} + +/** 新增商店命令 */ +export interface AddShopCommand { + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ + mode?: number; +} + +/** 更新商店命令 */ +export interface UpdateShopCommand { + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ + mode?: number; +} +``` + +### 工具函数 + +#### `getModeText(mode?: number): string` + +将运行模式数值转换为文字描述： + +```typescript +// 运行模式文字映射 +const modeTextMap = { + 0: '支付模式', + 1: '审批模式', + 2: '借还模式', + 3: '会员模式', + 4: '耗材模式', + 5: '暂存模式' +}; + +export const getModeText = (mode?: number): string => { + return mode !== undefined ? modeTextMap[mode] || '' : ''; +}; +``` + +#### `getBalanceEnableText(balanceEnable?: number): string` + +将借呗支付状态转换为文字描述（与模式相关的支付状态）： + +```typescript +// 借呗支付状态文字映射 +const balanceEnableTextMap = { + 0: '禁止使用', + 1: '正常使用' +}; + +export const getBalanceEnableText = (balanceEnable?: number): string => { + return balanceEnable !== undefined ? balanceEnableTextMap[balanceEnable] || '' : ''; +}; +``` + +## 前端组件实现 + +### 1. 商店管理表单 + +文件：`src/views/cabinet/shop/shop-form-modal.vue` + +商店新增和编辑表单中包含运行模式选择字段： + +```vue + + + + + + + + + +``` + +表单验证规则： +```typescript +const rules = { + mode: [{ required: true, message: "请选择运行模式", trigger: "change" }], +}; +``` + +### 2. 智能柜体卡片显示 + +文件：`src/views/cabinet/smart-cabinet-card/index.vue` + +在智能柜体卡片中显示柜体所属商店的运行模式： + +```vue +模式：{{ getModeText(item.mode) }} +``` + +### 3. 其他使用场景 + +- `src/views/cabinet/smart-cabinet-card/detail.vue`：柜体详情页显示模式 +- `src/views/cabinet/shop/card.vue`：商店卡片显示模式 +- `src/views/welcome/index.vue`：欢迎页面可能显示相关信息 + +## 模式与支付方式映射 + +### 映射定义 + +文件：`src/utils/maps/payment.ts` + +```typescript +export const modeToPaymentMethodMap = { + 0: [0, 3], // 支付模式：微信支付(0)、借呗支付(3) + 1: [0, 1], // 审批模式：微信支付(0)、借呗支付(1) + 2: [0, 1], // 借还模式：微信支付(0)、借呗支付(1) + 3: [0, 3], // 会员模式：微信支付(0)、借呗支付(3) + 4: [2], // 耗材模式：要呗支付(2) + 5: [], // 暂存模式：无支付方式 +}; +``` + +### 支付方式选项 + +```typescript +export const paymentMethodOptions = [ + { label: '微信支付', value: 0, type: 'primary' }, + { label: '借呗支付', value: 1, type: 'success' }, + { label: '要呗支付', value: 2, type: 'info' }, + { label: '借呗支付', value: 3, type: 'warning' }, +]; +``` + +### 动态计算支付方式 + +在商店表单中，根据选择的运行模式动态显示可用的支付方式： + +```typescript +const currentPaymentMethods = computed(() => { + if (typeof formData.value.mode !== 'number') return []; + const methodValues = modeToPaymentMethodMap[formData.value.mode] || []; + return methodValues.map(value => { + const option = paymentMethodOptions.find(item => item.value === value); + return option ? { label: option.label, type: option.type } : null; + }).filter(Boolean); +}); +``` + +模板中使用： +```vue + + + {{ method.label }} + + +``` + +## 业务逻辑影响 + +### 1. 订单流程 + +- **支付模式（0）**：用户可直接完成支付 +- **审批模式（1）**：订单提交后需管理员审批，审批通过后方可支付 +- **借还模式（2）**：适用于物品借用和归还，可能有额外的借用期限和归还确认流程 +- **会员模式（3）**：仅限会员使用，可能涉及会员积分抵扣或余额支付 +- **耗材模式（4）**：针对办公耗材等场景，支持特定的要呗支付方式 +- **暂存模式（5）**：临时存储物品，使用密码打开，无支付环节 + +### 2. 支付方式限制 + +不同的运行模式限制了可用的支付方式组合，确保业务流程的一致性： + +- 支付模式和会员模式支持微信支付和借呗支付（类型3） +- 审批模式和借还模式支持微信支付和借呗支付（类型1） +- 耗材模式仅支持要呗支付 +- 暂存模式无支付方式 + +### 3. 权限控制 + +运行模式可能与用户权限相关联，例如： +- 审批模式需要管理员审批权限 +- 会员模式需要会员身份验证 +- 借还模式可能需要借用权限审核 + +## 使用示例 + +### 获取商店列表并显示模式 + +```typescript +import { getShopList, getModeText } from '@/api/shop/shop'; + +// 获取商店列表 +const { data } = await getShopList({ mode: 0 }); // 查询支付模式的商店 +const shops = data.rows; + +// 显示模式文字 +shops.forEach(shop => { + console.log(`${shop.shopName}: ${getModeText(shop.mode)}`); +}); +``` + +### 新增商店时设置运行模式 + +```typescript +import { addShop } from '@/api/shop/shop'; + +await addShop({ + shopName: '测试商店', + corpid: 'corp123', + mode: 0, // 设置为支付模式 + balanceEnable: 1, + coverImg: 'https://example.com/image.jpg' +}); +``` + +## 相关文件清单 + +1. `src/api/shop/shop.ts` - API 接口定义和工具函数 +2. `src/views/cabinet/shop/shop-form-modal.vue` - 商店表单组件 +3. `src/views/cabinet/shop/index.vue` - 商店管理页面 +4. `src/views/cabinet/smart-cabinet-card/index.vue` - 智能柜体卡片页面 +5. `src/views/cabinet/smart-cabinet-card/detail.vue` - 柜体详情页面 +6. `src/utils/maps/payment.ts` - 支付方式映射配置 +7. `src/views/cabinet/shop/card.vue` - 商店卡片组件 +8. `src/views/welcome/index.vue` - 欢迎页面 + +## 注意事项 + +1. **模式变更影响**：更改商店的运行模式可能影响现有的订单流程和用户权限，需谨慎操作 +2. **数据一致性**：模式与支付方式映射关系需要前后端保持一致 +3. **默认值处理**：在新增商店时，建议明确设置 mode 值，避免使用 undefined +4. **国际化考虑**：如需支持多语言，modeTextMap 需要考虑国际化方案 + +## 未来扩展建议 + +1. **模式自定义**：支持管理员自定义运行模式的业务流程 +2. **组合模式**：支持多种模式组合使用，满足复杂业务场景 +3. **模式迁移工具**：提供商店模式变更的批量迁移和影响分析工具 +4. **审计日志**：记录商店运行模式的变更历史，便于追踪和审计 \ No newline at end of file diff --git a/src/api/cabinet/cabinet-cell.ts b/src/api/cabinet/cabinet-cell.ts index 4c6e393..f855269 100644 --- a/src/api/cabinet/cabinet-cell.ts +++ b/src/api/cabinet/cabinet-cell.ts @@ -52,6 +52,8 @@ export interface CabinetCellDTO { faceImg?: string; /** 购买人98ab用户ID */ ab98UserId?: number; + /** 密码字段 */ + password?: string; } export interface AddCabinetCellCommand { @@ -71,6 +73,8 @@ export interface AddCabinetCellCommand { usageStatus: number; /** 可用状态（1正常 2故障） */ availableStatus: number; + /** 密码字段 */ + password?: string; } export interface UpdateCabinetCellCommand extends AddCabinetCellCommand { diff --git a/src/api/shop/shop.ts b/src/api/shop/shop.ts index 95c428c..857ef13 100644 --- a/src/api/shop/shop.ts +++ b/src/api/shop/shop.ts @@ -6,7 +6,7 @@ export interface ShopQuery extends BasePageQuery { corpid?: string; /** 归属类型（0-借还柜 1-固资通） */ belongType?: number; - /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */ + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ mode?: number; /** 借呗支付（1-正常使用 0-禁止使用） */ balanceEnable?: number; @@ -21,7 +21,7 @@ export interface ShopDTO { coverImg?: string; /** 归属类型（0-借还柜 1-固资通） */ belongType?: number; - /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */ + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ mode?: number; /** 借呗支付（1-正常使用 0-禁止使用） */ balanceEnable?: number; @@ -37,7 +37,7 @@ export interface AddShopCommand { coverImg?: string; /** 归属类型（0-借还柜 1-固资通） */ belongType?: number; - /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */ + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ mode?: number; /** 借呗支付（1-正常使用 0-禁止使用） */ balanceEnable?: number; @@ -52,7 +52,7 @@ export interface UpdateShopCommand { coverImg?: string; /** 归属类型（0-借还柜 1-固资通） */ belongType?: number; - /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式） */ + /** 运行模式（0-支付模式 1-审批模式 2-借还模式 3-会员模式 4-耗材模式 5-暂存模式） */ mode?: number; /** 借呗支付（1-正常使用 0-禁止使用） */ balanceEnable?: number; @@ -64,7 +64,8 @@ const modeTextMap = { 1: '审批模式', 2: '借还模式', 3: '会员模式', - 4: '耗材模式' + 4: '耗材模式', + 5: '暂存模式' }; // 借呗支付状态文字映射 diff --git a/src/utils/maps/payment.ts b/src/utils/maps/payment.ts index 3fc5537..767ed91 100644 --- a/src/utils/maps/payment.ts +++ b/src/utils/maps/payment.ts @@ -11,4 +11,5 @@ export const modeToPaymentMethodMap = { 2: [0, 1], 3: [0, 3], 4: [2], + 5: [], }; \ No newline at end of file diff --git a/src/views/cabinet/cabinet-cell/cell-edit-modal.vue b/src/views/cabinet/cabinet-cell/cell-edit-modal.vue index b743ec5..60e77d3 100644 --- a/src/views/cabinet/cabinet-cell/cell-edit-modal.vue +++ b/src/views/cabinet/cabinet-cell/cell-edit-modal.vue @@ -17,6 +17,7 @@ export interface FormDTO { usageStatus: number; stock: number; cellPrice?: number; + password?: string; } const props = defineProps({ @@ -46,7 +47,8 @@ const formData = reactive({ availableStatus: 1, usageStatus: 1, stock: 0, - cellPrice: 0 + cellPrice: 0, + password: '' }); const rules = reactive({ @@ -139,6 +141,9 @@ watch(() => props.row, (val) => { 元 + + + diff --git a/src/views/cabinet/shop/card.vue b/src/views/cabinet/shop/card.vue index a0ba1e0..72a68ca 100644 --- a/src/views/cabinet/shop/card.vue +++ b/src/views/cabinet/shop/card.vue @@ -77,6 +77,8 @@ function getModeType(mode: number): "" | "success" | "warning" | "info" | "dange case 1: return 'info'; case 2: return 'warning'; case 3: return 'danger'; + case 4: return ''; + case 5: return 'danger'; default: return ''; } } diff --git a/src/views/cabinet/shop/shop-form-modal.vue b/src/views/cabinet/shop/shop-form-modal.vue index f083406..61d8c17 100644 --- a/src/views/cabinet/shop/shop-form-modal.vue +++ b/src/views/cabinet/shop/shop-form-modal.vue @@ -200,6 +200,7 @@ const cancelDelete = () => { +