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

<template>
  <div class="mw-cpt a-fade-in"
       :ref="item.tempOnlyId"
       @click="focusCpt">

    <!-- 最顶部标题组件 -->
    <page-header v-if="item.componentFrontId==='resi-titleList-home-gridNameTitle'"
                 :item=item
                 :isFocused=isFocused></page-header>

    <!-- 新消息组件 -->
    <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>

    <!-- 爱心互助 -->
    <heart v-else-if="item.componentFrontId==='resi-functionList-heart-banner'
            ||item.componentFrontId==='resi-functionList-heart-new'
            ||item.componentFrontId==='resi-functionList-heart-history'"
           :item=item
           :isFocused=isFocused></heart>

    <!-- 党建声音：最新发布、特色文章、轮播图新闻 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-voice-newsList'
      ||item.componentFrontId==='resi-functionList-voice-newsList2'
      ||item.componentFrontId==='resi-topList-voice-hotNewsSwiper'">
      <voice :item=item
             :isFocused=isFocused></voice>
    </div>

    <!-- 党群议事：结案项目、最新议题 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-hall-latestIssueList'
      ||item.componentFrontId==='resi-functionList-hall-closedProjectList'">
      <issue :item=item
             :isFocused=isFocused></issue>
    </div>

    <!-- 积分银行：积分排名、党员积分排行 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-score-rank'||item.componentFrontId==='resi-functionList-top-party'
          ||item.componentFrontId==='resi-functionList-score-rank-2'">
      <score :item=item
             :isFocused=isFocused></score>
    </div>

    <!-- 扩展功能：更多功能1、更多功能2 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'
      ||item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
      <more :item=item
            :isFocused=isFocused></more>
    </div>

    <!-- 楼院小组：推荐小组 -->
    <div v-else-if="item.componentFrontId==='resi-functionList-group-recommendGroupSlider'">
      <group :item=item
             :isFocused=isFocused></group>
    </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'
import pageHeader from './pageHeader.vue'
import heart from './heart'
import voice from './voice'
import issue from './issue'
import more from './more'
import score from './score'
import group from './group'

export default {
  name: 'cptItem',
  data () {
    return {}
  },
  components: {
    pageHeader,
    heart,
    voice,
    issue,
    more,
    score,
    group,
  },
  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>
<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style>