订单审核：订单详情页面上面的光标不会跟着信息同步变动

src/views/finance/modules/auditDetail.vue

@@ -95,9 +95,9 @@
       </el-row>
       <div class="p-[0_24px]">
         <div class="tipsList">
-          <div class="tipsItem" :class="{ 'active': tipsIndex === index }" v-for="(item, index) in tipsList"
+          <div class="tipsItem" :class="{ 'active': tipsIndex === item.id }" v-for="(item, index) in tipsList"
             :key="index" @click="handleTipsIndexChange(item, index)">
-            <img :src="getAssetsFile(item.url + (tipsIndex === index ? 'Active' : ''))" />
+            <img :src="getAssetsFile(item.url + (tipsIndex === item.id ? 'Active' : ''))" />
             <span class="tipsName">{{ item.name }}</span>
           </div>
         </div>
@@ -105,7 +105,7 @@
     </div>
     <div class="content">
       <div id="TBMsg" class="TBMsg">
-        <div class="title">投保信息</div>
+        <div id="TBMsg" :ref="(el) => setSectionRef(el, 0)" class="title">投保信息</div>
         <el-row :gutter="20">
           <el-col :span="6" class="TBMsgItem">
             <span class="label">保险公司</span>
@@ -220,7 +220,7 @@
         </el-row>
       </div>
       <div id="carMsg" class="carMsg">
-        <div class="title">车辆信息</div>
+        <div id="carMsg" :ref="(el) => setSectionRef(el, 1)" class="title">车辆信息</div>
         <el-row :gutter="20">
           <el-col :span="6" class="carMsgItem">
             <span class="label">类型</span>
@@ -311,7 +311,7 @@
         </el-row>
       </div>
       <div id="insuranceMsg" class="insuranceMsg">
-        <div class="title">险种信息</div>
+        <div id="insuranceMsg" :ref="(el) => setSectionRef(el, 2)" class="title">险种信息</div>
         <el-row :gutter="20" style="margin-bottom: 16px">
           <el-col :span="14">
             <el-table :data="detailData?.kindInfoVo" border :span-method="objectSpanMethod">
@@ -388,7 +388,7 @@
         </el-row>
       </div>
       <div id="personMsg" class="personMsg">
-        <div class="title">车主信息</div>
+        <div id="personMsg" :ref="(el) => setSectionRef(el, 3)" class="title">车主信息</div>
         <el-row :gutter="20">
           <el-col :span="6" class="personMsgItem">
             <span class="label">车主姓名</span>
@@ -577,7 +577,7 @@
       </div>
       <div id="costMsg" class="costMsg">
         <div class="title special">
-          <div>费用信息</div>
+          <div id="costMsg" :ref="(el) => setSectionRef(el, 4)">费用信息</div>
           <div class="btns" v-if="Number(activeindex) == 0">
             <el-button size="small" v-if="!costShow" type="primary" plain @click="handleCostChange">调整费用</el-button>
             <div v-else style="display: flex; align-items: center; justify-content: flex-end">
@@ -901,7 +901,7 @@
         </table>
       </div>
       <div id="salesChannelMsg" class="costMsg">
-        <div class="title special">
+        <div class="title special" id="salesChannelMsg" :ref="(el) => setSectionRef(el, 5)">
           <div>分销信息</div>
         </div>
         <table class="costTable" cellpadding="0" cellspacing="0">
@@ -993,7 +993,7 @@
         </table>
       </div>
       <div id="fileMsg" class="fileMsg">
-        <div class="title">影像资料</div>
+        <div class="title" id="fileMsg" :ref="(el) => setSectionRef(el, 6)">影像资料</div>
         <div class="information">
           <el-tabs v-model="activeName" tab-position="left" class="demo-tabs">
             <el-tab-pane v-for="(item, index) in infoList" :label="item.label" :name="item.name">
@@ -1050,7 +1050,7 @@
         </div>
       </div>
       <div id="equities" class="equities">
-        <div class="title">权益信息</div>
+        <div class="title" id="equities" :ref="(el) => setSectionRef(el, 7)">权益信息</div>
         <el-table :data="equitiesData" height="200px">
           <el-table-column prop="equityPackageName" label="权益名称" align="center">
             <template #default="scope">
@@ -1191,7 +1191,6 @@ let tipsList = ref([
   }
 ])
 const handleTipsIndexChange = (item, index) => {
-  tipsIndex.value = index
   const element = document.getElementById(`${item.id}`)
   if (element) {
     element.scrollIntoView({ behavior: 'smooth' })
@@ -1645,6 +1644,56 @@ onUnmounted(() => {
   window.removeEventListener('keydown', handleKeydown, true)
 })
 
+const sectionRefs = ref<HTMLElement[]>([])   // 存储所有区域的 DOM
+
+// 设置 ref 的回调函数（v-for 中推荐用法）
+const setSectionRef = (el: HTMLElement | null, index: number) => {
+  if (el) {
+    sectionRefs.value[index] = el
+  }
+}
+
+// ---------- 3. Intersection Observer 核心逻辑 ----------
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+  // 顶部缩减 70px（让导航栏挡不住判定），底部缩减 50%（让下一个区域出现时才切换）
+  const rootMargin = `250px 0px -30% 0px`
+  observer = new IntersectionObserver(
+    (entries) => {
+      // 找出所有可见的区域中，最靠近视口顶部的那一个
+      const visibleEntries = entries.filter(entry => entry.isIntersecting)
+      if (visibleEntries.length > 0) {
+        // 按 top 值排序，取最靠上的（即用户最先看到的）
+        const topEntry = visibleEntries.sort(
+          (a, b) => a.boundingClientRect.top - b.boundingClientRect.top
+        )[0]
+        const targetId = topEntry.target.id
+        if (targetId && tipsIndex.value !== targetId) {
+          setTimeout(() => {
+            tipsIndex.value = targetId
+          }, 10);
+        }
+      }
+    },
+    {
+      threshold: [0.5], // 多个阈值提高触发精度
+      rootMargin: rootMargin,
+    }
+  )
+
+  // 开始观察所有区域
+  sectionRefs.value.forEach((el) => {
+    if (el) observer?.observe(el)
+  })
+})
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+})
 </script>
 
 <style scoped lang="scss">
@@ -2173,4 +2222,4 @@ onUnmounted(() => {
     }
   }
 }
-</style>
+</style>