构建json数据

构建json数据

src/store/modules/template.js

@@ -105,10 +105,10 @@ const mutations = {
   //关闭编辑组件弹出框
   closeEditWindowStatus(state){
     state.editWindowStatus = false;
-    state.editSectorId = "";
-    state.editComponentSort = "";
-    state.editComponentType = "";
-    state.editComponentSize = "";
+    // state.editSectorId = "";
+    // state.editComponentSort = "";
+    // state.editComponentType = "";
+    // state.editComponentSize = "";
   },
   //打开选择组件样式弹出框
   setComponentStyleStatus(state,data){
@@ -121,10 +121,14 @@ const mutations = {
   //关闭选择组件样式弹出框
   closeComponentStyleStatus(state){
     state.editComponentWindowStatus = false;
-    state.editSectorId = "";
-    state.editComponentSort = "";
-    state.editComponentType = "";
-    state.editComponentStyle = "";
+    // state.editSectorId = "";
+    // state.editComponentSort = "";
+    // state.editComponentType = "";
+    // state.editComponentStyle = "";
+  },
+  //设置组件样式
+  setComponentStyleNumber(state,data){
+    state.editComponentStyle = data;
   },
   //0.全局配置 start------------------------------------------------------------>
   //1.配置模块 start------------------------------------------------------------>

src/views/template/public/componentWindow.vue

@@ -9,23 +9,36 @@
         <div class="testAssistantContentItem"><span>板块id:</span>{{this.$store.state.template.editSectorId}}</div>
         <div class="testAssistantContentItem"><span>组件sort:</span>{{this.$store.state.template.editComponentSort}}</div>
         <div class="testAssistantContentItem"><span>组件type:</span>{{this.$store.state.template.editComponentType}}</div>
-        <div class="testAssistantContentItem"><span>组件style:</span>{{this.$store.state.template.pageData.index[id].sectorData.componentList[sort].component_style}}</div>
+        <div class="testAssistantContentItem"><span>原始的组件style:</span>{{this.$store.state.template.pageData.index[this.$store.state.template.editSectorId].sectorData.componentList[this.$store.state.template.editComponentSort].component_style}}</div>
+        <div class="testAssistantContentItem"><span>现在的组件style:</span>{{this.$store.state.template.editComponentStyle}}</div>
       </div>
     </div>
     <div class="componentStyleBox">
       <div class="componentStyleBoxContent">
-        <!--3=广告组件-->
+        <!--3.广告组件 start---------------------------------------->
         <div v-if="this.$store.state.template.editComponentType == 3" class="componentScrollBox">
           <table>
             <tr>
-              <td><div class="componentScrollBoxItem active"><img src="@/assets/template/component/style1imgTitle.png"/></div></td>
-              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style2imgTitle.png"/></div></td>
-              <td><div class="componentScrollBoxItem"><img src="@/assets/template/component/style3imgTitle.png"/></div></td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="setUseStyleNumber(1)">
+                  <img src="@/assets/template/component/style1imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 2 ? 'active' : '']" @click="setUseStyleNumber(2)">
+                  <img src="@/assets/template/component/style2imgTitle.png"/>
+                </div>
+              </td>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 3 ? 'active' : '']" @click="setUseStyleNumber(3)">
+                  <img src="@/assets/template/component/style3imgTitle.png"/>
+                </div>
+              </td>
             </tr>
           </table>
         </div>
+        <!--3.广告组件 end---------------------------------------->
       </div>
-
     </div>
     <div class="componentWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>
@@ -37,14 +50,7 @@
 <script>
 export default {
   props: {
-    id:{
-      type:Number,
-      default:0
-    },
-    sort:{
-      type:Number,
-      default:0
-    }
+    
   },
   data() {
     return {
@@ -53,11 +59,37 @@ export default {
     }
   },
   methods: {
+    //设置选择的组件样式
+    setUseStyleNumber(number){
+      this.$store.commit('template/setComponentStyleNumber',number);
+    },
+    //关闭选择组件样式弹出框
     closeEditWindow(){
       this.$store.commit('template/closeComponentStyleStatus');
     },
+    //提交编辑的数据
     submitData(){
-      
+      let id = this.$store.state.template.editSectorId;
+      //编辑的板块id
+      //console.log(this.$store.state.template.editSectorId);
+      let sort = this.$store.state.template.editComponentSort;
+      console.log(id,sort);
+      // this.$store.state.template.pageData.index["0"].sectorData.componentList[0].component_style = 1;
+      // this.$store.state.template.pageData.index["1"].sectorData.componentList[0].component_style = 2;
+
+      console.log(typeof this.$store.state.template.pageData.index);
+      //编辑的组件sort
+      //console.log(this.$store.state.template.editComponentSort);
+      //当前组件默认的样式
+      //console.log(this.$store.state.template.pageData.index[0].sectorData.componentList[0].component_style);
+      //当前组件选择的样式
+      //console.log(this.$store.state.template.editComponentStyle);
+      //提交修改
+      // this.$store.state.template.pageData.index[id].sectorData.componentList[sort].component_style = this.$store.state.template.editComponentStyle;
+      // //当前保存完了的数据
+      // console.log(this.$store.state.template.pageData);
+      // //关闭窗口
+      // this.$store.commit('template/closeComponentStyleStatus');
     }
   },
   mounted() {
@@ -71,7 +103,7 @@ export default {
     .componentStyleBox {
       height: 220px;
       margin-bottom: 20px;
-      overflow-x: scroll;
+      overflow-x: auto;
       overflow-y: hidden;
       clear: both;
       .componentScrollBox {
@@ -87,17 +119,19 @@ export default {
           margin-right: 10px;
           background: #F5F7FB;
           border:1px solid #F5F7FB;
- 
           img {
             width: 100%;
           }
           &:hover {
             border:1px solid #19499F;
+            background: #e5e5ff;
             cursor: pointer;
           }
+          transition: all 0.3s;
         }
         .active {
           border:1px solid #19499F;
+          background: #e5e5ff;
         }
       }
     }

src/views/template/style/1/components/advertisement/2.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="advertisementBox">
-    <img src="@/assets/template/sector/imgTitleSector.png" />
+    <img src="@/assets/template/component/style2imgTitle.png" />
   </div>
 </template>
 

src/views/template/style/1/components/advertisement/3.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="advertisementBox">
-    <img src="@/assets/template/sector/imgTitleSector.png" />
+    <img src="@/assets/template/component/style3imgTitle.png" />
   </div>
 </template>
 

src/views/template/style/1/imgTitleSector.vue

@@ -3,7 +3,8 @@
     <div class="imgSectorBox">
       <editBtn :id="id" :sort="0" :type="3" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="3"/>
-      <!-- {{this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style}} -->
+      {{ id }}
+      {{ this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style }}
       <div v-if="this.$store.state.template.pageData.index[id].sectorData.componentList[0].component_style == 1">
         <useStyle1 />
       </div>