赵忠林
23b0bee982
- 新增分销商提现弹窗优化说明文档 - 新增分销商申请页面异常修复说明文档 - 新增分销商设置弹窗优化说明文档 - 新增分销商资金流动弹窗优化说明文档 - 新增分销海报功能说明文档
315 lines
9.6 KiB
Markdown
315 lines
9.6 KiB
Markdown
# 分销商提现弹窗优化说明
|
||
|
||
## 🎯 优化概述
|
||
|
||
分销商提现编辑弹窗是处理分销商提现申请的核心功能，原有页面存在字段平铺、支付方式不直观、缺少业务逻辑验证等问题。
|
||
|
||
## ✨ 主要优化内容
|
||
|
||
### 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. **业务规范**
|
||
- 强制填写必要的收款信息
|
||
- 规范提现申请流程
|
||
- 确保审核记录完整
|
||
|
||
## 📱 响应式支持
|
||
|
||
- **大屏幕**：两列布局，信息密度高
|
||
- **中等屏幕**：保持两列，适当调整间距
|
||
- **小屏幕**：单列布局，保持可用性
|
||
|
||
## 🔍 未来扩展建议
|
||
|
||
- [ ] 添加提现手续费计算
|
||
- [ ] 支持批量提现审核
|
||
- [ ] 增加提现限额检查
|
||
- [ ] 添加提现记录关联
|
||
- [ ] 支持提现凭证上传
|
||
- [ ] 增加风控规则验证
|
||
|
||
这次优化完全重构了分销商提现编辑弹窗，提供了更专业、更直观的提现管理体验！
|