绿满眶商城微信小程序-uniapp
peng
3 天以前 d50a3ed44e2edab2a7a661c43491c3aa42c57794
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;margin-top: 50px"></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'"
@@ -50,6 +55,7 @@
   import TopBar from "@/components/TopBar.vue";
   import '@/components/uview-components/uview-ui';
   import {getActivityReportList} from '@/api/activity.js';
   import { getSessionId, userAction } from "@/api/userAction.js";
   export default {
      components: {TopBar},
      data() {
@@ -70,10 +76,44 @@
            },
            loading: false, // 是否正在加载
            noMore: false, // 是否没有更多数据
            total: 0 // 总数据量
            total: 0 ,// 总数据量
              pageSessionNo:"",
              actionParam:{
                  sessionId:'',
                  actionType:"PAGE",
                  joinType:"SELF",
                  pageCode:"ACTIVITY_LIST",
                  pageParams:"{}",
                  pageStatus:"JOIN",
                  pageType:"LIST"
               }
         };
      },
      onLoad() {
    onUnload() {
      let   param = this.actionParam;
      if (this.sendOnShow)return
      param.pageStatus = "LEAVE"
      userAction(param)
    },
    onHide() {
      this.startHidenTime = Date.now()
      let   param = this.actionParam;
      this.sendOnShow = true;
      param.pageStatus = "LEAVE"
      userAction(param)
    },
      onShow() {
        getSessionId().then(res=>{
         this.pageSessionNo = res.data.data
         if(this.pageSessionNo){
         let   param = this.actionParam;
            param.sessionId = this.pageSessionNo
            userAction(param)
         }
        })
      },
      onLoad(options) {
         this.actionParam.pageParams = JSON.stringify(options)
         this.getActivityList();
      },
      methods: {
@@ -165,7 +205,7 @@
               []
            ];
            this.colHeight = [0, 0];
            this.mockData.forEach(item => {
               const minIndex = this.colHeight.indexOf(Math.min(...this.colHeight));
               this.columns[minIndex].push(item); //获得高度更小的 放入元素
@@ -215,7 +255,8 @@
</script>
<style lang="scss">
   /* 新增加载更多样式 */
   /*新增加载更多样式 */
   .load-more {
      padding: 20rpx 0;
      text-align: center;
@@ -223,15 +264,6 @@
      font-size: 26rpx;
      background-color: #f8f9fa;
   }
   .btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      /* 与上方标题保持间距 */
   }
   /* 全局样式优化 */
   .wrapper {
      height: 100vh;
@@ -240,13 +272,9 @@
      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;
@@ -364,26 +392,6 @@
      }
   }
   /* 空状态样式 */
   .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;