浏览足迹

zxl

2025-08-28 ce8c8392de2459f7819591f37a70077e5bf85ddf

 pages/mine/activity/reportActivity.vue

@@ -1,10 +1,14 @@
<template>
   <view class="wrapper">
      <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>

      <view style="height: 100rpx"></view>
		
      <view style="height: 50rpx;margin-top: 150rpx"></view>
      <u-empty v-if="mockData.length === 0 && !loading" style="margin-top: 130rpx;"
               mode="data" 
               icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
      <!-- 内容区域 -->
      <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
      <scroll-view scroll-y class="scroll-view-container" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
         <view class="waterfall">
            <view class="column" v-for="(column, index) in columns" :key="index">
               <!-- 遍历每列内容 -->
@@ -26,7 +30,8 @@
               </view>
            </view>
         </view>
         <!--    <view style="height: 150rpx;"></view> -->
			
	
         <!-- 改进的加载更多提示 -->
         <view class="load-more">
            <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
@@ -66,6 +71,7 @@
            query: {
               pageNumber: 1,
               pageSize: 10,
               publish:1,
            },
            loading: false, // 是否正在加载
            noMore: false, // 是否没有更多数据
@@ -97,7 +103,6 @@
            this.getActivityList();
         },
         loadMore() {

            // 显示加载状态
            this.loading = true;

@@ -108,7 +113,10 @@
            }, 300);
         },
         async getActivityList() {

            if (this.noMore) {
               this.loading = false;
               return
            }
            try {

               const res = await getActivityReportList(this.query);
@@ -162,7 +170,7 @@
               []
            ];
            this.colHeight = [0, 0];

				
            this.mockData.forEach(item => {
               const minIndex = this.colHeight.indexOf(Math.min(...this.colHeight));
               this.columns[minIndex].push(item); //获得高度更小的 放入元素
@@ -212,38 +220,26 @@
</script>

<style lang="scss">
   /* 新增加载更多样式 */

   /*新增加载更多样式 */
   .load-more {
      padding: 20rpx 0;
      text-align: center;
      color: #999;
      font-size: 26rpx;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }

   .btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      /* 与上方标题保持间距 */
   }

   /* 全局样式优化 */
   .wrapper {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }

   /* 导航栏优化 */
   .u-navbar {
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   }

   /* 内容区域优化 */
   .content {
   .scroll-view-container {
      flex: 1;
      overflow: hidden;
      padding: 0 20rpx;
@@ -266,17 +262,19 @@
      gap: 20rpx;
   }

   /* 卡片项优化 */
   /* 卡片项优化 - 使用绿色主题 */
   .item {
      background: #fff;
      background: #ffffff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      border: 1px solid #e0f2e9;

      &:active {
         transform: scale(0.98);
         box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
         background-color: #f0faf5;
      }
   }

@@ -285,7 +283,7 @@
      width: 100%;
      display: block;
      border-radius: 16rpx 16rpx 0 0;
      background-color: #f5f5f5;
      background-color: #f0faf5;

      &[mode="widthFix"] {
         height: auto;
@@ -297,17 +295,16 @@
      object-fit: cover;
   }

   /* 文字内容样式 */
   /* 文字内容样式 - 使用绿色渐变 */
   .text-content {
      padding: 24rpx;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      // background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
      min-height: 160rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
         color: #fff;
         font-size: 32rpx;
         font-weight: 500;
         line-height: 1.4;
@@ -319,11 +316,11 @@
      }
   }

   /* 标题样式优化 */
   /* 标题样式优化 - 使用深绿色 */
   .title {
      padding: 20rpx 24rpx;
      font-size: 28rpx;
      color: #333;
      color: #2c7a7b;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
@@ -332,7 +329,7 @@
      font-weight: 500;

      &:not(.text-content .title) {
         border-top: 1rpx solid #f0f0f0;
         border-top: 1rpx solid #e0f2e9;
      }
   }

@@ -360,30 +357,12 @@
      }
   }

   /* 空状态样式 */
   .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 60vh;
      text-align: center;

      image {
         width: 240rpx;
         opacity: 0.6;
         margin-bottom: 30rpx;
      }

      text {
         color: #c0c4cc;
         font-size: 28rpx;
      }
   }
	
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000
      z-index: 1000;
      background-color: #ffffff;
   }
</style>