订单详情 补录订单tab根据滚动动态切换

src/views/additionalOrder/additional/index.vue

@@ -31,9 +31,9 @@
       </el-descriptions-item>
     </el-descriptions>
     <div class="tap">
-      <a class="anchor-item" :class="{ 'active': tapIndex === index }" v-for="(item, index) in taps"
+      <a class="anchor-item" :class="{ 'active': tapIndex === item.href }" v-for="(item, index) in taps"
         :href="`#${item.href}`" @click.prevent="handleTap(item, index)">
-        <img :src="tapIndex === index ? item.active : item.img" />
+        <img :src="tapIndex === item.href ? item.active : item.img" />
         {{ item.text }}
       </a>
     </div>
@@ -42,7 +42,7 @@
         <div id="car">
           <el-collapse-item name="car">
             <template #title>
-              <span class="title">
+              <span class="title" :ref="(el) => setSectionRef(el, 0)" id="car">
                 车辆信息
                 <span class="switch" @click.stop="handleSwitch('car')">
                   <span :class="{ 'write': carSwitch, 'identify': !carSwitch }">证件识别</span>
@@ -434,7 +434,7 @@
         <div id="ower">
           <el-collapse-item name="ower">
             <template #title>
-              <span class="title">
+              <span class="title" :ref="(el) => setSectionRef(el, 1)" id="ower">
                 车主信息
                 <span class="switch" @click.stop="handleSwitch('ower')">
                   <span :class="{ 'write': owerSwitch, 'identify': !owerSwitch }">证件识别</span>
@@ -1231,7 +1231,7 @@
         <div id="insurance">
           <el-collapse-item name="insurance">
             <template #title>
-              <span class="title">险种信息</span>
+              <span class="title" :ref="(el) => setSectionRef(el, 2)" id="insurance">险种信息</span>
             </template>
             <div class="white-m-p24 insuranceInfo">
               <span class="type-title">险种类型：</span>
@@ -1419,7 +1419,7 @@
         <div id="quote">
           <el-collapse-item name="quote">
             <template #title>
-              <span class="title">投保信息</span>
+              <span class="title"  :ref="(el) => setSectionRef(el, 3)" id="quote">投保信息</span>
             </template>
             <el-row :gutter="20" class="p-r-20px">
               <el-col :span="24">
@@ -1616,7 +1616,7 @@
         <div id="history">
           <el-collapse-item name="history1">
             <template #title>
-              <span class="title">费用信息</span>
+              <span class="title" :ref="(el) => setSectionRef(el, 4)" id="history">费用信息</span>
             </template>
             <table class="costTable m-[0_24px]" cellpadding="0" cellspacing="0">
               <thead>
@@ -1820,7 +1820,7 @@
           </el-collapse-item>
           <el-collapse-item name="history2">
             <template #title>
-              <span class="title">电子保单</span>
+              <span class="title" :ref="(el) => setSectionRef(el, 5)" id="equities">电子保单</span>
             </template>
             <div style="width: 100%">
               <el-form-item class="white-m-p24" label="交强保单">
@@ -2124,7 +2124,7 @@ const tableProps = ref({
   checkStrictly: true,
 })
 // 页签
-let tapIndex = ref(0)
+let tapIndex = ref('car')
 const taps = ref([
   {
     text: '车辆信息',
@@ -2167,7 +2167,6 @@ const inParkingDataFocus = (e: string, fieldName: string) => {
   gainFocus(e, additionalForm, fieldName);
 }
 const handleTap = (item, index) => {
-  tapIndex.value = index
   const element = document.getElementById(`${item.href}`)
   if (element) {
     element.scrollIntoView({ behavior: 'smooth' })
@@ -4567,6 +4566,57 @@ onMounted(() => {
   initCompany()
 })
 
+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 = `0px 0px -10% 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 && tapIndex.value !== targetId) {
+          setTimeout(() => {
+            tapIndex.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">

src/views/additionalOrder/order/index.vue

@@ -66,10 +66,8 @@
           <el-table-column label="保费总额" prop="sumPremium" width="120"></el-table-column>
           <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
           <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
-          <el-table-column label="操作" fixed="right" width="200">
+          <el-table-column label="操作" fixed="right" width="120">
             <template #default="scope">
-              <el-button link type="primary">审核</el-button>
-              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
               <el-button link type="danger" @click="handleDel(scope.row)">删除</el-button>
             </template>
           </el-table-column>
@@ -168,11 +166,8 @@
           </el-table-column>
           <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
           <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
-          <el-table-column label="操作" fixed="right" width="200">
+          <el-table-column label="操作" fixed="right" width="120">
             <template #default="scope">
-              <el-button link type="primary">审核</el-button>
-              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
-              <el-button link type="danger" @click="handleDel(scope.row)">删除</el-button>
               <el-dropdown trigger="click" class="ml-[12px] align-middle" v-if="scope.row.orderStatus === '5'">
                 <el-button link type="primary">
                   订单批改
@@ -261,9 +256,8 @@
           <el-table-column label="保费总额" prop="sumPremium" width="120"></el-table-column>
           <el-table-column label="录单时间" prop="createTime" width="150"></el-table-column>
           <el-table-column label="录单人" prop="createBy" width="100"></el-table-column>
-          <el-table-column label="操作" fixed="right" width="200">
+          <el-table-column label="操作" fixed="right" width="120">
             <template #default="scope">
-              <el-button link type="primary">审核</el-button>
               <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
               <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
             </template>

src/views/insurancePolicy/orderDetail.vue

@@ -79,7 +79,7 @@
           <span class="label">出单协议</span>
           <span class="words" style="color: #00a0f4" @click="toAgreementDetail">{{ detailData?.order?.agreementName ||
             '--'
-            }}</span>
+          }}</span>
         </el-col>
         <el-col :span="6">
           <span class="label">协议类型</span>
@@ -111,17 +111,17 @@
       </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>
       </div>
     </div>
     <div class="content">
-      <div id="TBMsg" class="TBMsg">
-        <div class="title">投保信息</div>
+      <div class="TBMsg">
+        <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>
@@ -215,7 +215,7 @@
           <div class="taxList">
             <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in taxList" :key="index">{{
               item.name
-              }}</span>
+            }}</span>
           </div>
         </div>
         <el-row :gutter="20">
@@ -340,8 +340,8 @@
           </el-col>
         </el-row>
       </div>
-      <div id="carMsg" class="carMsg">
-        <div class="title">车辆信息</div>
+      <div class="carMsg">
+        <div id="carMsg" class="title" :ref="(el) => setSectionRef(el, 1)">车辆信息</div>
         <el-row :gutter="20">
           <el-col :span="6" class="carMsgItem">
             <span class="label">类型</span>
@@ -370,12 +370,12 @@
           <el-col :span="6" class="carMsgItem">
             <span class="label">使用性质</span>
             <span class="value">{{ dictChange(optionObj['car_nature_code'], detailData?.carInfoVo?.carNatureCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆用途</span>
             <span class="value">{{ dictChange(optionObj['vehicle_use_code'], detailData?.carInfoVo?.vehicleUseCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆种类</span>
@@ -384,12 +384,12 @@
           <el-col :span="6" class="carMsgItem">
             <span class="label">车辆类型</span>
             <span class="value">{{ dictChange(optionObj['car_type_code'], detailData?.carInfoVo?.carTypeCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">能源种类</span>
             <span class="value">{{ dictChange(optionObj['energy_type_code'], detailData?.carInfoVo?.energyTypeCode)
-              }}</span>
+            }}</span>
           </el-col>
           <el-col :span="6" class="carMsgItem">
             <span class="label">注册日期</span>
@@ -431,8 +431,8 @@
           </el-col>
         </el-row>
       </div>
-      <div id="personMsg" class="personMsg">
-        <div class="title">车主信息</div>
+      <div class="personMsg">
+        <div id="personMsg" :ref="(el) => setSectionRef(el, 2)" class="title">车主信息</div>
         <el-row :gutter="20">
           <el-col :span="6" class="personMsgItem">
             <span class="label">车主姓名</span>
@@ -495,7 +495,7 @@
           <div class="taxList">
             <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in tbList" :key="index">{{
               item.name
-              }}</span>
+            }}</span>
           </div>
         </div>
         <el-row :gutter="20" v-if="!tbList[0].bool">
@@ -559,7 +559,7 @@
           <div class="taxList">
             <span class="taxItem" :class="{ 'active': item.bool }" v-for="(item, index) in bbList" :key="index">{{
               item.name
-              }}</span>
+            }}</span>
           </div>
         </div>
         <el-row :gutter="20" v-if="!bbList[0].bool && !bbList[1].bool">
@@ -619,9 +619,9 @@
           </el-col>
         </el-row>
       </div>
-      <div id="imageMsg" class="imageMsg">
-        <div class="title special">
-          <div>影像资料</div>
+      <div class="imageMsg">
+        <div id="imageMsg" class="title special" :ref="(el) => setSectionRef(el, 3)">
+        <div>影像资料</div>
           <div class="btns">
             <el-button size="small" type="primary" plain @click="batchDownload">下载选中影像</el-button>
             <el-button size="small" type="primary" plain @click="handleImageSave">上传影像资料</el-button>
@@ -651,8 +651,8 @@
           </div>
         </div>
       </div>
-      <div id="payMsg" class="payMsg">
-        <div class="title special">
+      <div class="payMsg">
+        <div id="payMsg" class="title special" :ref="(el) => setSectionRef(el, 4)">
           <div>支付信息</div>
           <div class="btns">
             <el-button size="small" type="primary" plain v-if="!detailData?.qrcode?.jumpUrl"
@@ -696,8 +696,8 @@
           </el-col>
         </el-row>
       </div>
-      <div id="appointMsg" class="appointMsg">
-        <div class="title special">
+      <div class="appointMsg">
+        <div id="appointMsg" class="title special" :ref="(el) => setSectionRef(el, 5)">
           <div>特别约定</div>
           <!--                    <div class="btns">
                         <el-button size="small" type="primary" plain>修改特别约定</el-button>
@@ -720,8 +720,8 @@
           </el-tab-pane>
         </el-tabs>
       </div>
-      <div id="fileMsg" class="fileMsg">
-        <div class="title">电子保单</div>
+      <div class="fileMsg">
+        <div id="fileMsg" :ref="(el) => setSectionRef(el, 6)" class="title">电子保单</div>
         <el-row :gutter="20">
           <el-col class="fileItem" :span="6" v-for="(item, index) in fileList">
             <div class="fileType">{{ item.type ? `${item.type}：` : '' }}</div>
@@ -742,8 +742,8 @@
           </el-col>
         </el-row>
       </div>
-      <div id="premiumMsg" class="premiumMsg">
-        <div class="title">保费因素</div>
+      <div class="premiumMsg">
+        <div id="premiumMsg" :ref="(el) => setSectionRef(el, 7)" class="title">保费因素</div>
         <el-row :gutter="20">
           <el-col :span="6" class="premiumMsgItem">
             <span class="label">评分</span>
@@ -779,9 +779,9 @@
           </el-col>
         </el-row>
       </div>
-      <div id="costMsg" class="costMsg">
-        <div class="title special">
-          <div>费用信息</div>
+      <div class="costMsg">
+        <div id="costMsg" class="title special" :ref="(el) => setSectionRef(el, 8)">
+          <div >费用信息</div>
           <div class="btns">
             <el-button size="small" type="primary" plain @click="handleCostView">查看出单费用</el-button>
           </div>
@@ -978,9 +978,9 @@
           </tbody>
         </table>
       </div>
-      <div id="salesChannelMsg" class="costMsg">
-        <div class="title special">
-          <div>分销信息</div>
+      <div class="costMsg">
+        <div id="salesChannelMsg" class="title special" :ref="(el) => setSectionRef(el, 9)">
+          <div >分销信息</div>
           <div class="btns">
             <el-button size="small" type="primary" plain @click="handleCostView">查看出单费用</el-button>
           </div>
@@ -1008,7 +1008,7 @@
                 <div>一级分销</div>
               </th>
               <th>
-                <div>{{detailData?.insFeeOrders?.firstDistributionMember}}</div>
+                <div>{{ detailData?.insFeeOrders?.firstDistributionMember }}</div>
               </th>
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.firstDistributionPremium }}</div>
@@ -1024,7 +1024,7 @@
                 <div>二级分销</div>
               </th>
               <th>
-                <div>{{detailData?.insFeeOrders?.secondDistributionMember}}</div>
+                <div>{{ detailData?.insFeeOrders?.secondDistributionMember }}</div>
               </th>
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.secondDistributionPremium }}</div>
@@ -1041,7 +1041,7 @@
                 <div>三级分销</div>
               </th>
               <th>
-                <div>{{detailData?.insFeeOrders?.thirdDistributionMember}}</div>
+                <div>{{ detailData?.insFeeOrders?.thirdDistributionMember }}</div>
               </th>
               <th>
                 <div>￥{{ detailData?.insFeeOrders?.thirdDistributionPremium }}</div>
@@ -1055,8 +1055,8 @@
         </table>
       </div>
 
-      <div id="lineMsg" class="lineMsg">
-        <div class="title">订单轨迹</div>
+      <div class="lineMsg">
+        <div id="lineMsg" :ref="(el) => setSectionRef(el, 10)" class="title">订单轨迹</div>
         <el-table :data="orderData" height="300">
           <el-table-column label="变更信息">
             <template #default="scope">
@@ -1079,8 +1079,8 @@
           <el-table-column prop="result" label="保司反馈"></el-table-column>
         </el-table>
       </div>
-      <div id="equities" class="equities">
-        <div class="title">权益信息</div>
+      <div class="equities">
+        <div id="equities" :ref="(el) => setSectionRef(el, 11)" class="title">权益信息</div>
         <el-table :data="equitiesData" height="200px">
           <el-table-column prop="equityPackageName" label="权益名称" align="center">
             <template #default="scope">
@@ -1097,7 +1097,8 @@
           <el-table-column prop="rightsCount" label="发放数量" align="center"></el-table-column>
           <el-table-column prop="packagePrice" label="总价" align="center">
             <template #default="scope">
-              <div>{{ scope.row.packagePrice * scope.row.rightsCount || scope.row.contractRate * scope.row.rightsCount }}
+              <div>{{ scope.row.packagePrice * scope.row.rightsCount || scope.row.contractRate * scope.row.rightsCount
+                }}
               </div>
             </template>
           </el-table-column>
@@ -1192,7 +1193,7 @@ const getAssetsFile = (url: string) => {
   return new URL(`../../assets/images/insurancePolicy/${url}.png`, import.meta.url).href;
 };
 // 页签
-let tipsIndex = ref(0)
+let tipsIndex = ref('TBMsg')
 let tipsList = ref([
   {
     name: '投保信息',
@@ -1246,7 +1247,6 @@ let tipsList = ref([
   }
 ])
 const handleTipsIndexChange = (item, index) => {
-  tipsIndex.value = index
   const element = document.getElementById(`${item.id}`)
   if (element) {
     element.scrollIntoView({ behavior: 'smooth' })
@@ -2102,6 +2102,57 @@ onMounted(() => {
   initTrack();
 })
 
+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 = `0px 0px -40% 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">
@@ -2285,7 +2336,10 @@ onMounted(() => {
     height: calc(100% - 280px);
     overflow-y: auto;
     overflow-x: hidden;
+    &>.title{
+      margin-left: 24px;
 
+    }
     .title {
       height: 18px;
       line-height: 18px;
@@ -2295,6 +2349,9 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: flex-start;
+      &:first-of-type{
+        margin-top: 12px;
+      }
 
       .taxList {
         display: flex;