绿满眶商城微信小程序-uniapp
peng
2025-07-02 be80b22a4a0fcd33e1b17ebdb86eba91cc7de4d2
pages/mine/activity/reportActivity.vue
@@ -1,8 +1,8 @@
<template>
   <view class="wrapper">
      <view style="height: 100rpx"></view>
      <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <view style="height: 100rpx;margin-top: 50px"></view>
      <!-- 内容区域 -->
      <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
         <view class="waterfall">
@@ -47,24 +47,11 @@
</template>
<script>
   import {
      changeCollect
   } from '@/api/collect.js'
   import {
      getFilePreviewUrl
   } from '@/api/common.js'
   import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
   import UImage from '@/uview-components/uview-ui/components/u-image/u-image.vue';
   import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue'
   import {
      getActivityReportList,
   } from '@/api/activity.js';
   import TopBar from "@/components/TopBar.vue";
   import '@/components/uview-components/uview-ui';
   import {getActivityReportList} from '@/api/activity.js';
   export default {
      components: {
         UImage,
         UButton,
         ULoadmore
      },
      components: {TopBar},
      data() {
         return {
            columns: [
@@ -79,6 +66,7 @@
            query: {
               pageNumber: 1,
               pageSize: 10,
               publish:1,
            },
            loading: false, // 是否正在加载
            noMore: false, // 是否没有更多数据
@@ -89,6 +77,17 @@
         this.getActivityList();
      },
      methods: {
         topBarChange(titleObj) {
            if (titleObj.index === 'home') {
               uni.switchTab({
                  url: titleObj.pagePath
               });
            } else {
               uni.redirectTo({
                  url: titleObj.pagePath
               });
            }
         },
         /**
          * 下拉刷新时
          */
@@ -99,7 +98,6 @@
            this.getActivityList();
         },
         loadMore() {
            // 显示加载状态
            this.loading = true;
@@ -110,7 +108,10 @@
            }, 300);
         },
         async getActivityList() {
            if (this.noMore) {
               this.loading = false;
               return
            }
            try {
               const res = await getActivityReportList(this.query);
@@ -220,7 +221,7 @@
      text-align: center;
      color: #999;
      font-size: 26rpx;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }
   .btn-container {
@@ -236,7 +237,7 @@
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: #f7f8fa;
      background-color: #f8f9fa;
   }
   /* 导航栏优化 */
@@ -268,17 +269,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;
      }
   }
@@ -287,7 +290,7 @@
      width: 100%;
      display: block;
      border-radius: 16rpx 16rpx 0 0;
      background-color: #f5f5f5;
      background-color: #f0faf5;
      &[mode="widthFix"] {
         height: auto;
@@ -299,17 +302,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;
@@ -321,11 +323,11 @@
      }
   }
   /* 标题样式优化 */
   /* 标题样式优化 - 使用深绿色 */
   .title {
      padding: 20rpx 24rpx;
      font-size: 28rpx;
      color: #333;
      color: #2c7a7b;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
@@ -334,7 +336,7 @@
      font-weight: 500;
      &:not(.text-content .title) {
         border-top: 1rpx solid #f0f0f0;
         border-top: 1rpx solid #e0f2e9;
      }
   }
@@ -382,4 +384,12 @@
         font-size: 28rpx;
      }
   }
</style>
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000;
      background-color: #ffffff;
   }
</style>