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

<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>