zizhujianzhan_web/pages/index.vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <!-- 内容 -->
    <!-- <div>
        <templateHeadline :skinId="skinId" :templateData="testTemplateData"></templateHeadline>
        <templateBanner :skinId="skinId" :templateData="testTemplateData"></templateBanner>
        <templateAd :adTag="'bbzxw_index_1'" :skinId="skinId" :adData="adData"></templateAd>
        <templateStaticLink :skinId="skinId" :templateData="testTemplateData2"></templateStaticLink>
        <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
        <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
        <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
        <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData" :adTag="'bbzxw_index_9'"></templateNewAndAd>
    </div> -->
    <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>
        <!--4.静态外链通栏-->
        <div v-if="item.sectorName=='linkSector'">
            <templateStaticLink :skinId="skinId"></templateStaticLink>
        </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>
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup>  
//0.加载全局模板组件 start---------------------------------------->
//0.1 全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/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.4 静态外链通栏
import templateStaticLink from '@/components/template/sector/body/index/link/1200x230/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.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref } from 'vue';
//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
const websiteId = ref("")
//1.4获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //0.3.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    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;
    useSeoMeta({
        title: seoTitle + "_" + seoSuffix,
        meta: [
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
        ]
    });
}
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.1获得页面数据
const response = await requestDataPromise('/client/indexData', {
    method: 'POST',
    body: {
        'website_id':websiteId.value,
        'getpage':'index'
    },
});
//页面数据
const templateData = response.data.template.index;
//广告数据
const adData = ref([]);
adData.value.push(response.data.ad.top)
for(let item of response.data.ad.index){
    adData.value.push(item)
}
templateBaseStore.setAdList(adData.value)
//2.页面数据 end---------------------------------------->
</script>

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