diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.jpg b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.jpg new file mode 100644 index 0000000..bbd7b79 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.jpg differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.png new file mode 100644 index 0000000..81676b4 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/avatar.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/dang.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/dang.png new file mode 100644 index 0000000..89c9d15 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/dang.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-1.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-1.png new file mode 100644 index 0000000..08270f1 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-1.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-2.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-2.png new file mode 100644 index 0000000..16359a3 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-2.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-3.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-3.png new file mode 100644 index 0000000..973dc19 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-3.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-4.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-4.png new file mode 100644 index 0000000..af936dd Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/menu-4.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/msg.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/msg.png new file mode 100644 index 0000000..60123dd Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/msg.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/news-pic.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/news-pic.png new file mode 100644 index 0000000..5ac81ef Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/news-pic.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/qi.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/qi.png new file mode 100644 index 0000000..39b0fcd Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/qi.png differ diff --git a/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/swiper-bg.png b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/swiper-bg.png new file mode 100644 index 0000000..bce2295 Binary files /dev/null and b/epmet-oper-web/src/assets/img/modules/wx-mini/index-set/page/swiper-bg.png differ diff --git a/epmet-oper-web/src/assets/scss/c/config.scss b/epmet-oper-web/src/assets/scss/c/config.scss index 188fb8e..e355536 100644 --- a/epmet-oper-web/src/assets/scss/c/config.scss +++ b/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; 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 7fb3664..66e2e91 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 @@ -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,8 +191,13 @@ border-left: 1px solid #bb5; background-color: #ffffff; text-align: center; + + &.z-small { + height: 71px; + } + .d-cpt-btn { - margin-bottom: 2px; + margin-bottom: 2px; padding: 8px 0 4px; line-height: 16px; @@ -92,30 +218,121 @@ .mw-cpt-top_title { position: relative; - background-color: #ff4c52; - line-height: 50px; - padding-left: 15px; - font-family: PingFang SC; - font-weight: 500; - color: #ffffff; - font-size: 13px; + + .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; + img { + position: relative; + width: 40px; + margin: 5px; + vertical-align: top; + } + span { + font-size: 16px; + font-family: PingFang SC; + font-weight: 500; + color: rgba(255, 76, 82, 1); + } + } } + .mw-cpt-cnt_news { - position: relative; + 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; 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 ca700b7..e2d2d37 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 @@ -23,13 +23,15 @@
取消返回 + 预览 保存 发布 - +

选择组件

@@ -46,9 +48,11 @@
+ ({{ getCptRegionName(checkCptRegion(cptItem)) }}) {{ cptItem.componentName }} - - + 已添加 + + 添加
@@ -56,36 +60,111 @@
- -
+ +
+
+ +
-
-
（标题区）
+
+
（{{ getCptRegionName('top') }}）
-
- {{ item.demoData.content }} +
+
+ + {{ item.demoData.content }} +
+ +
+
+ +

删除

+
+
-
-
（置顶区）
+
+
（{{ getCptRegionName('ban') }}）
+
+
+
+
+ +
+ {{ item.demoData.content }} + + + + +
+
+
+ +
+
+ +

删除

+
+
+
+
-
-
（浮窗区）
+
+
（{{ getCptRegionName('fixed') }}）
+
+
+
+ + 有新消息！ +
+ +
+
+ +

删除

+
+
+
+
-
-
（功能区）
+
+
（{{ getCptRegionName('cnt') }}）
-
-
{{ item.demoData.title }}
-

{{ item.demoData.content }}

+
+
+
+
+
{{ item.demoData.title }}
+
+ {{ item.demoData.content }} + 2020-01-02 +
+
+
+
@@ -117,12 +196,9 @@ :class="{'z-unfold': focusedCpt.demoIsUnfold}" src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
- - - - - - + + + @@ -132,9 +208,9 @@ :class="{'z-unfold': focusedCpt.confIsUnfold}" src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
- - - + + + @@ -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) } }) },