websoft-cms/pages/components/NewsCenter.vue

<template>
  <div class="w-full bg-white pb-20 mb-3 hidden-sm-and-down">
    <div class="text-center flex flex-col items-center py-15 relative bg-white">
      <div class="sub-title">
        <p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5">
          {{ comments }}
        </p>
      </div>
      <h2 class="text-3xl font-bold tracking-tight text-[#409eff] lg:text-5xl">
        {{ title }}
      </h2>
    </div>
    <div class="xl:w-screen-2xl m-auto text-xl">
      <el-row :gutter="20" v-if="showNews">
        <el-col :span="10">
          <div class="carousel py-2 right-to-left">
            <el-carousel indicator-position="none" height="400px">
              <el-carousel-item class="relative" v-for="(item,index) in hotList" :key="index">
                <el-image :src="item.image" @click="openSpmUrl(`/detail`,item,item.articleId,true)"
                          class="cursor-pointer"/>
                <div class="absolute bg-[#e65a01]/75 w-full py-2 z-100 text-center text-sm text-white bottom-0">
                  {{ item.title }}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="tabs px-10 w-full left-2-right">
            <el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick">
              <el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title"
                           :name="cate.navigationId" class="text-xl"/>
            </el-tabs>
            <template v-for="(item,index) in list" :key="index">
              <li class="flex justify-between py-2">
                <a class="line-clamp-1 max-w-2xl" :class="`item-${index}`"
                   :href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}</a>
                <span class="text-gray-400 font-200">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
              </li>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="w-full bg-white pb-20 mb-3 hidden-sm-and-up">
    <div class="text-center flex flex-col items-center py-15 relative bg-white">
      <div class="sub-title">
        <p class="text-gray-200 text-5xl font-bold dark:text-gray-700 py-0 line-height-5">
          {{ comments }}
        </p>
      </div>
      <h2 class="text-4xl font-bold tracking-tight text-[#409eff] lg:text-5xl">
        {{ title }}
      </h2>
    </div>
    <div class="xl:w-screen-2xl m-auto text-lg">
      <div class="tabs px-3 w-full left-2-right">
        <el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick">
          <el-tab-pane v-for="(cate,index) in category?.data" :key="index" :label="cate.title"
                       :name="cate.navigationId" class="text-lg"/>
        </el-tabs>
        <template v-for="(item,index) in list" :key="index">
          <li class="flex justify-between py-2">
            <a class="" :class="`item-${index}`"
               :href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}<span class="text-gray-400 font-200 px-1">{{ dayjs(item.createTime).format('MM-DD') }}</span></a>

          </li>
        </template>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import {getSpmUrl, openSpmUrl} from "~/utils/common";
import dayjs from "dayjs";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult, PageResult} from "~/api";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import type {CompanyParam} from "~/api/system/company/model";
import {TENANT_ID} from "~/config";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";

const props = withDefaults(
  defineProps<{
    config?: any;
    parentId?: number | string;
    list?: any[];
    disabled?: boolean;
    title?: string;
    comments?: string;
    scrollTop: number;
  }>(),
  {
    title: '卡片标题',
    comments: '卡片描述'
  }
);

const emit = defineEmits<{
  (e: 'done'): void;
}>();

const category = ref<ApiResult<CmsNavigation[]>>();
const list = ref<CmsArticle[]>([]);
const hotList = ref<CmsArticle[]>([]);
const categoryId = ref();

// 搜索表单
const where = reactive<CompanyParam>({
  keywords: ''
});

const handleClick = () => {
  reload();
}

// 轮播图
const {data: hotResponse} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
  params: {
    recommend: 1,
    limit: 5
  }
})
if (hotResponse.value?.data) {
  hotList.value = hotResponse.value?.data.list
}

// 请求文章栏目
const getCategory = async () => {
  const {data: categoryInfo} = await useServerRequest<ApiResult<CmsNavigation[]>>('/cms/cms-navigation', {
    params: {
      parentId: props.parentId
    }
  })
  if (categoryInfo.value) {
    category.value = categoryInfo.value
    categoryId.value = categoryInfo.value?.data && categoryInfo.value?.data[0].navigationId
  }
  await reload();
}

// 请求数据
const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
    params: {
      categoryId: Number(categoryId.value),
      limit: 8
    }
  })
  if (response.value?.data) {
    list.value = response.value?.data.list
  }
}

const showNews = ref(false)

watch(
  () => [props.parentId, props.scrollTop],
  ([parentId, scrollTop]) => {
    getCategory();
    if (props.scrollTop > 70) showNews.value = true
  },
  {immediate: true}
);
</script>

<style lang="less" scoped>

.left-2-right {
  animation: left-2-right-ani;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes left-2-right-ani {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.right-to-left {
  animation: right-to-left-ani;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes right-to-left-ani {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
//.hidden-sm-and-down .carousel{display: none;}
</style>