subject_gxj/xj_project_app_2024_2_18/pages/policy/index.vue

<script setup>
  import {
    ref
  } from "vue";

  import {
    onLoad,
    onPullDownRefresh,
    onReachBottom,
    onPageScroll,
  } from "@dcloudio/uni-app";

  import {
    getPolicyList,
  } from "@/api/work/policy.js";

  // 页面标题
  let pageName = ref(null);

  // 滚动
  let scrollTop = ref(0);

  // 搜索条件
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
    columnId: null
  });

  // 列表
  let policyList = ref([]);
  let listTotal = ref(0);

  // 获取列表
  let loading = ref(true);
  const getList = function() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    };
    getPolicyList(searchInfo.value).then(res => {
      loading.value = false;
      policyList.value = policyList.value.concat(res.data.list);
      listTotal.value = res.data.total;

      if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list.length))
        moreListFlag = false;
      console.log(policyList.value);
    }).catch(() => {
      loading.value = false;
    })
  };

  //跳转详情
  const showDetail = function(title, id) {
    uni.navigateTo({
      url: `/pages/policy/detail/index?title=${title}&id=${id}`,
    });
  }

  // 触底加载flag
  let moreListFlag = true

  onLoad(options => {
    pageName = options.title;
    searchInfo.value.columnId = options.id;
    getList();
  });

  //图片预览
  // function viewImg(e){
  // 	let imglist = [e]
  // 	uni.previewImage({
  // 		longPressActions:true,
  // 		urls:imglist
  // 	})
  // }

  onPullDownRefresh(() => {
    searchInfo.value.pageNo = 1;
    policyList.value = [];
    moreListFlag = true;
    try {
      getList();
    } finally {
      uni.stopPullDownRefresh();
    }
  });

  onReachBottom(() => {
    if (!moreListFlag) {
      return uni.showToast({
        title: "已经到底了。",
        icon: "none",
        duration: 2000
      })
    }
    searchInfo.value.pageNo++;
    getList();
  });

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
  })
</script>

<template>
  <view class="container">
    <page-title>{{pageName}}</page-title>

    <view class="items-list" style="padding-top: 0 !important;">
      <view class="item" v-for="(item,index) in policyList" :key="index" @click="showDetail(item.title,item.id)">
        <view class="item-title">{{item.title?? "--"}}</view>

        <view class="item-text">
          <view class="item-kind">{{item.columnName??"--"}}
          </view>
          <view class="item-coverimg">
            <img :src="item.coverImg" alt="" class="item-icon-img" @click='viewImg(item.coverImg)' v-if="item.coverImg">
            <img src="../../static/images/noImgVideo.svg" alt="" class="item-icon" v-else>
          </view>
          <!-- <view class="item-rptDate">{{item.rptDate?? "--"}}</view> -->
        </view>
        <!-- <view class="item-btn">查看</view> -->
      </view>
    </view>

    <u-back-top :scroll-top="scrollTop"></u-back-top>

    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<style lang="scss" scoped>
  .items-list {
    position: absolute;
    margin-top: calc(var(--status-bar-height) + 0rpx);
    left: 0;
    width: 100%;
    min-height: 95%;
    padding: 50rpx 4%;
    // background: #F9FBFF;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20rpx;
    // border-radius: 40rpx 40rpx 0 0;
  }

  .item {
    position: relative;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    // min-height: 140rpx;
    // padding: 26rpx 28rpx;
    // box-sizing: border-box;
    // background: #FFFFFF;
    // box-shadow: 0rpx 18rpx 48rpx -4rpx rgba(150, 176, 220, 0.2);
    // border-radius: 24rpx;
    // width: 694rpx;
    height: auto;
    min-height: 216rpx;
    background: #FFFFFF;
    box-shadow: 0px 0px 8rpx 0px #D8EEFF;
    border-radius: 12rpx;
    padding: 36rpx;

    .item-title {
      width: 75%;
      height: auto;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 48rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .item-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 70%;
      height: 100%;
      word-break: break-all;
      position: absolute;
      right: -132rpx;
      top: 0rpx;

      .item-coverimg {
        width: 128rpx;
        height: 128rpx;
        background: #F6F6F6;
        border-radius: 4rpx;
        border: 2rpx solid #EBEBEB;
        display: flex;
        justify-content: center;
        align-items: center;

        .item-icon-img {
          width: 100%;
          height: 100%;
          border-radius: 4rpx;
        }

        .item-icon {
          width: 72rpx;
          height: 72rpx;
          // margin-right: 32rpx;
          // 	background-image: url("@/static/policy-icon.png");
          // 	background-size: 100% 100%;
        }
      }

      .item-kind {
        // width: fit-content;
        // min-height: 38rpx;
        // padding: 10rpx;
        // box-sizing: border-box;
        // text-align: center;
        // color: #1763E7;
        // font-size: 24rpx;
        // line-height: 38rpx;
        // background: #DEEAFF;
        // border-radius: 12rpx;
        width: auto;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        margin-bottom: 12rpx;
        background: #F2F7FF;
        border-radius: 0px 0px 32rpx 32rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #6C90C1;
        white-space: nowrap;
        padding-left: 14rpx;
        padding-right: 14rpx;
      }

      .item-rptDate {
        width: 100%;
        color: #343437;
        font-size: 28rpx;
        margin-bottom: 30rpx;
      }
    }

    .item-btn {
      width: 106rpx;
      height: 58rpx;
      background: #1763E7;
      border-radius: 16rpx;
      color: #FFF;
      font-size: 28rpx;
      text-align: center;
      line-height: 58rpx;
      margin-left: 20rpx;
    }
  }
</style>