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

<template>
  <section class="abstract-container bg-white">
    <!-- 超前项目 -->
    <template v-if="summary.isProposed">
      <div class="abstract-line">
        <div class="abstract-line-label">项目名称</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.projectName?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line-container">
        <div class="abstract-line">
          <div class="abstract-line-label">省份</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.area?.value }}
            </span>
          </div>
        </div>
        <div class="abstract-line">
          <div class="abstract-line-label">业主类型</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.buyerClass?.value }}
            </span>
          </div>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">业主单位</div>
        <div class="abstract-line-value">
          <span
            :class="{
              'highlight-text underline clickable': summaryMap.buyer?.link
            }"
            @click="goToBuyerPortrait(summaryMap.buyer, 'link')"
          >
            {{ summaryMap.buyer?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line-container">
        <div class="abstract-line">
          <div class="abstract-line-label">总投资</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.totalInvestment?.value }}
            </span>
          </div>
        </div>
        <div class="abstract-line">
          <div class="abstract-line-label">建设年份</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.projectPeriod?.value }}
            </span>
          </div>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">建设地点</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.address?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">审批机关</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.approveDept?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">审批事项</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.approveContent?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">批准文号</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.approvalNumber?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line-container">
        <div class="abstract-line">
          <div class="abstract-line-label">审批时间</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.approveTime?.value }}
            </span>
          </div>
        </div>
        <div class="abstract-line">
          <div class="abstract-line-label">审批结果</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.approveStatus?.value }}
            </span>
          </div>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">建设内容</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.content?.value }}
          </span>
        </div>
      </div>
    </template>
    <!-- 非超前项目 -->
    <template v-else>
      <div class="abstract-line">
        <div class="abstract-line-label">采购单位</div>
        <div class="abstract-line-value">
          <span
            :class="{
              'highlight-text underline clickable': summaryMap.buyer?.link
            }"
            @click="goToBuyerPortrait(summaryMap.buyer, 'link')"
          >
            {{ summaryMap.buyer?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">采购联系人 / 联系电话</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.buyerContactInfo?.value }}
          </span>
          <span class="abstract-line-value-actions color-main">
            <span
              class="abstract-line-value-action call-phone clickable"
              v-if="summaryMap.buyerContactInfo?.tel"
              @click="doCallPhone(summaryMap.buyerContactInfo?.tel)"
            >
              <span class="j-icon icon-phone-blue"></span>
            </span>
            <span
              class="abstract-line-value-action more-tel clickable"
              v-if="summaryMap.buyer?.link && summaryMap.buyerContactInfo?.tel"
              @click="goToBuyerPortrait(summaryMap.buyer, 'tel')"
            >
              <span class="a-l-v-a-text">更多联系人</span>
              <van-icon name="arrow" />
            </span>
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">招标代理机构</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.agency?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line">
        <div class="abstract-line-label">代理联系人 / 联系电话</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.agencyContactInfo?.value }}
          </span>
          <span class="abstract-line-value-actions color-main">
            <span
              class="abstract-line-value-action call-phone clickable"
              v-if="summaryMap.agencyContactInfo?.tel"
              @click="doCallPhone(summaryMap.agencyContactInfo?.tel)"
            >
              <span class="j-icon icon-phone-blue"></span>
            </span>
            <span
              class="abstract-line-value-action more-tel clickable"
              v-if="summaryMap.buyer?.link && summaryMap.agencyContactInfo?.tel"
            >
              <span class="a-l-v-a-text">更多联系人</span>
              <van-icon name="arrow" />
            </span>
          </span>
        </div>
      </div>
      <div class="abstract-line-container">
        <div class="abstract-line">
          <div class="abstract-line-label">报名截止日期</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.signEndTime?.value }}
            </span>
          </div>
        </div>
        <div class="abstract-line">
          <div class="abstract-line-label">投标截止日期</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.bidEndTime?.value }}
            </span>
          </div>
        </div>
      </div>
      <section v-for="(winner, index) in summary.winners || []" :key="index">
        <div class="abstract-line">
          <div class="abstract-line-label">中标单位</div>
          <div class="abstract-line-value">
            <span
              :class="{
                'highlight-text': winner.id,
                underline: winner.id,
                clickable: winner.id
              }"
            >
              {{ winner.name }}
            </span>
          </div>
        </div>
        <div class="abstract-line">
          <div class="abstract-line-label">中标联系人 / 联系电话</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">{{
              winner?.personTel?.value
            }}</span>
            <span class="abstract-line-value-actions color-main">
              <span
                class="abstract-line-value-action call-phone clickable"
                v-if="winner?.personTel?.tel"
                @click="doCallPhone(winner?.personTel?.tel)"
              >
                <span class="j-icon icon-phone-blue"></span>
              </span>
              <span
                class="abstract-line-value-action more-tel clickable"
                v-if="winner.id && winner?.personTel?.tel"
                @click="goToEntPortrait(winner, 'tel')"
              >
                <span class="a-l-v-a-text">更多联系人</span>
                <van-icon name="arrow" />
              </span>
            </span>
          </div>
        </div>
      </section>
      <div class="abstract-line">
        <div class="abstract-line-label">中标金额（元）</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.bidAmount?.value || ' ' }}
          </span>
        </div>
      </div>
    </template>
    <div class="abstract-bottom-desc">
      <span>*以上摘要信息由剑鱼标讯智能提取，仅供参考。如有误差，请</span>
      <span class="highlight-text underline" @click="concatKf">联系客服</span>
      <span>进行处理。</span>
    </div>
  </section>
</template>
<script>
import { Icon } from 'vant'
import { mapState } from 'vuex'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'
import { callPhone } from '@/utils/callFn'

export default {
  name: 'ContentAbstract',
  components: {
    [Icon.name]: Icon
  },
  props: {
    futureProject: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      summary: (state) => state.article.mainModel.summary
    }),
    summaryList() {
      return this.summary.list
    },
    summaryMap() {
      const map = {}
      this.summaryList.forEach((s) => {
        if (s.key) {
          map[s.key] = s
        }
      })
      return map
    }
  },
  created() {},
  methods: {
    goToBuyerPortrait(item, anchor) {
      if (anchor === 'link') {
        if (!item.link) {
          return
        }
      }
      openAppOrWxPage(LINKS.大会员超级订阅采购单位画像页面, {
        query: {
          entName: encodeURIComponent(item.value),
          anchor: anchor
        }
      })
    },
    goToEntPortrait(winner, anchor) {
      if (!winner.id) {
        return
      }
      openAppOrWxPage(LINKS.企业画像页面, {
        query: {
          eId: winner.id,
          anchor: anchor
        }
      })
    },
    doCallPhone(tel) {
      if (!tel) return
      callPhone(tel)
    },
    concatKf() {
      openAppOrWxPage(LINKS.客服, {
        query: {
          from: encodeURIComponent(location.href)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-phone-blue {
  width: 16px;
  height: 16px;
}

.abstract-line-container {
  display: flex;
  align-items: center;
  .abstract-line {
    flex: 1;
  }
}
.abstract-line {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  .abstract-line-label {
    margin-bottom: 4px;
    font-size: 13px;
    color: #9b9ca3;
  }
  .abstract-line-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    color: #171826;
  }
  .abstract-line-value-actions {
    display: flex;
    align-items: center;
    .abstract-line-value-action {
      display: flex;
      align-items: center;
    }
    &.color-main {
      color: $main;
    }
    .more-tel {
      margin-left: 8px;
    }
    .a-l-v-a-text {
      margin-right: 8px;
    }
  }
}
.abstract-bottom-desc {
  padding: 8px 16px;
  color: #9b9ca3;
  font-size: 12px;
  line-height: 20px;
  .underline {
    white-space: nowrap;
  }
}
</style>