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

<template>
  <section class="content-title-container bg-white">
    <span
      class="j-tag-item border red fixed-header-top-left"
      v-if="content.isSelfSite"
    >
      业主委托项目
    </span>
    <!-- <span class="forecast fixed-header-right" v-if="otherModel.forecastShow">
      <span class="j-icon j-base-icon icon-ai"></span>
      <span class="forecast-text">中标预测</span>
    </span> -->
    <h2
      class="article-title"
      :class="{ 'van-multi-ellipsis--l2': false }"
      v-html="content.titleHighlighted"
    ></h2>
    <div class="tag-list">
      <a
        class="j-tag-item border gray round"
        v-for="(tag, index) in content.tags"
        :key="index"
        :href="tag.link"
        >{{ tag.label }}</a>
    </div>
    <div class="tag-list">
      <span
        class="j-tag-item blue round text-underline"
        v-for="tag in collectionTags"
        :key="tag.id"
        @click="onCollectionTagClick(tag)"
        >{{ tag.label }}</span>
    </div>
    <div class="sub-info-line">
      <span class="info-publish-time">{{ content.time }}</span>
      <span class="info-canbiao-persons" v-if="cbPersonText">
        参标人：{{ cbPersonText }}
      </span>
    </div>
  </section>
</template>
<script>
import { Icon } from 'vant'
import { mapState } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'

export default {
  name: 'ContentHeader',
  components: {
    [Icon.name]: Icon
  },
  props: {
    beforeLeavePage: Function
  },
  computed: {
    ...mapState({
      content: (state) => state.article.mainModel.content,
      summary: (state) => state.article.mainModel.summary,
      otherModel: (state) => state.article.otherModel
    }),
    cbPersonText() {
      const { inBiddingPersonList: bList } = this.otherModel
      if (Array.isArray(bList) && bList.length > 0) {
        const list = bList.map((b) => b.trim()).filter((b) => !!b)
        if (list.length > 1) {
          return `${list.slice(0, 1).join(',')} 等`
        } else {
          return list.join(',')
        }
      } else {
        return ''
      }
    },
    collectionTags() {
      return this.otherModel.collectionTags
    }
  },
  created() {},
  methods: {
    async onCollectionTagClick(tag) {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.标讯收藏, {
        query: {
          tag: tag.id || tag.lid
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-header-top-left {
  position: absolute;
  left: -1px;
  top: 1px;
}

.content-title-container {
  position: relative;
  padding: 24px 16px 12px;
}

.text-underline {
  text-decoration: underline;
}

.article-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #171826;
}

.tag-list {
  margin: 8px 0 4px;
  display: flex;
  flex-wrap: wrap;
  .j-tag-item {
    margin-bottom: 4px;
    &:not(:last-of-type) {
      margin-right: 4px;
    }
  }
}

.sub-info-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 18px;
  color: #9b9ca3;
}
.info-canbiao-persons {
  font-size: 14px;
  left: 20px;
  color: #5f5e64;
}

.fixed-header-right {
  position: absolute;
  right: 0;
  bottom: 38px;
}

.forecast {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 28px;
  background: $main;
  border-radius: 14px 0px 0px 14px;
  .icon-ai {
    width: 16px;
    height: 16px;
  }
  .forecast-text {
    font-size: 13px;
    line-height: 20px;
    color: $white;
  }
}
</style>