Merge remote-tracking branch 'origin/dev' into dev

epmet-oper-web/src/assets/scss/c/config.scss

@@ -10,8 +10,8 @@
 $w1: 1200px;
 
 //网站主色 primary color bgcolor
-$c1: #3b7cff; // 红  dd000f
-$c2: #f24949;
+$c1: #ff4c52; // 红  dd000f
+$c2: #3b7cff;
 
 //灰度色 用于字体
 $fc0: #010033;

epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss

@@ -6,13 +6,117 @@
 		margin-top: 10px;
 	}
 	.mw-cpt_type {
-		min-height: 200px;
+		padding: 10px;
+		min-height: 250px;
 		border-radius: 4px;
 		background-color: #ffffff;
+
+		.d-function {
+			margin: 5px 0 15px;
+
+			.d-info {
+				@include cs;
+				line-height: 25px;
+				cursor: pointer;
+				.d-ico {
+					margin-right: 8px;
+					width: 15px;
+				}
+				.d-name {
+					font-weight: bold;
+					font-size: 13px;
+				}
+				.d-arrow {
+					float: right;
+					position: relative;
+					top: 8px;
+					right: 3px;
+					width: 9px;
+					transition: transform $ad1 ease-in-out;
+					&.z-unfold {
+						transform: rotate(180deg);
+					}
+				}
+			}
+			.d-list {
+				@include cs;
+				margin-top: 4px;
+
+				.d-item {
+					margin: 5px 0;
+					line-height: 24px;
+					.d-item-region {
+						margin-right: 4px;
+						font-size: 10px;
+						color: #aaaaaa;
+					}
+					.d-item-name {
+						font-size: 13px;
+					}
+					.d-item-btn {
+						float: right;
+						position: relative;
+						color: #aaaaaa;
+						font-size: 12px;
+						line-height: 24px;
+						cursor: pointer;
+						user-select: none;
+						&:hover {
+							color: $c1;
+						}
+						&.z-disabled {
+							color: #cccccc;
+							cursor: default;
+						}
+						img {
+							position: relative;
+							top: 0px;
+							width: 8px;
+							margin-right: 3px;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	.mw-show {
 		padding: 40px 0 100px;
+		&.z-preview {
+			position: fixed;
+			z-index: 100000;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			overflow-y: scroll;
+			background-color: rgba(#000000, 0.6);
+
+			.mw-show-close {
+				position: absolute;
+				top: 20px;
+				left: 0;
+				right: 0;
+				width: 600px;
+				margin: 0 auto;
+				text-align: center;
+			}
+
+			.mw-phone {
+				margin: 50px auto;
+				min-height: 540px;
+				// box-shadow: 0 0 0 8px rgba(#000, 0.1);
+				.d-cpt-operate {
+					display: none;
+				}
+
+				.mw-cpt {
+					&.z-focused {
+						box-shadow: none;
+					}
+				}
+			}
+		}
 
 		.mw-phone {
 			position: relative;
@@ -20,7 +124,8 @@
 			width: 375px;
 			min-height: 500px;
 			background-color: #ffffff;
-			box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
+			background-color: #f7f6f9;
+			box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.2);
 
 			.mw-phone-hint {
 				position: absolute;
@@ -37,23 +142,39 @@
 				transition: transform $ad2 ease-in-out;
 
 				&.z-out-left {
-					transform: translateX(-250px);
+					transform: translateX(-230px);
 				}
 
 				&.z-out-down {
-					transform: translateY(100px);
+					transform: translateY(45px);
 				}
 			}
 
 			.z-none {
-				border: 1px dashed #aaa;
+				&::before {
+					content: "";
+					display: block;
+					position: absolute;
+					z-index: 10;
+					top: 0;
+					bottom: 0;
+					right: 0;
+					left: 0;
+					border: 1px dashed rgba(#000, 0.3);
+					pointer-events: none;
+				}
+				&.mw-phone-fixed {
+					&::before {
+						border-radius: 50px 0 0 50px;
+					}
+				}
 			}
 
 			.mw-cpt {
 				cursor: pointer;
 
 				&.z-focused {
-					box-shadow: 0 0 8px 4px #cc5;
+					box-shadow: 0 0 12px 3px rgba(#177, 0.5);
 				}
 
 				.d-cpt-operate {
@@ -70,6 +191,11 @@
 					border-left: 1px solid #bb5;
 					background-color: #ffffff;
 					text-align: center;
+
+					&.z-small {
+						height: 71px;
+					}
+
 					.d-cpt-btn {
 						margin-bottom: 2px;
 						padding: 8px 0 4px;
@@ -92,30 +218,121 @@
 
 				.mw-cpt-top_title {
 					position: relative;
-					background-color: #ff4c52;
+
+					.d-cpt-wrap {
+						line-height: 50px;
+						padding-left: 10px;
+						background-color: #fff;
+						img {
+							position: relative;
+							top: -4px;
+							margin-right: 4px;
+							height: 20px;
+						}
+						span {
+							font-size: 17px;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: rgba(255, 76, 82, 1);
+						}
+					}
+				}
+
+				.mw-cpt-swiper {
+                    position: relative;
+
+					.d-cpt-wrap {
+						padding: 10px 10px 15px 10px;
+						background-color: #fff;
+						.d-cpt-subwrap {
+							position: relative;
+							height: 160px;
+							border-radius: 10px;
+							overflow: hidden;
+							> img {
+								width: 100%;
+								height: 160px;
+							}
+							> div {
+								position: absolute;
+								bottom: 0;
+								left: 0;
+								right: 0;
+								height: 30px;
+								padding: 0 10px;
+								line-height: 30px;
+								background: rgba(0, 0, 0, 0.26);
+								overflow: hidden;
+
+								> span {
+									font-size: 14px;
+									font-family: PingFang SC;
+									font-weight: 500;
+									color: rgba(255, 255, 255, 1);
+								}
+								> i {
+									float: right;
+									position: relative;
+									top: 11px;
+									margin: 0 2px;
+									width: 5px;
+									height: 5px;
+									border-radius: 50%;
+									background: rgba(0, 0, 0, 0.26);
+									&.z-on {
+										background: rgba(255, 255, 255, 1);
+									}
+								}
+							}
+						}
+					}
+				}
+
+				.mw-cpt-new_msg {
+                    position: relative;
+
+					.d-cpt-wrap {
+						width: 136px;
+						height: 50px;
+						background: rgba(255, 255, 255, 1);
+						box-shadow: 0px 2px 12px 0px rgba(211, 211, 211, 0.26);
+						border-radius: 50px 0 0 50px;
 						line-height: 50px;
-					padding-left: 15px;
+						img {
+							position: relative;
+							width: 40px;
+							margin: 5px;
+							vertical-align: top;
+						}
+						span {
+							font-size: 16px;
 							font-family: PingFang SC;
 							font-weight: 500;
-					color: #ffffff;
-					font-size: 13px;
+							color: rgba(255, 76, 82, 1);
+						}
 					}
+				}
+
 				.mw-cpt-cnt_news {
                     position: relative;
+                    
+					.d-cpt-wrap {
+						background: rgba(255, 255, 255, 1);
+						border-radius: 10px;
+					}
 				}
 			}
 
 			.mw-phone-fixed {
-				@include bs1;
+				// @include bs1;
 				position: absolute;
 				z-index: 10;
 				top: 300px;
-				right: -2px;
+				right: 0;
 				height: 50px;
-				width: 120px;
-				border-radius: 50px 0 0 50px;
-				border: 1px dashed #aaa;
-				background-color: #ffffff;
+				width: 136px;
+				// border-radius: 50px 0 0 50px;
+				// background-color: #ffffff;
 			}
 			.mw-phone-top {
 				position: relative;
@@ -123,7 +340,7 @@
 			}
 			.mw-phone-ban {
 				position: relative;
-				height: 200px;
+				min-height: 150px;
 			}
 			.mw-phone-cnt {
 				position: relative;
@@ -133,10 +350,44 @@
 	}
 
 	.mw-set {
-		padding: 5px 20px;
-		min-height: 400px;
+		padding: 15px 20px;
+		min-height: 300px;
 		border-radius: 4px;
 		background-color: #ffffff;
+
+		.d-set-head {
+			@include cs;
+			line-height: 25px;
+			margin-bottom: 5px;
+			cursor: pointer;
+
+			.d-title {
+				font-weight: bold;
+				font-size: 13px;
+			}
+
+			.d-arrow {
+				float: right;
+				position: relative;
+				top: 8px;
+				right: 3px;
+				width: 9px;
+				transition: transform $ad1 ease-in-out;
+				&.z-unfold {
+					transform: rotate(180deg);
+				}
+			}
+		}
+
+		textarea {
+			background-color: #f3f4f5;
+			min-height: 100px !important;
+			font-size: 13px;
+			&:focus {
+				background-color: #ffffff;
+			}
+		}
+
 		.d-operate {
 			padding: 20px 0;
 			text-align: right;

epmet-oper-web/src/views/modules/wx-mini/index-set.vue

@@ -23,13 +23,15 @@
     <div class="m-wx_index" v-show="step==2">
       <el-button type="default"
         @click="toStep(1)">取消返回</el-button>
+      <el-button type="info"
+        @click="isInPreview = true">预览</el-button>
       <el-button type="success"
         @click="save">保存</el-button>
       <el-button type="danger"
         @click="publish">发布</el-button>
 
       <el-row class="wrap" :gutter="20">
-        <el-col :span="4">
+        <el-col :span="5">
           <h4>选择组件</h4>
           <div class="mw-cpt_type">
             <div class="d-function"  v-show="item.componentList.length > 0" :key="item.functionId" v-for="item in cptTypeList">
@@ -46,9 +48,11 @@
               </div>
               <div class="d-list" v-show="item.isUnfold">
                 <div class="d-item" :key="cptItem.componentId" v-for="cptItem in item.componentList">
+                  <span class="d-item-region">({{ getCptRegionName(checkCptRegion(cptItem)) }})</span>
                   <span class="d-item-name">{{ cptItem.componentName }}</span>
-                  <span class="d-item-btn" @click="beforeAddCpt(cptItem)">
-                    <img class="d-item-ico" src="@/assets/img/modules/wx-mini/index-set/add.png">
+                  <span class="d-item-btn z-disabled" v-if="checkCptRegion(cptItem)!=='cnt' && checkExistCpt(cptItem)">已添加</span>
+                  <span class="d-item-btn" v-else @click="beforeAddCpt(cptItem)">
+                    <img src="@/assets/img/modules/wx-mini/index-set/add.png">
                     <span>添加</span>
                   </span>
                 </div>
@@ -56,36 +60,111 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="14">
-          <div class="mw-show">
+        <el-col :span="13">
+          <div class="mw-show" :class="{'z-preview': isInPreview}">
+            <div v-show="isInPreview" class="mw-show-close">
+              <el-button type="default"
+                @click="isInPreview = false" icon="el-icon-close" circle></el-button>
+            </div>
             <div class="mw-phone">
-              <div class="mw-phone-top z-none">
-                <div class="mw-phone-hint" :class="{'z-out-left': topCptList.length>0}">（标题区）</div>
+              <div class="mw-phone-top" v-show="!isInPreview || topCptList.length>0" :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': topCptList.length>0}">（{{ getCptRegionName('top') }}）</div>
                 <div class="mw-cpt"
                   :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
                   @click="focusCpt(item)" :key="item.componentId"
                   v-for="item in topCptList">
-                  <div class="mw-cpt-top_title" v-if="item.componentFrontId==='top_title'">
+                  <div class="mw-cpt-top_title" v-if="item.componentFrontId==='gridNameTitle'">
+                    <div class="d-cpt-wrap">
+                      <img src="@/assets/img/modules/wx-mini/index-set/page/dang.png">
                       <span>{{ item.demoData.content }}</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>
-              <div class="mw-phone-ban z-none">
-                <div class="mw-phone-hint" :class="{'z-out-left': banCptList.length>0}">（置顶区）</div>
                 </div>
-              <div class="mw-phone-fixed z-none">
-                <div class="mw-phone-hint" :class="{'z-out-down': fixedCptList.length>0}">（浮窗区）</div>
               </div>
-              <div class="mw-phone-cnt z-none">
-                <div class="mw-phone-hint" :class="{'z-out-left': cntCptList.length>0}">（功能区）</div>
+              <div class="mw-phone-ban" v-show="!isInPreview || banCptList.length>0" :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': banCptList.length>0}">（{{ getCptRegionName('ban') }}）</div>
+                <div class="mw-cpt"
+                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
+                  @click="focusCpt(item)" :key="item.componentId"
+                  v-for="item in banCptList">
+                  <div class="mw-cpt-swiper" v-if="item.componentFrontId==='hotNewsSwiper'">
+                    <div class="d-cpt-wrap">
+                      <div class="d-cpt-subwrap">
+                        <img src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png">
+                        <div>
+                          <span>{{ item.demoData.content }}</span>
+                          <i></i>
+                          <i></i>
+                          <i></i>
+                          <i class="z-on"></i>
+                        </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>
+                </div>
+              </div>
+              <div class="mw-phone-fixed" v-show="!isInPreview || fixedCptList.length>0" :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-down': fixedCptList.length>0}">（{{ getCptRegionName('fixed') }}）</div>
+                <div class="mw-cpt"
+                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
+                  @click="focusCpt(item)" :key="item.componentId"
+                  v-for="item in fixedCptList">
+                  <div class="mw-cpt-new_msg" v-if="item.componentFrontId==='newMessageButton'">
+                    <div class="d-cpt-wrap">
+                      <img src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
+                      <span>有新消息！</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>
+                </div>
+              </div>
+              <div class="mw-phone-cnt" v-show="!isInPreview || cntCptList.length>0" :class="{'z-none': !isInPreview}">
+                <div class="mw-phone-hint" v-show="!isInPreview" :class="{'z-out-left': cntCptList.length>0}">（{{ getCptRegionName('cnt') }}）</div>
                 <div class="mw-cpt"
                   :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
                   @click="focusCpt(item)"
                   :key="index"
                   v-for="(item, index) in cntCptList">
-                  <div class="mw-cpt-cnt_news" :style="{backgroundColor: item.configuration.bgc}" v-if="item.componentFrontId==='cnt_news'">
+                  <div class="mw-cpt-cnt_news"
+                    :style="{backgroundColor: item.configuration.bgc}"
+                    v-if="item.componentFrontId==='hotSubjectList'">
+                    <div class="d-cpt-wrap">
+                      <div class="list">
+                        <div class="item">
                           <div class="d-news-title">{{ item.demoData.title }}</div>
-                    <p class="d-news-cnt">{{ item.demoData.content }}</p>
+                          <div class="d-news-info">
+                            <span>{{ item.demoData.content }}</span>
+                            <span>2020-01-02</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                     <div class="d-cpt-operate"
                       v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
                       @click.stop>
@@ -117,12 +196,9 @@
                     :class="{'z-unfold': focusedCpt.demoIsUnfold}"
                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
                 </div>
-                <el-form v-show="focusedCpt.demoIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.demoData" size="mini">
-                  <el-form-item label="标题">
-                    <el-input v-model="focusedCpt.demoData.title"></el-input>
-                  </el-form-item>
-                  <el-form-item label="内容">
-                    <el-input type="textarea" v-model="focusedCpt.demoData.content"></el-input>
+                <el-form v-show="focusedCpt.demoIsUnfold" ref="form">
+                  <el-form-item>
+                    <el-input type="textarea" v-model="focusedCpt.demoData"></el-input>
                   </el-form-item>
                 </el-form>
 
@@ -132,9 +208,9 @@
                     :class="{'z-unfold': focusedCpt.confIsUnfold}"
                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
                 </div>
-                <el-form v-show="focusedCpt.confIsUnfold" ref="form" label-position="left" label-width="60px" :model="focusedCpt.configuration" size="mini">
-                  <el-form-item label="背景色">
-                    <el-input v-model="focusedCpt.configuration.bgc"></el-input>
+                <el-form v-show="focusedCpt.confIsUnfold" ref="form">
+                  <el-form-item>
+                    <el-input type="textarea" v-model="focusedCpt.configuration"></el-input>
                   </el-form-item>
                 </el-form>
 
@@ -190,6 +266,9 @@ export default {
         clientType: ''
       },
 
+      // 在预览中状态
+      isInPreview: false,
+
       // 可用列表
       cptTypeList: [
         // 通用组件
@@ -202,7 +281,31 @@ export default {
             {
               componentId: '1',
               componentName: '顶部标题',
-              componentFrontId: 'top_title',
+              componentFrontId: 'gridNameTitle',
+              configuration: {
+                content: '青岛市党委'
+              },
+              demoData: {
+                content: '青岛市市北区大港路第二网格'
+              },
+              configurationDescription: '请配置具体内容'
+            },
+            {
+              componentId: '2',
+              componentName: '轮播图',
+              componentFrontId: 'hotNewsSwiper',
+              configuration: {
+                content: '青岛市党委'
+              },
+              demoData: {
+                content: '我是标题'
+              },
+              configurationDescription: '请配置具体内容'
+            },
+            {
+              componentId: '3',
+              componentName: '消息通知',
+              componentFrontId: 'newMessageButton',
               configuration: {
                 content: '青岛市党委'
               },
@@ -222,8 +325,34 @@ export default {
           componentList: [
             {
               componentId: '5',
-              componentName: '新闻类',
-              componentFrontId: 'cnt_news',
+              componentName: '功能菜单',
+              componentFrontId: 'moreFunctionIcons',
+              configuration: {
+                bgc: '#eee'
+              },
+              demoData: {
+                title: '我是标题',
+                content: '我是内容。我是内容。我是内容。'
+              },
+              configurationDescription: '请配置具体内容'
+            },
+            {
+              componentId: '6',
+              componentName: '热门群',
+              componentFrontId: 'recommendGroupSlider',
+              configuration: {
+                bgc: '#eee'
+              },
+              demoData: {
+                title: '我是标题',
+                content: '我是内容。我是内容。我是内容。'
+              },
+              configurationDescription: '请配置具体内容'
+            },
+            {
+              componentId: '7',
+              componentName: '新闻列表',
+              componentFrontId: 'hotSubjectList',
               configuration: {
                 bgc: '#eee'
               },
@@ -317,18 +446,28 @@ export default {
     checkCptRegion (item) {
       const { componentFrontId } = item
       const fun = name => name === componentFrontId
-      if (['top_title'].findIndex(fun) !== -1) {
+      if (['gridNameTitle'].findIndex(fun) !== -1) {
         return 'top'
-      } else if (['ban_banner'].findIndex(fun) !== -1) {
+      } else if (['hotNewsSwiper'].findIndex(fun) !== -1) {
         return 'ban'
-      } else if (['cnt_news'].findIndex(fun) !== -1) {
+      } else if (['moreFunctionIcons', 'recommendGroupSlider', 'hotSubjectList'].findIndex(fun) !== -1) {
         return 'cnt'
-      } else if (['fixed_msg'].findIndex(fun) !== -1) {
+      } else if (['newMessageButton'].findIndex(fun) !== -1) {
         return 'fixed'
       } else {
         return 'none'
       }
     },
+    // 根据所属区域简称得到名字
+    getCptRegionName (id) {
+      return {
+        'top': '标题区',
+        'ban': '置顶区',
+        'fixed': '浮窗区',
+        'cnt': '功能区',
+        'none': ''
+      }[id]
+    },
     // 添加组件到实例-前验证
     beforeAddCpt (item) {
       console.log('添加组件到实例-前验证')
@@ -389,13 +528,18 @@ export default {
     delCpt (item) {
       this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId)
     },
+    // 检测实例中是否存在某种类型组件
+    checkExistCpt (item) {
+      return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId)
+    },
     // 聚焦实例组件
     focusCpt (item) {
       console.log('聚焦实例组件')
+      if (this.isInPreview) return
       if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
         this.focusedCpt = { tempOnlyId: '' }
       } else {
-        this.focusedCpt = { ...cloneDeep(item), demoIsUnfold: true, confIsUnfold: false }
+        this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false }
       }
     },
     // 保存聚焦组件数据
@@ -403,18 +547,25 @@ export default {
       const { focusedCpt } = this
       this.cptList.forEach(item => {
         if (item.tempOnlyId === focusedCpt.tempOnlyId) {
-          item.demoData = cloneDeep(focusedCpt.demoData)
-          item.configuration = cloneDeep(focusedCpt.configuration)
+          try {
+            item.demoData = JSON.parse(focusedCpt.demoData)
+            item.configuration = JSON.parse(focusedCpt.configuration)
+          } catch (err) {
+            this.$alert('json数据格式有误', '无法保存', {
+              confirmButtonText: '确定'
+            })
+            console.log(err)
+          }
         }
       })
     },
     // 重置聚焦组件数据
     resetFocusedCptData () {
       const { focusedCpt } = this
-      this.cptTypeListTiled.forEach(item => {
-        if (item.componentId === focusedCpt.componentId) {
-          focusedCpt.demoData = cloneDeep(item.demoData)
-          focusedCpt.configuration = cloneDeep(item.configuration)
+      this.cptList.forEach(item => {
+        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
+          focusedCpt.demoData = JSON.stringify(item.demoData)
+          focusedCpt.configuration = JSON.stringify(item.configuration)
         }
       })
     },