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