web/pages/mine/modules/down.vue

<template>
  <div class="list-box" :class="{ 'mobile-down': isMobile }">
    <template v-if="pageData.count">
      <div class="items">
        <div class="down-item" v-for="item in pageData.list" :key="item.id">
          <span class="down-title" @click="toDetail(item)">{{
            item?.report.title
          }}</span>
          <span class="down-file-type">下载文件类型：{{ item.fileName?.split(".")[1] }}</span>
        </div>
      </div>
      <div class="pagination">
        <n-pagination :page="queryParams?.pageNo" :page-count="pageData?.count" :page-size="queryParams?.pageSize" size="large" :on-update-page="changePage" :page-slot="7" />
      </div>
    </template>
    <div class="empty" v-else>
      <n-empty description="暂无数据" size="huge"> </n-empty>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { NButton, NPagination, NEmpty, createDiscreteApi } from "naive-ui";
import { useRouter, useRoute } from "vue-router";
const router = useRouter(); // 传递参数
const props = defineProps({
  isMobile: {
    type: Boolean,
    default: false,
  },
});

const queryParams = reactive({
  pageNo: 1,
  pageSize: 5,
});

const pageData = ref({});

onMounted(() => {
  getList();
});

const message = createDiscreteApi(["message"]);

const getList = async () => {
  const { code, data } = await getMyDoen_Api(queryParams);
  if (code === 200) {
    pageData.value = data;
  }
};

const toDetail = (item: object) => {
  router.push({
    name: "bulletinDetail",
    params: {
      webTitle: item?.report?.webTitle + "-" + item?.report?.id,
    },
  });
};

// 改变页数
const changePage = (page: number) => {
  document.documentElement.scrollTop = 0;
  queryParams.pageNo = page;
  getList();
};
</script>

<style lang="scss" scoped>
.list-box {
  height: 100%;

  .items {
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: scroll;
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }

  .empty {
    padding: 50px 0;
  }
}
.down-item {
  display: flex;
  align-items: center;
  padding: 30px 0 20px;
  border-bottom: 1px dashed #e6e6e6;

  &:first-child {
    padding-top: 0;
  }

  .down-title {
    flex: 1;
    width: 0;
    font-size: 24px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .down-file-type {
    margin-left: 30px;
    font-size: 16px;
    color: #808080;
    flex-shrink: 0;
  }
}

.mobile-down {
  .down-item {
    padding: 15px 0;

    &:first-child {
      padding-top: 0;
    }

    .down-title {
      font-size: 18px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }

    .down-file-type {
      margin-left: 15px;
      font-size: 14px;
    }
  }
}
</style>