dai_siki
5 years ago
5 changed files with 192 additions and 176 deletions
@ -0,0 +1,154 @@ |
|||
<template> |
|||
<div class="mw-cpt" |
|||
: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-hotSubjectList'"> |
|||
<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.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"> |
|||
<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" |
|||
: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> |
|||
export default { |
|||
name: 'cptItem', |
|||
data () { |
|||
return {} |
|||
}, |
|||
props: { |
|||
isFocused: Boolean, |
|||
item: Object |
|||
}, |
|||
methods: { |
|||
delCpt () { |
|||
this.$emit('del', this.item) |
|||
}, |
|||
changeCptDisplayOrder (direction) { |
|||
this.$emit('sort', this.item, direction) |
|||
}, |
|||
focusCpt () { |
|||
this.$emit('focus', this.item) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue