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

<template>
  <section class="tab-actions safe-area-inside-bottom bg-white">
    <ActionCollection
      :id="id"
      class="tab-action"
      :before-action="beforeActionBindPhoneCheck"
      :before-redirect="beforeLeavePage"
      @syncLabels="syncLabels"
    />
    <QuickMonitor
      v-if="showMonitor"
      :id="id"
      class="tab-action"
      type="project"
      :cache="true"
      :auto="true"
      popover
      :before-action="beforeActionBindPhoneCheck"
      :before-leave-page="beforeLeavePage"
      @initd="afterMonitorFetch"
      @change="afterMonitorFetch"
    />
    <ActionDownloadReport
      v-if="showDownloadReportBtn"
      class="tab-action"
      :buyers="buyers"
      :winners="winners"
      :project-name="projectName"
      :id="id"
      :show-credit="showCreditReport"
      :btnInfo="reportBtn"
    />
    <ActionShareToWorkmate
      :id="id"
      class="tab-action"
      :before-action="beforeShareToWorkMateAction"
    />
    <ActionInBidding
      :id="id"
      class="tab-action"
      @change="biddingStatusChange"
    />
  </section>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import ActionCollection from '@/views/article/components/ActionCollection.vue'
import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
import ActionShareToWorkmate from '@/views/article/components/ActionShareToWorkmate.vue'
import ActionInBidding from '@/views/article/components/ActionInBidding.vue'
import ActionDownloadReport from '@/views/article/components/ActionDownloadReport.vue'
import { openAppOrWxPage } from '@/utils'
import { LINKS } from '@/data'

export default {
  name: 'TabActions',
  components: {
    ActionShareToWorkmate,
    ActionCollection,
    QuickMonitor,
    ActionInBidding,
    ActionDownloadReport
  },
  props: {
    beforeLeavePage: Function,
    showMonitor: {
      type: Boolean,
      default: false
    },
    // 排序列表，根据key排序
    orderList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      tabState: {
        inBidding: false
      }
    }
  },
  computed: {
    ...mapState({
      userSimpleInfo: (state) => state.user.userSimpleInfo,
      content: (state) => state.article.mainModel.content,
      reportBtn: (state) => state.article.reportBtn
    }),
    id() {
      return this.content.id
    },
    winners() {
      const { ent_crn } = this.reportBtn
      // 当中标企业有1个以上时，需要根据crn是否有值处理供应商分析报告中标企业名称是否可点击
      const arr = this.content?._summary?.winners || []
      if (arr.length > 0) {
        const formatArr = arr.map((v) => {
          return {
            ...v,
            valid:
              ent_crn && Object.keys(ent_crn).length > 0
                ? ent_crn[v.name]
                : false
          }
        })
        return formatArr
      } else {
        return arr
      }
    },
    buyers() {
      return this.content?._summary.buyers || []
    },
    // 是否展示投标企业信用报告
    showCreditReport() {
      return ['采购意向', '预告', '招标'].includes(
        this.content?._ob?.topType || this.content?._ob?.subType || ''
      )
    },
    showDownloadReportBtn() {
      const info = this.reportBtn
      return (
        info.buyer_report_button ||
        info.ent_report_button ||
        info.project_report_button
      )
    },
    projectName() {
      return this.content?.projectName
    }
  },
  created() {},
  methods: {
    ...mapMutations('article', ['setOtherModelChild']),
    removeHideUnderline() {
      this.setOtherModelChild({
        key: 'hasProject',
        data: true
      })
      // 移除下划线
      this.setOtherModelChild({
        key: 'forecastShow',
        data: true
      })
    },
    syncLabels({ list }) {
      if (Array.isArray(list)) {
        this.setOtherModelChild({
          key: 'collectionTags',
          data: list
        })
      }
    },
    showForecast() {},
    afterMonitorFetch(payload) {
      // console.log(payload)
      this.setOtherModelChild({
        key: 'projectFollowState',
        data: payload
      })
      if (payload.model && payload.model.canFollow) {
        this.showForecast()
        this.removeHideUnderline()
      }
    },
    biddingStatusChange(i) {
      const userName = i.userName || ''
      const userNameList = userName.split(',').filter((i) => i)
      this.setOtherModelChild({
        key: 'inBiddingPersonList',
        data: userNameList
      })
    },
    toBindPhonePage() {
      openAppOrWxPage(LINKS.绑定手机号, {
        query: {
          mode: 'mergeBind'
        }
      })
    },
    // mp标记短信邀请进入的详情页，需要判断手机号是否绑定
    beforeActionBindPhoneCheck() {
      const query = this.$route.query
      if (query.mp) {
        const { phone } = this.userSimpleInfo
        if (phone) {
          return true
        } else {
          this.toBindPhonePage()
          return false
        }
      } else {
        return true
      }
    },
    beforeShareToWorkMateAction() {
      const { phone, expBinding } = this.userSimpleInfo
      if (phone || expBinding === 1) {
        return true
      } else {
        this.toBindPhonePage()
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$height: 48px;

::v-deep {
  .action-text {
    font-size: 10px;
    line-height: 16px;
  }
}
.tab-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px -2px 8px 0px rgba(54, 147, 179, 0.05);
  border-top: 1px solid $border_color_3;
  z-index: 2002;

  ::v-deep {
    .tab-action-item {
      height: $height;
    }
  }
}
.tab-action {
  flex: 1;
  height: $height;
}
</style>