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="'nmw_index_0001'" :skinId="skinId" :adData="adData"></templateAd>
        <!--静态外链通栏-->
        <templateStaticLink :skinId="skinId" :templateData="testTemplateData2"></templateStaticLink>
        <!--图文组合1-->
        <templateNewSector1 :skinId="skinId" :templateData="testTemplateData"></templateNewSector1>
        <!--图文组合2-->
        <templateNewSector2 :skinId="skinId" :templateData="testTemplateData"></templateNewSector2>
        <!--图文组合3-->
        <templateNewSector3 :skinId="skinId" :templateData="testTemplateData"></templateNewSector3>
        <!--图文与广告组合-->
        <templateNewAndAd :skinId="skinId" :templateData="testTemplateData" :adData="adData"></templateNewAndAd>
    </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, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
//1.2获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.3获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = 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)
    //0.3.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_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.5获得广告池
const adData = ref([]);
const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
    method: 'GET',
    query: {},
});
if (adResponseStatus.code == 200) {
    templateBaseStore.setAdList(adResponseStatus.data)
    adData.value = adResponseStatus.data;
}
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.0 测试数据 后期移除
const testTemplateData = {
    "sectorName": "text",
    "componentList": [
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 1,//组件位置
            "data": {
                "alias":"一级导航名称",
                "category_id": 11,
                "pinyin": "sannongzixun",
                "text": [
                    {
                        "id": 50079,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "islink": 0,
                        "pinyin": "sannongtansuo/jiaodianfangtan"
                    },
                    {
                        "id": 50136,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50137,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    }
                ],
                "img": [
                    {
                        "id": 3843,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
                    },
                    {
                        "id": 3406,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 3276,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixunwangzhengcefagui"
                    },
                    {
                        "id": 3261,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 3186,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongkejiao/nongyekepu"
                    },
                    {
                        "id": 2552,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "xinnongcun/gaoduanzixun"
                    }
                ]
            }
        },
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 1,//组件位置
            "data": {
                "alias":"一级导航名称2",
                "category_id": 11,
                "pinyin": "sannongzixun",
                "text": [
                    {
                        "id": 50079,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "islink": 0,
                        "pinyin": "sannongtansuo/jiaodianfangtan"
                    },
                    {
                        "id": 50136,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50137,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    }
                ],
                "img": [
                    {
                        "id": 3843,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
                    },
                    {
                        "id": 3406,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 3276,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixunwangzhengcefagui"
                    },
                    {
                        "id": 3261,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 3186,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongkejiao/nongyekepu"
                    },
                    {
                        "id": 2552,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "xinnongcun/gaoduanzixun"
                    }
                ]
            }
        },
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 3,//组件位置
            "data": {
                "alias":"一级导航名称3",
                "category_id": 11,
                "pinyin": "sannongzixun",
                "text": [
                    {
                        "id": 50079,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "islink": 0,
                        "pinyin": "sannongtansuo/jiaodianfangtan"
                    },
                    {
                        "id": 50136,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50137,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙7",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 50138,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙8",
                        "islink": 0,
                        "pinyin": "sannongzhichuang"
                    }
                ],
                "img": [
                    {
                        "id": 3843,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙1",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixunwangzhengcefagui/faguijiexi"
                    },
                    {
                        "id": 3406,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙2",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzhichuang"
                    },
                    {
                        "id": 3276,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙3",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixunwangzhengcefagui"
                    },
                    {
                        "id": 3261,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙4",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 3186,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙5",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongkejiao/nongyekepu"
                    },
                    {
                        "id": 2552,
                        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "xinnongcun/gaoduanzixun"
                    }
                ]
            }
        }
    ],
}

//静态链接测试数据
const testTemplateData2 = {
    "sectorName": "linkSector",
    "componentList": [
        {
            "component_type": 3,
            "component_style": 1,
            "sort": 1,
            "componentData": {}
        }
    ],
    "sort": 4
}
//2.页面数据 end---------------------------------------->
</script>

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