feat (PageOne): 优化记录类型选择并新增跟进相关功能

pages/orderDetailRefactored/components/FollowCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <view class="follow-card-container">
+    <clue-follow :clueId="clueId" :type="type" />
+  </view>
+</template>
+
+<script>
+import clueFollow from '@/pages/orderDetail/tabs/followRecord/index.vue'
+
+export default {
+  name: 'FollowCard',
+  components: {
+    clueFollow
+  },
+  props: {
+    clueId: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: [String, Number],
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.follow-card-container {
+  padding: 20rpx;
+  background-color: #ffffff;
+  min-height: auto;
+
+  // 覆盖 clue-follow 组件的样式
+  ::v-deep .followRecord_wrap {
+    min-height: auto;
+    background: transparent;
+    padding: 0;
+  }
+
+  ::v-deep .followRecord_timeLine_wrap {
+    background: transparent;
+  }
+
+  ::v-deep .empty_wrap {
+    position: static;
+    transform: none;
+    padding: 40rpx 0;
+    text-align: center;
+    color: #999999;
+    font-size: 28rpx;
+  }
+}
+</style>

pages/orderDetailRefactored/components/PageOne.vue

@@ -11,7 +11,7 @@
       </view>
     </view>
 
-    <!-- 聊天记录/通话记录卡片 -->
+    <!-- 聊天记录/通话记录/跟进卡片 -->
     <view class="card-wrap">
       <view class="card-title">
         <text :class="{ 'active': recordType === 'chat' }" @click="recordType = 'chat'">
@@ -21,6 +21,14 @@
         <text :class="{ 'active': recordType === 'call' }" @click="recordType = 'call'">
           通话记录
         </text>
+        <text class="divider">|</text>
+        <text :class="{ 'active': recordType === 'frontendFollow' }" @click="recordType = 'frontendFollow'">
+          前端跟进
+        </text>
+        <text class="divider">|</text>
+        <text :class="{ 'active': recordType === 'followRecord' }" @click="recordType = 'followRecord'">
+          跟进记录
+        </text>
       </view>
 
       <!-- 聊天记录 -->
@@ -41,6 +49,12 @@
         <sound-recorder v-for="item in soundRecordList" :key="item.fileName" :data="item"
           @handleDelectThisSoundRecord="handleDeleteSoundRecord" />
       </view>
+
+      <!-- 前端跟进 -->
+      <follow-card v-else-if="recordType === 'frontendFollow'" :clue-id="currentClueId" type="4" />
+
+      <!-- 跟进记录 -->
+      <follow-card v-else-if="recordType === 'followRecord'" :clue-id="currentClueId" type="5" />
     </view>
 
     <!-- 实物图卡片 -->
@@ -109,13 +123,15 @@
 <script>
 import PicComp from './PicComp.vue'
 import soundRecorder from '@/components/soundRecorder/soundRecorder.vue'
+import FollowCard from './FollowCard.vue'
 import imageUpload from '../utils/imageUpload.js'
 
 export default {
   name: 'PageOne',
   components: {
     PicComp,
-    soundRecorder
+    soundRecorder,
+    FollowCard
   },
   props: {
     orderDetail: {
@@ -133,12 +149,17 @@ export default {
   },
   data() {
     return {
-      recordType: 'chat', // 'chat' | 'call'
+      recordType: 'chat', // 'chat' | 'call' | 'frontendFollow' | 'followRecord'
       chatRecordsList: [],
       truePicList: [],
       soundRecordList: []
     }
   },
+  computed: {
+    currentClueId() {
+      return (this.currentReceipt && this.currentReceipt.clueId) || (this.orderDetail && this.orderDetail.clueId) || ''
+    }
+  },
   watch: {
     currentReceipt: {
       handler(newVal) {
@@ -408,14 +429,20 @@ export default {
 }
 
 .card-title {
-  padding: 20rpx;
+  padding: 20rpx 15rpx;
   border-bottom: 1rpx solid map-get($colors, border);
   display: flex;
   align-items: center;
+  white-space: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
 
   text {
-    padding: 0 10rpx;
+    padding: 0 6rpx;
     cursor: pointer;
+    font-size: 26rpx;
+    white-space: nowrap;
+    flex-shrink: 0;
 
     &.active {
       color: map-get($colors, primary);
@@ -424,8 +451,10 @@ export default {
   }
 
   .divider {
-    margin: 0 10rpx;
+    margin: 0 4rpx;
     color: #ddd;
+    font-size: 24rpx;
+    flex-shrink: 0;
   }
 }