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" v-if="summary">{{ formatPriceWithSymbol(summary.totalCommission) }}</text>
          <text class="header-value orange" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
        <view class="header-item">
          <text class="header-label">可提现</text>
          <text class="header-value blue" v-if="summary">{{ formatPriceWithSymbol(summary.availableAmount) }}</text>
          <text class="header-value blue" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
        <view class="header-item">
          <text class="header-label">待结算</text>
          <text class="header-value green" v-if="summary">{{ formatPriceWithSymbol(summary.pendingAmount) }}</text>
          <text class="header-value green" v-else>{{ formatPriceWithSymbol(0) }}</text>
        </view>
      </view>
    </view>

    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view class="tab-item" :class="currentTab === 'all' ? 'tab-active' : ''" @click="switchTab('all')">
        <text class="tab-text">全部</text>
      </view>
      <view class="tab-item" :class="currentTab === 'settled' ? 'tab-active' : ''" @click="switchTab('settled')">
        <text class="tab-text">已结算</text>
      </view>
      <view class="tab-item" :class="currentTab === 'pending' ? 'tab-active' : ''" @click="switchTab('pending')">
        <text class="tab-text">待结算</text>
      </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">+{{ formatPriceWithSymbol(item.commissionAmount) }}</text>
          <text class="item-status" :class="item.status === 'settled' ? 'status-settled' : item.status === 'cancelled' ? 'status-cancelled' : 'status-pending'">{{ getStatusText(item.status) }}</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, getCommissionStats } from '../../utils/api.js'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      list: [],
      summary: {},
      page: 1,
      hasMore: true,
      loading: false,
      currentTab: 'all'
    }
  },
  onLoad() {
    this.loadSummary()
    this.loadList()
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++
      this.loadList()
    }
  },
  methods: {
    switchTab(tab) {
      if (this.currentTab === tab) return
      this.currentTab = tab
      this.page = 1
      this.list = []
      this.loadList()
    },
    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 {
        var page = this.page
        var size = 20
        var status = ''
        if (this.currentTab === 'settled') {
          status = 'settled'
        } else if (this.currentTab === 'pending') {
          status = 'pending'
        }
        const res = await getCommissionList(page, size, status)
        if (res.data && res.data.records) {
          this.list = this.page === 1 ? res.data.records : this.list.concat(res.data.records)
          this.hasMore = res.data.records.length >= 20
        } else {
          this.hasMore = false
        }
      } catch (e) {
        console.error('获取佣金明细失败', e)
      }
      this.loading = false
    },
    getOrderDesc(item) {
      var typeMap = {
        membership: '会员',
        product: '商品',
        assessment: '测评',
        package: '任务模板'
      }
      return (typeMap[item.orderType] || item.orderType) + '订单 #' + item.orderId
    },
    getStatusText(status) {
      var map = { settled: '已结算', pending: '待结算', cancelled: '已取消' }
      return map[status] || status || '待结算'
    },
    getStatusClass(status) {
      if (status === 'settled') return 'status-settled'
      if (status === 'cancelled') return 'status-cancelled'
      return 'status-pending'
    },
    formatTime(time) {
      if (!time) return ''
      var d = parseDate(time)
      if (!d) return ''
      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background: #FFF7ED;
}
.header-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.header-row {
  display: flex;
}
.header-item {
  flex: 1;
  text-align: center;
}
.header-label {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
  margin-bottom: 8rpx;
}
.header-value {
  font-size: 36rpx;
  font-weight: bold;
}
.header-value.orange { color: #F97316; }
.header-value.blue { color: #0EA5E9; }
.header-value.green { color: #10B981; }

/* ===== Tab切换 ===== */
.tab-bar {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(249,115,22,0.06);
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  border-radius: 12rpx;
}
.tab-active {
  background: #F97316;
}
.tab-active .tab-text {
  color: #fff;
  font-weight: 600;
}
.tab-text {
  font-size: 26rpx;
  color: #64748B;
}

.list-section {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(249,115,22,0.08);
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 28rpx 24rpx;
  border-bottom: 1rpx solid #FED7AA;
}
.list-item:last-child {
  border-bottom: none;
}
.item-left {
  flex: 1;
}
.type-tag {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  display: inline-block;
  margin-bottom: 8rpx;
}
.tag-orange {
  background: #FEF3C7;
  color: #D97706;
}
.tag-blue {
  background: #DBEAFE;
  color: #2563EB;
}
.item-desc {
  font-size: 24rpx;
  color: #64748B;
  display: block;
}
.item-right {
  text-align: right;
}
.item-amount {
  font-size: 30rpx;
  font-weight: bold;
  color: #F97316;
  display: block;
}
.item-status {
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
  display: inline-block;
  margin-top: 4rpx;
}
.status-settled {
  color: #10B981;
  background: #D1FAE5;
}
.status-pending {
  color: #D97706;
  background: #FEF3C7;
}
.status-cancelled {
  color: #94A3B8;
  background: #F1F5F9;
}
.item-time {
  font-size: 20rpx;
  color: #94A3B8;
  display: block;
  margin-top: 4rpx;
}
.empty-state, .loading-state {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>