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

<template>
  <section class="abstract-container bg-white">
    <!-- 超前项目 -->
    <template v-if="summary.isProposed">
      <div v-if="summaryMap.projectName?.value" class="abstract-line">
        <div class="abstract-line-label">项目名称</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text ellipsis-2">
            {{ summaryMap.projectName?.value }}
          </span>
        </div>
      </div>
      <div class="abstract-line-container">
        <div v-if="summaryMap.area?.value" 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 v-if="summaryMap.buyerClass?.value" 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 v-if="summaryMap.buyer?.value" class="abstract-line">
        <div class="abstract-line-label">业主单位</div>
        <div class="abstract-line-value">
          <span
            class="ellipsis-2"
            :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 v-if="summaryMap.totalInvestment?.value" 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 v-if="summaryMap.projectPeriod?.value" 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 v-if="summaryMap.address?.value" class="abstract-line">
        <div class="abstract-line-label">建设地点</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text ellipsis-2">
            {{ summaryMap.address?.value }}
          </span>
        </div>
      </div>
      <div v-if="summaryMap.approveDept?.value" class="abstract-line">
        <div class="abstract-line-label">审批机关</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text ellipsis-2">
            {{ summaryMap.approveDept?.value }}
          </span>
        </div>
      </div>
      <div v-if="summaryMap.approveContent?.value" 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 v-if="summaryMap.approvalNumber?.value" 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 v-if="summaryMap.approveTime?.value" 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 v-if="summaryMap.approveStatus?.value" 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 v-if="summaryMap.content?.value" class="abstract-line">
        <div class="abstract-line-label">建设内容</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text ellipsis-2">
            {{ summaryMap.content?.value }}
          </span>
        </div>
      </div>
    </template>
    <!-- 非超前项目 -->
    <template v-else>
      <div v-if="summaryMap.buyer?.value" class="abstract-line">
        <div class="abstract-line-label">采购单位</div>
        <div class="abstract-line-value">
          <span v-if="yyszbContent" class="ellipsis-2">{{
            summaryMap.buyer?.value
          }}</span>
          <span
            v-else
            class="ellipsis-2"
            :class="{
              'highlight-text underline clickable':
                summaryMap.buyer?.link || summaryMap.buyer?.isFreeView,
              'free-view': summaryMap.buyer?.isFreeView
            }"
            @click="goToBuyerPortrait(summaryMap.buyer, 'link')"
          >
            {{ summaryMap.buyer?.value }}
          </span>
        </div>
      </div>
      <div v-if="summaryMap.buyerContactInfo?.value" class="abstract-line">
        <div class="abstract-line-label">采购联系人 / 联系电话</div>
        <div class="abstract-line-value">
          <span
            class="abstract-line-value-text ellipsis-2"
            :class="{
              'highlight-text': summaryMap.buyerContactInfo?.isFreeView,
              'free-view underline': summaryMap.buyerContactInfo?.isFreeView
            }"
            @click="
              beforeDoCallPhone(
                summaryMap.buyerContactInfo?.tel,
                summaryMap.buyerContactInfo?.isFreeView
              )
            "
          >
            {{ summaryMap.buyerContactInfo?.value }}
          </span>
          <span class="abstract-line-value-actions color-main">
            <span
              v-if="
                summaryMap.buyerContactInfo?.tel &&
                !summaryMap.buyerContactInfo?.isFreeView
              "
              class="abstract-line-value-action call-phone clickable"
              @click="doCallPhone(summaryMap.buyerContactInfo?.tel)"
            >
              <span class="j-icon icon-phone-blue" />
            </span>
            <span
              v-if="summaryMap.buyer?.link && summaryMap.buyerContactInfo?.tel"
              class="abstract-line-value-action more-tel clickable"
              @click="goToBuyerPortrait(summaryMap.buyer, 'tel')"
            >
              <span class="a-l-v-a-text">更多联系人</span>
              <van-icon name="arrow" />
            </span>
          </span>
        </div>
      </div>
      <div v-if="summaryMap.agency?.value" class="abstract-line">
        <div class="abstract-line-label">招标代理机构</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text ellipsis-2">
            {{ summaryMap.agency?.value }}
          </span>
        </div>
      </div>
      <div v-if="summaryMap.agencyContactInfo?.value" class="abstract-line">
        <div class="abstract-line-label">代理联系人 / 联系电话</div>
        <div class="abstract-line-value">
          <span
            class="abstract-line-value-text ellipsis-2"
            :class="{
              'highlight-text': summaryMap.agencyContactInfo?.isFreeView,
              'free-view': summaryMap.agencyContactInfo?.isFreeView
            }"
            @click="
              beforeDoCallPhone(
                summaryMap.agencyContactInfo?.tel,
                summaryMap.agencyContactInfo?.isFreeView
              )
            "
          >
            {{ summaryMap.agencyContactInfo?.value }}
          </span>
          <span class="abstract-line-value-actions color-main">
            <span
              v-if="
                summaryMap.agencyContactInfo?.tel &&
                !summaryMap.agencyContactInfo?.isFreeView
              "
              class="abstract-line-value-action call-phone clickable"
              @click="doCallPhone(summaryMap.agencyContactInfo?.tel)"
            >
              <span class="j-icon icon-phone-blue" />
            </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 v-if="IsSunPublishContent" class="abstract-line-container">
        <div v-if="summaryMap.signEndTime?.value" 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 v-if="summaryMap.projectArea?.value" class="abstract-line">
          <div class="abstract-line-label">项目地区</div>
          <div class="abstract-line-value">
            <span class="abstract-line-value-text">
              {{ summaryMap.projectArea?.value }}
            </span>
          </div>
        </div>
      </div>
      <div v-else class="abstract-line-container">
        <div v-if="summaryMap.signEndTime?.value" 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 v-if="summaryMap.bidEndTime?.value" 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">
            {{ winner.isCandidate ? '中标候选人' : '中标单位' }}
          </div>

          <div
            v-if="IsCustomTopNet || yyszbContent"
            class="abstract-line-value"
          >
            <span class="ellipsis-2">
              {{ winner.name }}
            </span>
          </div>

          <div v-else class="" @click="goToEntPortrait(winner)">
            <span
              class="ellipsis-2"
              :class="{
                'highlight-text': winner.id,
                underline: winner.id,
                clickable: winner.id
              }"
            >
              {{ winner.name }}
            </span>
          </div>
        </div>
        <div v-if="winner.personTel?.value" class="abstract-line">
          <div class="abstract-line-label">中标联系人 / 联系电话</div>
          <div class="abstract-line-value">
            <span
              class="abstract-line-value-text ellipsis-2"
              :class="{
                'highlight-text': winner?.personTel?.isFreeView,
                'free-view': winner?.personTel?.isFreeView
              }"
              @click="
                beforeDoCallPhone(
                  winner?.personTel?.tel,
                  winner?.personTel?.isFreeView
                )
              "
            >
              {{ winner?.personTel?.value }}
            </span>
            <span class="abstract-line-value-actions color-main">
              <span
                v-if="winner?.personTel?.tel"
                class="abstract-line-value-action call-phone clickable"
                @click="doCallPhone(winner?.personTel?.tel)"
              >
                <span class="j-icon icon-phone-blue" />
              </span>
              <span
                v-if="winner.id && winner?.personTel?.tel"
                class="abstract-line-value-action more-tel clickable"
                @click="goToEntPortrait(winner, 'tel')"
              >
                <span class="a-l-v-a-text">更多联系人</span>
                <van-icon name="arrow" />
              </span>
            </span>
          </div>
        </div>
      </section>
      <div v-if="summaryMap.bidAmount?.value" 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>
      <div v-if="summaryMap.jfArea?.value" class="abstract-line">
        <div class="abstract-line-label">交付地点</div>
        <div class="abstract-line-value">
          <span class="abstract-line-value-text">
            {{ summaryMap.jfArea?.value || ' ' }}
          </span>
        </div>
      </div>
    </template>
    <ContentSummaryPurchaseList />
    <div
      v-if="!yyszbContent"
      class="abstract-bottom-desc"
      :class="{ transparent: IsSunPublishContent }"
    >
      <span>*以上摘要信息由剑鱼标讯智能提取，仅供参考。如有误差，请</span>
      <span class="highlight-text underline" @click="concatKf">联系客服</span>
      <span>进行处理。</span>
    </div>
    <van-action-sheet
      v-model="sheet.telSelect"
      :actions="telSheetActions"
      cancel-text="取消"
      close-on-click-action
      @select="telSheetSelect"
      @cancel="onSheetCancel"
    />
  </section>
</template>

<script>
import { ActionSheet, Icon } from 'vant'
import { mapState } from 'vuex'
import ContentSummaryPurchaseList from './ContentSummaryPurchaseList'
import { LINKS } from '@/data'
import { openAppOrWxPage } from '@/utils/'
import { callPhone } from '@/utils/callFn'

export default {
  name: 'ContentAbstract',
  components: {
    ContentSummaryPurchaseList,
    [ActionSheet.name]: ActionSheet,
    [Icon.name]: Icon
  },
  props: {
    customSkip: {
      type: Boolean,
      default: false
    },
    futureProject: {
      type: Boolean,
      default: false
    },
    beforeLeavePage: Function
  },
  data() {
    return {
      sheet: {
        telSelect: false
      },
      telSheetActions: [
        // { name: '选项一', value: '1111' },
        // { name: '选项二', value: '1111' },
        // { name: '选项三', value: '1111' }
      ]
    }
  },
  computed: {
    ...mapState({
      content: (state) => state.article.mainModel.content,
      summary: (state) => state.article.mainModel.summary
    }),
    summaryList() {
      return this.summary.list
    },
    IsCustomTopNet() {
      return this.customSkip
    },
    IsSunPublishContent() {
      return this.content.IsSunPublishContent || false
    },
    yyszbContent() {
      return this.content.yyszbContent
    },
    summaryMap() {
      const map = {}
      this.summaryList.forEach((s) => {
        if (s.key) {
          const tempS = Object.assign({}, s)
          if (this.IsCustomTopNet) {
            if (tempS.link) {
              tempS.link = false
            }
            if (tempS.tel) {
              tempS.tel = ''
            }
          }

          map[s.key] = tempS
        }
      })
      return map
    }
  },
  created() {},
  methods: {
    async goToBuyerPortrait(item, anchor) {
      if (anchor === 'link') {
        if (!item.link) {
          return
        }
      }
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.大会员超级订阅采购单位画像页面, {
        query: {
          entName: item.value,
          anchor
        }
      })
    },
    async goToEntPortrait(winner, anchor) {
      if (!winner.id) {
        return
      }
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      openAppOrWxPage(LINKS.企业画像页面, {
        query: {
          eId: winner.id,
          anchor
        }
      })
    },
    beforeDoCallPhone(tel, freeView) {
      if (freeView) return
      this.doCallPhone(tel)
    },
    doCallPhone(tel) {
      if (!tel) return
      const replacer = /[,，、/]/
      tel = `${tel}`
      // 1. 检查是否能够分割
      const telArr = tel.split(replacer)
      if (Array.isArray(telArr) && telArr.length > 1) {
        this.telSheetActions = telArr
          .filter((t) => !!t)
          .map((t) => {
            return {
              name: t,
              value: t
            }
          })
        this.showTelSheet()
      } else {
        this.callPhone(tel)
      }
    },
    callPhone(tel) {
      if (!tel) return
      callPhone(tel)
    },
    telSheetSelect(s) {
      this.callPhone(s.value)
    },
    onSheetCancel() {
      this.closeTelSheet()
    },
    showTelSheet() {
      this.sheet.telSelect = true
    },
    closeTelSheet() {
      this.sheet.telSelect = false
    },
    async concatKf() {
      if (this.beforeLeavePage) {
        await this.beforeLeavePage()
      }
      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;
    flex-shrink: 0;
    .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;
  &.transparent {
    background-color: #f5f6f7;
  }
  .underline {
    white-space: nowrap;
  }
}
</style>