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

<template>
  <section class="content-title-container bg-white">
    <span
      v-if="showHeaderType"
      class="page-tag red fixed-header-top-left"
      :class="{ 'rectangle-tag': IsSunPublishContent }"
    >
      {{ headerType }}
    </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"
    />
    <div class="tag-list">
      <a
        v-for="(tag, index) in content.tags"
        :key="index"
        class="j-tag-item border gray round"
        :class="[tag.className]"
        :href="tag.link"
      >{{ tag.label }}</a>
    </div>
    <div v-if="showCollection" class="tag-list">
      <span
        v-for="tag in collectionTags"
        :key="tag.id"
        class="j-tag-item blue round text-underline"
        @click="onCollectionTagClick(tag)"
      >{{ tag.label }}</span>
    </div>
    <div class="sub-info-line">
      <span class="info-publish-time">{{ content.time }}</span>
      <span v-if="cbPersonText" class="info-canbiao-persons">
        参标人：{{ cbPersonText }}
      </span>
      <!-- 无参标人和时间一行 -->
      <div v-else-if="showRenMaiButton" class="sub-info-line">
        <div v-if="showCreditReport" class="creditreport-button" @click="creditReport">
          <span class="creditreport-text">投标企业信用报告</span>
        </div>
        <div
          class="relationship-button"
          @click="findRenMai"
        >
          <span class="relationship-icon j-icon j-base-icon icon-renmai" />
          <span class="relationship-text">找人脉</span>
        </div>
      </div>
      <div v-else class="sub-info-line">
        <div v-if="showCreditReport" class="creditreport-button" @click="creditReport">
          <span class="creditreport-text">投标企业信用报告</span>
        </div>
      </div>
    </div>
    <div v-if="showRenMaiButton2" class="sub-info-line">
      <div class="sub-info-line-l" />
      <div class="sub-info-line-r">
        <!-- 有参标人时候另起一行 -->
        <div
          v-if="cbPersonText && showRenMaiButton"
          class="relationship-button"
          @click="findRenMai"
        >
          <span class="relationship-icon j-icon j-base-icon icon-renmai" />
          <span class="relationship-text">找人脉</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { Icon } from 'vant'
import { mapState } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'
import { getUserResource } from '@/api/modules/bi'

const articleTypeArr = ['采购意向', '预告', '招标']
export default {
  name: 'ContentHeader',
  components: {
    [Icon.name]: Icon
  },
  props: {
    beforeLeavePage: Function
  },
  data() {
    return {
      renmai: {
        loading: false
      }
    }
  },
  computed: {
    ...mapState({
      content: state => state.article.mainModel.content,
      summary: state => state.article.mainModel.summary,
      otherModel: state => state.article.otherModel,
      IsSunPublishContent() {
        return this.content.IsSunPublishContent || false
      },
      yyszbContent() {
        return this.content.yyszbContent
      },
      showHeaderType() {
        if (!this.headerType) {
          return false
        }
        return this.content.isSelfSite || this.IsSunPublishContent
      },
      showCollection() {
        if (this.IsSunPublishContent) {
          return false
        }
        return this.collectionTags.length > 0
      },
      headerType() {
        if (this.IsSunPublishContent) {
          return this.content.publicType
        }
        else {
          return '业主委托项目'
        }
      }
    }),

    cbPersonText() {
      if (this.IsSunPublishContent) {
        return ''
      }
      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 ''
      }
    },
    showCreditReport() {
      return articleTypeArr.includes(this.content?._ob?.topType || this.content?._ob?.subType || '')
    },
    showRenMaiButton() {
      if (this.IsSunPublishContent) {
        return ''
      }
      if (this.yyszbContent) {
        return
      }
      return articleTypeArr.includes(this.content?._ob?.topType)
    },
    showRenMaiButton2() {
      return !(this.IsSunPublishContent || this.yyszbContent)
    },
    collectionTags() {
      return this.otherModel.collectionTags
    }
  },
  methods: {
    async onCollectionTagClick(tag) {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.标讯收藏, {
        query: {
          tag: tag.id || tag.lid
        }
      })
    },
    async checkHasRemMaiPower() {
      this.renmai.loading = true
      try {
        const res = await getUserResource()
        if (res && Array.isArray(res.data)) {
          return res.data.includes('bi_rmgl')
        }
      }
      catch (error) {
        console.log(error)
      }
      finally {
        this.renmai.loading = false
      }
    },
    creditReport() {
      const buyer = this.summary?.buyers[0]?.name
      const typeName = this.content?._ob?.topType || this.content?._ob?.subType
      const breaker_name = `投标企业信用报告_${typeName}`
      // 区分标讯类型埋点
      try {
        window.__EasyJTrack.addTrack(breaker_name, {
          breaker_name
        })
      }
      catch (e) {
        console.log(e)
      }
      this.$router.push({
        path: '/order/create/creditreport',
        query: buyer ? { buyer } : {}
      })
    },

    async findRenMai() {
      const hasPower = await this.checkHasRemMaiPower()
      if (hasPower) {
        this.$dialog.confirm({
          title: '温馨提示',
          message: '人脉相关功能目前仅支持在PC端使用',
          className: 'j-confirm-dialog',
          showCancelButton: false,
          confirmButtonText: '我知道了'
        })
      }
      else {
        // 弹窗
        // this.$toast('暂无权限')
        // 跳转大会员落地页
        openAppOrWxPage(LINKS.人脉落地页面)
      }
    }
  }
}
</script>

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

.content-title-container {
  position: relative;
  padding: 24px 16px 12px;
  .page-tag {
    padding: 1px 8px;
    background: rgba(251, 72, 61, 0.1);
    color: #fb483d;
    font-size: 12px;
    line-height: 18px;
    border-radius: 0 10px 10px 0;
  }
  .rectangle-tag {
    border: 1px solid #fb483d;
    border-left: 0;
    border-radius: 0;
  }
}

.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 {
  margin-bottom: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 18px;
  color: #9b9ca3;
}
.info-canbiao-persons {
  font-size: 13px;
  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;
  }
}

.sub-info-line-r {
  display: flex;
  align-items: center;
}
.creditreport-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 10px;
  padding: 2px 8px;
  line-height: 20px;
  color: #fff;
  background: linear-gradient(to right, #5FD4E3, #28C1E2);
  border-radius: 4px;
}
.relationship-button {
  // position: relative;
  // right: -16px;
  // top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 12px;
  height: 24px;
  color: #fff;
  background: linear-gradient(to right, #5FD4E3, #28C1E2);
  border-radius: 4px;
  .j-icon {
    margin-right: 4px;
    width: 12px;
    height: 12px;
  }
}
</style>