You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
8.3 KiB
309 lines
8.3 KiB
<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 View from '@/layouts/View.vue'
|
|
import Dialog from '@/layouts/Dialog.vue'
|
|
import ScrollView from '@/base/ScrollView/ScrollView.vue'
|
|
import QuestionList from '@/components/QuestionList/QuestionList.vue'
|
|
import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
|
|
import Tabs from '@/components/Tabs/Tabs.vue'
|
|
import SearchResultList from '@/components/SearchResultList/SearchResultList.vue'
|
|
const QuestionClassify = defineAsyncComponent(() => import('@/components/QuestionClassify/QuestionClassify.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)
|
|
|
|
function handleShop(item) {
|
|
useStatistics('brandSearch')
|
|
const shop = shopList.value.find(_shop => _shop.shopId === item.shopId)
|
|
store.SET_SHOP(shop)
|
|
store.SET_SHOW_DETAIL(true)
|
|
}
|
|
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 setVoice() {
|
|
!showVoice.value && store.SET_SHOW_VOICE(true)
|
|
}
|
|
|
|
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>
|
|
|