daikins/.svn/pristine/6e/6e4a1f353a01e58b903f7777e074da23aa22dc79.svn-base

<script setup lang="ts">
import HomeHead from "@/views/home/components/HomeHead.vue";
import { useDate } from "@/views/home/hooks/useDate";
import { externalList } from "@/api/daikin/base";
import AppBlock from "@/components/AppBlock.vue";
import { pageType } from "@/stores/modules/pages";

const { day, week } = useDate();
const { push } = useRouter();
const pages = pageType();
const title = ref("News");
const gridItemCount = ref(4);
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  type: "1",
  cate: "7",
  total: 10,
});
watchEffect(() => {
  title.value = pages.page.title;
  pageInfo.cate = pages.page.cate;
});

const listData = ref();
async function getPageList() {
  const { rows, total } = await externalList({
    pageNum: pageInfo.currentPage,
    pageSize: pageInfo.pageSize,
    type: pageInfo.type,
    cate: pageInfo.cate,
  });
  pageInfo.total = total;
  listData.value = rows;
}

const handleSizeChange = (e) => {
  console.log(e);
};

const handleCurrentChange = (e) => {
  console.log(e);
};
const lazyState = computed(() => [pageInfo.currentPage]);
watch(
  () => unref(lazyState),
  async (v) => {
    getPageList();
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <HomeHead class="top"> </HomeHead>
  <div class="back" @click="push({ name: 'external' })">返回首页</div>

  <div class="h-90% relative flex flex-col">
    <div class="font-600 flex items-end mt30px text-#fff">
      <div class="text-36px">{{ title }}列表</div>
      <div class="text-18px ml40px mr25px">{{ day }}</div>
      <div class="text-18px">{{ week }}</div>
    </div>
    <div class="q-wrapper flex-1 mt30px text-#142142 flex flex-col bg-#fff p30px">
      <div v-if="listData && listData.length > 0"
        class="mt8px cursor-pointer flex items-center p15px pl20px text-18px max-w-100%"
        style="display: flex; flex-wrap: wrap; justify-content: space-between">
        <div v-for="i in listData" :key="i" class="w-48% mb-20px flex" >
          <span class="truncate flex-1 text-#142142 hover:underline" @click="push(`/external/info/${i.id}`)">
            <img v-if="i.tag === 'New'" src="../images/NEW@2x.png" class="h30px mr5px badge-new" />
            <a class="no-underline" :style="i.isRead === 2 ? 'color:#0058E5' : ''">
              {{ i.title }}
            </a>
          </span>
          <span class="shrink-0 ml100px text-#808696">{{ i.createTime }}</span>
        </div>
      </div>

      <!-- <div
        v-if="listData && listData.length > 0"
        v-for="i in listData"
        :key="i"
        class="mt8px cursor-pointer flex items-center p15px pl20px text-18px max-w-1205px"
      >
        <div>
          <span
            class="truncate flex-1 w0 text-#142142 hover:underline w300px max-w300px min-w300px"
            @click="push(`/external/info/${i.id}`)"
          >
            <img
              v-if="i.tag === 'New'"
              src="../images/NEW@2x.png"
              class="h30px mr5px badge-new"
            />
            <a
              class="no-underline"
              :style="i.isRead === 2 ? 'color:#0058E5' : ''"
            >
              {{ i.title }}
            </a>
          </span>
          <span class="shrink-0 ml90px text-#808696 w-200px">{{
            i.createTime
          }}</span>
        </div>
      </div>
      <div v-else class="w-full h-hull">
        <el-empty :image-size="200" />
      </div> -->
      <div class="float-right absolute bottom-20px right-30px">
        <el-pagination v-model:current-page="pageInfo.currentPage" v-model:page-size="pageInfo.pageSize"
          layout="prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

.truncate {
  max-width: 395px;
  min-width: 100px;
  overflow: hidden;
  padding: 10px 0 10px 10px;
  line-height: 30px;

  text-overflow: ellipsis;
  white-space: nowrap;
}
.back {
  position: absolute;
  top: 25px;
  left: 25px;
  color: #fff;
  // z-index: 500;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  justify-content: center;
}

.top {
  right: 30px;
  top: 0px;
}

::-webkit-scrollbar {
  width: 1px;
}

.q-wrapper {
  border-radius: 18px;
  border: 1px solid #e7ebf5;
  box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
  overflow: auto;

  &::after {
    content: " ";
    background-image: url("@/assets/images/bg-card.svg");
    pointer-events: none;
    display: block;
    width: 100%;
    height: 127px;
    background-repeat: no-repeat;
    /* 阻止图片平铺 */
    background-position: right top;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>