feat:首页地图搜索相关调整

shuishen

2025-10-11 db554162f109e9bdaacf6f88f96ec68dc98fca20

feat:首页地图搜索相关调整

 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 {

 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 = () => {