feat: 移动端详情页时间线模块调整

apps/mobile/src/utils/mixins/modules/location-to.js

@@ -0,0 +1,22 @@
+import { openAppOrWxPage } from '@/utils'
+import qs from 'qs'
+import { LINKS } from '@/data'
+
+export default {
+  methods: {
+    __toConcatKf(query = {}) {
+      openAppOrWxPage(LINKS.客服, {
+        query
+      })
+    },
+    __toArticlePage(id, query = {}) {
+      const q = qs.stringify(query)
+      const suffix = q ? `?${q}` : ''
+      openAppOrWxPage({
+        wx: LINKS.标讯详情页前缀.wx + id + '.html' + suffix,
+        app: LINKS.标讯详情页前缀.app + id + '.html' + suffix,
+        h5: LINKS.标讯详情页前缀.h5 + id + '.html' + suffix
+      })
+    }
+  }
+}

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

@@ -24,7 +24,10 @@
       </span>
     </div>
     <div class="bg-white">
-      <TimeLine :stepList="stepList" @itemClick="itemClick">
+      <h5 class="project-title">{{ projectName }}</h5>
+      <ProjectTimeline :stepList="stepList2" @itemClick="itemClick" />
+      <div style="height: 8px;background-color: brown;" v-if="false"></div>
+      <TimeLine :stepList="stepList" @itemClick="itemClick" v-if="false">
         <template v-slot:step-footer="{ step }">
           <span v-if="step.bidAmountFormatted">
             {{ step.bidAmountFormatted }}中标
@@ -38,17 +41,21 @@
 import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
 import QuickMonitor from '@/composables/quick-monitor/component/QuickMonitor.vue'
 import DownProjectReport from '@/views/article/components/DownProjectReport.vue'
+import ProjectTimeline from '@/views/article/ui/ContentProjectTimeline.vue'
 import { TimeLine } from '@/ui'
 import { mapState, mapGetters } from 'vuex'
 import { replaceKeyword, openAppOrWxPage, formatMoney } from '@/utils'
 import { LINKS } from '@/data'
+import LocationMixin from '@/utils/mixins/modules/location-to'
 
 export default {
   name: 'ContentProjectTimeline',
+  mixins: [LocationMixin],
   components: {
     TimeLine,
     QuickMonitor,
     DownProjectReport,
+    ProjectTimeline,
     ContentModuleCard
   },
   props: {
@@ -110,15 +117,33 @@ export default {
           ])
         }
       })
+    },
+    stepList2() {
+      const projectProgress = this.expandModel.projectProgress || {}
+      const projectName = projectProgress.name || ''
+      const progressList = projectProgress?.list || []
+      return progressList.map((p) => {
+        return {
+          ...p,
+          step_time: p.time,
+          contentType: [p._data?.toptype, p._data?.subtype].filter((v) => v),
+          bidAmountFormatted: p.bidAmount ? formatMoney(p.bidAmount) : ''
+        }
+      })
     }
   },
   methods: {
     async itemClick(item) {
-      const id = item.id
-      sessionStorage.setItem('bigvip-fid', JSON.stringify({ sid: id }))
       if (this.beforeLeavePage) {
         await this.beforeLeavePage()
       }
+      // this.toProjectDetail(item)
+      this.toArticleContent(item)
+    },
+    toProjectDetail(item) {
+      const id = item.id
+      if (!id) return
+      sessionStorage.setItem('bigvip-fid', JSON.stringify({ sid: id }))
       if (this.isNewBusiness) {
         openAppOrWxPage(LINKS.商机管理项目进度监控, {
           query: {}
@@ -128,12 +153,26 @@ export default {
           query: {}
         })
       }
+    },
+    toArticleContent(item) {
+      const id = item.id
+      if (!id) return
+      if (item.isActive) return
+      this.__toArticlePage(id)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.project-title {
+  padding: 8px 16px;
+  padding-bottom: 0;
+  font-size: 15px;
+  line-height: 22px;
+  color: #171826;
+}
+
 .action-right-container {
   display: flex;
   align-items: center;

apps/mobile/src/views/article/ui/ContentProjectTimeLine.vue

@@ -0,0 +1,137 @@
+<template>
+  <TimeLine
+    :lineTheme="lineTheme"
+    class="content-project-timeline-ui"
+    lineThrough
+    :stepList="stepList"
+    @itemClick="linkTo"
+  >
+    <template v-slot:step-footer="{ step }">
+      <span class="flex align-center">
+        <span class="footer-text highlight-text">{{
+          Array.isArray(step.contentType) ? step.contentType.join(' | ') : ''   
+        }}</span>
+        <span
+          class="footer-tag j-tag-item main plain border round"
+          v-if="step.bidAmountFormatted"
+        >
+          {{ step.bidAmountFormatted }}
+        </span>
+      </span>
+    </template>
+  </TimeLine>
+</template>
+
+<script>
+import { TimeLine } from '@/ui'
+
+export default {
+  name: 'ContentProjectTimelineUI',
+  components: {
+    TimeLine
+  },
+  props: {
+    lineTheme: {
+      type: String,
+      default: 'grey',
+      validator(value) {
+        return ['', 'grey'].includes(value)
+      }
+    },
+    stepList: {
+      type: Array,
+      default() {
+        return [
+          // {
+          //   id: '226',
+          //   time: '2024-02-26',
+          //   bidamount: 11,
+          //   tags: [111],
+          //   content: '226-内容内容内容内容内容内容'
+          // },
+          // {
+          //   id: '225',
+          //   time: '2024-02-25',
+          //   tags: [111, 222, 333],
+          //   content: '225-内容内容内容内容内容内容'
+          // },
+          // {
+          //   id: '224',
+          //   time: '2024-02-24',
+          //   tags: [111, 222, 333],
+          //   content: '224-内容内容内容内容内容内容'
+          // }
+        ]
+      }
+    }
+  },
+  methods: {
+    calcProjectType(step) {
+      console.log(step)
+    },
+    linkTo(s) {
+      this.$emit('itemClick', s)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.footer-text {
+  margin-right: 20px;
+}
+::v-deep {
+  .step-line {
+    &::before {
+      left: -1px;
+      top: 0;
+    }
+
+    &:not(:last-of-type) {
+      padding-bottom: 0;
+    }
+
+    &:first-of-type {
+      &::before {
+        top: 20px;
+        height: calc(100% - 20px);
+      }
+    }
+
+    &.is-active {
+      &::before {
+        background-color: $main;
+      }
+    }
+
+    &:nth-last-of-type(2) {
+      &::before {
+        height: calc(100% + 20px);
+      }
+    }
+
+    &:last-of-type {
+      &::before {
+        content: unset;
+      }
+    }
+  }
+
+
+  .is-active {
+    .step-circle {
+      &::before {
+        background-color: $main;
+      }
+    }
+  }
+  .step-circle {
+    &::before {
+      width: 8px;
+      height: 8px;
+      background-color: #c0c4cc;
+      border-width: 0;
+    }
+  }
+}
+</style>