初始化

component/newTable.vue

@@ -0,0 +1,222 @@
+<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 class="sort-icon">
+            <text v-if="sortOrder === 'asc'">↑</text>
+            <text v-else-if="sortOrder === 'desc'">↓</text>
+          </view> -->
+        </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">{{ 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: #FF9900;
+}
+
+.status-1 {
+  color: #19be6b;
+}
+
+.status-2 {
+  color: #FA3534;
+}
+
+.load-more {
+  padding: 20rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+}
+</style>