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

<template>
  <ContentModuleCard
    title="招标/采购进度"
    class="content-project-timeline"
    v-if="stepList.length"
  >
    <div class="action-right-container" slot="header-actions">
      <span class="action-item clickable download-project-doc" v-if="false">
        <AppIcon name="xiazaixiangmubaogao"></AppIcon>
        <span class="action-text">下载项目报告</span>
      </span>
      <span class="action-item clickable follow-project">
        <QuickMonitor
          :id="content.id"
          type="project"
          :cache="true"
          :auto="false"
          direction="row"
        />
      </span>
    </div>
    <div class="bg-white">
      <TimeLine
        :markedSameId="content.id"
        :stepList="stepList"
        @itemClick="itemClick"
      >
        <template v-slot:step-footer="{ step }">
          <span v-if="step.bidAmountFormatted">
            {{ step.bidAmountFormatted }}中标
          </span>
        </template>
      </TimeLine>
    </div>
  </ContentModuleCard>
</template>
<script>
import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
import { AppIcon, TimeLine } from '@/ui'
import { mapState, mapGetters } from 'vuex'
import { replaceKeyword, openAppOrWxPage, formatMoney } from '@/utils'
import { LINKS } from '@/data'

export default {
  name: 'ContentProjectTimeline',
  components: {
    AppIcon,
    TimeLine,
    QuickMonitor,
    ContentModuleCard
  },
  data() {
    return {
      // stepList: [
      //   {
      //     id: '226',
      //     step_time: '2024-02-26',
      //     // step_bidamount: 'moneyUnit(111)',
      //     tags: [111],
      //     content: '226-内容内容内容内容内容内容'
      //   },
      //   {
      //     id: '225',
      //     step_time: '2024-02-25',
      //     tags: [111, 222, 333],
      //     content: '225-内容内容内容内容内容内容'
      //   },
      //   {
      //     id: '224',
      //     step_time: '2024-02-24',
      //     tags: [111, 222, 333],
      //     content: '224-内容内容内容内容内容内容'
      //   }
      // ]
    }
  },
  computed: {
    ...mapState({
      content: (state) => state.article.mainModel.content,
      expandModel: (state) => state.article.expandModel
    }),
    ...mapGetters('user', ['isNewBusiness']),
    stepList() {
      const projectProgress = this.expandModel.projectProgress || {}
      const projectName = projectProgress.name || ''
      const progressList = projectProgress?.list || []
      return progressList.map((p) => {
        return {
          ...p,
          step_time: p.time,
          tags: [p.tag],
          bidAmountFormatted: p.bidAmount ? formatMoney(p.bidAmount) : '',
          content: replaceKeyword(p.title, projectName, [
            '<span class="highlight-text">',
            '</span>'
          ])
        }
      })
    }
  },
  methods: {
    itemClick(item) {
      const id = item.id
      sessionStorage.setItem('bigvip-fid', JSON.stringify({ sid: id }))
      if (this.isNewBusiness) {
        openAppOrWxPage(LINKS.项目信息, {
          query: {}
        })
      } else {
        openAppOrWxPage(LINKS.项目详情页, {
          query: {}
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.action-item {
  color: $main;
  font-size: 14px;
  line-height: 20px;
  &:not(:last-of-type) {
    margin-right: 16px;
  }
  .action-text {
    margin-left: 4px;
  }
}
</style>