风格,版块,组件

src/views/componentGallery/module.vue

@@ -7,7 +7,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">版块</div>
-                        <el-select v-model="templateName" placeholder="请选择版块">
+                        <el-select v-model="templateName" clearable placeholder="请选择版块">
                             <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
                                 :value="item.id">
                             </el-option>
@@ -17,7 +17,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">组件名称</div>
-                        <el-input v-model="componentName" placeholder="请输入组件名称"></el-input>
+                        <el-input v-model="componentName" clearable placeholder="请输入组件名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -83,13 +83,8 @@
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
                     <el-form-item label="关联版块:" prop="plateName">
-                        <!-- <el-select v-model="ruleForm.plateName" placeholder="请选择关联的版块名称">
-                            <el-option v-for="item in options" :key="item.id" :label="item.sector_name"
-                                :value="item.id">
-                            </el-option>
-                        </el-select> -->
-                        <el-cascader v-model="selectedOptions" :options="plateOptions" :props="cascaderProps"
-                            placeholder="请选择关联的版块名称" clearable></el-cascader>
+                        <el-cascader v-model="selectedOptions" :options="styleOptions" :props="cascaderProps"
+                            @change="handleChange" placeholder="请选择关联的版块名称" clearable></el-cascader>
                     </el-form-item>
                     <el-form-item label="组件名称:" prop="component_name">
                         <el-input v-model="ruleForm.component_name" placeholder="请输入组件名称"></el-input>
@@ -169,13 +164,25 @@ export default {
             tableData: [],//表格数据
             options: [],//版块列表
             activeid: "", //活动id
+            styleOptions: [],//关联版块
             plateOptions: [],//关联版块
+            selectedId: '',
             selectedOptions: [],
             cascaderProps: {
                 value: "id", // 指定实际表示值的字段为id
                 label: "name", // 指定实际表示显示文本的字段为name
-                checkStrictly: true,
-                children: "children" // 如果子选项的字段名不是children，也可在这里修改
+                checkStrictly: true, // 严格模式，只能选择叶子节点
+                children: 'children',
+                // 配置一级数据关联子级数据的字段（这里假设用 customId 关联）
+                expandTrigger: 'template_class_id',
+                // 配置二级及以下数据的相关自定义字段
+                props: {
+                    value: 'subCustomValue',
+                    label: 'subCustomLabel',
+                    children: 'children',
+                    // 配置二级及以下数据关联父级数据的字段（这里假设用 subCustomParentId 关联）
+                    // expandTrigger: 'subCustomParentId'
+                }
             },
 
 
@@ -243,7 +250,7 @@ export default {
 
             getTemplateClass().then(data => {
                 console.log("风格", data.data);
-                this.plateOptions = data.data
+                this.styleOptions = data.data
             })
         },
         //1.2 删除内容
@@ -283,8 +290,25 @@ export default {
             });
         },
         //1.3 查看示例图
-        goGraph() {
-            this.dialogVisible = true
+        handleChange(value) {
+            console.log('handleChange', value);
+            this.selectedId = value[0]
+            if (value.length == 1) {
+                getSectorList({
+                    page: this.page,
+                    page_size: 1000,
+                    template_class_id: this.selectedId
+                }).then(data => {
+                    console.log('data', data.data.data);
+                    this.plateOptions = data.data.data
+                })
+            }
+            this.styleOptions = this.styleOptions.map(item => {
+                if (item.value === this.selectedId) {
+                    item.children = this.plateOptions
+                }
+                return item
+            })
         },
 
         //1.4 列表内容分页
@@ -304,8 +328,8 @@ export default {
                 page: this.page,
                 page_size: this.pageSize,
                 template_class_id: '',
-                component_name: '',
-                sector_id: ''
+                component_name: this.componentName,
+                sector_id: this.templateName,
             }).then(data => {
                 console.log(data);
                 this.tableData = data.data.data
@@ -497,33 +521,7 @@ export default {
 
         },
 
-        //
-        getWebNavList(query) {
-            if (query !== '') {
-                this.webSiteLoading = true;
-                let data = { keyword: query }
-                let dataArr = [];
-                this.$store.dispatch('pool/getNavWebList', data).then(res => {
-                    console.log(res.data)
-                    for (let item of res.data) {
-                        let data = {};
-                        data.key = item.id;
-                        data.value = item.id;
-                        data.label = item.website_name;
-                        dataArr.push(data)
-                    }
-                    this.webSiteList = dataArr;
-                    this.webSiteLoading = false;
-                }).catch(() => {
-                    this.$message({
-                        type: 'info',
-                        message: '网络错误，请重试！'
-                    });
-                })
-            } else {
-                this.navList = [];
-            }
-        },
+
     },
     mounted() {
         this.getData()

src/views/componentGallery/plate.vue

@@ -7,8 +7,8 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
-                        <el-select v-model="templateStyle" placeholder="请选择模板风格">
-                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+                        <el-select v-model="templateStyle" clearable placeholder="请选择模板风格">
+                            <el-option v-for="item in options"  :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
                     </div>
@@ -16,7 +16,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">版块</div>
-                        <el-input v-model="plateName" placeholder="请输入版块名称"></el-input>
+                        <el-input v-model="plateName" clearable placeholder="请输入版块名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -40,12 +40,6 @@
                         </el-table-column>
                         <el-table-column prop="sector_code" label="版块代码" width="">
                         </el-table-column>
-
-                        <!-- 为了方便观看 之后需要删除  start-->
-                        <el-table-column prop="page_type" label="页面类型111111" width="">
-                        </el-table-column>
-                        <!-- 为了方便观看 之后需要删除  end-->
-
                         <el-table-column prop="created_at" label="添加时间" width="">
                         </el-table-column>
                         <el-table-column prop="updated_at" label="修改时间" width="">
@@ -87,8 +81,9 @@
             :close-on-click-modal="false">
             <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                 <div class="dialogText">
-                    <el-form-item label="关联风格名称:" prop="templateStyle">
-                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称">
+                    <el-form-item label="关联风格名称:" prop="templateStyle" >
+                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择关联风格名称" :disabled="this.dialogName=== '编辑'"
+                            @change="changeTemplateStyle">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
@@ -97,17 +92,13 @@
                         <el-input v-model="ruleForm.plateName" placeholder="请输入版块名称"></el-input>
                     </el-form-item>
                     <el-form-item label="版块代码:" prop="plateCode">
-                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码"></el-input>
+                        <el-input v-model="ruleForm.plateCode" placeholder="请输入版块代码" :disabled="this.dialogName=== '编辑'"></el-input>
                     </el-form-item>
                     <el-form-item label="页面类型:" prop="pageType">
-                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox">
-                            <el-checkbox label="首页"></el-checkbox>
-                            <el-checkbox label="分类页"></el-checkbox>
-                            <el-checkbox label="列表页"></el-checkbox>
-                            <el-checkbox label="详情页"></el-checkbox>
-                            <el-checkbox label="搜索页"></el-checkbox>
-                            <el-checkbox label="特殊列表页"></el-checkbox>
-                            <el-checkbox label="特殊详情页"></el-checkbox>
+                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox" :disabled="this.dialogName=== '编辑'">
+                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{
+                                item.label
+                            }}</el-checkbox>
                         </el-checkbox-group>
                     </el-form-item>
                     <el-form-item label="组件展示图：" prop="image" :label-width="formLabelWidth"
@@ -118,7 +109,7 @@
                                 @mouseleave="hovering = false">
                                 <!-- 上传组件 -->
                                 <el-upload class="avatar-uploader" action="#" :show-file-list="false"
-                                    :before-upload="beforeAvatarUpload">
+                                    :before-upload="beforeAvatarUpload" :disabled="this.dialogName=== '编辑'">
                                     <!-- 预览图片 -->
                                     <img v-if="logoUrl" :src="logoUrl" class="avatar">
                                     <!-- 上传图标 -->
@@ -128,10 +119,10 @@
                                             <div>选择图片</div>
                                         </div>
                                     </div>
-                                    <input type="hidden" name="logo" v-model="ruleForm.webLogo">
+                                    <input type="hidden" name="logo" v-model="ruleForm.image">
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
+                                <div v-if="hovering && logoUrl && dialogName=='添加'" class="delete-button" @click="handleDelete">
                                     <i class="el-icon-delete"></i>
                                 </div>
                             </div>
@@ -183,13 +174,44 @@ export default {
             templateStyle: '',//风格
             plateName: '',
 
-
+            pageType: '',//页面类型
             value: '',
-            checkList: [],
+            checkList: [
+                {
+                    value: '1',
+                    label: '首页',
+                },
+                {
+                    value: '2',
+                    label: '分类页',
+                },
+                {
+                    value: '3',
+                    label: '列表页',
+                },
+                {
+                    value: '4',
+                    label: '详情页',
+                },
+                {
+                    value: '5',
+                    label: '搜索页',
+                },
+                {
+                    value: '6',
+                    label: '特殊列表页',
+                },
+                {
+                    value: '7',
+                    label: '特殊详情页',
+                },
+            ],
 
             //活动id
             activeid: "",
 
+            newArr: [],
+
             // 1.3 分页相关 
             page: 1,
             pageSize: 10,
@@ -287,6 +309,19 @@ export default {
         //1.3 多选按钮发生变化
         changeCheckbox(val) {
             console.log(val);
+            this.newArr = []
+            val.forEach(item => {
+                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
+                    this.newArr.push(item);
+                }
+            });
+            this.pageType = JSON.stringify(this.newArr);
+            console.log(this.pageType);
+        },
+
+        changeTemplateStyle(val) {
+            console.log('风格id', val);
+            console.log(this.ruleForm.templateStyle);
         },
 
         //1.4 列表内容分页
@@ -330,28 +365,15 @@ export default {
             this.dialogTableVisible = true
             console.log(id, val);
             // console.log("状态", val.status);
+            this.hovering=false
 
             //数据回显
             this.ruleForm.templateStyle = val.template_class_id //关联风格名称
-            this.ruleForm.plateName = val.template_name //版块名称
+            this.ruleForm.plateName = val.sector_name //版块名称
             this.ruleForm.plateCode = val.sector_code //版块代码
-            // this.ruleForm.pageType = val.page_type //页面类型
-            this.ruleForm.image = val.sector_img //组件展示图
-            if (val.page_type == "[\"1\"]") {
-                this.ruleForm.pageType = ['首页']
-            } else if (val.page_type == 2) {
-                this.ruleForm.pageType = ['分类页']
-            } else if (val.page_type == 3) {
-                this.ruleForm.pageType = ['列表页']
-            } else if (val.page_type == 4) {
-                this.ruleForm.pageType = ['详情页']
-            } else if (val.page_type == 5) {
-                this.ruleForm.pageType = ['搜索页']
-            } else if (val.page_type == 6) {
-                this.ruleForm.pageType = ['特殊列表页']
-            } else if (val.page_type == 7) {
-                this.ruleForm.pageType = ['特殊详情页']
-            }
+            this.ruleForm.pageType = JSON.parse(JSON.parse(val.page_type))//页面类型
+            this.ruleForm.image = val.sector_img //组件展示图 
+            this.logoUrl=val.sector_img      
         },
 
 
@@ -366,6 +388,7 @@ export default {
             this.ruleForm.plateCode = '' //版块代码
             this.ruleForm.pageType = [] //页面类型
             this.ruleForm.image = '' //组件展示图
+            this.logoUrl=''
         },
 
         // 弹出层相关方法
@@ -380,15 +403,12 @@ export default {
                 }
             });
             if (this.dialogName == "添加") {
-                createAdPlace({
-                    name: this.ruleForm.adName,
-                    website_id: this.website_id,
-                    price: this.ruleForm.price,
-                    thumb: this.ruleForm.adPhoto,
-                    typeid: this.ruleForm.adType,
-                    ad_size_id: this.ruleForm.adSize,
-                    status: this.ruleForm.status,
-                    introduce: this.ruleForm.adDesc,
+                addSector({
+                    template_id: this.ruleForm.templateStyle,
+                    sector_name: this.ruleForm.plateName,
+                    sector_code: this.ruleForm.plateCode,
+                    page_type: this.pageType,
+                    sector_img: this.ruleForm.image,
                 }).then(data => {
                     console.log(data);
                     if (data.code == 200) {
@@ -424,16 +444,9 @@ export default {
                 this.dialogVisible = true
             }
             if (this.dialogName == "编辑") {
-                updateAdPlace({
-                    name: this.ruleForm.adName,
-                    website_id: this.website_id,
-                    price: this.ruleForm.price,
-                    thumb: this.ruleForm.adPhoto,
-                    typeid: this.ruleForm.adType,
-                    ad_size_id: this.ruleForm.adSize,
-                    status: this.ruleForm.status,
-                    introduce: this.ruleForm.adDesc,
-                    id: this.activeid
+                updateSector({
+                    id: this.activeid,
+                    sector_name: this.ruleForm.plateName,
                 }).then(data => {
                     console.log(data);
                     if (data.code == 200) {
@@ -453,7 +466,6 @@ export default {
                     this.getData()
                 })
             }
-
         },
         //取消添加或编辑
         cancelForm() {

src/views/componentGallery/style.vue

@@ -7,7 +7,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板风格</div>
-                        <el-select v-model="templateStyle" placeholder="请选择">
+                        <el-select v-model="templateStyle" clearable placeholder="请选择">
                             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                             </el-option>
                         </el-select>
@@ -16,7 +16,7 @@
                 <el-col :span="6" class="left">
                     <div class="searchBox">
                         <div class="searchTitle">模板名称</div>
-                        <el-input v-model="templateName" placeholder="请输入模板名称"></el-input>
+                        <el-input v-model="templateName" clearable placeholder="请输入模板名称"></el-input>
                     </div>
                 </el-col>
                 <el-col :span="8" class="right">
@@ -90,8 +90,8 @@
                     <el-form-item label="模板名称:" prop="templateName">
                         <el-input v-model="ruleForm.templateName" placeholder="请输入模板名称"></el-input>
                     </el-form-item>
-                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth" :class="['custom-form-item']"
-                        class="custom-align-right">
+                    <el-form-item label="风格图:" prop="templateImg" :label-width="formLabelWidth"
+                        :class="['custom-form-item']" class="custom-align-right">
                         <div class="uploaderBox">
                             <!--图片上传组件 start ------------------------------------------------------------>
                             <div class="avatar-upload-container" @mouseenter="hovering = true"
@@ -189,7 +189,8 @@
                                     <input type="hidden" name="logo" v-model="detailImg">
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_detail" class="delete-button" @click="handleDelete_detail">
+                                <div v-if="hovering && logoUrl_detail" class="delete-button"
+                                    @click="handleDelete_detail">
                                     <i class="el-icon-delete"></i>
                                 </div>
                                 <h5>详情页</h5>
@@ -215,7 +216,8 @@
                                     <input type="hidden" name="logo" v-model="searchImg">
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_search" class="delete-button" @click="handleDelete_search">
+                                <div v-if="hovering && logoUrl_search" class="delete-button"
+                                    @click="handleDelete_search">
                                     <i class="el-icon-delete"></i>
                                 </div>
                                 <h5>搜索页</h5>
@@ -267,7 +269,8 @@
                                     <input type="hidden" name="logo" v-model="sDetailImg">
                                 </el-upload>
                                 <!-- 删除按钮，当鼠标悬浮时显示 -->
-                                <div v-if="hovering && logoUrl_sDetail" class="delete-button" @click="handleDelete_sDetail">
+                                <div v-if="hovering && logoUrl_sDetail" class="delete-button"
+                                    @click="handleDelete_sDetail">
                                     <i class="el-icon-delete"></i>
                                 </div>
                                 <h5>特殊详情页</h5>
@@ -279,7 +282,7 @@
                 </div>
                 <div class="dialogBtn">
                     <el-button type="info" @click="cancelForm">取消</el-button>
-                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                    <el-button type="primary" @click="submitForm">提交</el-button>
                 </div>
             </el-form>
         </el-dialog>
@@ -332,27 +335,63 @@ export default {
 
             //首页图片
             homeImg: '',
-            logoUrl_home:'',
+            logoUrl_home: '',
+            home_obj: {
+                url: '',
+                name: '首页',
+                value: '1',
+            },
             //分类页图片
             classifyImg: '',
-            logoUrl_class:'',
+            logoUrl_class: '',
+            class_obj: {
+                url: '',
+                name: '分类页',
+                value: '2',
+            },
             //列表页图片
             listImg: '',
-            logoUrl_list:'',
+            logoUrl_list: '',
+            list_obj: {
+                url: '',
+                name: '列表页',
+                value: '3',
+            },
             //详情页图片
             detailImg: '',
-            logoUrl_detail:'',
+            logoUrl_detail: '',
+            detail_obj: {
+                url: '',
+                name: '详情页',
+                value: '4',
+            },
             //搜索页图片
             searchImg: '',
-            logoUrl_search:'',
+            logoUrl_search: '',
+            search_obj: {
+                url: '',
+                name: '搜索页',
+                value: '5',
+            },
             //特殊列表页图片
             sListImg: '',
-            logoUrl_sList:'',
+            logoUrl_sList: '',
+            sList_obj: {
+                url: '',
+                name: '特殊列表页',
+                value: '6',
+            },
             //特殊详情页图片
             sDetailImg: '',
-            logoUrl_sDetail:'',
+            logoUrl_sDetail: '',
+            sDetail_obj: {
+                url: '',
+                name: '特殊详情页',
+                value: '7',
+            },
+            //图片json
+            img_arr: [],
 
-            
             value: '',
             options: [],
 
@@ -436,23 +475,18 @@ export default {
                 });
             });
         },
-        //1.3 查看示例图
-        // goGraph() {
-        //     this.dialogVisible = true
-        // },
-
-        //1.4 列表内容分页
+        //1.3 列表内容分页
         //直接跳转
         handleSizeChange(val) {
             this.page = val;
             this.getData();
         },
-        //1.5 点击分页
+        //1.4 点击分页
         handleCurrentChange(val) {
             this.page = val;
             this.getData();
         },
-        // 1.6 搜索按钮
+        // 1.5 搜索按钮
         goSearch() {
             getTemplateList({
                 page: this.page,
@@ -465,7 +499,7 @@ export default {
                 this.total = data.data.total
             })
         },
-        //1.7 重置按钮
+        //1.6 重置按钮
         goReset() {
             this.templateStyle = ""
             this.templateName = ""
@@ -473,7 +507,7 @@ export default {
         },
         //列表和分页相关 end ------------------------------------------------------------>
 
-        //1.9 编辑
+        //1.7 编辑
         goEdit(id, val) {
             this.dialogName = '编辑'
             this.activeid = id
@@ -483,11 +517,55 @@ export default {
             //数据回显
             this.ruleForm.templateStyle = val.template_class_id
             this.ruleForm.templateName = val.template_name
-
+            this.img_arr = JSON.parse(val.template_img)
+
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
+
+            for (let item of this.img_arr) {
+                if (item.name == '首页') {
+                    this.logoUrl_home = item.url
+                    this.homeImg = item.url
+                }
+                if (item.name == '分类页') {
+                    this.logoUrl_class = item.url
+                    this.classifyImg = item.url
+                }
+                if (item.name == '列表页') {
+                    this.logoUrl_list = item.url
+                    this.listImg = item.url
+                }
+                if (item.name == '详情页') {
+                    this.logoUrl_detail = item.url
+                    this.detailImg = item.url
+                }
+                if (item.name == '搜索页') {
+                    this.logoUrl_search = item.url
+                    this.searchImg = item.url
+                }
+                if (item.name == '特殊列表页') {
+                    this.logoUrl_sList = item.url
+                    this.sListImg = item.url
+                }
+                if (item.name == '特殊详情页') {
+                    this.logoUrl_sDetail = item.url
+                    this.sDetailImg = item.url
+                }
+            }
         },
-
-
-        //1.7 添加
+        //1.8 添加
         addWebsite() {
             this.dialogTableVisible = true
             this.dialogName = "添加"
@@ -495,24 +573,82 @@ export default {
             //添加时清空回显回来的数据
             this.ruleForm.templateStyle = ''
             this.ruleForm.templateName = ''
+            this.ruleForm.templateImg = []
+            this.img_arr = []
+            this.homeImg = ''
+            this.logoUrl_home = ''
+            this.classifyImg = ''
+            this.logoUrl_class = ''
+            this.listImg = ''
+            this.logoUrl_list = ''
+            this.detailImg = ''
+            this.logoUrl_detail = ''
+            this.searchImg = ''
+            this.logoUrl_search = ''
+            this.sListImg = ''
+            this.logoUrl_sList = ''
+            this.sDetailImg = ''
+            this.logoUrl_sDetail = ''
         },
 
-        // 弹出层相关方法
-        // 提交表单
-        submitForm(formName) {
-            this.$refs[formName].validate((valid) => {
-                if (valid) {
-                    console.log('submit!');
-                } else {
-                    console.log('error submit!');
-                    return false;
-                }
-            });
+        // 弹出层相关方法 ---------------------------------------------------->
+        // 1.9 提交表单
+        submitForm() {
+            this.img_arr = []
+            //首页
+            if (this.logoUrl_home) {
+                this.home_obj.url = this.homeImg
+                this.img_arr.push(this.home_obj)
+            }
+            //分类页
+            if (this.logoUrl_class) {
+                this.class_obj.url = this.classifyImg
+                this.img_arr.push(this.class_obj)
+            }
+            //列表页
+            if (this.logoUrl_list) {
+                this.list_obj.url = this.listImg
+                this.img_arr.push(this.list_obj)
+            }
+            //详情页
+            if (this.logoUrl_detail) {
+                this.detail_obj.url = this.detailImg
+                this.img_arr.push(this.detail_obj)
+            }
+            //搜索页
+            if (this.logoUrl_search) {
+                this.search_obj.url = this.searchImg
+                this.img_arr.push(this.search_obj)
+            }
+            //特殊列表页
+            if (this.logoUrl_sList) {
+                this.sList_obj.url = this.sListImg
+                this.img_arr.push(this.sList_obj)
+            }
+            //特殊详情页
+            if (this.logoUrl_sDetail) {
+                this.sDetail_obj.url = this.sDetailImg
+                this.img_arr.push(this.sDetail_obj)
+            }
+            function cleanObProp(arr) {
+                return arr.map(item => {
+                    const newItem = {};
+                    for (const key in item) {
+                        if (key !== '__ob__') {
+                            newItem[key] = item[key];
+                        }
+                    }
+                    return newItem;
+                });
+            }
+            const cleanArray = cleanObProp(this.img_arr);
+            this.ruleForm.templateImg = JSON.stringify(cleanArray);
+            console.log(this.ruleForm.templateImg);
+
             if (this.dialogName == "添加") {
                 addTemplate({
                     template_name: this.ruleForm.templateName, //模板名称
-                    // template_img: this.ruleForm.templateImg, // 模板图片
-                    template_img: '1', // 模板图片
+                    template_img: this.ruleForm.templateImg, // 模板图片
                     template_class_id: this.ruleForm.templateStyle, //模板风格id
                 }).then(data => {
                     console.log(data);
@@ -623,7 +759,7 @@ export default {
             formData.append('file', file);
 
             this.$store.dispatch('pool/uploadFile', formData).then(res => {
-                this.logoUrl_class= res.data.imgUrl;//显示缩略图
+                this.logoUrl_class = res.data.imgUrl;//显示缩略图
                 this.classifyImg = res.data.imgUrl;//提供表单地址
                 console.log(res.data.imgUrl)
             }).catch(() => {
@@ -819,6 +955,7 @@ export default {
             // 删除图片
             this.logoUrl_sDetail = ''; // 清空图片 URL
         },
+        // 3.7 弹出层相关方法 end ------------------------------------------------------------>
 
     },
     mounted() {