hongze_yb_pc/src/views/report/surveyHistory.vue

<script setup>
import { onMounted, ref } from "vue";
import { apiPublicBannerList, apiPublicBannerMark, bannerHistoryList } from "@/api/report";
import { useRouter } from "vue-router";
const router = useRouter();

const bannerDataList = ref([]);
// banner 获取列表
const getBannerlist = async () => {
  const res = await apiPublicBannerList();
  if (res.code == 200) {
    bannerDataList.value = res.data;
  }
};

// banner 点击事件
async function bannerSwiperHandler(item) {
  let source = sessionStorage.getItem("platformSource");
  const res = await apiPublicBannerMark({
    first_source: source == "xcx" ? 2 : 3, //一级来源 1小程序移动 2小程序pc 3研报官网
    second_source: 1, //二级来源 1首页 2研报详情页
    id: item.id,
  });
  if (res.code == 200) {
    router.push({
      path: "/report/disseminatePage",
      query: {
        imgBg: item.jump_url_pc,
        enable: item.enable,
        id: item.id,
        title: item.remark
      },
    });
  }
}

const finished = ref(false);
const loading = ref(false);
const page = ref(1);
const limit = ref(10);
const bannerHistoryDataList = ref([]);

// 获取已结束的调研
async function getSurveyHistoryList() {
  loading.value = true;
  const res = await bannerHistoryList({
    page: page.value,
    limit: limit.value,
  });
  loading.value = false;
  if (res.code === 200) {
    let arr = res.data.list || [];
    bannerHistoryDataList.value = [...bannerHistoryDataList.value, ...arr];
    if (res.data.paging.is_end) {
      finished.value = true;
    }
  }
}

//加载更多
const onLoad = () => {
  if (loading.value) return;
  page.value++;
  getSurveyHistoryList();
};

onMounted(() => {
  getBannerlist();
  getSurveyHistoryList();
  document.title = "调研列表";
});
</script>

<template>
  <div class="container survey-history-content">
    <div class="state-content">进行中</div>
    <div class="activity-content" v-for="item in bannerDataList" :key="item.id" @click="bannerSwiperHandler(item)">
      <img :src="item.image_url_pc" />
    </div>
    <div class="state-content" style="margin-top: 20px">已结束</div>
    <div class="notice-list" v-infinite-scroll="onLoad" :infinite-scroll-disabled="finished">
      <div class="activity-content" v-for="item in bannerHistoryDataList" :key="item.id" @click="bannerSwiperHandler(item)">
        <img :src="item.image_url_pc" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.survey-history-content {
  padding: 30px 35px;
  .state-content {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding-left: 8px;
    &::after {
      content: "";
      position: absolute;
      top: 1px;
      left: 0;
      width: 3px;
      height: 18px;
      background-color: #e3b377;
    }
  }
  .activity-content {
    margin-top: 20px;
    width: 100%;
    cursor: pointer;
    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>