# 抽卡规则配置

<cite>
**Referenced Files in This Document**   
- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue)
- [index.vue](file://src/views/merchant/steal-setting/index.vue)
- [apple-card-steal-settings.ts](file://src/api/apple-card-steal-settings.ts)
- [user.ts](file://src/api/user.ts)
</cite>

## 目录

1. [简介](#简介)
2. [核心组件](#核心组件)
3. [表单设计与字段验证](#表单设计与字段验证)
4. [配置模态框交互逻辑](#配置模态框交互逻辑)
5. [数据绑定与状态管理](#数据绑定与状态管理)
6. [错误处理与用户体验](#错误处理与用户体验)
7. [API提交与响应处理](#api提交与响应处理)
8. [安全控制机制](#安全控制机制)
9. [常见问题解决方案](#常见问题解决方案)

## 简介

本文档详细介绍了抽卡规则配置功能的实现机制，涵盖表单设计、数据验证、交互逻辑和API集成等各个方面。系统提供了一套完整的抽卡规则管理解决方案，允许用户创建、编辑和管理抽卡规则，实现自动化资金流转和账户管理。

**Section sources**

- [index.vue](file://src/views/merchant/steal-setting/index.vue#L1-L50)

## 核心组件

抽卡规则配置功能由多个核心组件构成，包括规则管理主界面、添加/编辑模态框、API服务层和用户数据服务。这些组件协同工作，提供了完整的抽卡规则管理体验。

```mermaid
graph TD
A[规则管理主界面] --> B[添加/编辑模态框]
A --> C[API服务层]
B --> C
C --> D[后端API]
A --> E[用户数据服务]
B --> E
```

**Diagram sources **

- [index.vue](file://src/views/merchant/steal-setting/index.vue#L1-L329)
- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

**Section sources**

- [index.vue](file://src/views/merchant/steal-setting/index.vue#L1-L329)
- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## 表单设计与字段验证

抽卡规则表单设计包含了多个关键字段，每个字段都有明确的业务含义和验证规则。表单采用响应式设计，确保在不同设备上都能提供良好的用户体验。

### 表单字段说明

| 字段名称 | 字段标识      | 数据类型 | 必填 | 说明                     |
| -------- | ------------- | -------- | ---- | ------------------------ |
| 规则名称 | name          | 字符串   | 是   | 抽卡规则的标识名称       |
| 目标账户 | targetUserId  | 字符串   | 是   | 资金来源账户             |
| 存储用户 | storageUserId | 字符串   | 是   | 资金存储账户             |
| 金额     | amount        | 数字     | 是   | 抽取的金额（元）         |
| 面额     | targetAmount  | 数字     | 是   | 实际抽取的面额（元）     |
| 延迟时间 | intervalTime  | 数字     | 是   | 抽取操作的延迟时间（秒） |
| 是否启用 | status        | 数字     | 是   | 规则的启用状态           |

**Section sources**

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## 配置模态框交互逻辑

配置模态框是用户创建和编辑抽卡规则的主要界面，提供了直观的交互体验。

### 模态框状态管理

模态框通过`visible`模型属性管理显示状态，使用`defineModel`实现双向绑定。当用户点击"添加"按钮或编辑现有规则时，模态框会显示相应的表单。

```mermaid
stateDiagram-v2
[*] --> 隐藏
隐藏 --> 显示 : 用户点击添加/编辑
显示 --> 验证中 : 用户点击确定
验证中 --> 提交中 : 验证通过
提交中 --> 隐藏 : 提交成功
提交中 --> 显示 : 提交失败
验证中 --> 显示 : 验证失败
隐藏 --> [*]
```

**Diagram sources **

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

### 表单提交流程

当用户点击"确定"按钮时，系统会执行以下流程：

1. 触发表单验证
2. 执行业务规则验证
3. 调用相应的API接口
4. 处理响应结果
5. 更新UI状态

**Section sources**

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## 数据绑定与状态管理

系统采用响应式数据绑定机制，确保UI与数据状态保持同步。

### 数据模型定义

系统定义了多个接口来描述抽卡规则的数据结构：

```mermaid
classDiagram
class AppleCardStealAdd {
+string name
+string targetUserId
+string storageUserId
+number amount
+number targetAmount
+number intervalTime
+number status
}
class AppleCardStealEdit {
+number id
}
class AppleCardStealList {
+number stealTotalAmount
+string createdAt
+string updatedAt
}
AppleCardStealEdit --> AppleCardStealAdd : "extends"
AppleCardStealList --> AppleCardStealEdit : "extends"
```

**Diagram sources **

- [apple-card-steal-settings.ts](file://src/api/apple-card-steal-settings.ts#L1-L72)

### 状态管理策略

系统使用`reactive`和`ref`来管理组件状态，确保数据的响应式更新。`state`对象管理用户列表和禁用状态，`formData`对象管理表单数据。

**Section sources**

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## 错误处理与用户体验

系统实现了多层次的错误处理机制，确保用户能够获得清晰的反馈信息。

### 业务规则验证

系统在提交前执行关键业务规则验证，防止无效数据提交：

```mermaid
flowchart TD
Start([开始验证]) --> ValidateAmount["验证面额 ≤ 金额"]
ValidateAmount --> AmountValid{"验证通过?"}
AmountValid --> |否| ShowError["显示错误提示: '面额不能大于金额'"]
AmountValid --> |是| CallAPI["调用API接口"]
CallAPI --> APIResult{"调用成功?"}
APIResult --> |否| HandleError["处理错误"]
APIResult --> |是| Success["更新UI状态"]
ShowError --> End([结束])
HandleError --> End
Success --> End
```

**Diagram sources **

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

### 用户体验优化

系统通过以下方式优化用户体验：

- 实时验证：在用户输入时即时验证数据有效性
- 清晰的错误提示：使用Message组件显示具体的错误信息
- 状态反馈：使用Loading状态指示操作进行中
- 交互确认：在删除操作前需要用户确认

**Section sources**

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## API提交与响应处理

系统通过API服务层与后端进行数据交互，实现了抽卡规则的增删改查功能。

### API接口调用

系统提供了以下API接口：

| 操作     | HTTP方法 | 接口路径                                  | 请求参数                 | 响应类型                                      |
| -------- | -------- | ----------------------------------------- | ------------------------ | --------------------------------------------- |
| 添加规则 | POST     | /api/cardInfo/appleCard/steal/addRule     | AppleCardStealAdd        | Promise                                       |
| 编辑规则 | PUT      | /api/cardInfo/appleCard/steal/updateRule  | AppleCardStealEdit       | Promise                                       |
| 删除规则 | DELETE   | /api/cardInfo/appleCard/steal/deleteRule  | {id: number}             | Promise                                       |
| 获取列表 | GET      | /api/cardInfo/appleCard/steal/getRuleList | AppleCardStealListParams | Promise<CommonPageResult<AppleCardStealList>> |

**Section sources**

- [apple-card-steal-settings.ts](file://src/api/apple-card-steal-settings.ts#L1-L72)

### API调用流程

```mermaid
sequenceDiagram
participant UI as "用户界面"
participant Service as "API服务"
participant Backend as "后端服务"
UI->>Service : 调用addAppleCardStealRule()
Service->>Backend : POST /api/cardInfo/appleCard/steal/addRule
Backend-->>Service : 返回响应
Service-->>UI : 返回Promise结果
UI->>UI : 更新界面状态
Note over UI,Backend : 异步API调用流程
```

**Diagram sources **

- [apple-card-steal-settings.ts](file://src/api/apple-card-steal-settings.ts#L1-L72)

## 安全控制机制

系统实现了多层次的安全控制机制，防止无效或恶意配置的提交。

### 数据完整性验证

系统在前端和后端都实施了数据验证：

- 前端验证：必填字段、数据类型、业务规则
- 后端验证：权限检查、数据一致性、业务逻辑

### 账户选择限制

系统通过禁用选项防止用户选择相同的账户作为目标和存储账户：

```mermaid
flowchart TD
A[用户选择目标账户] --> B[更新存储用户列表]
B --> C[禁用与目标账户相同的选项]
C --> D[用户选择存储用户]
D --> E[更新目标用户列表]
E --> F[禁用与存储用户相同的选项]
F --> G[完成选择]
```

**Diagram sources **

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

**Section sources**

- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)

## 常见问题解决方案

### 表单提交失败

当表单提交失败时，可能的原因包括：

1. 网络连接问题
2. 后端服务异常
3. 数据验证失败
4. 权限不足

**解决方案：**

- 检查网络连接
- 刷新页面重试
- 检查输入数据是否符合要求
- 联系系统管理员

### 配置不生效

当配置不生效时，可能的原因包括：

1. 规则未启用
2. 目标账户或存储账户异常
3. 系统缓存未更新

**解决方案：**

- 检查规则状态开关
- 验证相关账户状态
- 刷新页面或重新登录

**Section sources**

- [index.vue](file://src/views/merchant/steal-setting/index.vue#L1-L329)
- [add-modal.vue](file://src/views/merchant/steal-setting/components/add-modal.vue#L1-L191)
