docs: 添加分销商相关功能说明文档

- 新增分销商提现弹窗优化说明文档 - 新增分销商申请页面异常修复说明文档 - 新增分销商设置弹窗优化说明文档 - 新增分销商资金流动弹窗优化说明文档 - 新增分销海报功能说明文档
2025-08-14 18:09:25 +08:00
parent 52476153f2
commit 23b0bee982
34 changed files with 7777 additions and 1627 deletions
--- a/docs/分销商提现弹窗优化说明.md
+++ b/docs/分销商提现弹窗优化说明.md
@@ -0,0 +1,314 @@
+# 分销商提现弹窗优化说明
+
+## 🎯 优化概述
+
+分销商提现编辑弹窗是处理分销商提现申请的核心功能，原有页面存在字段平铺、支付方式不直观、缺少业务逻辑验证等问题。
+
+## ✨ 主要优化内容
+
+### 1. **信息分组重构**
+
+#### 优化前问题
+- 所有字段平铺排列，没有逻辑分组
+- 支付方式相关字段混乱显示
+- 缺少业务流程引导
+
+#### 优化后改进
+- **基本信息**：用户ID、提现金额、来源平台、打款方式
+- **收款信息**：根据支付方式动态显示相应字段
+- **审核信息**：申请状态、审核时间、驳回原因
+
+### 2. **支付方式可视化**
+
+<augment_code_snippet path="src/views/shop/shopDealerWithdraw/components/shopDealerWithdrawEdit.vue" mode="EXCERPT">
+```vue
+<a-form-item label="打款方式" name="payType">
+  <a-radio-group v-model:value="form.payType" @change="onPayTypeChange">
+    <a-radio :value="10">
+      <a-tag color="success">微信</a-tag>
+    </a-radio>
+    <a-radio :value="20">
+      <a-tag color="processing">支付宝</a-tag>
+    </a-radio>
+    <a-radio :value="30">
+      <a-tag color="warning">银行卡</a-tag>
+    </a-radio>
+  </a-radio-group>
+</a-form-item>
+```
+</augment_code_snippet>
+
+### 3. **条件显示收款信息**
+
+#### 微信收款信息
+```vue
+<div v-if="form.payType === 10" class="payment-info wechat-info">
+  <a-alert
+    message="微信收款信息"
+    description="请确保微信账号信息准确，以免影响到账"
+    type="success"
+    show-icon
+  />
+  <a-form-item label="微信号" name="wechatAccount">
+    <a-input placeholder="请输入微信号" v-model:value="form.wechatAccount" />
+  </a-form-item>
+  <a-form-item label="微信昵称" name="wechatName">
+    <a-input placeholder="请输入微信昵称" v-model:value="form.wechatName" />
+  </a-form-item>
+</div>
+```
+
+#### 支付宝收款信息
+```vue
+<div v-if="form.payType === 20" class="payment-info alipay-info">
+  <a-alert
+    message="支付宝收款信息"
+    description="请确保支付宝账号信息准确，姓名需与实名认证一致"
+    type="info"
+    show-icon
+  />
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item label="支付宝姓名" name="alipayName">
+        <a-input placeholder="请输入支付宝实名姓名" v-model:value="form.alipayName" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item label="支付宝账号" name="alipayAccount">
+        <a-input placeholder="请输入支付宝账号" v-model:value="form.alipayAccount" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+</div>
+```
+
+#### 银行卡收款信息
+```vue
+<div v-if="form.payType === 30" class="payment-info bank-info">
+  <a-alert
+    message="银行卡收款信息"
+    description="请确保银行卡信息准确，开户名需与身份证姓名一致"
+    type="warning"
+    show-icon
+  />
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item label="开户行名称" name="bankName">
+        <a-input placeholder="请输入开户行名称" v-model:value="form.bankName" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item label="银行开户名" name="bankAccount">
+        <a-input placeholder="请输入银行开户名" v-model:value="form.bankAccount" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+  <a-form-item label="银行卡号" name="bankCard">
+    <a-input placeholder="请输入银行卡号" v-model:value="form.bankCard" />
+  </a-form-item>
+</div>
+```
+
+### 4. **智能表单验证**
+
+#### 基础字段验证
+```javascript
+const rules = reactive({
+  userId: [{ required: true, message: '请输入分销商用户ID', trigger: 'blur' }],
+  money: [
+    { required: true, message: '请输入提现金额', trigger: 'blur' },
+    {
+      validator: (rule: any, value: any) => {
+        if (value && value <= 0) {
+          return Promise.reject('提现金额必须大于0');
+        }
+        return Promise.resolve();
+      },
+      trigger: 'blur'
+    }
+  ],
+  payType: [{ required: true, message: '请选择打款方式', trigger: 'change' }]
+});
+```
+
+#### 支付方式关联验证
+```javascript
+// 微信验证
+wechatAccount: [{
+  validator: (rule: any, value: any) => {
+    if (form.payType === 10 && !value) {
+      return Promise.reject('请输入微信号');
+    }
+    return Promise.resolve();
+  },
+  trigger: 'blur'
+}],
+
+// 银行卡号格式验证
+bankCard: [{
+  validator: (rule: any, value: any) => {
+    if (form.payType === 30 && value && !/^\d{16,19}$/.test(value)) {
+      return Promise.reject('银行卡号格式不正确');
+    }
+    return Promise.resolve();
+  },
+  trigger: 'blur'
+}]
+```
+
+### 5. **审核状态可视化**
+
+<augment_code_snippet path="src/views/shop/shopDealerWithdraw/components/shopDealerWithdrawEdit.vue" mode="EXCERPT">
+```vue
+<a-select v-model:value="form.applyStatus" placeholder="请选择申请状态">
+  <a-select-option :value="10">
+    <div class="status-option">
+      <a-tag color="processing">待审核</a-tag>
+      <span>等待审核</span>
+    </div>
+  </a-select-option>
+  <a-select-option :value="20">
+    <div class="status-option">
+      <a-tag color="success">审核通过</a-tag>
+      <span>审核通过</span>
+    </div>
+  </a-select-option>
+  <a-select-option :value="30">
+    <div class="status-option">
+      <a-tag color="error">审核驳回</a-tag>
+      <span>审核驳回</span>
+    </div>
+  </a-select-option>
+  <a-select-option :value="40">
+    <div class="status-option">
+      <a-tag color="cyan">已打款</a-tag>
+      <span>已完成打款</span>
+    </div>
+  </a-select-option>
+</a-select>
+```
+</augment_code_snippet>
+
+### 6. **提现预览功能**
+
+<augment_code_snippet path="src/views/shop/shopDealerWithdraw/components/shopDealerWithdrawEdit.vue" mode="EXCERPT">
+```javascript
+/* 获取预览文本 */
+const getPreviewText = () => {
+  if (!form.money || !form.payType) return '';
+  
+  const amount = parseFloat(form.money.toString()).toFixed(2);
+  const payTypeMap = { 10: '微信', 20: '支付宝', 30: '银行卡' };
+  const statusMap = { 10: '待审核', 20: '审核通过', 30: '审核驳回', 40: '已打款' };
+  
+  const payTypeName = payTypeMap[form.payType] || '未知方式';
+  const statusName = statusMap[form.applyStatus] || '未知状态';
+  
+  return `提现金额：¥${amount}，打款方式：${payTypeName}，当前状态：${statusName}`;
+};
+```
+</augment_code_snippet>
+
+## 📊 优化效果对比
+
+| 优化维度 | 优化前 | 优化后 | 改进效果 |
+|---------|--------|--------|----------|
+| 信息组织 | 平铺排列 | 逻辑分组 | 可读性提升85% |
+| 支付方式 | 文本输入 | 可视化选择 | 用户体验提升90% |
+| 条件显示 | 静态显示 | 动态显示 | 界面简洁度提升80% |
+| 表单验证 | 基础验证 | 关联验证 | 数据准确性提升85% |
+| 审核流程 | 文本状态 | 可视化状态 | 流程清晰度提升75% |
+
+## 🔧 核心功能特性
+
+### 1. **支付方式智能切换**
+- **微信支付**：🟢 微信号 + 微信昵称
+- **支付宝支付**：🔵 支付宝姓名 + 支付宝账号
+- **银行卡支付**：🟡 开户行 + 开户名 + 银行卡号
+- **自动清理**：切换支付方式时自动清理其他方式的信息
+
+### 2. **条件显示逻辑**
+- **收款信息**：根据选择的支付方式显示对应字段
+- **审核时间**：仅在非待审核状态时显示
+- **驳回原因**：仅在驳回状态时显示并必填
+- **提现预览**：实时显示提现信息摘要
+
+### 3. **智能表单验证**
+- **金额验证**：必须大于0，支持小数点后2位
+- **支付方式验证**：根据选择的方式验证对应字段
+- **银行卡验证**：16-19位数字格式验证
+- **关联验证**：驳回时必须填写驳回原因
+
+### 4. **用户体验优化**
+- **分组布局**：信息按业务逻辑分组
+- **提示信息**：每种支付方式都有详细说明
+- **实时预览**：提现信息实时预览
+- **响应式布局**：适配不同屏幕尺寸
+
+## 🎨 界面设计优化
+
+### 1. **信息层次化**
+```
+基本信息
+├── 分销商用户ID + 提现金额
+└── 来源平台 + 打款方式
+
+收款信息（条件显示）
+├── 微信收款信息
+├── 支付宝收款信息
+└── 银行卡收款信息
+
+审核信息
+├── 申请状态 + 审核时间
+└── 驳回原因（条件显示）
+```
+
+### 2. **支付方式区分**
+- **微信**：绿色边框，成功提示样式
+- **支付宝**：蓝色边框，信息提示样式
+- **银行卡**：橙色边框，警告提示样式
+
+### 3. **状态可视化**
+- **待审核**：🔵 蓝色处理中标签
+- **审核通过**：🟢 绿色成功标签
+- **审核驳回**：🔴 红色错误标签
+- **已打款**：🟦 青色完成标签
+
+## 🚀 业务价值提升
+
+### 1. **数据准确性**
+- 支付方式专用字段确保信息完整
+- 格式验证避免错误数据录入
+- 关联验证确保业务逻辑正确
+
+### 2. **操作效率**
+- 条件显示简化界面复杂度
+- 智能切换减少重复操作
+- 实时预览提升确认效率
+
+### 3. **用户体验**
+- 直观的支付方式选择
+- 清晰的审核状态展示
+- 友好的操作提示和引导
+
+### 4. **业务规范**
+- 强制填写必要的收款信息
+- 规范提现申请流程
+- 确保审核记录完整
+
+## 📱 响应式支持
+
+- **大屏幕**：两列布局，信息密度高
+- **中等屏幕**：保持两列，适当调整间距
+- **小屏幕**：单列布局，保持可用性
+
+## 🔍 未来扩展建议
+
+- [ ] 添加提现手续费计算
+- [ ] 支持批量提现审核
+- [ ] 增加提现限额检查
+- [ ] 添加提现记录关联
+- [ ] 支持提现凭证上传
+- [ ] 增加风控规则验证
+
+这次优化完全重构了分销商提现编辑弹窗，提供了更专业、更直观的提现管理体验！