289 lines
9.8 KiB
Markdown
289 lines
9.8 KiB
Markdown
## 重新设计 AdminCommissionManagement 页面
|
||
|
||
### 需求分析
|
||
|
||
1. 页面现有结构：包含佣金比例设置和佣金列表两个部分
|
||
2. 需要使用 `index.js` 中的 API 方法：
|
||
- `updateCommissionConfig()`：更新佣金配置
|
||
- `viewCommissionConfig()`：获取佣金配置信息
|
||
3. 目前只有佣金配置没有佣金列表（需要移除或调整佣金列表部分）
|
||
4. 需要按照项目技术规范和设计风格重新设计页面
|
||
|
||
### 解决方案
|
||
|
||
1. 移除或调整佣金列表部分，专注于佣金配置功能
|
||
2. 使用 `index.js` 中的 API 方法替换当前的模拟数据
|
||
3. 实现完整的佣金配置表单，包含所有必要的配置项
|
||
4. 确保页面设计符合项目的技术规范和设计风格
|
||
|
||
### 实现步骤
|
||
|
||
1. 修改 `AdminCommissionManagement.vue` 页面：
|
||
- 调整页面结构，移除或简化佣金列表部分
|
||
- 实现完整的佣金配置表单，包含所有必要的配置项
|
||
- 使用 `viewCommissionConfig()` 方法获取佣金配置数据
|
||
- 使用 `updateCommissionConfig()` 方法保存佣金配置
|
||
- 确保页面支持中英文切换
|
||
- 确保页面响应式设计，适配不同设备尺寸
|
||
|
||
2. 确保页面设计符合项目的技术规范和设计风格：
|
||
- 使用 Vue3 Composition API
|
||
- 使用 Scoped CSS + CSS 变量实现组件样式隔离与主题定制
|
||
- 使用 Element Plus 组件库
|
||
- 实现响应式布局，适配移动端、平板端和桌面端
|
||
|
||
### 代码修改点
|
||
|
||
**文件**：`d:/work/Aiproject/DeotalandAi/apps/FrontendDesigner/src/views/admin/AdminCommissionManagement/AdminCommissionManagement.vue`
|
||
|
||
**核心修改**：
|
||
|
||
1. **页面结构调整**：
|
||
- 移除或简化佣金列表部分
|
||
- 实现完整的佣金配置表单
|
||
|
||
2. **数据绑定**：
|
||
- 使用 `viewCommissionConfig()` 方法获取佣金配置数据
|
||
- 将数据绑定到表单控件
|
||
|
||
3. **表单提交**：
|
||
- 使用 `updateCommissionConfig()` 方法保存佣金配置
|
||
- 实现表单验证
|
||
|
||
4. **响应式设计**：
|
||
- 确保页面适配不同设备尺寸
|
||
- 实现响应式布局
|
||
|
||
5. **中英文支持**：
|
||
- 确保页面所有文本都支持中英文切换
|
||
|
||
### 实现细节
|
||
|
||
1. **佣金配置表单**：
|
||
- 佣金比例（commissionRate）：1-100%，整数
|
||
- 最低提现金额（minWithdrawAmount）：数字
|
||
- 提现费率（withdrawFeeRate）：0-100%，小数
|
||
- 结算周期（settlementCycle）：下拉选择
|
||
- 状态（status）：开关控制
|
||
- 备注（remark）：文本输入
|
||
|
||
2. **API调用**：
|
||
- 在页面挂载时调用 `viewCommissionConfig()` 获取佣金配置数据
|
||
- 在表单提交时调用 `updateCommissionConfig()` 保存佣金配置
|
||
- 处理API调用的成功和失败情况
|
||
|
||
3. **表单验证**：
|
||
- 实现表单验证规则
|
||
- 确保所有必填字段都已填写
|
||
- 确保字段值符合要求
|
||
|
||
4. **响应式设计**：
|
||
- 使用 Flexbox/Grid 实现响应式布局
|
||
- 使用媒体查询适配不同设备尺寸
|
||
- 确保表单控件在不同设备上都能正常显示和使用
|
||
|
||
5. **中英文支持**：
|
||
- 使用 `t()` 函数包裹所有文本
|
||
- 确保所有文本都在国际化配置中定义
|
||
|
||
### 预期效果
|
||
|
||
1. 页面只包含佣金配置部分，移除或简化佣金列表部分
|
||
2. 页面使用 `index.js` 中的 API 方法获取和保存佣金配置
|
||
3. 页面支持中英文切换
|
||
4. 页面适配不同设备尺寸
|
||
5. 页面设计符合项目的技术规范和设计风格
|
||
|
||
### 实现示例
|
||
|
||
```vue
|
||
<template>
|
||
<div class="admin-commission-management">
|
||
<h1 class="page-title">{{ t('admin.commissionManagement.title') }}</h1>
|
||
|
||
<!-- 佣金配置表单 -->
|
||
<el-card class="commission-config-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<h2 class="card-title">{{ t('admin.commissionManagement.configTitle') }}</h2>
|
||
</div>
|
||
</template>
|
||
<div class="commission-config-content">
|
||
<el-form :model="commissionConfig" label-width="120px" :rules="rules" ref="commissionConfigRef">
|
||
<!-- 佣金比例 -->
|
||
<el-form-item :label="t('admin.commissionManagement.commissionRate')" prop="commissionRate">
|
||
<div class="rate-input-wrapper">
|
||
<el-input-number
|
||
v-model="commissionConfig.commissionRate"
|
||
:min="1"
|
||
:max="100"
|
||
:step="1"
|
||
:precision="0"
|
||
style="width: 200px"
|
||
/>
|
||
<span class="rate-suffix">%</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- 最低提现金额 -->
|
||
<el-form-item :label="t('admin.commissionManagement.minWithdrawAmount')" prop="minWithdrawAmount">
|
||
<el-input-number
|
||
v-model="commissionConfig.minWithdrawAmount"
|
||
:min="0"
|
||
:step="10"
|
||
:precision="0"
|
||
style="width: 200px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 提现费率 -->
|
||
<el-form-item :label="t('admin.commissionManagement.withdrawFeeRate')" prop="withdrawFeeRate">
|
||
<div class="rate-input-wrapper">
|
||
<el-input-number
|
||
v-model="commissionConfig.withdrawFeeRate"
|
||
:min="0"
|
||
:max="100"
|
||
:step="0.1"
|
||
:precision="1"
|
||
style="width: 200px"
|
||
/>
|
||
<span class="rate-suffix">%</span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- 结算周期 -->
|
||
<el-form-item :label="t('admin.commissionManagement.settlementCycle')" prop="settlementCycle">
|
||
<el-select
|
||
v-model="commissionConfig.settlementCycle"
|
||
placeholder="{{ t('admin.commissionManagement.selectSettlementCycle') }}"
|
||
style="width: 200px"
|
||
>
|
||
<el-option
|
||
v-for="cycle in settlementCycles"
|
||
:key="cycle.value"
|
||
:label="cycle.label"
|
||
:value="cycle.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<!-- 状态 -->
|
||
<el-form-item :label="t('admin.commissionManagement.status')" prop="status">
|
||
<el-switch
|
||
v-model="commissionConfig.status"
|
||
:active-value="1"
|
||
:inactive-value="0"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 备注 -->
|
||
<el-form-item :label="t('admin.commissionManagement.remark')" prop="remark">
|
||
<el-input
|
||
v-model="commissionConfig.remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="{{ t('admin.commissionManagement.enterRemark') }}"
|
||
style="width: 400px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<!-- 保存按钮 -->
|
||
<el-form-item>
|
||
<el-button type="primary" @click="saveCommissionConfig">{{ t('admin.commissionManagement.saveConfig') }}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { ElMessage } from 'element-plus'
|
||
import { AdminCommissionManagement } from './index.js'
|
||
|
||
const { t } = useI18n()
|
||
const adminCommissionManagement = new AdminCommissionManagement()
|
||
|
||
// 佣金配置表单
|
||
const commissionConfigRef = ref()
|
||
const commissionConfig = reactive({
|
||
commissionRate: 0,
|
||
minWithdrawAmount: 0,
|
||
withdrawFeeRate: 0,
|
||
settlementCycle: 0,
|
||
status: 1,
|
||
remark: ''
|
||
})
|
||
|
||
// 结算周期选项
|
||
const settlementCycles = [
|
||
{ value: 1, label: t('admin.commissionManagement.daily') },
|
||
{ value: 7, label: t('admin.commissionManagement.weekly') },
|
||
{ value: 30, label: t('admin.commissionManagement.monthly') }
|
||
]
|
||
|
||
// 表单验证规则
|
||
const rules = {
|
||
commissionRate: [
|
||
{ required: true, message: t('admin.commissionManagement.requiredCommissionRate'), trigger: 'blur' },
|
||
{ type: 'number', min: 1, max: 100, message: t('admin.commissionManagement.invalidCommissionRate'), trigger: 'blur' }
|
||
],
|
||
minWithdrawAmount: [
|
||
{ required: true, message: t('admin.commissionManagement.requiredMinWithdrawAmount'), trigger: 'blur' },
|
||
{ type: 'number', min: 0, message: t('admin.commissionManagement.invalidMinWithdrawAmount'), trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
// 获取佣金配置数据
|
||
const getCommissionConfig = async () => {
|
||
try {
|
||
const response = await adminCommissionManagement.viewCommissionConfig()
|
||
if (response.success) {
|
||
const data = response.data
|
||
commissionConfig.commissionRate = data.commissionRate
|
||
commissionConfig.minWithdrawAmount = data.minWithdrawAmount
|
||
commissionConfig.withdrawFeeRate = data.withdrawFeeRate
|
||
commissionConfig.settlementCycle = data.settlementCycle
|
||
commissionConfig.status = data.status
|
||
commissionConfig.remark = data.remark
|
||
}
|
||
} catch (error) {
|
||
console.error('获取佣金配置失败:', error)
|
||
ElMessage.error(t('admin.commissionManagement.getConfigFailed'))
|
||
}
|
||
}
|
||
|
||
// 保存佣金配置
|
||
const saveCommissionConfig = async () => {
|
||
try {
|
||
await commissionConfigRef.value.validate()
|
||
const response = await adminCommissionManagement.updateCommissionConfig(commissionConfig)
|
||
if (response.success) {
|
||
ElMessage.success(t('admin.commissionManagement.saveConfigSuccess'))
|
||
}
|
||
} catch (error) {
|
||
console.error('保存佣金配置失败:', error)
|
||
ElMessage.error(t('admin.commissionManagement.saveConfigFailed'))
|
||
}
|
||
}
|
||
|
||
// 页面挂载时获取佣金配置数据
|
||
onMounted(() => {
|
||
getCommissionConfig()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式省略，按照项目设计风格实现 */
|
||
</style>
|
||
```
|
||
|
||
### 实现预期
|
||
|
||
1. 页面只包含佣金配置部分，移除或简化佣金列表部分
|
||
2. 页面使用 `index.js` 中的 API 方法获取和保存佣金配置
|
||
3. 页面支持中英文切换
|
||
4. 页面适配不同设备尺寸
|
||
5. 页面设计符合项目的技术规范和设计风格 |