client_iot-daoshi-v/src/components/Search/Search.vue

<template>
  <Dialog @close="close">
    <div class="search-content">
      <div class="bar">
        <div class="icon"></div>
        <div class="stick"></div>
        <div v-if="!keywords" class="placeholder">请输入中英文<span class="meta">首字母</span>查询，例如 XBK (星巴克)</div>
        <input v-else @click="setSearch" v-model="keywords" type="text" readonly class="input" />
        <img src="./clear.png" class="clear" v-if="keywords" @click="clear" />
      </div>
      <div class="top" v-if="!showVoice">
        <div class="facs">
          <h1 class="title">公共设施</h1>
          <div class="facility-list">
            <FacilityItem @click="_handleFacility(item)" class="margin" :facility="item" v-for="item of facilityList" :key="item.title" />
          </div>
        </div>
        <div class="keyboard-wrapper">
          <Tabs @click="handleTab" :list="list" class="tabs" />
          <KeyboardByLetter @del="del" @handle-letter="handleLetter" v-if="tabIdx === 0" />
          <KeyboardByWritten @del="del" @handle-word="handleLetter" v-else />
        </div>
      </div>

      <div class="recs" v-show="!keywords.length && !showVoice">
        <h1 class="title">大家都在找</h1>
        <div class="hot-scroll">
          <div class="item" v-for="(item, i) of hotRecommend" :key="item.shopId" @click="handleShop(item)">
            <div class="text">{{ item.shopName }}</div>
            <img class="medal" v-if="i === 0" src="@/views/Index/fir.svg" />
            <img class="medal" v-if="i === 1" src="@/views/Index/sec.svg" />
            <img class="medal" v-if="i === 2" src="@/views/Index/thi.svg" />
          </div>
        </div>
      </div>

      <SearchResultList @handle-shop="handleShop" @handle-activity="handleActivity" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />

      <Voice @handle-question="showClassify = true" v-if="showVoice" />
    </div>
    <div class="search-btn" @click="close">
      <img src="../../assets/images/search/back.png" alt="" />
    </div>
  </Dialog>
</template>

<script setup>
import { computed, defineAsyncComponent, ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { list } from './tabs'
import { useSearchShop } from '@/composables/useSearchShop'
import { useFacilityNav } from '@/composables/useFacilityNav'
import { useStatistics } from '@/composables/useStatistics'
import Dialog from '@/layouts/Dialog.vue'
import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
import Tabs from '@/components/Tabs/Tabs.vue'
import SearchResultList from '@/components/SearchResultList/SearchResultList.vue'
const KeyboardByLetter = defineAsyncComponent(() => import('@/components/KeyboardByLetter/KeyboardByLetter.vue'))
const KeyboardByWritten = defineAsyncComponent(() => import('@/components/KeyboardByWritten/KeyboardByWritten.vue'))
const Voice = defineAsyncComponent(() => import('@/components/Voice/Voice.vue'))

const MAX_LENGTH = 7

const { _handleFacility } = useFacilityNav()

const router = useRouter()

const store = useStore()
const { indexList, shopList, facilityList, config, showVoice } = storeToRefs(store)

const hotRecommend = computed(() => indexList.value.hotSearch ?? [])
const showClassify = ref(false)

async function handleShop(item) {
  useStatistics('brandSearch')
  const shop = shopList.value.find(_shop => _shop.shopId === item.shopId)
  store.SET_SHOP(shop)
  if (router.currentRoute.value.fullPath !== '/guide') {
    store.SET_SELECTED_MODULE('Guide')
    await router.push('/guide')
  }
  store.SET_SHOW_SEARCH(false)
}
async function handleActivity() {
  await router.push('/activity')
  store.SET_SHOW_SEARCH(false)
}

const tabIdx = ref(0)
function handleTab(index) {
  tabIdx.value = index
}

const keywords = ref('')
const searchType = ref(0) //0: 键盘 1: 手写
const { searchShopListRef } = useSearchShop(keywords, searchType)
function handleLetter(item) {
  if (keywords.value.length >= MAX_LENGTH) return
  keywords.value += item
}
function del() {
  keywords.value = keywords.value.substring(0, keywords.value.length - 1)
}
const clear = () => {
  keywords.value = ''
}

function setSearch() {
  showVoice.value && store.SET_SHOW_VOICE(false)
}

function close() {
  store.SET_SHOW_SEARCH(false)
}

onBeforeUnmount(() => {
  showVoice.value && store.SET_SHOW_VOICE(false)
})
</script>

<style lang="scss" scoped>
:deep(.header-left) {
  padding-left: 80px;
}
:deep(.view-container) {
  position: relative;
  z-index: 50;
}

.search-content {
  position: absolute;
  top: 315px;
  right: 40px;
  bottom: 302px;
  left: 40px;
  background: linear-gradient(180deg, #e0e3ee 0%, #d4d9e7 100%);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 2;
  .title {
    font-weight: 900;
    font-size: 24px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.8);
  }
  .bar {
    position: absolute;
    top: -55px;
    left: 28px;
    right: 28px;
    background: #ffffff;
    box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding-right: 10px;
    padding-left: 40px;
    height: 100px;
    .icon {
      width: 56px;
      height: 56px;
      background: center / cover no-repeat url(./icon.png);
    }
    .stick {
      width: 4px;
      height: 38px;
      background: linear-gradient(180deg, #6c7ca6 0%, #879aca 100%);
      margin: 0 32px;
    }
    .placeholder {
      font-weight: 700;
      font-size: 20px;
      line-height: 23px;
      color: rgba(0, 0, 0, 0.2);
      .meta {
        color: rgba(81, 109, 216, 1);
      }
    }
    .input {
      flex: 1;
      border: none;
      outline: none;
      width: 262px;
      background: transparent;
      font-weight: 700;
      font-size: 48px;
      line-height: 59px;
      color: rgba(0, 0, 0, 0.8);
    }
    .clear {
      display: flex;
      width: 80px;
      height: 80px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 24px;
      padding: 16px;
    }
    .voice-icon {
      width: 190px;
    }
  }
  .top {
    height: 460px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    margin: 10px 10px 48px 10px;
    display: flex;
    justify-content: space-between;
    padding-left: 46px;
    .facs {
      width: 300px;
      padding-top: 111px;
      .facility-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        width: 264px;
        margin-top: 40px;
        gap: 12px 24px;
      }
    }
    .keyboard-wrapper {
      flex: 1;
      padding-top: 75px;
      padding-left: 36px;
      background: rgba(0, 0, 0, 0.05);
      padding-right: 38px;
      .tabs {
        padding-right: 8px;
      }
    }
  }
  .recs {
    padding-left: 56px;
    .hot-scroll {
      padding-top: 16px;
      white-space: nowrap;
      width: 944px;

      .item {
        position: relative;
        display: inline-block;
        max-width: 170px;
        height: 52px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 100px;
        .text {
          text-align: center;
          font-weight: 900;
          font-size: 16px;
          line-height: 52px;
          color: rgba(0, 0, 0, 0.6);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 32px;
        }
        .medal {
          position: absolute;
          width: 32px;
          height: 32px;
          left: 4px;
          top: -10px;
        }
      }
      .item + .item {
        margin-left: 24px;
      }
    }
  }
}

.search-right {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  padding-top: 180px;
  padding-left: 64px;
  width: 696px;

  .title,
  .title-en {
    margin-right: 76px;
  }
}
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 242px;
  width: 120px;
  height: 120px;
  z-index: 52;
  background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
  border-radius: 24px;
  img {
    width: 56px;
  }
}
</style>