yusheng-h5/component/newTable.vue

<template>
  <view class="container">
    <!-- 表格区域 -->
    <scroll-view 
      scroll-y 
      class="table-scroll" 
      @scrolltolower="loadMore"
      :style="{height: scrollHeight + 'px'}"
    >
      <!-- 表头 -->
      <view class="table-header">
        <view 
          class="header-item time-col" 
          @click="toggleSort"
        >
          <text>时间</text>
        </view>
        <view class="header-item">累计流水</view>
        <view class="header-item">获得补贴</view>
        <view class="header-item">状态</view>
      </view>
      <!-- 表格内容 -->
      <view 
        class="table-row" 
        v-for="(item, index) in tableData" 
        :key="index"
      >
        <view class="row-item time-col">{{ item.time }}</view>
        <view class="row-item">{{ item.total_transaction }}</view>
        <view class="row-item">{{ item.subsidy_amount }}</view>
        <view class="row-item">
          <text :class="`status-${item.status_str === '已发放'  ? 0 : 1}`">{{ item.status_str }}</text>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="load-more">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMore">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
		props: {
			tableData: {
				type: Array,
				default: () => [],
			}
		},
  data() {
    return {
      sortOrder: 'desc', // 排序方式 desc降序/asc升序
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      loading: false, // 加载状态
      noMore: false, // 是否没有更多数据
      scrollHeight: 600 // 滚动区域高度，根据实际需要调整
    }
  },
  created() {
    // 获取设备高度，动态设置scroll-view高度
    this.calculateScrollHeight();
    // 初始化加载数据
    // this.loadData();
  },
  methods: {
    // 计算滚动区域高度
    calculateScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.scrollHeight = systemInfo.windowHeight - 50 - 67; // 减去表头高度
    },
    
    // 切换排序
    toggleSort() {
      this.sortOrder = this.sortOrder === 'desc' ? 'asc' : 'desc';
      this.page = 1; // 重置页码
      this.tableData = []; // 清空数据
      this.noMore = false;
      this.loadData();
    },
    
    // 加载数据
    async loadData() {
      if (this.loading || this.noMore) return;
      
      this.loading = true;
      
      try {
        // 模拟API请求 - 实际项目中替换为真实接口
        const mockData = this.getMockData(this.page, this.pageSize, this.sortOrder);
        
        if (mockData.length === 0) {
          this.noMore = true;
          return;
        }
        
        if (this.page === 1) {
          this.tableData = mockData;
        } else {
          this.tableData = [...this.tableData, ...mockData];
        }
        
        this.page++;
      } finally {
        this.loading = false;
      }
    },
    
    // 加载更多
    loadMore() {
      this.loadData();
    },
    
    // 模拟数据 - 实际项目中删除
    getMockData(page, pageSize, sortOrder) {
      if (page > 3) return []; // 模拟只有3页数据
      
      const data = [];
      const now = new Date();
      const statusOptions = [0, 1, 2]; // 0-待审核 1-已通过 2-已拒绝
      
      for (let i = 0; i < pageSize; i++) {
        const days = (page - 1) * pageSize + i;
        const date = new Date(now);
        date.setDate(now.getDate() - days);
        
        data.push({
          time: `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
          amount: (Math.random() * 10000).toFixed(2),
          subsidy: (Math.random() * 1000).toFixed(2),
          status: statusOptions[Math.floor(Math.random() * statusOptions.length)]
        });
      }
      
      // 模拟排序
      if (sortOrder === 'asc') {
        return data.sort((a, b) => new Date(a.time) - new Date(b.time));
      } else {
        return data.sort((a, b) => new Date(b.time) - new Date(a.time));
      }
    },
    
    // 状态文本
    getStatusText(status) {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      };
      return statusMap[status] || '未知';
    }
  }
}
</script>

<style scoped>
.container {
  /* padding: 20rpx; */
  box-sizing: border-box;
}

.table-scroll {
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
}

.table-header, .table-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #f5f5f5;
}

.header-item, .row-item {
  flex: 1;
  padding: 20rpx 10rpx;
  text-align: center;
  font-size: 26rpx;
  color: #333;
}

.header-item {
  font-weight: bold;
  /* background-color: #f8f8f8; */
}

.time-col {
  flex: 1.2;
}

.sort-icon {
  display: inline-block;
  margin-left: 10rpx;
}

.status-0 {
  color: #999;
}

.status-1 {
  color: var(--subss-color);
}
.status-2 {
  color: #FA3534;
}

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