rtliveCompany/components/StatisticsTable.vue

<template>
  <scroll-view class="content" scroll-y @scrolltolower="loadMore">
    <!-- 数据汇总 -->
    <view class="summary-section x-bc">
      <view class="summary-header">
        <view class="summary-indicator"></view>
        <text class="summary-title">{{ summaryTitle }}</text>
      </view>
      <view class="summary-stats">
        <view class="stat-item" v-for="stat in summaryStats" :key="stat.label">
          <text class="stat-label">{{ stat.label }}</text>
          <text class="stat-value">{{ stat.value }}</text>
        </view>
      </view>
    </view>
    
    <!-- 数据表格 -->
    <view class="table-section">
      <view class="table-header">
        <view 
          class="table-col" 
          v-for="(column, index) in columns" 
          :key="index"
          :style="{ width: column.width }"
        >
          {{ column.title }}
        </view>
      </view>
      <view class="table-body">
        <view class="table-row" v-for="(item, index) in tableData" :key="index">
          <view 
            class="table-col" 
            v-for="(column, colIndex) in columns" 
            :key="colIndex"
            :style="{ width: column.width }"
          >
            <!-- 使用渲染函数或条件判断代替动态插槽 -->
            <template v-if="column.key === 'statusText' && column.slot">
              <slot name="statusText" :item="item" :index="index">
                {{ item[column.key] }}
              </slot>
            </template>
            <template v-else-if="column.key === 'operation' && column.slot">
              <slot name="operation" :item="item" :index="index">
                {{ item[column.key] }}
              </slot>
            </template>
            <template v-else>
              {{ item[column.key] }}
            </template>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部提示 -->
    <!-- <view class="no-more" v-if="showNoMore">{{ noMoreText }}</view> -->
  </scroll-view>
</template>
<script>
export default {
  name: 'StatisticsTable',
  props: {
    // 汇总标题
    summaryTitle: {
      type: String,
      default: '数据汇总'
    },
    // 汇总统计数据
    summaryStats: {
      type: Array,
      default: () => [
        { label: '任务数', value: 0 },
        { label: '总积分', value: 0 }
      ]
    },
    // 表格列配置
    columns: {
      type: Array,
      default: () => [
        { title: '任务类型', key: 'taskType', width: '20%' },
        { title: '积分', key: 'points', width: '15%' },
        { title: '申请人员', key: 'applicant', width: '20%' },
        { title: '任务状态', key: 'statusText', width: '20%', slot: true },
        { title: '接收时间', key: 'receiveTime', width: '25%' }
      ]
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 是否显示没有更多了
    // showNoMore: {
    //   type: Boolean,
    //   default: true
    // },
    // 没有更多的提示文字
    // noMoreText: {
    //   type: String,
    //   default: '没有更多了~'
    // },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    loadMore() {
      if (!this.loading) {
        this.$emit('load-more')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  flex: 1;
  background: #fff;
}

.summary-section {
  background: #fff;
  padding: 32rpx 24rpx;
  
  .summary-header {
    display: flex;
    align-items: center;
    
    .summary-indicator {
      width: 6rpx;
      height: 32rpx;
      background: #388BFF;
      border-radius: 3rpx;
      margin-right: 16rpx;
    }
    
    .summary-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .summary-stats {
    display: flex;
    gap: 48rpx;
    
    .stat-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16rpx;
      
      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
      
      .stat-value {
        font-size: 36rpx;
        font-weight: bold;
        color: #388BFF;
      }
    }
  }
}

.table-section {
  background: #fff;
  padding: 0 24rpx;
  
  .table-header {
    display: flex;
    background: #E3EFFF;
    padding: 24rpx 16rpx;
    
    .table-col {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
    }
  }
  
  .table-body {
    .table-row {
      display: flex;
      padding: 24rpx 16rpx;
      
      &:nth-child(2n) {
        background: #F7F8FA;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
      
      .table-col {
        font-size: 26rpx;
        color: #333;
        display: flex;
        align-items: center;
        text-align: left;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        line-height: 40rpx;
      }
    }
  }
}

.no-more {
  text-align: center;
  padding: 48rpx 0;
  font-size: 24rpx;
  color: #999;
}
</style>