AgriculturalCloud-h5-UI/pages/monitoring/index.vue

<template>
  <view class="monitoring">
    <view class="monitoring-content">
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
        <view class="monitoring-listbody">
          <!-- 列表无数据 -->
          <template v-if="list_empty">
            <view class="monitoring-listbody-nodata">
              <text class="monitoring-listbody-nodata-text">暂无数据</text>
            </view>
          </template>

          <!-- 列表有数据 -->
          <template v-else>
            <view
              class="listbody-item"
              v-for="monitoringItem in monitoringList"
              :key="monitoringItem.id"
              @click="handleMonitoringDetails(monitoringItem)"
            >
              <view class="item-container">
                <view class="container-left">
                  <view class="left-title">{{ monitoringItem.artTitle }}</view>
                  <view class="left-releasetime">发布时间：{{ monitoringItem.artInTime }}</view>
                </view>
                <view class="container-right">
                  <view class="right-content">
                    <template v-if="monitoringItem.artImage">
                      <image
                        :src="baseApiUrl + monitoringItem.artImage"
                        mode="scaleToFill"
                        class="right-content-image"
                      />
                    </template>
                    <template v-else>
                      <image
                        src="@/static/agrcloud-images/agrcloud-empty-img.png"
                        mode="scaleToFill"
                        class="right-content-image"
                      />
                    </template>
                  </view>
                </view>
                <view style="clear: both;"></view>
              </view>
            </view>
          </template>

          <!-- 加载更多组件 -->
          <uni-load-more :status="loadStatus" v-if="!list_empty"></uni-load-more>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  monitoringListData
} from '@/agrcloud-api/monitoring';
import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"

export default {
  name: 'monitoring',
  components: {
    uniLoadMore
  },
  data() {
    return {
      loadStatus: 'more',
      list_empty: false,
      pageTotal: 0,
      pageCount: 0,
      pagination: {
        artCategoryId: '2',
        pageNum: 1,
        pageSize: 10
      },
      monitoringList: []
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    initData() {
      this.getMonitoringListData();
    },
    /** 获取政策法规之列表数据 */
    getMonitoringListData() {
      this.list_empty = false;
      this.loadStatus = 'loading';

      monitoringListData(this.pagination).then(res => {
        // 数据总条数
        this.pageTotal = res.total || 0;

        // 如果列表为第一页，返回列表数据清空
        if (this.pagination.pageNum == 1) {
          this.monitoringList = [];
        };

        // 处理返回结果
        if ((res.rows || []).length <= 0) { // 返回结果没有数据
          if ((this.monitoringList || []).length <= 0) {
            this.loadStatus = 'noMores';
            this.list_empty = true;
          } else {
            this.loadStatus = 'noMores';
          }
        } else { //返回结果有数据
          this.list_empty = false;

          // 获取列表数据分页数量
          this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
          if ((res.total || 0) % this.pagination.pageSize == 0) {
            this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
            if (this.pageCount == 1) {
              this.pageCount--;
            }
          } else {
            this.pageCount--;
          };

          // 处理页面状态
          if (this.pageCount === 0) {
            this.loadStatus = 'noMores'
          } else {
            this.loadStatus = 'more'
          }

          // 组装返回数据
          this.monitoringList.push.apply(this.monitoringList, res.rows || []);

          uni.stopPullDownRefresh();
        }

      }).catch(err => {
        this.loadStatus = 'noMores';
      });
    },
    handleScrolltolower() {
      this.loadStatus = 'loading';
      if (this.pagination.pageNum - 1 >= this.pageCount) {
        this.loadStatus = 'noMores';
        return;
      } else {
        this.pagination.pageNum++;
        this.getMonitoringListData();
      }
    },
    /** 政策法规之详情数据操作 */
    handleMonitoringDetails(param) {
      this.$store.dispatch("SetMonitoringDetails", param).then(() => {
        uni.navigateTo({
          url: '/pages/monitoring/details/index'
        });
      }).catch(() => {
        this.$msgbox('访问数据异常！', 'none');
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.monitoring {
  padding-top: 25rpx;
  width: 100%;

  .monitoring-content {
    width: 100%;

    .scroll-Y {
      height: calc(
        100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) -
          var(--status-bar-height)
      );
    }

    .monitoring-listbody {
      width: 100%;

      .listbody-item {
        width: 750rpx;
        height: 208rpx;
        background: #ffffff;
        margin-bottom: 24rpx;

        .item-container {
          padding: 24rpx;

          .container-left {
            float: left;
            width: 478rpx;

            .left-title {
              height: 84rpx;
              font-size: 30rpx;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 42rpx;
            }

            .left-releasetime {
              margin-top: 16rpx;
            }
          }

          .container-right {
            float: left;
            margin-left: 24rpx;

            .right-content {
              width: 200rpx;
              height: 160rpx;
              border-radius: 8rpx;

              .right-content-image {
                width: 200rpx;
                height: 160rpx;
              }
            }
          }
        }
      }

      &-nodata {
        text-align: center;
        margin-top: 20rpx;

        &-text {
          font-size: 30rpx;
          color: #777777;
        }
      }
    }
  }
}
</style>