You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.5 KiB
222 lines
8.5 KiB
<template>
|
|
<div class="mw-cpt a-fade-in"
|
|
:ref="item.tempOnlyId"
|
|
:title="item.componentName"
|
|
:class="{'z-focused': isFocused}"
|
|
@click="focusCpt">
|
|
<!-- 最顶部标题组件 -->
|
|
<div class="mw-cpt-top_title"
|
|
v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'">
|
|
<div class="d-cpt-wrap">
|
|
<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>
|
|
</div>
|
|
<!-- 轮播图组件 -->
|
|
<div class="mw-cpt-swiper"
|
|
v-else-if="item.componentFrontId==='resi-topList-voice-hotNewsSwiper'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="d-cpt-subwrap">
|
|
<img v-if="item.demoData.pic" :src="item.demoData.pic">
|
|
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/swiper-bg.png">
|
|
<div>
|
|
<span>{{ item.demoData.title }}</span>
|
|
<i></i>
|
|
<i></i>
|
|
<i></i>
|
|
<i class="z-on"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新消息组件 -->
|
|
<div class="mw-cpt-new_msg"
|
|
v-else-if="item.componentFrontId==='resi-floatingList-mine-newMessageButton'">
|
|
<div class="d-cpt-wrap">
|
|
<img v-if="item.demoData.ico" :src="item.demoData.ico">
|
|
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/msg.png">
|
|
<span>{{ item.demoData.text }}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 党建声音组件 -->
|
|
<div class="mw-cpt-cnt_news"
|
|
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>
|
|
</div>
|
|
</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'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="list">
|
|
<div class="item" :key="subindex" v-for="(subitem, subindex) in item.demoData.list">
|
|
<img v-if="subitem.ico" :src="subitem.ico">
|
|
<img v-else-if="subindex==0" src="@/assets/img/modules/wx-mini/index-set/page/menu-1.png">
|
|
<img v-else-if="subindex==1" src="@/assets/img/modules/wx-mini/index-set/page/menu-2.png">
|
|
<img v-else-if="subindex==2" src="@/assets/img/modules/wx-mini/index-set/page/menu-3.png">
|
|
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/menu-4.png">
|
|
<p>{{ subitem.text }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 群组件 -->
|
|
<div class="mw-cpt-cnt_groups"
|
|
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">
|
|
<div class="d-group-no">
|
|
<img v-if="subitem.ico" :src="subitem.ico">
|
|
<img v-else-if="subindex === 0" src="@/assets/img/modules/wx-mini/index-set/page/qi.png">
|
|
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/qi2.png">
|
|
<span>{{ subitem.no }}</span>
|
|
</div>
|
|
<div class="d-group-avatar">
|
|
<img v-if="subitem.avatar" :src="subitem.avatar">
|
|
<img v-else src="@/assets/img/modules/wx-mini/index-set/page/avatar.jpg">
|
|
</div>
|
|
<div class="d-group-name">{{ subitem.title }}</div>
|
|
<div class="d-group-info">
|
|
<span>{{ subitem.info1 }}</span>
|
|
</div>
|
|
<div class="d-group-info">
|
|
<span>{{ subitem.info2 }}</span>
|
|
<span>{{ subitem.info3 }}</span>
|
|
</div>
|
|
<div class="d-group-btn">加入</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 占位组件 -->
|
|
<div class="mw-cpt-placeholder" v-else>
|
|
<div class="d-cpt-wrap">
|
|
{{ item.componentName }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作区 -->
|
|
<div class="d-cpt-operate a-scale-in"
|
|
:class="{'z-small': item.region!=='functionList'}"
|
|
v-show="isFocused"
|
|
@click.stop>
|
|
<div class="d-cpt-btn" v-show="item.region==='functionList'" @click="changeCptDisplayOrder('up')">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/up.png">
|
|
<p>上移</p>
|
|
</div>
|
|
<div class="d-cpt-btn" @click="delCpt">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/del.png">
|
|
<p>删除</p>
|
|
</div>
|
|
<div class="d-cpt-btn" v-show="item.region==='functionList'" @click="changeCptDisplayOrder('down')">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/down.png">
|
|
<p>下移</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import nextTick from 'dai-js/tools/nextTick'
|
|
|
|
export default {
|
|
name: 'cptItem',
|
|
data () {
|
|
return {}
|
|
},
|
|
props: {
|
|
isFocused: Boolean,
|
|
item: Object
|
|
},
|
|
methods: {
|
|
delCpt () {
|
|
this.$emit('del', this.item)
|
|
},
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|