优化灌溉计划页面，添加分页功能和加载更多数据的逻辑；更新样式以提升用户体验，确保在切换标签时只加载必要的数据。

zuoxiao

2025-04-11 7d56f6e20ab87cf6bb78cb5e6d02df0a15f5ed7a

优化灌溉计划页面，添加分页功能和加载更多数据的逻辑；更新样式以提升用户体验，确保在切换标签时只加载必要的数据。

 pages/irrigation/irrigation.js

@@ -13,7 +13,12 @@
    currentList: [], // 当前显示的列表
    isRefreshing: false, // 是否正在刷新
    isWXRefreshing: false, // 微信原生下拉刷新状态
    projectId: null // Added to store projectId
    projectId: null, // Added to store projectId
    // 添加分页相关数据
    pageCurr: 1, // 当前页码，从1开始
    pageSize: 10, // 每页记录数
    hasMoreData: true, // 是否还有更多数据
    loadingMore: false // 是否正在加载更多
  },

  /**
@@ -26,22 +31,70 @@
        projectId: options.projectId
      });
    }
    this.loadIrrigationData();
    this.loadCompletedIrrigationData();
    
    // 设置加载状态
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    
    // 默认先加载当前灌溉计划
    this.loadIrrigationData()
      .then(() => {
        wx.hideLoading();
      })
      .catch(() => {
        wx.hideLoading();
      });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.loadIrrigationData();
    this.loadCompletedIrrigationData();
  },
  // onShow: function () {
  //   // 设置页面为加载中状态
  //   wx.showLoading({
  //     title: '加载中',
  //     mask: true
  //   });
    
  //   // 先加载当前页面所需的数据
  //   const currentTab = this.data.currentTab;
  //   if (currentTab === 0) {
  //     // 当前标签是"当前灌溉计划"，加载这个
  //     this.loadIrrigationData()
  //       .then(() => {
  //         wx.hideLoading();
  //       })
  //       .catch(() => {
  //         wx.hideLoading();
  //       });
  //   } else {
  //     // 当前标签是"历史计划"
  //     // 只加载第一页数据，保留分页状态
  //     if (this.data.completedList.length === 0) {
  //       // 如果历史列表为空，重置分页状态
  //       this.setData({
  //         pageCurr: 1,
  //         hasMoreData: true
  //       });
  //     }
      
  //     this.loadCompletedIrrigationData()
  //       .then(() => {
  //         wx.hideLoading();
  //       })
  //       .catch(() => {
  //         wx.hideLoading();
  //       });
  //   }
  // },

  /**
   * 加载轮灌数据
   */
  loadIrrigationData: function () {
    return new Promise((resolve, reject) => {
    get({
      url: '/wx/plan/getNotCompletePlans'
    }).then(res => {
@@ -69,13 +122,16 @@
          isRefreshing: false,
          isWXRefreshing: false
        });
          resolve();
      } else {
        wx.showToast({
          title: res.msg || '加载失败',
          icon: 'none'
        });
          reject();
      }
    }).catch(err => {
        console.error('加载失败:', err);
      wx.showToast({
        title: '加载失败',
        icon: 'none'
@@ -84,6 +140,8 @@
        isRefreshing: false,
        isWXRefreshing: false
      });
        reject();
      });
    });
  },

@@ -91,11 +149,26 @@
   * 加载已完成的轮灌数据
   */
  loadCompletedIrrigationData: function () {
    // 如果正在加载或没有更多数据，则不再请求
    if (this.data.loadingMore && !this.data.hasMoreData) {
      return Promise.resolve();
    }
    
    // 设置加载状态
    this.setData({
      loadingMore: true
    });
    
    return new Promise((resolve, reject) => {
    get({
      url: '/wx/plan/getCompletedPlans'
        url: '/wx/plan/getCompletedPlans',
        data: {
          pageCurr: this.data.pageCurr,
          pageSize: this.data.pageSize
        }
    }).then(res => {
      if (res.success) {
        const completedList = res.content.map(item => {
          const newCompletedList = res.content.obj ? res.content.obj.map(item => {
          // 确保将planState转换为字符串
          const planState = String(item.planState);
          return {
@@ -108,30 +181,53 @@
            duration: item.duration,
            startupMode: item.startupMode
          };
        });
          }) : [];

        console.log('已完成轮灌计划数据：', completedList);
          console.log('已完成轮灌计划数据：', newCompletedList);
          
          // 获取分页信息
          const pageInfo = {
            itemTotal: res.content.itemTotal || 0, // 总记录数
            pageCurr: res.content.pageCurr || 1,   // 当前页码
            pageSize: res.content.pageSize || 20,  // 每页大小
            pageTotal: res.content.pageTotal || 1  // 总页数
          };
          
          console.log('分页信息：', pageInfo);

          // 判断是否还有更多数据 - 当前页小于总页数
          const hasMoreData = pageInfo.pageCurr < pageInfo.pageTotal;

          // 合并数据，第一页直接替换，之后的页面追加
          const completedList = this.data.pageCurr === 1 ? 
            newCompletedList : [...this.data.completedList, ...newCompletedList];

        this.setData({
          completedList: completedList,
          currentList: this.data.currentTab === 1 ? completedList : this.data.activeList,
          isRefreshing: false,
          isWXRefreshing: false
            isWXRefreshing: false,
            loadingMore: false,
            hasMoreData: hasMoreData
        });
          resolve();
      } else {
        wx.showToast({
          title: res.msg || '加载失败',
          icon: 'none'
          this.setData({
            loadingMore: false
        });
          // 不显示提示，因为可能是在后台加载
          console.error('历史计划加载失败:', res.msg);
          reject();
      }
    }).catch(err => {
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      });
        console.error('历史计划加载失败:', err);
      this.setData({
        isRefreshing: false,
        isWXRefreshing: false
          isWXRefreshing: false,
          loadingMore: false
        });
        // 不显示提示，因为可能是在后台加载
        reject();
      });
    });
  },
@@ -148,10 +244,58 @@
    const activeList = this.data.activeList || [];
    const completedList = this.data.completedList || [];
    
    // 切换标签页时，直接使用已加载的数据，不重新请求
    if (index === 1) {
      // 切换到历史计划标签
    this.setData({
      currentTab: index,
      currentList: index === 0 ? activeList : completedList
        currentList: completedList
    });
      
      // 如果历史列表为空，才进行加载
      if (completedList.length === 0) {
        wx.showLoading({
          title: '加载中',
          mask: true
        });
        
        this.setData({
          pageCurr: 1,
          hasMoreData: true,
          loadingMore: true // 显示加载指示器
        });
        
        this.loadCompletedIrrigationData()
          .then(() => {
            wx.hideLoading();
          })
          .catch(() => {
            wx.hideLoading();
          });
      }
    } else {
      // 切换到当前灌溉计划标签
      this.setData({
        currentTab: index,
        currentList: activeList
      });
      
      // 如果当前灌溉计划列表为空，才进行加载
      if (activeList.length === 0) {
        wx.showLoading({
          title: '加载中',
          mask: true
        });
        
        this.loadIrrigationData()
          .then(() => {
            wx.hideLoading();
          })
          .catch(() => {
            wx.hideLoading();
          });
      }
    }
  },

  /**
@@ -363,8 +507,27 @@
      this.setData({
        isRefreshing: true
      });
      this.loadIrrigationData();
      this.loadCompletedIrrigationData();
      
      // 根据当前标签页只刷新对应的数据
      const currentTab = this.data.currentTab;
      if (currentTab === 0) {
        // 当前标签是"当前灌溉计划"，只刷新这个
        this.loadIrrigationData()
          .finally(() => {
            this.setData({ isRefreshing: false });
          });
      } else {
        // 当前标签是"历史计划"，将分页重置到第一页并刷新
        this.setData({
          pageCurr: 1,
          hasMoreData: true
        });
        
        this.loadCompletedIrrigationData()
          .finally(() => {
            this.setData({ isRefreshing: false });
          });
      }
    }
  },

@@ -375,7 +538,45 @@
    this.setData({
      isWXRefreshing: true
    });
    this.loadIrrigationData();
    this.loadCompletedIrrigationData();
    
    // 根据当前标签页只刷新对应的数据
    const currentTab = this.data.currentTab;
    if (currentTab === 0) {
      // 当前标签是"当前灌溉计划"，只刷新这个
      this.loadIrrigationData()
        .finally(() => {
          this.setData({ isWXRefreshing: false });
        });
    } else {
      // 当前标签是"历史计划"，将分页重置到第一页并刷新
      this.setData({
        pageCurr: 1,
        hasMoreData: true
      });
      
      this.loadCompletedIrrigationData()
        .finally(() => {
          this.setData({ isWXRefreshing: false });
        });
    }
  },
  
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
    console.log('触底加载更多, 当前标签:', this.data.currentTab);
    // 当前是已完成列表且还有更多数据时加载更多
    if (this.data.currentTab === 1 && this.data.hasMoreData && !this.data.loadingMore) {
      this.setData({
        pageCurr: this.data.pageCurr + 1
      });
      
      // 加载更多历史数据
      this.loadCompletedIrrigationData()
        .catch(err => {
          console.error('加载更多历史数据失败:', err);
        });
    }
  }
}) 

 pages/irrigation/irrigation.wxml

@@ -10,7 +10,17 @@
  </view>

  <!-- 中间列表 - 使用scroll-view实现下拉刷新 -->
  <scroll-view class="scroll-view" scroll-x="false" scroll-y="true" refresher-enabled="{{isRefreshing==false?true:false}}" refresher-threshold="50" bindrefresherrefresh="onPullDownRefresh" refresher-triggered="{{isWXRefreshing}}">
  <scroll-view class="scroll-view" 
               scroll-x="false" 
               scroll-y="true" 
               refresher-enabled="{{isRefreshing==false?true:false}}" 
               refresher-threshold="50" 
               bindrefresherrefresh="onPullDownRefresh" 
               refresher-triggered="{{isWXRefreshing}}"
               lower-threshold="100"
               bindscrolltolower="{{currentTab === 1 ? 'onReachBottom' : ''}}"
               enhanced="{{true}}"
               id="scrollView">
    <view wx:if="{{isRefreshing}}" class="refresh-view">
      <view class="dot"></view>
      <view class="dot"></view>
@@ -92,6 +102,19 @@
            </view>
          </view>
        </view>
        
        <!-- 加载更多提示 - 仅在历史计划标签页显示 -->
        <view wx:if="{{currentTab === 1}}" class="loading-more-container">
          <view wx:if="{{loadingMore}}" class="loading-more">
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
            <view class="loading-dot"></view>
            <text>加载中...</text>
          </view>
          <view wx:elif="{{!hasMoreData && completedList.length > 0}}" class="no-more-data">
            <text>— 已加载全部数据 —</text>
          </view>
        </view>
      </block>

      <block wx:else>

 pages/irrigation/irrigation.wxss

@@ -338,3 +338,90 @@
.add-button-hover {
  opacity: 0.8;
} 

/* 加载更多样式 */
.loading-more-container {
  padding: 20rpx 0;
  text-align: center;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.loading-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #0052d9;
  margin: 0 8rpx;
  animation: loading 1.4s infinite ease-in-out both;
}

.loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-more text {
  margin-left: 12rpx;
  font-size: 28rpx;
  color: #999;
}

.no-more-data {
  color: #999;
  font-size: 26rpx;
  line-height: 80rpx;
}

/* 刷新动画样式 */
.refresh-view {
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.refresh-view .dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #0052d9;
  border-radius: 50%;
  margin: 0 8rpx;
  animation: refresh 1.4s infinite ease-in-out both;
}

.refresh-view .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.refresh-view .dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes refresh {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}