one-pipe-system/src/views/dashboard/analysis/widget/WithdrawalSettings.vue

<template>
  <ElCard shadow="never" class="withdrawal-settings-widget" v-if="currentSetting">
    <template #header>
      <div class="card-header">
        <div class="header-left">
          <span class="header-title">当前生效配置</span>
          <ElTag type="success" effect="dark" size="small">生效中</ElTag>
        </div>
        <div class="header-right">
          <span class="creator-info"
            >{{ currentSetting.creator_name || '-' }} 创建于
            {{ formatDateTime(currentSetting.created_at) }}</span
          >
        </div>
      </div>
    </template>
    <div class="setting-info">
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        >
          <i class="el-icon">💰</i>
        </div>
        <div class="info-content">
          <div class="info-label">最低提现金额</div>
          <div class="info-value">{{ formatMoney(currentSetting.min_withdrawal_amount) }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
        >
          <i class="el-icon">📊</i>
        </div>
        <div class="info-content">
          <div class="info-label">手续费率</div>
          <div class="info-value">{{ formatFeeRate(currentSetting.fee_rate) }}</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
        >
          <i class="el-icon">🔢</i>
        </div>
        <div class="info-content">
          <div class="info-label">每日提现次数</div>
          <div class="info-value">{{ currentSetting.daily_withdrawal_limit }} 次</div>
        </div>
      </div>
      <div class="info-card">
        <div
          class="info-icon"
          style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
        >
          <i class="el-icon">⏰</i>
        </div>
        <div class="info-content">
          <div class="info-label">到账天数</div>
          <div class="info-value">{{
            currentSetting.arrival_days === 0 ? '实时到账' : `${currentSetting.arrival_days} 天`
          }}</div>
        </div>
      </div>
    </div>
  </ElCard>
  <ElCard shadow="never" v-else class="withdrawal-settings-widget empty-state">
    <div class="empty-content">
      <i class="el-icon-info" style="font-size: 48px; color: var(--el-text-color-placeholder)"></i>
      <p>暂无提现配置</p>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
  import { CommissionService } from '@/api/modules'
  import { ElTag } from 'element-plus'
  import type { WithdrawalSettingItem } from '@/types/api/commission'
  import { formatDateTime, formatMoney, formatFeeRate } from '@/utils/business/format'

  defineOptions({ name: 'WithdrawalSettingsWidget' })

  // 当前生效的配置
  const currentSetting = ref<WithdrawalSettingItem | null>(null)

  // 加载当前生效配置
  const loadCurrentSetting = async () => {
    try {
      const res = await CommissionService.getCurrentWithdrawalSetting()
      if (res.code === 0 && res.data) {
        currentSetting.value = res.data
      }
    } catch (error) {
      console.error('获取当前配置失败:', error)
    }
  }

  onMounted(() => {
    loadCurrentSetting()
  })
</script>

<style lang="scss" scoped>
  .withdrawal-settings-widget {
    :deep(.el-card__header) {
      padding: 18px 20px;
      background: var(--el-fill-color-light);
      border-bottom: 1px solid var(--el-border-color-lighter);
    }

    :deep(.el-card__body) {
      padding: 20px;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;

      .header-left {
        display: flex;
        gap: 10px;
        align-items: center;

        .header-title {
          font-size: 15px;
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }

      .header-right {
        .creator-info {
          font-size: 13px;
          color: var(--el-text-color-secondary);
        }
      }
    }

    .setting-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;

      .info-card {
        display: flex;
        gap: 12px;
        align-items: center;
        padding: 16px;
        background: var(--el-fill-color-blank);
        border-radius: 8px;

        .info-icon {
          display: flex;
          flex-shrink: 0;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          font-size: 20px;
          border-radius: 8px;
        }

        .info-content {
          flex: 1;
          min-width: 0;

          .info-label {
            margin-bottom: 4px;
            font-size: 13px;
            color: var(--el-text-color-secondary);
          }

          .info-value {
            overflow: hidden;
            font-size: 16px;
            font-weight: 600;
            color: var(--el-text-color-primary);
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    &.empty-state {
      .empty-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        color: var(--el-text-color-secondary);

        p {
          margin-top: 12px;
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .withdrawal-settings-widget {
      .card-header {
        .header-left,
        .header-right {
          width: 100%;
        }
      }

      .setting-info {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
  }
</style>