websoft-cms/pages/index.vue

<template>

  <!--    <Flash/>-->

  <Carousel ref="CarouselRef" v-if="config"/>

  <NewsCenter :scrollTop="scrollTop" ref="NewsCenterRef" title="新闻中心" v-if="config" :parentId="parentId" :config="config"
              comments="News Center"/>

  <AboutUs :scrollTop="scrollTop" title="关于我们" v-if="config" :config="config" comments="About Us"/>

  <CompanyStyle :scrollTop="scrollTop" title="重大信息公开" v-if="config" :groupId="groupId" :config="config" comments="Important Information"/>

  <Djzt :scrollTop="scrollTop" title="党建专题" v-if="config" :groupId="groupId" :config="config" comments="Party Building Topic"/>

<!--  <div class="xl:w-screen-2xl m-auto text-xl">-->
<!--    <el-row :gutter="30">-->
<!--      <el-col :span="12">-->
<!--        <el-card shadow="hover">-->
<!--          <template #header>-->
<!--            <div class="card-header">-->
<!--              <span class="font-bold">重大信息公开</span>-->
<!--            </div>-->
<!--          </template>-->
<!--          <template v-for="(item,index) in list989" :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>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-card shadow="hover">-->
<!--          <template #header>-->
<!--            <div class="card-header">-->
<!--              <span class="font-bold">党建专题</span>-->
<!--            </div>-->
<!--          </template>-->
<!--          <template v-for="(item,index) in list990" :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>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
<!--  </div>-->


  <!--  <VideoCenter :scrollTop="scrollTop"  title="视频中心" v-if="config" :config="config" comments="Video Center"/>-->

  <!--  <CompanyList :param="{official: true,recommend: true,limit: 4}" :fit="`cover`"  title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->

  <!--  <ProductList :param="{type:0, official: true,limit: 4}" :fit="`cover`" title="产品服务" comments="拥抱开源、坚守品质；致力于打造安全稳定高可用的WEB应用！"/>-->

</template>
<script setup lang="ts">
import {useConfigInfo, useForm, useToken, useWebsite} from "~/composables/configState";
import type {BreadcrumbItem, Config} from "~/types/global";
import Flash from './components/Flash.vue';
import ArticleList from './components/ArticleList.vue';
import NewsCenter from "~/pages/components/NewsCenter.vue";
import Information from '~/pages/components/ImportantInformation.vue';
import AboutUs from "~/pages/components/AboutUs.vue";
import VideoCenter from "~/pages/components/VideoCenter.vue";
import CompanyStyle from "~/pages/components/CompanyStyle.vue";
import Djzt from "~/pages/components/Djzt.vue";
import dayjs from "dayjs";
import Carousel from "~/pages/components/Carousel.vue";
import type {ApiResult, PageResult} from "~/api";
import {getSpmUrl} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {useServerRequest} from "~/composables/useServerRequest";

// 引入状态管理
const route = useRoute();
const token = useToken();
const form = useForm();
const config = useConfigInfo();
const groupId = ref()
const parentId = ref()
const breadcrumb = ref<BreadcrumbItem>();
const list989 = ref<CmsArticle[]>([]);
const list990 = ref<CmsArticle[]>([]);

const scrollTop = ref(0)
window.onscroll = e => {
  scrollTop.value = window.document.documentElement.scrollTop
}
// 请求数据
const reload = async () => {

  // 页面布局
  // if (form.value?.layout) {
  //   layout.value = JSON.parse(form.value?.layout)
  // }

  // 未登录状态(是否强制登录)
  if (!token.value || token.value == '') {
    // if (config.value.MustLogin) {
    //   navigateTo('/passport/login');
    //   return false;
    // }
  }

  // 网站参数
  const {data: fields} = await useServerRequest<ApiResult<Config>>('/cms/cms-website-field/config', {baseURL: 'https://server.gxwebsoft.com/api',});
  if (fields.value?.data) {
    config.value = fields.value?.data;
    groupId.value = config.value?.IndexPhotoGroupId;
    parentId.value = config.value?.IndexNewsCenterParentId;
  }

  // 重大信息公开
  // const {data: response989} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
  //   params: {
  //     categoryId: 989,
  //     limit: 8
  //   }
  // })
  // if (response989.value?.data) {
  //   list989.value = response989.value?.data.list
  // }
  // 党建专题
  // const {data: response990} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
  //   params: {
  //     categoryId: 990,
  //     limit: 8
  //   }
  // })
  //
  // if (response990.value?.data) {
  //   list990.value = response990.value?.data.list
  // }

  // seo
  useHead({
    title: `构建现代WEB应用 · WEBSOFT`,
    meta: [{name: form.value.design?.keywords, content: form.value.design?.description}],
    bodyAttrs: {
      class: "page-container",
    },
    script: [
      {
        children: `console.log(${JSON.stringify(form.value)})`,
      },
    ],
  });
  // 面包屑
  breadcrumb.value = form.value
}

watch(
  () => route.path,
  (path) => {
    console.log(path, '=>Path')

    reload();
  },
  {immediate: true}
);
</script>