63 lines
1.7 KiB
Markdown
63 lines
1.7 KiB
Markdown
1. **添加选项卡**：在 `el-tabs` 组件中添加一个新的 `el-tab-pane`，标签名为 "佣金结算"，name 为 "settlement"
|
||
|
||
2. **添加响应式数据**：
|
||
|
||
* 添加 `settlementRecords` 数组用于存储结算记录
|
||
|
||
* 添加 `settlementTotal` 用于存储总记录数
|
||
|
||
* 在 `loading` 对象中添加 `settlement` 字段
|
||
|
||
* 在 `pagination` 对象中添加 `settlement` 分页配置
|
||
|
||
* 添加弹窗相关的响应式数据：`dialogVisible`、`applyRemark`、`applyLoading`
|
||
|
||
3. **实现获取结算列表方法**：
|
||
|
||
* 创建 `fetchSettlementList` 方法，调用 `userController.getSettlementList` 接口
|
||
|
||
* 处理接口返回的数据，转换为需要的格式
|
||
|
||
* 处理加载状态和错误情况
|
||
|
||
4. **实现申请结算弹窗**：
|
||
|
||
* 添加 `el-dialog` 组件用于申请结算弹窗
|
||
|
||
* 添加表单用于输入备注
|
||
|
||
* 实现 `handleApplySettlement` 方法，打开弹窗
|
||
|
||
* 实现 `handleApplySubmit` 方法，提交表单并调用 `applySettlement` 接口
|
||
|
||
* 实现 `handleApplyCancel` 方法，关闭弹窗
|
||
|
||
5. **添加结算列表的表格展示**：
|
||
|
||
* 在新的选项卡内容中添加表格，展示结算记录
|
||
|
||
* 添加分页组件
|
||
|
||
* 添加空状态和加载状态的处理
|
||
|
||
* 添加申请结算按钮
|
||
|
||
6. **添加样式**：
|
||
|
||
* 确保新添加的内容符合现有样式风格
|
||
|
||
* 参考 ui-ux-pro-max.md 的极简风格要求
|
||
|
||
* 添加暗色主题支持
|
||
|
||
7. **更新页面挂载和选项卡切换逻辑**：
|
||
|
||
* 在 `onMounted` 中添加获取结算列表的调用
|
||
|
||
* 在 `handleTabChange` 中添加切换到结算选项卡时的处理
|
||
|
||
8. **国际化支持**：
|
||
|
||
* 确保所有新增的文本都支持中英文切换
|
||
|