epmet-oper-pc/epmet-oper-web/src/components/wx-index/heart.vue

<template>
  <div class="mw-cpt a-fade-in"
       :ref="item.tempOnlyId"
       :title="item.componentName"
       :class="{'z-focused': isFocused}"
       @click="focusCpt">

    <!-- 爱心互助banner组件 -->
    <div v-if="item.componentFrontId==='resi-functionList-heart-banner'"
         class="heart_banner">
      <div class="subbanner">
        <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 class="heart_news"
         v-if="item.componentFrontId==='resi-functionList-heart-new'">
      <div class="d-cpt-title">{{item.demoData.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 class="heart_news"
         v-if="item.componentFrontId==='resi-functionList-heart-history'">
      <div class="d-cpt-title">{{item.demoData.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>

</template>

<script>
import nextTick from 'dai-js/tools/nextTick'

export default {
  name: 'cptItem',
  data () {
    return {}
  },
  props: {
    isFocused: Boolean,
    item: Object
  },
  methods: {

    focusCpt () {
      this.$emit('focusCpt', this.item)
    }
  }
}
</script>
<style lang="scss" src="@/assets/scss/modules/wx-mini/heart.scss"></style>