From ec4ace3e86e915e4b909182ef171bcb44cc851ea Mon Sep 17 00:00:00 2001
From: dai_siki <851733175@qq.com>
Date: Sat, 21 Mar 2020 12:29:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E7=AB=AF=E8=81=94=E8=B0=83=E5=BC=80?=
 =?UTF-8?q?=E5=A7=8B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scss/modules/wx-mini/index-set.scss       |  15 +-
 .../src/views/modules/wx-mini/index-set.vue   | 157 ++++++++++--------
 2 files changed, 103 insertions(+), 69 deletions(-)

diff --git a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
index e4319b9..c4aa5d7 100644
--- a/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
+++ b/epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
@@ -45,6 +45,7 @@
 				.d-item {
 					margin: 5px 0;
 					line-height: 24px;
+					overflow: hidden;
 					.d-item-region {
 						margin-right: 4px;
 						font-size: 10px;
@@ -128,7 +129,7 @@
 			background-color: #f7f6f9;
 			box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
 
-			.mw-phone-topbar{
+			.mw-phone-topbar {
 				display: block;
 				width: 100%;
 			}
@@ -182,7 +183,7 @@
 				cursor: pointer;
 
 				&.z-focused {
-					box-shadow: 0 0 12px 3px rgba(#67C23A, 0.5);
+					box-shadow: 0 0 12px 3px rgba(#67c23a, 0.5);
 				}
 
 				.d-cpt-operate {
@@ -224,6 +225,16 @@
 					}
 				}
 
+				.mw-cpt-placeholder {
+					position: relative;
+					line-height: 40px;
+					text-align: center;
+					font-size: 17px;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: rgba(255, 76, 82, 1);
+				}
+
 				.mw-cpt-top_title {
 					position: relative;
 
diff --git a/epmet-oper-web/src/views/modules/wx-mini/index-set.vue b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
index 78b3a21..ea9d8a5 100644
--- a/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
+++ b/epmet-oper-web/src/views/modules/wx-mini/index-set.vue
@@ -85,14 +85,18 @@
                       <img class="d-cpt-avatar" v-if="item.demoData.avatar" :src="item.demoData.avatar">
                       <img class="d-cpt-avatar" v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
                     </div>
-
-                    <div class="d-cpt-operate z-small"
-                      v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                      @click.stop>
-                      <div class="d-cpt-btn" @click="delCpt(item)">
-                        <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                        <p>删除</p>
-                      </div>
+                  </div>
+                  <div class="mw-cpt-placeholder" v-else>
+                    <div class="d-cpt-wrap">
+                      {{ item.componentName }}
+                    </div>
+                  </div>
+                  <div class="d-cpt-operate z-small"
+                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
+                    @click.stop>
+                    <div class="d-cpt-btn" @click="delCpt(item)">
+                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
+                      <p>删除</p>
                     </div>
                   </div>
                 </div>
@@ -117,14 +121,18 @@
                         </div>
                       </div>
                     </div>
-
-                    <div class="d-cpt-operate z-small"
-                      v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                      @click.stop>
-                      <div class="d-cpt-btn" @click="delCpt(item)">
-                        <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                        <p>删除</p>
-                      </div>
+                  </div>
+                  <div class="mw-cpt-placeholder" v-else>
+                    <div class="d-cpt-wrap">
+                      {{ item.componentName }}
+                    </div>
+                  </div>
+                  <div class="d-cpt-operate z-small"
+                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
+                    @click.stop>
+                    <div class="d-cpt-btn" @click="delCpt(item)">
+                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
+                      <p>删除</p>
                     </div>
                   </div>
                 </div>
@@ -141,14 +149,18 @@
                       <img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
                       <span>{{ item.demoData.text }}</span>
                     </div>
-
-                    <div class="d-cpt-operate z-small"
-                      v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
-                      @click.stop>
-                      <div class="d-cpt-btn" @click="delCpt(item)">
-                        <img src="@/assets/img/modules/wx-mini/index-set/del.png">
-                        <p>删除</p>
-                      </div>
+                  </div>
+                  <div class="mw-cpt-placeholder" v-else>
+                    <div class="d-cpt-wrap">
+                      {{ item.componentName }}
+                    </div>
+                  </div>
+                  <div class="d-cpt-operate z-small"
+                    v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
+                    @click.stop>
+                    <div class="d-cpt-btn" @click="delCpt(item)">
+                      <img src="@/assets/img/modules/wx-mini/index-set/del.png">
+                      <p>删除</p>
                     </div>
                   </div>
                 </div>
@@ -177,7 +189,7 @@
                     </div>
                   </div>
                   <div class="mw-cpt-cnt_menus"
-                    v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
+                    v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
                     <div class="d-cpt-wrap">
                       <div class="list">
                         <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
@@ -192,7 +204,7 @@
                     </div>
                   </div>
                   <div class="mw-cpt-cnt_groups"
-                    v-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
+                    v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
                     <div class="d-cpt-wrap">
                       <div class="list">
                         <div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
@@ -219,6 +231,11 @@
                       </div>
                     </div>
                   </div>
+                  <div class="mw-cpt-placeholder" v-else>
+                    <div class="d-cpt-wrap">
+                      {{ item.componentName }}
+                    </div>
+                  </div>
                   <div class="d-cpt-operate"
                     v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
                     @click.stop>
@@ -316,6 +333,47 @@ export default {
         functionName: '通用组件',
         functionType: 1, // 1通用 2功能
         isUnfold: true,
+        componentList: [
+          {
+            componentId: '7',
+            componentName: '新闻列表',
+            componentFrontId: 'resi-functionList-hall-hotSubjectList',
+            region: 'functionList',
+            configuration: {
+              // bgc: '#fff'
+            },
+            demoData: {
+              list: [
+                {
+                  pic: '',
+                  title: '我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                },
+                {
+                  pic: '',
+                  title: '我是新闻标题',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                },
+                {
+                  pic: '',
+                  title: '我是新闻标题',
+                  author: '大港路党支部',
+                  date: '2020-01-02'
+                }
+              ]
+            },
+            configurationDescription: ''
+          }
+        ]
+      },
+      // 功能组件
+      {
+        functionId: '1',
+        functionName: '议事厅',
+        functionType: 2, // 1通用 2功能
+        isUnfold: false,
         componentList: [
           {
             componentId: '1',
@@ -329,6 +387,7 @@ export default {
               avatar: '',
               title: '青岛市市北区大港路第二网格'
             },
+            region: 'titleList',
             configurationDescription: '请配置具体内容'
           },
           {
@@ -342,6 +401,7 @@ export default {
               pic: '',
               title: '轮播图新闻标题'
             },
+            region: 'topList',
             configurationDescription: '请配置具体内容'
           },
           {
@@ -355,21 +415,14 @@ export default {
               ico: '',
               text: '有新消息！'
             },
+            region: 'floatingList',
             configurationDescription: ''
-          }
-        ]
-      },
-      // 功能组件
-      {
-        functionId: '1',
-        functionName: '议事厅',
-        functionType: 2, // 1通用 2功能
-        isUnfold: false,
-        componentList: [
+          },
           {
             componentId: '5',
             componentName: '功能菜单',
             componentFrontId: 'resi-functionList-extend-moreFunctionIcons',
+            region: 'functionList',
             configuration: {
               // bgc: '#eee'
             },
@@ -399,6 +452,7 @@ export default {
             componentId: '6',
             componentName: '热门群',
             componentFrontId: 'resi-functionList-group-recommendGroupSlider',
+            region: 'functionList',
             configuration: {
               // bgc: '#fff'
             },
@@ -434,37 +488,6 @@ export default {
               ]
             },
             configurationDescription: ''
-          },
-          {
-            componentId: '7',
-            componentName: '新闻列表',
-            componentFrontId: 'resi-functionList-hall-hotSubjectList',
-            configuration: {
-              // bgc: '#fff'
-            },
-            demoData: {
-              list: [
-                {
-                  pic: '',
-                  title: '我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题，我是新闻标题',
-                  author: '大港路党支部',
-                  date: '2020-01-02'
-                },
-                {
-                  pic: '',
-                  title: '我是新闻标题',
-                  author: '大港路党支部',
-                  date: '2020-01-02'
-                },
-                {
-                  pic: '',
-                  title: '我是新闻标题',
-                  author: '大港路党支部',
-                  date: '2020-01-02'
-                }
-              ]
-            },
-            configurationDescription: ''
           }
         ]
       }