horzi_rai_wxa/reportPages/internalTesting/internalTesting.vue

<template>
  <view class="container intemal-container">
    <view class="content-ul" v-for="item in collectList" :key="item.ProductInteriorId" @click="goDetail(item)">
      <view class="li-title">{{ item.Title }}</view>
      <view class="li-tiem">{{ item.PublishTime }}</view>
    </view>
    <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";

export default {
  data() {
    return {
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      refresh: false, //正在下拉
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      collectList: [],
    };
  },
  methods: {
    // 获取列表数据
    async getList() {
      const res = await Reports.getProductInteriorList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
        this.collectList = this.page_no == 1 ? res.Data.List || [] : this.collectList.concat(res.Data.List);
        if (this.refresh) {
          wx.stopPullDownRefresh();
        }
      }
    },
    // 去往详情
    goDetail(item) {
      uni.navigateTo({
        url: "/reportPages/internalDetials/internalDetials?id=" + item.ProductInteriorId,
      });
    },
  },
  onLoad() {
    this.getList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page_no = 1;
    this.refresh = true;
    this.getList();
  },
  // 下滑触底
  onReachBottom() {
    if (this.status == "nomore") return;
    this.page_no++;
    this.getList();
    this.status = "loading";
  },
};
</script>

<style lang="scss" scoped>
.intemal-container {
  padding: 30rpx;
  background-color: #f7f7f7;
  .content-ul {
    padding: 20rpx 30rpx 20rpx 50rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    .li-title {
      font-weight: 500;
      font-size: 30rpx;
      line-height: 42rpx;
      color: #333333;
      padding-bottom: 17rpx;
      border-bottom: 1rpx dashed #ececec;
    }
    .li-tiem {
      padding-top: 17rpx;
      text-align: right;
      font-size: 28rpx;
      line-height: 39rpx;
      color: #666666;
    }
  }
}
</style>