From a94f2ee1df2112b4303d496495331526bcc0fa0d Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Fri, 29 May 2026 23:00:31 +0800
Subject: [PATCH] refactor: improve home page components and nav

Replace uni-app navigation with vue router in MoreService, update route paths
Refactor FindTabs scroll logic, remove unused imports and legacy code
Fix tab indicator image swap and switch from tap to click event
Adjust UI icons, padding and popup background across components
Remove unnecessary wrapper around FindTabs in Discovery component
---
 .../home/components/ChatInputArea/index.vue   |  2 +-
 .../home/components/ChatTopNavBar/index.vue   |  2 +-
 .../Discovery/components/FindTabs/index.vue   | 49 ++++++++-----------
 src/pages/home/components/Discovery/index.vue |  4 +-
 .../components/MineSetting/index.vue          |  2 +-
 .../home/components/MoreService/index.vue     | 12 +++--
 6 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/pages/home/components/ChatInputArea/index.vue b/src/pages/home/components/ChatInputArea/index.vue
index cf543e7..c9bffe8 100644
--- a/src/pages/home/components/ChatInputArea/index.vue
+++ b/src/pages/home/components/ChatInputArea/index.vue
@@ -43,7 +43,7 @@
     <!-- 录音按钮 -->
     <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
 
-    <div class="text-center text-[9px] leading-[12px] text-[#A5AAB4]">
+    <div class="text-center text-[9px] leading-[12px] text-[#A5AAB4] pb-[6px]">
       内容由AI大模型生成，请仔细鉴别
     </div>
   </div>
diff --git a/src/pages/home/components/ChatTopNavBar/index.vue b/src/pages/home/components/ChatTopNavBar/index.vue
index 83db740..e22ecd7 100644
--- a/src/pages/home/components/ChatTopNavBar/index.vue
+++ b/src/pages/home/components/ChatTopNavBar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-[44px] flex items-center pl-[12px] pr-[12px]">
     <div class="w-[24px] h-[24px] flex items-center justify-center">
-      <van-icon name="setting" size="24" color="#fff" @click="showDrawer" />
+      <van-icon name="wap-nav" size="24" color="#fff" @click="showDrawer" />
     </div>
 
     <!-- 隐藏 -->
diff --git a/src/pages/home/components/Discovery/components/FindTabs/index.vue b/src/pages/home/components/Discovery/components/FindTabs/index.vue
index b1420f3..119909d 100644
--- a/src/pages/home/components/Discovery/components/FindTabs/index.vue
+++ b/src/pages/home/components/Discovery/components/FindTabs/index.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="w-full bg-transparent">
-    <div class="w-full overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      :scroll-left="scrollLeft" scroll-with-animation="true" @scroll="handleScroll">
+    <div ref="tabsScrollRef"
+      class="tabs-scroll w-full overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
       <div class="flex items-end h-[50px] gap-4 flex-nowrap px-3">
         <div v-for="(tab, idx) in tabs" :key="idx" :id="getTabId(idx)"
-          class="relative inline-flex items-center justify-center h-[50px] shrink-0" @tap="handleSwitch(tab, idx)">
+          class="relative inline-flex items-center justify-center h-[50px] shrink-0" @click="handleSwitch(tab, idx)">
           <div class="relative flex items-center justify-center h-[50px]">
             <div class="relative inline-flex items-center justify-center">
               <span
-                :class="['relative text-base font-medium text-[#808c99]/90 z-10 px-1 leading-none', modelValue === idx ? 'text-[#0b0b0b] font-bold' : '']">
+                :class="['relative text-base z-10 px-1 leading-none', modelValue === idx ? 'text-[#0b0b0b] font-bold' : 'font-medium text-[#808c99]/90']">
                 {{ tab.label }}
               </span>
               <img v-if="modelValue === idx && (isZhiNian ? indicatorSrcB : indicatorSrc)"
-                :src="isZhiNian ? indicatorSrcB : indicatorSrc"
+                :src="isZhiNian ? indicatorSrc : indicatorSrcB"
                 class="absolute -bottom-[6px] left-1/2 -translate-x-1/2 w-[56px] h-auto z-[1]" />
             </div>
           </div>
@@ -23,13 +23,11 @@
 </template>
 
 <script setup>
-import { getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import { isZhiNian } from "@/constants/base";
 import indicatorSrc from "./images/selected_tabs_icon.png";
 import indicatorSrcB from "./images/selected_tabs_icon_b.png";
 
-const instance = getCurrentInstance();
-
 const props = defineProps({
   modelValue: { type: Number, default: 0 },
   tabs: {
@@ -40,37 +38,32 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
-const scrollLeft = ref(0);
-let currentScrollLeft = 0;
+const tabsScrollRef = ref(null);
 
 const getTabId = (idx) => `find-tab-${idx}`;
 
-const handleScroll = (e) => {
-  currentScrollLeft = e.detail?.scrollLeft || 0;
-};
-
 const centerActiveTab = async () => {
   await nextTick();
 
   const activeIndex = props.modelValue;
   if (activeIndex < 0 || activeIndex >= props.tabs.length) return;
-  if (!instance || typeof uni === "undefined" || !uni.createSelectorQuery) return;
 
-  const query = uni.createSelectorQuery().in(instance);
-  query.select(".tabs-scroll").boundingClientRect();
-  query.select(".tabs-scroll").scrollOffset();
-  query.select(`#${getTabId(activeIndex)}`).boundingClientRect();
-  query.exec((res) => {
-    const [scrollRect, scrollOffset, activeRect] = res || [];
-    if (!scrollRect || !activeRect) return;
+  const scrollEl = tabsScrollRef.value;
+  const activeEl = scrollEl?.querySelector(`#${getTabId(activeIndex)}`);
+  if (!scrollEl || !activeEl) return;
 
-    const currentLeft = scrollOffset?.scrollLeft ?? currentScrollLeft;
-    const targetScrollLeft =
-      currentLeft +
-      activeRect.left - scrollRect.left -
-      (scrollRect.width - activeRect.width) / 2;
+  const scrollRect = scrollEl.getBoundingClientRect();
+  const activeRect = activeEl.getBoundingClientRect();
+  const maxScrollLeft = Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth);
+  const targetScrollLeft =
+    scrollEl.scrollLeft +
+    activeRect.left - scrollRect.left -
+    (scrollRect.width - activeRect.width) / 2;
+  const nextScrollLeft = Math.min(Math.max(0, targetScrollLeft), maxScrollLeft);
 
-    scrollLeft.value = Math.max(0, targetScrollLeft);
+  scrollEl.scrollTo({
+    left: nextScrollLeft,
+    behavior: "smooth",
   });
 };
 
diff --git a/src/pages/home/components/Discovery/index.vue b/src/pages/home/components/Discovery/index.vue
index 54752bb..22345d3 100644
--- a/src/pages/home/components/Discovery/index.vue
+++ b/src/pages/home/components/Discovery/index.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col h-full overflow-hidden">
-    <div class="shrink-0">
-      <FindTabs v-if="discoveryTabs.length" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
-    </div>
+    <FindTabs v-if="discoveryTabs.length" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
 
     <div class="discovery-scroll flex-1" overflow-y @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch"
       @scroll="emitScrollTouch">
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
index f3e52a4..96ce02b 100644
--- a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -4,7 +4,7 @@
     <div class="bg-white rounded-[6px] pl-[12px] mb-[10px]">
       <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">头像 </span>
-        <van-icon name="phone" size="20" color="#ccc"></van-icon>
+        <van-icon name="contact" size="20" color="#ccc"></van-icon>
       </div>
       <div class="flex justify-between items-center py-[12px] pr-[12px] pl-0 border-b border-[#f0f0f0] last:border-b-0">
         <span class="text-[14px] text-[#333]">昵称</span>
diff --git a/src/pages/home/components/MoreService/index.vue b/src/pages/home/components/MoreService/index.vue
index c59d2b6..e094b1e 100644
--- a/src/pages/home/components/MoreService/index.vue
+++ b/src/pages/home/components/MoreService/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <van-popup ref="popup" position="bottom" v-model:show="show">
+  <van-popup ref="popup" position="bottom" v-model:show="show" style="background: transparent;">
     <div class="popup-content bg-[#f5f7fa] rounded-t-[15px] pt-[12px] pl-[12px] pr-[12px] pb-[30px]">
       <div class="flex items-center pb-[12px]">
         <div class="title flex-1 text-center text-[17px] text-black font-medium ml-24">更多服务</div>
@@ -32,11 +32,13 @@
 
 <script setup>
 import { ref } from "vue";
+import { useRouter } from 'vue-router'
 import { Command } from "@/constants/ChatModel";
 import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
 import { checkToken } from "@/hooks/useGoLogin";
 import { emitter } from '@/utils/events'
 
+const router = useRouter();
 const popup = ref(null);
 
 const list = ref([
@@ -46,7 +48,7 @@ const list = ref([
     content: "预定门票、房间、餐食",
     btnText: "去预定",
     type: Command.quickBooking,
-    path: "/pages-quick/list",
+    path: "/quick",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
@@ -62,7 +64,7 @@ const list = ref([
     content: "查看门票、住宿、餐饮等订单",
     btnText: "去查看",
     type: Command.myOrder,
-    path: "/pages-order/order/list",
+    path: "/order",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
@@ -70,7 +72,7 @@ const list = ref([
     content: "查看呼叫服务、进度与处理情况",
     btnText: "去查看",
     type: Command.myWorkOrder,
-    path: "/pages-service/order/list",
+    path: "/service",
   },
   {
     icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
@@ -97,7 +99,7 @@ const handleClick = (item) => {
 
   if (item.path) {
     checkToken().then(() => {
-      uni.navigateTo({ url: item.path });
+      router.push({ path: item.path });
     });
 
     return;