haha/haha-admin-mp/src/pages/distribution/index.vue

<template>
  <view class="page">
    <NavBar title="分销中心" :showBack="true" />

    <view class="content">
      <!-- 佣金概览 -->
      <view class="commission-overview" v-if="myStats">
        <view class="overview-header">
          <text class="overview-title">佣金概览</text>
        </view>
        <view class="overview-amount">
          <text class="amount-symbol">¥</text>
          <text class="amount-value">{{ myStats.commissionBalance.toFixed(2) }}</text>
        </view>
        <text class="overview-desc">可提现余额</text>

        <view class="overview-stats">
          <view class="overview-stat-item">
            <text class="stat-num">{{ myStats.totalCommission.toFixed(2) }}</text>
            <text class="stat-label">累计佣金</text>
          </view>
          <view class="overview-stat-divider"></view>
          <view class="overview-stat-item">
            <text class="stat-num frozen">{{ myStats.frozenAmount.toFixed(2) }}</text>
            <text class="stat-label">冻结金额</text>
          </view>
          <view class="overview-stat-divider"></view>
          <view class="overview-stat-item">
            <text class="stat-num">{{ myStats.totalWithdrawn.toFixed(2) }}</text>
            <text class="stat-label">已提现</text>
          </view>
        </view>
      </view>

      <!-- 推荐数据统计 -->
      <view class="referral-stats" v-if="myStats">
        <view class="stat-card">
          <text class="stat-num">{{ myStats.totalReferrals || 0 }}</text>
          <text class="stat-label">累计推荐</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-card">
          <text class="stat-num success">{{ myStats.validReferrals || 0 }}</text>
          <text class="stat-label">有效推荐</text>
        </view>
      </view>

      <!-- 快捷操作 -->
      <view class="action-section">
        <button class="btn-primary" @click="goToWithdrawal">
          <text>申请提现</text>
        </button>
        <button class="btn-secondary" @click="goToRecords">
          <text>提现记录</text>
          <view class="arrow-right"></view>
        </button>
      </view>

      <!-- 最近提现记录 -->
      <view class="recent-section">
        <view class="section-header">
          <text class="section-title">最近提现</text>
          <text class="section-more" @click="goToRecords">查看全部</text>
        </view>

        <view v-if="recentList.length === 0" class="empty-tip">
          <text>暂无提现记录</text>
        </view>

        <view
          class="record-item"
          v-for="item in recentList"
          :key="item.id"
        >
          <view class="record-left">
            <text class="record-amount">¥{{ item.amount.toFixed(2) }}</text>
            <text class="record-time">{{ item.createTime }}</text>
          </view>
          <view class="record-right">
            <text :class="['record-status', `status-${item.status}`]">
              {{ getStatusLabel(item.status) }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { logger } from '@/utils/logger';
import NavBar from '@/components/NavBar.vue';
import { getMyStats, getMyWithdrawalList } from '@/api/distribution';
import type { DistributionStats, WithdrawalRecord } from '@/api/distribution';


const myStats = ref<DistributionStats | null>(null);
const recentList = ref<WithdrawalRecord[]>([]);

onMounted(() => {
  loadStats();
  loadRecentRecords();
});

const loadStats = async () => {
  try {
    myStats.value = await getMyStats();
  } catch (error) {
    logger.warn('加载分销统计失败', error);
  }
};

const loadRecentRecords = async () => {
  try {
    const result = await getMyWithdrawalList({ page: 1, pageSize: 5 });
    recentList.value = result.list;
  } catch (error) {
    logger.warn('加载提现记录失败', error);
  }
};

const getStatusLabel = (status: string): string => {
  const map: Record<string, string> = {
    pending: '审核中',
    approved: '已通过',
    rejected: '已驳回',
    paid: '已打款'
  };
  return map[status] || '未知';
};

const goToWithdrawal = () => {
  uni.navigateTo({
    url: '/pages/distribution/withdrawal'
  });
};

const goToRecords = () => {
  uni.navigateTo({
    url: '/pages/distribution/records'
  });
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
}

.content {
  padding: 24rpx;
  padding-top: 0;
}

.commission-overview {
  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 24rpx;
  color: $bg-color-card;
}

.overview-header {
  margin-bottom: 20rpx;
}

.overview-title {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.85);
}

.overview-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.amount-symbol {
  font-size: 32rpx;
  font-weight: 600;
  color: $bg-color-card;
  margin-right: 4rpx;
}

.amount-value {
  font-size: 64rpx;
  font-weight: 700;
  color: $bg-color-card;
}

.overview-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 28rpx;
}

.overview-stats {
  display: flex;
  align-items: center;
  padding: 24rpx 0 0;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
}

.overview-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-stat-item .stat-num {
  font-size: 32rpx;
  font-weight: 700;
  color: $bg-color-card;
  margin-bottom: 6rpx;

  &.frozen {
    color: $primary-color;
  }
}

.overview-stat-item .stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.7);
}

.overview-stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
}

.referral-stats {
  background: $bg-color-card;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  border: 1rpx solid $border-color;
}

.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-card .stat-num {
  font-size: 44rpx;
  font-weight: 700;
  color: $text-color-primary;
  margin-bottom: 8rpx;

  &.success {
    color: $primary-color;
  }
}

.stat-card .stat-label {
  font-size: 24rpx;
  color: $text-color-tertiary;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: $border-color;
}

.action-section {
  margin-bottom: 24rpx;
}

.btn-primary {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  color: $bg-color-card;
  border: none;
  margin-bottom: 16rpx;

  &:active {
    opacity: 0.9;
  }
}

.btn-secondary {
  width: 100%;
  height: 88rpx;
  background: $bg-color-card;
  border: 2rpx solid $border-color;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  color: $text-color-secondary;

  &:active {
    background: $bg-color-page;
  }
}

.arrow-right {
  width: 12rpx;
  height: 12rpx;
  border-top: 3rpx solid $text-color-muted;
  border-right: 3rpx solid $text-color-muted;
  transform: rotate(45deg);
  margin-left: 8rpx;
}

.recent-section {
  background: $bg-color-card;
  border-radius: 20rpx;
  padding: 28rpx;
  border: 1rpx solid $border-color;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: $text-color-primary;
}

.section-more {
  font-size: 24rpx;
  color: $info-color;
}

.empty-tip {
  padding: 40rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: $text-color-muted;
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid $bg-color-secondary;

  &:last-child {
    border-bottom: none;
  }
}

.record-left {
  display: flex;
  flex-direction: column;
}

.record-amount {
  font-size: 30rpx;
  font-weight: 600;
  color: $text-color-primary;
  margin-bottom: 4rpx;
}

.record-time {
  font-size: 22rpx;
  color: $text-color-muted;
}

.record-status {
  font-size: 24rpx;
  font-weight: 500;

  &.status-pending {
    color: $warning-color;
  }

  &.status-approved {
    color: $info-color;
  }

  &.status-rejected {
    color: $error-color;
  }

  &.status-paid {
    color: $primary-color;
  }
}
</style>