fetch(add): 账户管理

src/components/business/CommissionDisplay.vue

@@ -27,92 +27,91 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { formatMoney } from '@/utils/business'
-import {
-  CommissionType,
-  WithdrawStatus,
-  getCommissionTypeLabel,
-  getWithdrawStatusLabel,
-  getWithdrawStatusType
-} from '@/config/constants'
+  import { computed } from 'vue'
+  import { formatMoney } from '@/utils/business'
+  import { WithdrawalStatus } from '@/types/api/commission'
+  import {
+    getCommissionTypeLabel,
+    getWithdrawalStatusLabel,
+    getWithdrawalStatusType
+  } from '@/config/constants'
 
-interface Props {
-  // 佣金金额（单位：分）
-  amount: number
-  // 佣金类型
-  type?: CommissionType
-  // 佣金比例
-  rate?: number
-  // 状态（用于提现记录）
-  status?: WithdrawStatus
-  // 是否显示比例
-  showRate?: boolean
-  // 是否显示状态
-  showStatus?: boolean
-  // 紧凑模式（只显示金额）
-  compact?: boolean
-}
+  interface Props {
+    // 佣金金额（单位：分）
+    amount: number
+    // 佣金类型
+    type?: string
+    // 佣金比例
+    rate?: number
+    // 状态（用于提现记录）
+    status?: WithdrawalStatus
+    // 是否显示比例
+    showRate?: boolean
+    // 是否显示状态
+    showStatus?: boolean
+    // 紧凑模式（只显示金额）
+    compact?: boolean
+  }
 
-const props = withDefaults(defineProps<Props>(), {
-  showRate: true,
-  showStatus: false,
-  compact: false
-})
+  const props = withDefaults(defineProps<Props>(), {
+    showRate: true,
+    showStatus: false,
+    compact: false
+  })
 
-const formattedAmount = computed(() => formatMoney(props.amount))
+  const formattedAmount = computed(() => formatMoney(props.amount))
 
-const commissionTypeLabel = computed(() => {
-  return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
-})
+  const commissionTypeLabel = computed(() => {
+    return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
+  })
 
-const statusLabel = computed(() => {
-  return props.status !== undefined ? getWithdrawStatusLabel(props.status) : '-'
-})
+  const statusLabel = computed(() => {
+    return props.status !== undefined ? getWithdrawalStatusLabel(props.status) : '-'
+  })
 
-const statusType = computed(() => {
-  return props.status !== undefined ? getWithdrawStatusType(props.status) : 'info'
-})
+  const statusType = computed(() => {
+    return props.status !== undefined ? getWithdrawalStatusType(props.status) : 'info'
+  })
 </script>
 
 <style scoped lang="scss">
-.commission-display {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  &.is-compact {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .commission-item {
+  .commission-display {
     display: flex;
-    align-items: center;
-    font-size: 14px;
+    flex-direction: column;
+    gap: 8px;
 
-    .commission-label {
-      color: var(--el-text-color-secondary);
-      margin-right: 8px;
-      white-space: nowrap;
+    &.is-compact {
+      flex-direction: row;
+      align-items: center;
     }
 
-    .commission-value {
-      color: var(--el-text-color-primary);
-      font-weight: 500;
+    .commission-item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
 
-      &.commission-amount {
-        color: var(--el-color-success);
-        font-size: 16px;
-        font-weight: 600;
+      .commission-label {
+        margin-right: 8px;
+        color: var(--el-text-color-secondary);
+        white-space: nowrap;
+      }
+
+      .commission-value {
+        font-weight: 500;
+        color: var(--el-text-color-primary);
+
+        &.commission-amount {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-color-success);
+        }
+      }
+    }
+
+    &.is-compact .commission-item {
+      .commission-label {
+        display: none;
       }
     }
   }
-
-  &.is-compact .commission-item {
-    .commission-label {
-      display: none;
-    }
-  }
-}
 </style>