rtliveCompany/components/StatisticsTable.vue

<template>
  <view class="content">
    <!-- 数据汇总 -->
    <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">
      <scroll-view class="table-header-scroll" scroll-x>
      <view class="table-header">
        <view 
          class="table-col" 
          v-for="(column, index) in columns" 
          :key="index"
          :style="{ width: column.width }"
        >
          {{ column.title ||'-'}}
        </view>
      </view>
      </scroll-view>
      <scroll-view class="table-body-scroll" scroll-y @scrolltolower="loadMore" :style="{ maxHeight: height }">
        <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'">
                <text class="status-tag" :class="item.status">{{ item[column.key]||'-' }}</text>
              </template>
              <template v-else>
                {{ item[column.key] ||'-'}}
              </template>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </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: () => [
      
      ]
    },
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    }
    ,
    height: {
      type: String,
      default: '600rpx'
    }
  },
  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-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .table-header {
    display: flex;
    background: #E3EFFF;
    padding: 24rpx 16rpx;
      border-radius: 8rpx;
      box-shadow: inset 0 -1rpx 0 0 #d7e4ff;
    
    .table-col {
        flex: 0 0 auto;
        box-sizing: border-box;
        padding: 0 8rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
        white-space: nowrap;
        overflow: visible;
    }
  }
  
  .table-body {
    .table-row {
      display: flex;
      align-items: flex-start;
      padding: 24rpx 16rpx;
      border-bottom: 1rpx solid #F0F2F5;
      
      &:nth-child(2n) {
        background: #F7F8FA;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
      
      .table-col {
        flex: 0 0 auto;
        box-sizing: border-box;
        padding-right: 8rpx;
        font-size: 26rpx;
        color: #333;
        display: flex;
        align-items: flex-start;
        text-align: left;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
      }
    }
  }
}

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