deotalandAi/.trae/documents/重新设计 AdminCommissionManagement 页面.md

重新设计 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. 页面设计符合项目的技术规范和设计风格

实现示例

<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. 页面设计符合项目的技术规范和设计风格