web/apps/mobile/src/views/article/components/ContentAbstractEntList.vue

<template>
  <section class="abstract-ent-list bg-white">
    <AbstractEnt
      class="abstract-ent-item"
      v-for="(ent, index) in entDetailList"
      v-show="ent.show"
      :entType="ent.type"
      :title="ent.name"
      :key="index"
      :isLink="ent.link"
      :contactCount="ent?.detail?.contactCount || 0"
      :cooperateCount="ent?.detail?.cooperate || 0"
      @click="toDetail(ent)"
    ></AbstractEnt>
  </section>
</template>
<script>
import AbstractEnt from '@/views/article/components/AbstractEnt.vue'
import { mapState } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'
import { ajaxGetMiniEntInfo } from '@/api/modules'

export default {
  name: 'ContentAbstractEntList',
  components: {
    AbstractEnt
  },
  props: {
    beforeLeavePage: Function
  },
  data() {
    return {
      req: {}
    }
  },
  computed: {
    ...mapState({
      summary: (state) => state.article.mainModel.summary
    }),
    entList() {
      const { winners, buyers } = this.summary
      let winners3 = []
      if (Array.isArray(winners) && winners.length > 3) {
        winners3 = winners.slice(0, 3)
      } else {
        winners3 = winners
      }
      return buyers.concat(winners3).filter((b) => b.link)
    },
    entDetailList() {
      return this.entList.map((e) => {
        const detail = this.req[e.id] || {}
        return {
          ...e,
          show: this.calcEntShow(detail),
          detail
        }
      })
    }
  },
  watch: {
    entList: {
      immediate: true,
      handler(eList) {
        if (Array.isArray(eList) && eList.length > 0) {
          eList.forEach((ent) => {
            this.getEntInfo(ent.type, ent.id)
          })
        }
      }
    }
  },
  methods: {
    calcEntShow(item = {}) {
      const contactCount = item.contactCount || 0
      const cooperate = item.cooperate || 0
      return contactCount || cooperate
    },
    async getEntInfo(type, id) {
      const { data, error_code: code } = await ajaxGetMiniEntInfo(type, id)
      if (code === 0 && data) {
        data._type = type
        this.$set(this.req, id, data)
      }
    },
    toDetail(ent) {
      if (!ent.link) {
        return
      }
      if (ent.type === 'buyer') {
        this.goToBuyerPortrait(ent)
      } else {
        this.goToEntPortrait(ent)
      }
    },
    async goToBuyerPortrait(item) {
      if (!item.link) {
        return
      }
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.大会员超级订阅采购单位画像页面, {
        query: {
          entName: item.id
        }
      })
    },
    async goToEntPortrait(winner) {
      if (!winner.id) {
        return
      }
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.企业画像页面, {
        query: {
          eId: winner.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.abstract-ent-list {
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
  padding: 12px 12px 8px;
  .abstract-ent-item {
    background: #fafafa;
    border-radius: 8px;
    border: 0.5px solid rgba(0, 0, 0, 0.05);
  }
  .abstract-ent-item:not(:last-of-type) {
    margin-bottom: 8px;
  }
}
</style>