Browse Source

首页定制新增两个组件

master
dai_siki 6 years ago
parent
commit
ea3bf3c26c
  1. 2
      epmet-oper-web/public/index.html
  2. BIN
      epmet-oper-web/src/assets/img/modules/wx-mini/index-set/pavilion.png
  3. BIN
      epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up-red.png
  4. BIN
      epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png
  5. 81
      epmet-oper-web/src/assets/scss/c/anime.scss
  6. 216
      epmet-oper-web/src/assets/scss/modules/wx-mini/index-set.scss
  7. 80
      epmet-oper-web/src/components/wx-index/cpt-item.vue
  8. 130
      epmet-oper-web/src/views/modules/wx-mini/index-set.vue

2
epmet-oper-web/public/index.html

@ -29,7 +29,7 @@
<!-- 开发环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';</script>
<script>window.SITE_CONFIG['apiURL'] = 'http://192.168.1.130:8080/api';</script>
<% } %>
<!-- 集成测试环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>

BIN
epmet-oper-web/src/assets/img/modules/wx-mini/index-set/pavilion.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

BIN
epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up-red.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 399 B

BIN
epmet-oper-web/src/assets/img/modules/wx-mini/index-set/up.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 399 B

After

Width:  |  Height:  |  Size: 466 B

81
epmet-oper-web/src/assets/scss/c/anime.scss

@ -127,3 +127,84 @@ $fade_in_px: 100px;
.a-fade-in-down {
animation: fade_in_down $ad2 ease-in;
}
@keyframes scale_in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes scale_in_left_up {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
100% {
opacity: 1;
transform: translate(0) scale(1);
}
}
@keyframes scale_in_right_down {
0% {
opacity: 0;
transform: translate(50%, 50%) scale(0);
}
100% {
opacity: 1;
transform: translate(0) scale(1);
}
}
@keyframes scale_in_right_up {
0% {
opacity: 0;
transform: translate(50%, -50%) scale(0);
}
100% {
opacity: 1;
transform: translate(0) scale(1);
}
}
@keyframes scale_in_left_down {
0% {
opacity: 0;
transform: translate(-50%, 50%) scale(0);
}
100% {
opacity: 1;
transform: translate(0) scale(1);
}
}
.a-scale-in {
animation: scale_in $ad1*0.6 ease-out;
}
.a-scale-in-left-up {
animation: scale_in_left_up $ad1 ease-out;
}
.a-scale-in-right-up {
animation: scale_in_right_up $ad1 ease-out;
}
.a-scale-in-left-down {
animation: scale_in_left_down $ad1 ease-out;
}
.a-scale-in-right-down {
animation: scale_in_right_down $ad1 ease-out;
}

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

@ -1,5 +1,6 @@
@import "@/assets/scss/c/config.scss";
@import "@/assets/scss/c/function.scss";
@import "@/assets/scss/c/anime.scss";
.m-wx_index {
.wrap {
@ -115,7 +116,9 @@
}
.mw-cpt {
&.z-focused {
cursor: default;
&.z-focused,
&:hover {
box-shadow: none;
}
}
@ -180,9 +183,45 @@
}
}
.mw-phone-fixed {
// @include bs1;
position: absolute;
z-index: 1000;
top: 420px;
right: 0;
height: 50px;
width: 136px;
// border-radius: 50px 0 0 50px;
// background-color: #ffffff;
}
.mw-phone-top {
position: relative;
height: 40px;
}
.mw-phone-ban {
position: relative;
min-height: 150px;
&.z-none {
&::before {
border-top: none;
border-bottom: none;
}
}
}
.mw-phone-cnt {
position: relative;
min-height: 350px;
padding-top: 1px;
padding-bottom: 10px;
}
.mw-cpt {
position: relative;
cursor: pointer;
transition: box-shadow $ad1 ease-in-out;
&:hover {
box-shadow: 0 0 12px 3px rgba(#67c23a, 0.2);
}
&.z-focused {
box-shadow: 0 0 12px 3px rgba(#67c23a, 0.5);
@ -352,26 +391,50 @@
border-radius: 5px;
overflow: hidden;
background: rgba(255, 255, 255, 1);
.d-cpt-title {
position: relative;
margin: 10px 10px 0 10px;
padding: 7px 10px 13px;
font-size: 17px;
line-height: 15px;
font-family: PingFang SC;
font-weight: bold;
color: rgba(51, 51, 51, 1);
border-bottom: 1px solid #e7eeee;
&::before {
content: "";
position: absolute;
top: 7px;
left: 0;
width: 3px;
height: 15px;
background: rgba(230, 0, 0, 1);
border-radius: 3px;
}
}
.list {
padding: 0 10px;
.item {
position: relative;
padding: 15px 0;
padding-left: 105px;
height: 100px;
padding: 10px 0;
padding-left: 110px;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
> img {
position: absolute;
width: 95px;
height: 70px;
width: 100px;
height: 55px;
left: 0;
top: 15px;
top: 11px;
border-radius: 5px;
}
.d-news-title {
margin: 7px 0;
height: 40px;
font-size: 16px;
font-family: PingFang SC;
@ -382,12 +445,121 @@
}
.d-news-info {
margin-top: 17px;
font-size: 11px;
margin-left: -110px;
padding: 0 1px;
font-size: 13px;
line-height: 13px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
overflow: hidden;
span {
> img {
display: inline-block;
margin-right: 5px;
width: 13px;
vertical-align: bottom;
}
> span {
@include toe;
display: inline-block;
max-width: 70%;
vertical-align: bottom;
}
}
}
.item2 {
position: relative;
padding: 10px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
.d-news-title {
@include toe;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 24px;
}
.d-news-content {
@include toe;
padding: 3px 0;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 20px;
}
.d-news-info {
margin-top: 5px;
padding: 0 1px;
font-size: 13px;
line-height: 26px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
overflow: hidden;
> img {
display: inline-block;
margin-right: 5px;
width: 26px;
vertical-align: bottom;
}
> span {
@include toe;
display: inline-block;
max-width: 70%;
vertical-align: bottom;
}
}
}
.item3 {
position: relative;
padding: 10px 0;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: none;
}
.d-news-title {
@include toe;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 24px;
}
.d-news-content {
@include toe;
padding: 3px 0;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 20px;
}
.d-news-info {
margin-top: 5px;
padding: 0 1px;
font-size: 13px;
line-height: 13px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(153, 153, 153, 1);
overflow: hidden;
> img {
display: inline-block;
margin-right: 5px;
width: 13px;
vertical-align: bottom;
}
> span {
@include toe;
display: inline-block;
max-width: 70%;
vertical-align: bottom;
}
}
}
@ -548,32 +720,6 @@
}
}
}
.mw-phone-fixed {
// @include bs1;
position: absolute;
z-index: 1000;
top: 420px;
right: 0;
height: 50px;
width: 136px;
// border-radius: 50px 0 0 50px;
// background-color: #ffffff;
}
.mw-phone-top {
position: relative;
height: 40px;
}
.mw-phone-ban {
position: relative;
min-height: 150px;
}
.mw-phone-cnt {
position: relative;
min-height: 350px;
padding-top: 1px;
padding-bottom: 10px;
}
}
}

80
epmet-oper-web/src/components/wx-index/cpt-item.vue

@ -1,5 +1,7 @@
<template>
<div class="mw-cpt"
<div class="mw-cpt a-fade-in"
:ref="item.tempOnlyId"
:title="item.componentName"
:class="{'z-focused': isFocused}"
@click="focusCpt">
<!-- 最顶部标题组件 -->
@ -9,7 +11,6 @@
<img class="d-cpt-ico" v-if="item.demoData.ico" :src="item.demoData.ico">
<img class="d-cpt-ico" v-else src="@/assets/img/modules/wx-mini/index-set/page/dang.png">
<span>{{ item.demoData.title }}</span>
<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>
@ -40,16 +41,18 @@
<span>{{ item.demoData.text }}</span>
</div>
</div>
<!-- 新闻组件 -->
<!-- 党建声音组件 -->
<div class="mw-cpt-cnt_news"
v-else-if="item.componentFrontId==='resi-functionList-hall-hotSubjectList'">
v-else-if="item.componentFrontId==='resi-functionList-hall-partyVoiceList'">
<div class="d-cpt-wrap">
<div class="d-cpt-title">党建声音</div>
<div class="list">
<div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
<img v-if="subitem.pic" :src="subitem.pic">
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/news-pic.png">
<div class="d-news-title">{{ subitem.title }}</div>
<div class="d-news-info">
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
<span>来源{{ subitem.author }}</span>
<span class="f-fr">{{ subitem.date }}</span>
</div>
@ -57,6 +60,63 @@
</div>
</div>
</div>
<div class="mw-cpt-cnt_news"
v-else-if="item.componentFrontId==='resi-functionList-hall-hotSubjectList'">
<div class="d-cpt-wrap">
<div class="d-cpt-title">最热议题</div>
<div class="list">
<div class="item2" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
<div class="d-news-title">{{ subitem.title }}</div>
<div class="d-news-content">{{ subitem.content || '最热议题内容' }}</div>
<div class="d-news-info">
<img v-if="subitem.avatar" :src="subitem.avatar">
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
<span>来源{{ subitem.author }}</span>
<span class="f-fr">{{ subitem.date }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="mw-cpt-cnt_news"
v-else-if="item.componentFrontId==='resi-functionList-hall-latestIssueList'">
<div class="d-cpt-wrap">
<div class="d-cpt-title">最新议题</div>
<div class="list">
<div class="item2" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
<div class="d-news-title">{{ subitem.title }}</div>
<div class="d-news-content">{{ subitem.content || '最新议题内容' }}</div>
<div class="d-news-info">
<img v-if="subitem.avatar" :src="subitem.avatar">
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar-mini.png">
<span>来源{{ subitem.author }}</span>
<span class="f-fr">{{ subitem.date }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="mw-cpt-cnt_news"
v-else-if="item.componentFrontId==='resi-functionList-hall-closedProjectList'">
<div class="d-cpt-wrap">
<div class="d-cpt-title">结案项目</div>
<div class="list">
<div class="item3" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
<div class="d-news-title">{{ subitem.title }}</div>
<div class="d-news-content">{{ subitem.content }}</div>
<div class="d-news-info">
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
<span>来源{{ subitem.author }}</span>
<span class="f-fr">{{ subitem.date }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- 中间菜单栏组件 -->
<div class="mw-cpt-cnt_menus"
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
@ -73,6 +133,7 @@
</div>
</div>
</div>
<!-- 群组件 -->
<div class="mw-cpt-cnt_groups"
v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
@ -102,14 +163,16 @@
</div>
</div>
</div>
<!-- 占位组件 -->
<div class="mw-cpt-placeholder" v-else>
<div class="d-cpt-wrap">
{{ item.componentName }}
</div>
</div>
<!-- 操作区 -->
<div class="d-cpt-operate"
<div class="d-cpt-operate a-scale-in"
:class="{'z-small': item.region!=='functionList'}"
v-show="isFocused"
@click.stop>
@ -130,6 +193,8 @@
</template>
<script>
import nextTick from 'dai-js/tools/nextTick'
export default {
name: 'cptItem',
data () {
@ -143,8 +208,11 @@ export default {
delCpt () {
this.$emit('del', this.item)
},
changeCptDisplayOrder (direction) {
async changeCptDisplayOrder (direction) {
this.$emit('sort', this.item, direction)
await nextTick(200)
const { item: { tempOnlyId } } = this
this.$refs[tempOnlyId].scrollIntoViewIfNeeded(false)
},
focusCpt () {
this.$emit('focus', this.item)

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

@ -168,6 +168,7 @@ import nextTick from 'dai-js/tools/nextTick'
import getRandomString from 'dai-js/tools/getRandomString'
import cloneDeep from 'lodash/cloneDeep'
// mock
const getMockFilterUrl = (url) => {
const usedMockTest = false
const mockBaseUrl = 'https://nei.netease.com/api/apimock/30f0251f1b7dc90a8c38e3c634ef2a8b/api'
@ -178,12 +179,13 @@ const getMockFilterUrl = (url) => {
}
}
//
const envIsDev = process.env.VUE_APP_NODE_ENV === 'dev'
export default {
mixins: [mixinViewModule],
data () {
const cptTypeListTestdata = !envIsDev ? [] : [
const cptTypeListTestdata = [
//
{
functionId: '0',
@ -193,8 +195,43 @@ export default {
componentList: [
{
componentId: '7',
componentName: '新闻列表',
componentFrontId: 'resi-functionList-hall-hotSubjectList',
componentName: '最新议题',
componentFrontId: 'resi-functionList-hall-latestIssueList',
region: 'functionList',
configuration: {
// bgc: '#fff'
},
demoData: {
list: [
{
avatar: '',
title: '最新议题的标题。最新议题的标题。最新议题的标题。最新议题的标题。',
content: '最新议题的内容,最新议题的内容,最新议题的内容。',
author: '山东路45号-刘女士',
date: '2020-01-02'
},
{
avatar: '',
title: '最新议题的标题。',
content: '最新议题的内容,最新议题的内容,最新议题的内容。',
author: '山东路45号-刘女士',
date: '2020-01-02'
},
{
avatar: '',
title: '最新议题的标题。',
content: '最新议题的内容,最新议题的内容,最新议题的内容。',
author: '山东路45号-刘女士',
date: '2020-01-02'
}
]
},
configurationDescription: ''
},
{
componentId: '8',
componentName: '党建声音',
componentFrontId: 'resi-functionList-hall-partyVoiceList',
region: 'functionList',
configuration: {
// bgc: '#fff'
@ -203,25 +240,57 @@ export default {
list: [
{
pic: '',
title: '我是新闻标题,我是新闻标题,我是新闻标题,我是新闻标题,我是新闻标题',
title: '新型冠状病毒检测重大突破!新型冠状病毒检测重大突破!!!',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
title: '新型冠状病毒检测重大突破!',
author: '大港路党支部',
date: '2020-01-02'
},
{
pic: '',
title: '我是新闻标题',
title: '新型冠状病毒检测重大突破!',
author: '大港路党支部',
date: '2020-01-02'
}
]
},
configurationDescription: ''
},
{
componentId: '9',
componentName: '结案项目',
componentFrontId: 'resi-functionList-hall-closedProjectList',
region: 'functionList',
configuration: {
// bgc: '#fff'
},
demoData: {
list: [
{
title: '结案项目的标题。',
content: '结案项目的内容,结案项目的内容,结案项目的内容。',
author: '党支部-卫生部门',
date: '2020-01-02'
},
{
title: '结案项目的标题。',
content: '结案项目的内容,结案项目的内容,结案项目的内容。',
author: '党支部-卫生部门',
date: '2020-01-02'
},
{
title: '结案项目的标题。',
content: '结案项目的内容,结案项目的内容,结案项目的内容。',
author: '党支部-卫生部门',
date: '2020-01-02'
}
]
},
configurationDescription: ''
}
]
},
@ -355,13 +424,13 @@ export default {
getDataListIsPage: false
},
dataList: [
dataList: !envIsDev ? [] : [
{
customerName: '青岛李沧区党委',
customerName: '测试1',
customerId: '1'
},
{
customerName: '青岛市北区党委',
customerName: '测试2',
customerId: '2'
}
],
@ -379,7 +448,7 @@ export default {
isInPreview: false,
//
cptTypeList: cptTypeListTestdata,
cptTypeList: !envIsDev ? [] : cptTypeListTestdata,
//
cptList: [
// {
@ -493,7 +562,8 @@ export default {
this.cptTypeList = list
console.log('可用组件列表', list)
}
}).catch(() => {
}).catch((err) => {
console.log(err)
return this.$message.error('网络错误')
})
},
@ -518,7 +588,8 @@ export default {
this.lastSavedCptList = cloneDeep(this.cptList)
console.log('用户储存组件列表', list)
}
}).catch(() => {
}).catch((err) => {
console.log(err)
return this.$message.error('网络错误')
})
},
@ -548,7 +619,8 @@ export default {
this.lastSavedCptList = cloneDeep(this.cptList)
return this.$message.success('保存成功')
}
}).catch(() => {
}).catch((err) => {
console.log(err)
return this.$message.error('网络错误')
})
},
@ -585,27 +657,17 @@ export default {
this.lastSavedCptList = cloneDeep(this.cptList)
return this.$message.success('发布成功')
}
}).catch(() => {
}).catch((err) => {
console.log(err)
return this.$message.error('网络错误')
})
}).catch(() => {})
}).catch((err) => {
console.log(err)
})
},
//
checkCptRegion (item) {
const { region } = item
// const { componentFrontId } = item
// const fun = name => name === componentFrontId
// if (['resi-titleList-home-gridNameTitle'].findIndex(fun) !== -1) {
// return 'top'
// } else if (['resi-topList-voice-hotNewsSwiper'].findIndex(fun) !== -1) {
// return 'ban'
// } else if (['resi-functionList-extend-moreFunctionIcons', 'resi-functionList-group-recommendGroupSlider', 'resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1) {
// return 'cnt'
// } else if (['resi-floatingList-mine-newMessageButton'].findIndex(fun) !== -1) {
// return 'fixed'
// } else {
// return 'none'
// }
if (region === 'titleList') {
return 'top'
} else if (region === 'topList') {
@ -623,7 +685,6 @@ export default {
const { componentFrontId } = item
const reuseList = this.cptTypeList[0].componentList.map(v => v.componentFrontId)
const fun = name => name === componentFrontId
// return ['resi-functionList-hall-hotSubjectList'].findIndex(fun) !== -1
return reuseList.findIndex(fun) !== -1
},
//
@ -645,23 +706,23 @@ export default {
if (this.topCptList.length > 0) {
this.$message('标题区已有组件,请删除后再添加')
} else {
this.addCpt(item, tempOnlyId, 1)
this.addCpt(item, tempOnlyId)
}
} else if (regionType === 'ban') {
if (this.banCptList.length > 0) {
this.$message('置顶区已有组件,请删除后再添加')
} else {
this.addCpt(item, tempOnlyId, 2)
this.addCpt(item, tempOnlyId)
}
} else if (regionType === 'fixed') {
if (this.fixedCptList.length > 0) {
this.$message('浮窗区已有组件,请删除后再添加')
} else {
this.addCpt(item, tempOnlyId, 3)
this.addCpt(item, tempOnlyId)
}
} else if (regionType === 'cnt') {
this.cntCptListResort()
this.addCpt(item, tempOnlyId, 4, (this.cntCptList.length + 1) * 10)
this.addCpt(item, tempOnlyId, (this.cntCptList.length + 1) * 10)
} else {
return false
}
@ -674,11 +735,10 @@ export default {
})
},
//
addCpt (item, tempOnlyId, region, displayOrder = 0) {
addCpt (item, tempOnlyId, displayOrder = 0) {
console.log('添加组件到实例')
let trueItem = cloneDeep(item)
trueItem.tempOnlyId = tempOnlyId
trueItem.localRegion = region
trueItem.displayOrder = displayOrder
this.cptList.push(trueItem)
},

Loading…
Cancel
Save