cfc/cfc-frontend/pages/promotion/commission.vue

<template>
  <view class="container">
    <!-- 头部总览 -->
    <view class="header-card">
      <view class="header-row">
        <view class="header-item">
          <text class="header-label">累计佣金</text>
          <text class="header-value orange">¥{{ summary.totalCommission || '0.00' }}</text>
        </view>
        <view class="header-item">
          <text class="header-label">可提现</text>
          <text class="header-value blue">¥{{ summary.availableAmount || '0.00' }}</text>
        </view>
      </view>
    </view>

    <!-- 佣金列表 -->
    <view class="list-section">
      <view class="list-item" v-for="item in list" :key="item.id">
        <view class="item-left">
          <text :class="['type-tag', item.commissionType === 'member' ? 'tag-orange' : 'tag-blue']">
            {{ item.commissionType === 'member' ? '会员佣金' : '利润佣金' }}
          </text>
          <text class="item-desc">{{ getOrderDesc(item) }}</text>
        </view>
        <view class="item-right">
          <text class="item-amount">+¥{{ item.commissionAmount || '0.00' }}</text>
          <text class="item-time">{{ formatTime(item.createdAt) }}</text>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && list.length === 0">
        <text>暂无佣金记录</text>
      </view>
      <view class="loading-state" v-if="loading">
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCommissionList, getCommissionSummary } from '../../utils/api.js'

export default {
  data() {
    return {
      list: [],
      summary: {},
      page: 1,
      hasMore: true,
      loading: false
    }
  },
  onLoad() {
    this.loadSummary()
    this.loadList()
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++
      this.loadList()
    }
  },
  methods: {
    async loadSummary() {
      try {
        const res = await getCommissionSummary()
        if (res.data) {
          this.summary = res.data
        }
      } catch (e) {
        console.error('获取佣金总览失败', e)
      }
    },
    async loadList() {
      this.loading = true
      try {
        const res = await getCommissionList(this.page)
        if (res.data && res.data.records) {
          this.list = this.page === 1 ? res.data.records : [...this.list, ...res.data.records]
          this.hasMore = res.data.records.length >= 20
        } else {
          this.hasMore = false
        }
      } catch (e) {
        console.error('获取佣金明细失败', e)
      }
      this.loading = false
    },
    getOrderDesc(item) {
      const typeMap = {
        membership: '会员',
        product: '商品',
        assessment: '测评',
        package: '套餐'
      }
      return (typeMap[item.orderType] || item.orderType) + '订单 #' + item.orderId
    },
    formatTime(time) {
      if (!time) return ''
      const t = new Date(time)
      return t.getFullYear() + '-' + String(t.getMonth()+1).padStart(2,'0') + '-' + String(t.getDate()).padStart(2,'0')
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #f5f7fa;
}
.header-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}
.header-row {
  display: flex;
}
.header-item {
  flex: 1;
  text-align: center;
}
.header-label {
  font-size: 26rpx;
  color: #999;
  display: block;
  margin-bottom: 12rpx;
}
.header-value {
  font-size: 40rpx;
  font-weight: bold;
}
.header-value.orange { color: #F97316; }
.header-value.blue { color: #3A7CC4; }
.list-section {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.item-left {
  flex: 1;
}
.type-tag {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  display: inline-block;
  margin-bottom: 8rpx;
}
.tag-orange {
  background: #FEF3E2;
  color: #F97316;
}
.tag-blue {
  background: #E8F0FE;
  color: #3A7CC4;
}
.item-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
}
.item-right {
  text-align: right;
}
.item-amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.item-time {
  font-size: 22rpx;
  color: #999;
  display: block;
  margin-top: 6rpx;
}
.empty-state, .loading-state {
  text-align: center;
  padding: 60rpx;
  color: #999;
  font-size: 28rpx;
}
</style>