zizhujianzhan_web/pages/index.vue

<template>
    <!-- 头部 -->
    <templateHead v-if="skinId<=4"></templateHead>
    <!-- 皮肤5头部 -->
    <templateHead5 v-if="skinId==5"></templateHead5>
    <!-- 皮肤6头部 -->
    <templateHead6 v-if="skinId==6"></templateHead6>
    <!-- 皮肤7头部 -->
    <templateHead7 v-if="skinId==7"></templateHead7>
    <!-- 菜单 -->
    <templateMenu v-if="skinId<=4"></templateMenu>
    <!-- 皮肤5菜单 -->
    <templateMenu5 v-if="skinId>=5"></templateMenu5>
    <!-- 内容 -->
    <div v-for="(item,index) in templateData" :key="index">
        <!--1.广告通栏-->
        <div v-if="item.sectorName=='adSector'">
            <templateAd :skinId="skinId" :adData="adData" :adTag="item.ad.ad_tag"></templateAd>
        </div>
        <!--2.头条通栏 data返回值错误 没有依照level字段返回 而是返回了政策法规-->
        <div v-if="item.sectorName=='headLineSector'">
            <templateHeadline :skinId="skinId" :templateData="item.componentList"></templateHeadline>
        </div>
        <!--3.轮播图通栏 data返回值错误 没有依照level字段返回 而是返回了政策法规-->
        <div v-if="item.sectorName=='bannerSector'">
            <templateBanner :skinId="skinId" :templateData="item.componentList"></templateBanner>
        </div>
        <!--3.1 轮播图通栏 皮肤5-->
        <div v-if="item.sectorName=='bannerSectorMerge'">
            <templateBannerMerge :skinId="skinId" :templateData="item.componentList"></templateBannerMerge>
        </div>
        <!--4.静态外链通栏-->
        <div v-if="item.sectorName=='linkSector'">
            <templateStaticLink :skinId="skinId"></templateStaticLink>
        </div>
        <!-- 4.1 静态外链通栏 皮肤5-->
        <div v-if="item.sectorName=='linkCxfwSector'">
            <templateLinkCxfwSector :skinId="skinId"></templateLinkCxfwSector>
        </div>
        <!--5.图文组合1 标题字段缺少is_url / children_count-->
        <div v-if="item.sectorName=='manyPictureSector'">
            <templateNewSector1 :skinId="skinId" :templateData="item.componentList"></templateNewSector1>
        </div>
        <!--6.图文组合2 标题字段缺少is_url / children_count-->
        <div v-if="item.sectorName=='commentSector'">
            <templateNewSector2 :skinId="skinId" :templateData="item.componentList"></templateNewSector2>
        </div>
        <!--7.图文组合3 标题字段缺少is_url / children_count-->
        <div v-if="item.sectorName=='listSector'">
            <templateNewSector3 :skinId="skinId" :templateData="item.componentList"></templateNewSector3>
        </div>
        <!--8.图文混合模块 标题字段缺少is_url / children_count-->
        <div v-if="item.sectorName=='onlyImgSector'">
            <templateNewAndAd :skinId="skinId" :templateData="item.componentList" :adData="adData" :adTag="item.ad.ad_tag"></templateNewAndAd>
        </div>
        <!-- 9.带有一个选项卡的新闻通栏 -->
        <div v-if="item.sectorName=='newsTabsSector'">
            <templateNewsTabSector :skinId="skinId" :templateData="item.componentList"></templateNewsTabSector>
        </div>
        <!-- 10.选项卡资讯带两个广告-->
        <div v-if="item.sectorName=='newsTabsAdSector'">
            <templateNewsTabsAdSector :skinId="skinId" :templateData="item.componentList" :adData="item.ad"></templateNewsTabsAdSector>
        </div>
        <!-- 11.带有行业聚焦标题的新闻通栏-->
        <div v-if="item.sectorName=='NewsHyjjSector'">
            <templateNewsHyjjSector :skinId="skinId" :templateData="item.componentList"></templateNewsHyjjSector>
        </div>
        <!-- 12.文字新闻通栏-->
        <div v-if="item.sectorName=='newsTextSector'">
            <templateNewsTextSector :skinId="skinId" :templateData="item.componentList"></templateNewsTextSector>
        </div>
        <!-- 13.两个选项卡文字新闻通栏-->
        <div v-if="item.sectorName=='newsTabsTextSector'">
            <templateNewsTabsTextSector :skinId="skinId" :templateData="item.componentList"></templateNewsTabsTextSector>
        </div>
        <!-- 14.所有图片新闻通栏-->
        <div v-if="item.sectorName=='newsAllPictureSector'">
            <templateNewsAllPictureSector :skinId="skinId" :templateData="item.componentList"></templateNewsAllPictureSector>
        </div>
        <!-- 15.皮肤6 带标题带选项卡图文组合1 -->
        <div v-if="item.sectorName=='newsTextTabsSector'">
            <templateNewsTextTabsSector :skinId="skinId" :templateData="item.componentList"></templateNewsTextTabsSector>
        </div>
        <!-- 16.皮肤6 选项卡图文组合通栏1 -->
        <div v-if="item.sectorName=='TabsTextPhotoSector'">
            <templateTabsTextPhotoSector :skinId="skinId" :templateData="item.componentList"></templateTabsTextPhotoSector>
        </div>
        <!-- 17.皮肤6 带标题带选项卡图文组合2 -->
        <div v-if="item.sectorName=='newsTitleTabsSector'">
            <templateNewsTitleTabsSector :skinId="skinId" :templateData="item.componentList"></templateNewsTitleTabsSector>
        </div>
        <!-- 18.皮肤6 选项卡图文组合通栏2 -->
        <div v-if="item.sectorName=='TabsTextPhotoTwo'">
            <templateTabsTextPhotoTwo :skinId="skinId" :templateData="item.componentList"></templateTabsTextPhotoTwo>
        </div>
        <!-- 19.皮肤6 纯图片选项卡通栏 -->
        <div v-if="item.sectorName=='photoTabsSector'">
            <templatePhotoTabsSector :skinId="skinId" :templateData="item.componentList"></templatePhotoTabsSector>
        </div>
        <!-- 20.皮肤8 轮播图通栏 -->
        <div v-if="item.sectorName=='bigBannerSectorMerge'">
            <templateBigBannerSectorMerge :skinId="skinId" :templateData="item.componentList"></templateBigBannerSectorMerge>
        </div>
        <!-- 21.皮肤7 带选项卡图文组合 -->
        <div v-if="item.sectorName=='newsTextTabsImgSector'">
            <templateNewsTextTabsImgSector :skinId="skinId" :templateData="item.componentList"></templateNewsTextTabsImgSector>
        </div>
        <!-- 22.皮肤7 行业聚焦 -->
        <div v-if="item.sectorName=='skinSevenNewsHyjjSector'">
            <templateSkinSevenNewsHyjjSector :skinId="skinId" :templateData="item.componentList"></templateSkinSevenNewsHyjjSector>
        </div>
        <!-- 24.皮肤7 外链面板-带查询服务标题 -->
        <div v-if="item.sectorName=='biglinkCxfwSector'">
            <templateBiglinkCxfwSector :skinId="skinId" :templateData="item.componentList"></templateBiglinkCxfwSector>
        </div>
        <!-- 23.皮肤7 选项卡图片文字混合通栏 -->
        <div v-if="item.sectorName=='mixTabSector'">
            <templateMixTabSector :skinId="skinId" :templateData="item.componentList"></templateMixTabSector>
        </div>
    </div>
    <!-- 底部 -->
    <templateFoot v-if="skinId<=4"></templateFoot>
    <!-- 皮肤5底部 -->
    <templateFoot1 v-if="skinId==5||skinId==6"></templateFoot1>
    <!-- 皮肤7底部 -->
    <templateFoot2 v-if="skinId==7"></templateFoot2>
</template>

<script setup lang="ts">  
import type { IWebSiteBase } from '@/utils/dataInterface'
//0.加载全局模板组件 start---------------------------------------->
//0.1 全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateHead5 from '@/components/template/sector/head/1200x250/1.vue'
import templateHead6 from '@/components/template/sector/head/1200x250/6.vue'
import templateHead7 from '@/components/template/sector/head/1200x250/7.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateMenu5 from '@/components/template/sector/menu/1200x187/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
import templateFoot1 from '@/components/template/sector/foot/1200x680/1.vue'
import templateFoot2 from '@/components/template/sector/foot/1200x700/1.vue'
//0.2 局部通栏
//0.2.1 广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2 网站头条
import templateHeadline from '@/components/template/sector/body/index/headLine/1200x140/1.vue'
//0.2.3 轮播图
import templateBanner from '@/components/template/sector/body/index/banner/1200x410/1.vue'  
//0.2.3.1 轮播图通栏
import templateBannerMerge from '@/components/template/sector/body/index/banner/1200x410/2.vue'  
//0.2.4 静态外链通栏
import templateStaticLink from '@/components/template/sector/body/index/link/1200x230/1.vue'
//0.2.5.1 静态外链通栏 皮肤5
import templateLinkCxfwSector from '@/components/template/sector/body/index/link/1200x250/1.vue'
//0.2.5 图文组合1
import templateNewSector1 from '@/components/template/sector/body/index/list/1200x470/1.vue'
//0.2.6 图文组合2
import templateNewSector2 from '@/components/template/sector/body/index/list/1200x470/2.vue'
//0.2.7 图文组合3
import templateNewSector3 from '@/components/template/sector/body/index/list/1200x980/1.vue'
//0.2.8 图文与广告组合
import templateNewAndAd from '@/components/template/sector/body/index/list/1200x480/1.vue'
//0.2.9 带有选项卡的新闻通栏
import templateNewsTabSector from '@/components/template/sector/body/index/list/1200x350/1.vue'
// 0.2.10 选项卡资讯带两个广告
import templateNewsTabsAdSector from '@/components/template/sector/body/index/list/1200x370/1.vue'
//0.2.11 带有行业聚焦标题的新闻通栏
import templateNewsHyjjSector from '@/components/template/sector/body/index/list/1200x530/1.vue'
//0.2.12 文字新闻通栏
import templateNewsTextSector from '@/components/template/sector/body/index/list/1200x401/1.vue'
//0.2.13 两个选项卡文字新闻通栏
import templateNewsTabsTextSector from '@/components/template/sector/body/index/list/1200x250/1.vue'
//0.2.14 所有图片新闻通栏
import templateNewsAllPictureSector from '@/components/template/sector/body/index/list/1200x380/1.vue'
//0.2.15 皮肤6 带标题带选项卡图文组合1
import templateNewsTextTabsSector from '~/components/template/sector/body/index/list/1200x430/6/1.vue'
//0.2.16 皮肤6 带标题带选项卡图文组合选项卡图文组合通栏
import templateTabsTextPhotoSector from '~/components/template/sector/body/index/list/1200x480/6/1.vue'
//0.2.17 皮肤6 带标题带选项卡图文组合2
import templateNewsTitleTabsSector from '@/components/template/sector/body/index/list/1200x540/1.vue'
//0.2.18 皮肤6 选项卡图文组合通栏2
import templateTabsTextPhotoTwo from '~/components/template/sector/body/index/list/1200x480/6/2.vue'
//0.2.19 皮肤6 纯图片选项卡通栏
import templatePhotoTabsSector from '~/components/template/sector/body/index/list/1200x430/6/2.vue'
//0.2.19 皮肤7 轮播图通栏
import templateBigBannerSectorMerge from '@/components/template/sector/body/index/banner/1200x480/1.vue'
//0.2.20 皮肤7 选项卡图片文字混合通栏
import templateMixTabSector from '@/components/template/sector/body/index/list/1200x430/7/1.vue'
//0.2.21 皮肤7 外链面板-带查询服务标题
import templateBiglinkCxfwSector from '@/components/template/sector/body/index/link/1200x320/1.vue'
//02.22 皮肤7 图文混合行业聚焦通栏
import templateSkinSevenNewsHyjjSector from '@/components/template/sector/body/index/list/1200x720/1.vue'
//0.2.23 皮肤7 带选项卡图文组合
import templateNewsTextTabsImgSector from '@/components/template/sector/body/index/list/1200x1150/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref,onMounted } from 'vue';
//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore:any = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref<number>(0)
const websiteId = ref<number>(0)
//1.4获得站点基本信息
try {
    const responseStatus:any = await requestDataPromise('/web/getWebsiteAllinfo', {
        method: 'GET',
        query: {
            'link_textnum':24,
            'link_imgnum':18,
            'link_footnum':4
        },
    });
    if (responseStatus.code == 200) {
        if(responseStatus.data.website_foot.foot_info.status == 1){
            //网站模板已停用，直接转入404页面
            navigateTo('/error?findPage=index')
        }else{
            //0.3.1设置站点基本信息
            templateBaseStore.setWebSiteInfo(responseStatus.data as IWebSiteBase)
            websiteId.value = responseStatus.data.website_head.id;//获得网站id
            //0.3.2设置皮肤id
            skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
            console.log("当前的网站id:"+responseStatus.data.website_head.id)
            //0.3.3设置seo信息
            let seoTitle = templateBaseStore.webSiteInfo.website_head.title;
            let seoDescription = templateBaseStore.webSiteInfo.website_head.description;
            let seoKeywords = templateBaseStore.webSiteInfo.website_head.keywords;
            let seoSuffix = templateBaseStore.webSiteInfo.website_head.suffix;
            let seoName = templateBaseStore.webSiteInfo.website_head.website_name;
            useHead({
                title: seoTitle + "_" + seoSuffix,
                meta: [
                    { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
                    { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
                ]
            });
        }
    }else if(responseStatus.code == 0){
        navigateTo('/error?findPage=index')
    }
} catch (error) {
    navigateTo('/error?findPage=index')
}
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.1获得页面数据
const templateData = ref<any[]>([])
const adData = ref<any[]>([]);
try {
    const response = await requestDataPromise('/client/indexData', {
        method: 'POST',
        body: {
            'website_id':websiteId.value,
            'getpage':'index'
        },
    });
    console.log('获得页面数据:',response.data.template.index)
    if(response.code == 200){
        //页面数据
        templateData.value = response.data.template.index;
        //是否启用搜索功能
        templateBaseStore.setIsSearch(response.data.isSearch)
        //广告数据
        adData.value.push(response.data.ad.top)
        for(let item of response.data.ad.index){
            adData.value.push(item)
        }
        templateBaseStore.setAdList(adData.value)
    }else if(response.code == 0){
        //第一种情况，code为0 跳转到404
        navigateTo('/error?findPage=index')
    }
}catch (error) {
    //第二种情况，服务器无响应 跳转到404
    navigateTo('/error?findPage=index')
}
//2.页面数据 end---------------------------------------->

//3.响应式 start ---------------------------------------->
// onMounted(() => {
//     //监听窗口大小
//     window.addEventListener('resize', () => {
//         if(window.innerWidth < 1200){
//             console.log('展示移动端！')
//         }else{
//             console.log('展示PC端！')
//         }
//     })
// })
//3.响应式 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/index.less');
</style>