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">{{ cfToYuan(summary.totalEarned) }}</text>
          <text class="header-value orange" v-else>¥0.00</text>
        </view>
        <view class="header-item">
          <text class="header-label">可用余额</text>
          <text class="header-value blue" v-if="summary">{{ cfToYuan(summary.available) }}</text>
          <text class="header-value blue" v-else>¥0.00</text>
        </view>
        <view class="header-item">
          <text class="header-label">冻结</text>
          <text class="header-value green" v-if="summary">{{ cfToYuan(summary.frozen) }}</text>
          <text class="header-value green" v-else>¥0.00</text>
        </view>
      </view>
    </view>

    <!-- CF 流水列表 -->
    <view class="list-section">
      <view class="list-item" v-for="item in list" :key="item.id">
        <view class="item-left">
          <text :class="['type-tag', isPositive(item.type) ? 'tag-orange' : 'tag-blue']">
            {{ getTypeText(item.type) }}
          </text>
          <text class="item-desc">{{ item.remark || 'CF值变动' }}</text>
        </view>
        <view class="item-right">
          <text :class="['item-amount', isPositive(item.type) ? 'amount-positive' : 'amount-negative']">{{ getAmountText(item) }}</text>
          <text class="item-status">{{ getRefText(item.refType) }}</text>
          <text class="item-time">{{ formatTime(item.createdAt) }}</text>
        </view>
      </view>
      <view class="empty-state" v-if="!loading && list.length === 0">
        <text>暂无 CF 流水记录</text>
      </view>
      <view class="loading-state" v-if="loading">
        <text>加载中...</text>
      </view>
      <view class="loadmore-state" v-if="!loading && list.length > 0 && !hasMore">
        <text>没有更多了</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCfSummary, getCfList } from '../../utils/api.js'
import { parseDate } from '../../utils/format.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 {
        var res = await getCfSummary()
        if (res.data) {
          this.summary = res.data
        }
      } catch (e) {
        console.error('获取 CF 总览失败', e)
      }
    },
    async loadList() {
      this.loading = true
      try {
        var res = await getCfList(this.page, 20)
        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('获取 CF 流水失败', e)
      }
      this.loading = false
    },
    isPositive(type) {
      return type === 'earn' || type === 'unfreeze'
    },
    getAmountText(item) {
      var prefix = this.isPositive(item.type) ? '+' : '-'
      return prefix + this.cfToYuan(item.amount)
    },
    getTypeText(type) {
      var map = { earn: '获得', spend: '支出', freeze: '冻结', unfreeze: '解冻', withdraw: '提现' }
      return map[type] || type || '变动'
    },
    getRefText(refType) {
      var map = { product_order: '商品订单', activity: '活动', withdrawal: '提现', migration: '迁移', cf_transfer_out: '转让转出', cf_transfer_in: '转让转入' }
      return map[refType] || ''
    },
    cfToYuan(val) {
      if (val === null || val === undefined) return '¥0.00'
      var num = Number(val)
      if (isNaN(num)) return '¥0.00'
      return '¥' + (num / 100).toFixed(2)
    },
    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') + ' ' +
             String(d.getHours()).padStart(2, '0') + ':' +
             String(d.getMinutes()).padStart(2, '0') + ':' +
             String(d.getSeconds()).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; }

.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;
  display: block;
}
.amount-positive {
  color: #F97316;
}
.amount-negative {
  color: #94A3B8;
}
.item-status {
  font-size: 20rpx;
  color: #94A3B8;
  display: inline-block;
  margin-top: 4rpx;
}
.item-time {
  font-size: 20rpx;
  color: #94A3B8;
  display: block;
  margin-top: 4rpx;
}
.empty-state, .loading-state, .loadmore-state {
  text-align: center;
  padding: 60rpx;
  color: #94A3B8;
  font-size: 28rpx;
}
</style>