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.
579 lines
21 KiB
579 lines
21 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-voice-newsList'">
|
|
<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>
|
|
<!-- 更多功能2栏组件 -->
|
|
<div class="mw-cpt-cnt_function2"
|
|
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
|
|
<div class="d-cpt-wrap">
|
|
|
|
<div class="link">
|
|
<div class="link-item">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
|
|
mode="aspectFill" />
|
|
<span>{{'建议直通车'}}</span>
|
|
</div>
|
|
<div class="link-item">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
|
|
mode="aspectFill" />
|
|
<span>{{'建议直通车'}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="dots">
|
|
<i></i>
|
|
<i></i>
|
|
<i></i>
|
|
<i class="z-on"></i>
|
|
<!-- <div class="dot {{index==currentIndex ? 'z-on' : ''}}"
|
|
wx:key="*this"
|
|
wx:for-index="index"
|
|
wx:for-item="item"
|
|
wx:for="{{list}}"></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>
|
|
|
|
<!-- 爱心互助banner组件 -->
|
|
<div class="mw-cpt-banner"
|
|
v-else-if="item.componentFrontId==='resi-functionList-heart-banner'">
|
|
<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/heart-banner.png">
|
|
<div class="d-title">
|
|
<img class="left-log"
|
|
src="@/assets/img/modules/wx-mini/index-set/heart-logo.png">
|
|
<span class="s-title">{{ item.demoData.title }}</span>
|
|
|
|
<div class="d-group-no">
|
|
|
|
<img src="@/assets/img/modules/wx-mini/index-set/heart-back.png">
|
|
<span>{{'点击进入'}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 爱心互助最新活动组件 -->
|
|
<div class="mw-cpt-heart_news"
|
|
v-else-if="item.componentFrontId==='resi-functionList-heart-new'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="d-cpt-title">最新活动
|
|
<div class="more">查看更多</div>
|
|
</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-time">
|
|
<div class="d-news-time-title">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
|
|
<span>活动时间：</span>
|
|
</div>
|
|
<div class="d-news-time-item">
|
|
<span>{{ subitem.time1 }}</span>
|
|
<span>{{ subitem.time2 }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-news-adress">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
|
|
<span>活动地点：{{ subitem.adress }}</span>
|
|
|
|
</div>
|
|
<div class="d-news-state">
|
|
<span class="d-news-state-limit">活动名额 12人</span>
|
|
<span class="d-news-state-act">已报名 9人</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 爱心互助历史回顾组件 -->
|
|
<div class="mw-cpt-heart_news"
|
|
v-else-if="item.componentFrontId==='resi-functionList-heart-history'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="d-cpt-title">历史回顾
|
|
<div class="more">查看更多</div>
|
|
</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-time">
|
|
<div class="d-news-time-title">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
|
|
<span>活动时间：</span>
|
|
</div>
|
|
<div class="d-news-time-item">
|
|
<span>{{ subitem.time1 }}</span>
|
|
<span>{{ subitem.time2 }}</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-news-adress">
|
|
<img src="@/assets/img/modules/wx-mini/index-set/pavilion.png">
|
|
<span>活动地点：{{ subitem.adress }}</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 积分银行积分排行组件 -->
|
|
<div class="mw-cpt-score_rank"
|
|
v-else-if="item.componentFrontId==='resi-functionList-score-rank'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="d-cpt-title">积分排行榜</div>
|
|
<div class="rank_title">
|
|
<span class="rank_title_total">总排名</span>
|
|
<span class="rank_title_week">本周排名</span>
|
|
<span class="rank_title_month">本月排名</span>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem, subindex) in item.demoData.list">
|
|
<div class="logo">
|
|
<img v-if="subitem.ico"
|
|
:src="subitem.ico">
|
|
<img v-else-if="subindex === 0"
|
|
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_1.png">
|
|
<img v-else-if="subindex === 1"
|
|
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_2.png">
|
|
<img v-else-if="subindex === 2"
|
|
src="@/assets/img/modules/wx-mini/index-set/page/score_rank_3.png">
|
|
|
|
<span v-else>{{ subitem.subindex }}</span>
|
|
</div>
|
|
|
|
<div class="name">{{ subitem.name }}</div>
|
|
<div class="score">{{ subitem.score }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 党员积分排行组件 -->
|
|
<div class="mw-cpt-party"
|
|
v-else-if="item.componentFrontId==='resi-functionList-top-party'">
|
|
<div class="d-cpt-wrap">
|
|
<div class="d-cpt-title">党员积分排行榜</div>
|
|
<div class="m-box">
|
|
<div class="rank_title">
|
|
<p class="rank_title_left">身边党员</p>
|
|
<div class="red_line"></div>
|
|
<p class="rank_title_right">社区党员</p>
|
|
</div>
|
|
<div class="rank_img_score">
|
|
<div class="list">
|
|
<!--:key,列表循环的唯一标识符 -->
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem, subindex) in item.demoData.list1">
|
|
<div class="d-group-logo">
|
|
<div v-if="subindex === 0"
|
|
class="logo1"></div>
|
|
<div v-else-if="subindex === 1"
|
|
class="logo2"></div>
|
|
<div v-else-if="subindex === 2"
|
|
class="logo3"></div>
|
|
</div>
|
|
|
|
<div class="d-group-rank">
|
|
<span v-if="subindex===0"
|
|
class="rank_1">2</span>
|
|
<span v-if="subindex===1"
|
|
class="rank_2">1</span>
|
|
<span v-if="subindex===2"
|
|
class="rank_3">3</span>
|
|
|
|
</div>
|
|
|
|
<div class="d-group-imgback">
|
|
<div v-if="subindex === 0"
|
|
class="back_1"></div>
|
|
<div v-else-if="subindex === 1"
|
|
class="back_2"></div>
|
|
<div v-else-if="subindex === 2"
|
|
class="back_3"></div>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subindex === 0"
|
|
class="img1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
|
|
<img v-if="subindex === 1"
|
|
class="img2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg">
|
|
<img v-if="subindex === 2"
|
|
class="img3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg">
|
|
</div>
|
|
|
|
<div class="d-group-score">
|
|
<span v-if="subindex===0"
|
|
class="score_1">{{subitem.title1}}</span>
|
|
<span v-if="subindex===1"
|
|
class="score_2">{{subitem.title2}}</span>
|
|
<span v-if="subindex===2"
|
|
class="score_3">{{subitem.title3}}</span>
|
|
</div>
|
|
|
|
<div class="d-group-name">
|
|
|
|
<span v-if="subindex===0"
|
|
class="name_1">{{subitem.info1}}</span>
|
|
<span v-if="subindex===1"
|
|
class="name_2">{{subitem.info2}}</span>
|
|
<span v-if="subindex===2"
|
|
class="name_3">{{subitem.info3}}</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--更多-标题-->
|
|
<div class="list-more">
|
|
<ul class="list1">
|
|
<li class="list_1">排名</li>
|
|
<li class="list_1">头像</li>
|
|
<li class="list_1">姓名</li>
|
|
<li class="list_2">当月积分</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<!--更多排名-->
|
|
<div class="rank_more_score">
|
|
<div class="list">
|
|
<div class="item"
|
|
:key="subindex"
|
|
v-for="(subitem,subindex) in item.demoData.list2">
|
|
<div class="d-group-rank">
|
|
<span>{{subitem.rank}}</span>
|
|
</div>
|
|
<div class="d-group-img">
|
|
<img v-if="subindex===1"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/good.jpg"
|
|
class="list3_img1">
|
|
<img v-else-if="subindex===2"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/girl.jpg"
|
|
class="list3_img1">
|
|
<img v-else-if="subindex===3"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
<img v-else-if="subindex===4"
|
|
src="../../assets/img/modules/wx-mini/index-set/page/duck.jpg"
|
|
class="list3_img1">
|
|
</div>
|
|
<div class="d-group-name">
|
|
<span>{{subitem.name}}</span>
|
|
</div>
|
|
<div class="d-group-score">
|
|
<span>{{subitem.score}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="line"></div>
|
|
<span class="list6">查看更多</span>
|
|
|
|
</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"
|
|
z
|
|
: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>
|
|
<!--
|
|
|
|
|
|
{"list1":[{"ico":"","no":"2","avatar":"","title":"776","info1":"某某某","shi":"1"},{"ico":"","no":"1","avatar":"","title":"886","info1":"某某某","shi":"2"},{"ico":"","no":"3","avatar":"","title":"666","info1":"某某某","shi":"3"}],
|
|
"list2":[{rank":"4","img":"1","name":"某某某","score":"656"},{"rank":"5","img":"1","name":"某某某","score":"456"},{"rank":"6","img":"1","name":"某某某","score":"656"},{"rank":"7","img":"1","name":"某某某","score":"656"},{"rank":"8","img":"1","name":"某某某","score":"656"}]}
|
|
|
|
|
|
-->
|
|
|