自助建站：增加应用模板功能

自助建站：增加应用模板功能

src/api/template.js

@@ -172,4 +172,13 @@ export function getWebsiteTemplate(data) {
         data
     })
 }
+
+//1.20 应用模板
+export function applyTemplate(data) {
+    return request({
+        url: '/website/upWebsiteStatus',
+        method: 'post',
+        data
+    })
+}
 //自助建站 end ------------------------------------->

src/layout/components/template/pages/about/sectorArticle.vue

@@ -149,6 +149,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

src/layout/components/template/pages/about/sectorList.vue

@@ -149,6 +149,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

src/layout/components/template/pages/article/sector.vue

@@ -239,6 +239,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
         .sectorItemTitle {

src/layout/components/template/pages/class/sector.vue

@@ -470,6 +470,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

src/layout/components/template/pages/index/sector.vue

@@ -5,6 +5,8 @@
             @click="addModule('adSector', 12, adSector)"
             @drag="drag('adSector', 12, adSector)" 
             @dragend="dragend('adSector', 12, adSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
         >
             <div class="sectorItem">
                 <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
@@ -17,6 +19,8 @@
             @click="addModule('headLineSector', 17, headLineSector)" 
             @drag="drag('headLineSector', 17, headLineSector)"
             @dragend="dragend('headLineSector', 17, headLineSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
         >
             <div class="sectorItem">
                 <img src="http://img.bjzxtw.org.cn/pre/image/png/20250603/1748914467583559.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
@@ -29,6 +33,8 @@
             @click="addModule('bannerSector', 44, bannerSector)"
             @drag="drag('bannerSector', 44, bannerSector)" 
             @dragend="dragend('bannerSector', 44, bannerSector)"
+            @mouseenter="componentPreviewStatus(true,'http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png')"
+            @mouseleave="componentPreviewStatus(false,'')"
         >
             <div class="sectorItem">
                 <img src="http://img.bjzxtw.org.cn/pre/image/png/20250604/174899892158949.png" v-if="this.$store.state.template.editWebsiteClass==1"/>
@@ -579,6 +585,14 @@ export default {
                 jsonData: jsonData
             }
             this.$store.commit('template/dragend', data);
+        },
+        //设置组件预览状态
+        componentPreviewStatus(status,src) {
+            let setData = {
+                status: status,
+                img: src
+            }
+            this.$store.commit('template/setComponentPreviewStatus', setData);
         }
     }
 }
@@ -607,6 +621,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

src/layout/components/template/pages/list/sector.vue

@@ -238,6 +238,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

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

@@ -136,6 +136,7 @@ export default {
             img {
                 display: block;
                 width: 100%;
+                min-height: 20px;
             }
         }
 

src/store/modules/template.js

@@ -4,7 +4,7 @@ import {
     getWebsiteintel, checkWebsiteBuild, getAdminSiteInfo, upWebsiteTemplateintel, getAllTemplateClass, 
     getWebsiteTemplateList, chooseWebsiteTemplate, getWebsiteTemplateclassintel, saveWebsiteTemplate, 
     getWebsiteTemplateInfo, getWebsiteTemplateData, getAdminWebsiteFootAll, addTwinAdPlace, 
-    getWebPageType, addWebPageType, checkWebsiteEdit, getWebsiteTemplate
+    getWebPageType, addWebPageType, checkWebsiteEdit, getWebsiteTemplate, applyTemplate
 } from '@/api/template'
 //0.自助建站的接口 end---------------------------------------->
 
@@ -28,6 +28,8 @@ const state = {
     editWebsiteClass: "",//网站风格
     stepStatus: true,//是否显示现在进行到哪一步：true=显示 false=不显示
     componentMenuStatus: 1,//组件菜单是否显示 1=显示 0=隐藏
+    componentPreviewStatus: false,//组件预览是否显示
+    componentPreviewImg:"",//组件预览数据
     //0.全局配置 end------------------------------------------------------------>
 
     //1.画布数据 start------------------------------------------------------------>
@@ -247,6 +249,11 @@ const mutations = {
     setPreviewStatus(state) {
         state.previewStatus = !state.previewStatus;
     },
+    //设置组件预览状态
+    setComponentPreviewStatus(state, data) {
+        state.componentPreviewStatus = data.status;
+        state.componentPreviewImg = data.img;
+    },
     //开启关闭搜索页配置
     setSearchPageStatus(state, data) {
         state.showPage.search = data;
@@ -1232,6 +1239,16 @@ const actions = {
                 reject(error)
             })
         })
+    },
+    //2.16 应用模板
+    applyTemplate({ commit }, data) {
+        return new Promise((resolve, reject) => {
+            applyTemplate(data).then(response => {
+                resolve(response)
+            }).catch(error => {
+                reject(error)
+            })
+        })
     }
     //2.构建网站json end------------------------------------------------------------>
 }

src/views/template/templateCreat.vue

@@ -4,20 +4,33 @@
         <div class="topMenuBox">
             <div>
                 <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">
-                    <span v-if="this.$store.state.template.pageStatus == 1">随机生成首页模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 2">随机生成频道页模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 3">随机生成列表页模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 4">随机生成详情页模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 5">随机生成搜索页模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 6">随机生成单页列表模板</span>
-                    <span v-if="this.$store.state.template.pageStatus == 7">随机生成单页详情模板</span>
+                    <!--首页-->
+                    <span v-if="this.$store.state.template.pageStatus == 1">随机生成模板</span>
+                    <!--频道页-->
+                    <span v-if="this.$store.state.template.pageStatus == 2">随机生成模板</span>
+                    <!--列表页-->
+                    <span v-if="this.$store.state.template.pageStatus == 3">随机生成模板</span>
+                    <!--详情页-->
+                    <span v-if="this.$store.state.template.pageStatus == 4">随机生成模板</span>
+                    <!--搜索页-->
+                    <span v-if="this.$store.state.template.pageStatus == 5">随机生成模板</span>
+                    <!--单页列表-->
+                    <span v-if="this.$store.state.template.pageStatus == 6">随机生成模板</span>
+                    <!--单页详情-->
+                    <span v-if="this.$store.state.template.pageStatus == 7">随机生成模板</span>
                 </el-button>
             </div>
             <div class="topMenuRightBox">
                 <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
                 <img src="@/assets/template/close.png" class="previewImg"  @click="setPreviewStatus" v-else/>
                 <el-button type="primary" @click="saveTemplate">保存</el-button>
-                <el-button type="info" @click="goStyle">上一步</el-button>
+                <el-button type="info" @click="goStyle">上一步</el-button> 
+            </div>
+            <div class="componentPreview" v-if="this.$store.state.template.componentPreviewStatus==true">
+                <div class="componentPreviewTitle"><span>通栏预览</span></div>
+                <div class="componentPreviewImgBox">
+                    <img :src="this.$store.state.template.componentPreviewImg" class="componentPreviewImg"/>
+                </div>
             </div>
         </div>
         <!-- 顶部菜单 end ---------------------------------------->
@@ -215,14 +228,47 @@ export default {
     align-items: center;
     justify-content: space-between;
     background: #fff;
+    position: relative;
     .topMenuRightBox {
         display: flex;
         align-items: center;
         cursor: pointer;
+        position: relative;
         .previewImg {
             margin-right: 20px;
         }
     }
+    .componentPreview {
+        position: fixed;
+        width: 640px;
+        height: 300px;
+        z-index: 999;
+        background: #fff;
+        left: 220px;
+        top: 100px;
+        box-sizing: border-box;
+        padding: 5px 20px 20px 20px;
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.25);
+        .componentPreviewTitle {
+            height: 40px;
+            font-size: 16px;
+            line-height: 40px;
+            span {
+                border-left: 3px solid #5570F1;
+                padding-left: 10px;
+            }
+        }
+        .componentPreviewImgBox {
+            height: 235px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: 600px;
+                max-height: 235px;
+            }
+        }
+    }
 }
 //拖拽布局容器
 .websiteBox {

src/views/template/templateList.vue

@@ -74,7 +74,9 @@
                 <div class="listBtnBox">
                   <div class="listEditBtn" @click="getDataMain(scope.row.website_id,scope.row.action_id)" v-if="scope.row.template_status!=0"><i class="el-icon-edit-outline"></i>编辑</div>
                   <div class="listUpBtn" @click="creatWebsite(scope.row.website_id)" v-else><i class="el-icon-brush"></i>构建</div>
-                  <div class="listMainBtn"><i class="el-icon-link"></i>应用</div>
+                  <div class="listMainBtn" v-if="scope.row.template_status==1" @click="applyTemplate(scope.row.website_id,2)"><i class="el-icon-video-play"></i>应用</div>
+                  <div class="listMainBtn listMainBtnDisabled" v-else-if="scope.row.template_status==0"><i class="el-icon-video-play"></i>应用</div>
+                  <div class="listDeleteBtn" v-else-if="scope.row.template_status==2" @click="applyTemplate(scope.row.website_id,1)"><i class="el-icon-video-pause"></i>停用</div>
                 </div>
               </template>
             </el-table-column>
@@ -232,6 +234,26 @@ export default {
                 this.$message.error(res.message)
             }
         })
+    },
+    //应用模板
+    applyTemplate(website_id,status){
+        let data = {
+            website_id:website_id,
+            status:status//1=未应用 2=已应用
+        }
+        this.$store.dispatch('template/applyTemplate',data).then(res=> {
+            if(res.code==200){
+                if(status==1){
+                    this.$message.warning("已成功停用模板！")
+                    this.getData();
+                }else{
+                    this.$message.success("已成功应用模板！")
+                    this.getData();
+                }
+            }else{
+                this.$message.error("应用模板失败，请重试！")
+            }
+        })
     }
     //2.跳转操作 end ------------------------------------------------------------>
   },
@@ -254,5 +276,10 @@ export default {
     padding:0 0 40px 0;
     text-align: center;
   }
+  .listMainBtnDisabled {
+    background: #eee;
+    color:#333;
+    cursor: not-allowed;
+  }
 </style>