From db554162f109e9bdaacf6f88f96ec68dc98fca20 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 11 Oct 2025 17:43:41 +0800
Subject: [PATCH] feat:首页地图搜索相关调整

---
 src/pages/map/index.vue |    9 +++-
 src/pages/map/drag.vue  |   64 ++++++++++++++++++++++----------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/src/pages/map/drag.vue b/src/pages/map/drag.vue
index c6e581c..f3c52c7 100644
--- a/src/pages/map/drag.vue
+++ b/src/pages/map/drag.vue
@@ -1,14 +1,8 @@
 <template>
-  <view
-    class="panel-container"
-    :style="{
+  <view class="panel-container" :style="{
       transform: `translateY(${translateY}px)`,
       transition: isDragging ? 'none' : 'transform 0.3s ease',
-    }"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-  >
+    }" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
     <!-- 顶部拖拽提示条 -->
     <view class="drag-bar"></view>
 
@@ -27,7 +21,23 @@
 </template>
 
 <script setup>
-  import { ref, computed, onMounted } from 'vue'
+  import {
+    ref,
+    computed,
+    onMounted,
+    watch
+  } from 'vue'
+
+  const props = defineProps({
+    isSelectInput: {
+      type: Boolean,
+      default: false
+    },
+    searchVal: {
+      type: String,
+      default: ''
+    },
+  })
 
   // 获取屏幕高度
   let screenHeight = 0
@@ -44,14 +54,27 @@
 
   // 毛玻璃效果
   const searchBoxStyle = computed(() => {
-    return translateY.value <= screenHeight * oneSlidePosition.value
-      ? {
-          backdropFilter: 'blur(10px)',
-          background: 'rgba(255, 255, 255, 0.7)',
-        }
-      : {
-          background: '#fff',
-        }
+    return translateY.value <= screenHeight * oneSlidePosition.value ?
+      {
+        backdropFilter: 'blur(10px)',
+        background: 'rgba(255, 255, 255, 0.7)',
+      } :
+      {
+        background: '#fff',
+      }
+  })
+
+  watch([
+    () => props.isSelectInput,
+    () => props.searchVal,
+  ], ([newIsSelectInput, newSearchVal]) => {
+    if (newIsSelectInput) {
+       translateY.value = screenHeight * twoSlidePosition.value
+    }
+
+    if (!newIsSelectInput && !newSearchVal) {
+      translateY.value = screenHeight * initialPosition.value
+    }
   })
 
   // 获取屏幕高度
@@ -67,7 +90,7 @@
     initialPosition.value = 0.95
 
     if (screenHeight < 500) {
-       initialPosition.value = 0.86
+      initialPosition.value = 0.86
     }
 
     if (screenHeight > 575) {
@@ -75,7 +98,7 @@
     }
 
     if (screenHeight > 642) {
-       initialPosition.value = 0.865
+      initialPosition.value = 0.865
     }
     // #endif
 
@@ -134,7 +157,8 @@
     display: flex;
     flex-direction: column;
     z-index: 997;
-    touch-action: none; /* 禁止默认的滚动行为 */
+    touch-action: none;
+    /* 禁止默认的滚动行为 */
   }
 
   .drag-bar {
diff --git a/src/pages/map/index.vue b/src/pages/map/index.vue
index 97a5f8b..cceea63 100644
--- a/src/pages/map/index.vue
+++ b/src/pages/map/index.vue
@@ -17,9 +17,11 @@
       <up-icon customPrefix="xyicon" name="dingwei" size="24" color="#000"></up-icon>
     </view>
 
-    <drag-ele>
+    <drag-ele :isSelectInput="isSelectInput" :searchVal="searchVal">
       <template #searchBox>
-        <u-input placeholder="搜索" border="surround" v-model="value" @change="change" color="#fff">
+        <u-input placeholder="搜索" border="surround" v-model="searchVal" @change="change" color="#fff"
+         @focus="isSelectInput = true"
+         @blur="isSelectInput = false">
           <template #prefix>
             <view class="search-left-box">
               <u-icon color="#fff" name="arrow-left"></u-icon>
@@ -100,8 +102,9 @@
 
   const addressTooltip = ref(null)
   const show = ref(false)
+  const isSelectInput = ref(false)
 
-  const value = ref('')
+  const searchVal = ref('')
 
   const change = () => {
 

--
Gitblit v1.9.3