admin_home/src/layout/components/template/pages/search/sector.vue

<template>
    <div class="sectorBox">
        <div class="sectorItemBox" 
            @click="addModule('adSector', 12, adSector)" 
            @drag="drag('adSector', 12, adSector)"
            @dragend="dragend('adSector', 12, adSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750817753245775.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">通栏广告</div>
        </div>
        <div class="sectorItemBox" 
            @click="addModule('searchListSector', 133, searchListSector)" 
            @drag="drag('searchListSector', 133, searchListSector)"
            @dragend="dragend('searchListSector', 133, searchListSector)"
        >
            <div class="sectorItem">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250624/1750727451366122.jpg" v-if="this.$store.state.template.editWebsiteClass==1"/>
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250625/1750829776880227.jpg" v-if="this.$store.state.template.editWebsiteClass==2"/>
            </div>
            <div class="sectorItemTitle">通用型搜索列表</div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        type: {

        },
    },
    data() {
        return {
            //添加通栏广告模块 start---------------------------------------->
            adSector: {
                "sectorName": "adSector",//板块名称
                "componentList": [
                    {
                        "component_type": 2,//组件类型  1=新闻（选择导航池id）2=广告（输入广告位名称） 
                        "component_style": 1,//组件选择了哪个版式
                        "sort": 1,
                        "componentData": {}
                    }
                ],
                "ad": {
                    "width": 1200, //宽度
                    "height": 90, //高度
                    "name": "",//广告名称
                    "price": 0,//价格
                    "introduce":"",//介绍
                    "website_id": "",//网站id
                    "thumb": "https://img.bjzxtw.org.cn/pre/image/png/20250530/1748588901281358.png",//示例图 - 默认值
                    "typeid": 2,//广告类型 - 2 图片
                    "ad_tag": ""//广告标识 - 网站标识 + 页面名称 + sort
                }
            },
            //添加通栏广告模块 end---------------------------------------->

            //通用型搜索列表模块 start---------------------------------------->
            searchListSector: {
                "sectorName": "searchListSector",//板块名称
                "componentList": [
                    {
                        "component_type": 3,//组件类型 1=新闻 2=广告 3=静态组件
                        "component_style": 1,
                        "sort": 1,
                    },
                    {
                        "component_type": 1,
                        "component_style": 1,
                        "sort": 2,
                    }
                ],
            },
            //通用型搜索列表模块 end---------------------------------------->
        }
    },
    methods: {
        //添加模块
        addModule(type, h, jsonData) {
            let data = {
                source: "click",//添加方式为点击
                type: type,
                h: h,
                jsonData: jsonData
            }
            console.log(data);
            this.$store.commit('template/addModule', data);
        },
        //拖拽开始
        drag(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/drag', data);
        },
        //拖拽结束
        dragend(type, h, jsonData) {
            let data = {
                type: type,
                h: h,
                jsonData: jsonData
            }
            this.$store.commit('template/dragend', data);
        }
    }
}
</script>

<style scoped lang="less">
.sectorBox {
    height: 100%;

    .sectorItemBox {
        box-sizing: border-box;
        padding: 0 20px 40px 20px;
        cursor: pointer;

        .sectorItem {
            border: 1px solid #333644;
            padding: 10px;
            border-radius: 8px;

            &:hover {
                background: #333644;
                transform: scale(1.1);
                transition: all 0.2s ease-in-out;
            }

            img {
                display: block;
                width: 100%;
            }
        }

        .sectorItemTitle {
            color: #fff;
            font-size: 14px;
            padding: 10px 0 0 0;
            text-align: center;
        }
    }
}
</style>