84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<!-- 搜索框 -->
|
||
|
|
<uni-search-bar v-model="searchText" @confirm="handleSearch" />
|
||
|
|
|
||
|
|
<!-- <view v-if="showSuggestions" class="suggestions-list">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in suggestions"
|
||
|
|
:key="index"
|
||
|
|
class="suggestion-item"
|
||
|
|
@click="selectSuggestion(item)"
|
||
|
|
>
|
||
|
|
{{ item }}
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
|
||
|
|
<!-- 筛选条件 -->
|
||
|
|
<view class="filter-container">
|
||
|
|
<picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
|
||
|
|
<view class="filter-item">{{ categoryText }}</view>
|
||
|
|
</picker>
|
||
|
|
<picker mode="selector" :range="sortOptions" @change="handleSortChange">
|
||
|
|
<view class="filter-item">{{ sortText }}</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 搜索结果 -->
|
||
|
|
<search-results :list="results" />
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
|
||
|
|
// const suggestions = ref([])
|
||
|
|
// const showSuggestions = ref(false)
|
||
|
|
|
||
|
|
// const handleInput = debounce(async () => {
|
||
|
|
// if (!searchText.value.trim()) {
|
||
|
|
// showSuggestions.value = false
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
|
||
|
|
// try {
|
||
|
|
// const res = await getSuggestions(searchText.value)
|
||
|
|
// suggestions.value = res
|
||
|
|
// showSuggestions.value = true
|
||
|
|
// } catch (error) {
|
||
|
|
// console.error('获取搜索建议失败:', error)
|
||
|
|
// }
|
||
|
|
// }, 300)
|
||
|
|
|
||
|
|
const searchText = ref('')
|
||
|
|
const category = ref(0)
|
||
|
|
const sort = ref(0)
|
||
|
|
|
||
|
|
const categoryOptions = ['全部类别', '电子产品', '服装', '食品']
|
||
|
|
const sortOptions = ['默认排序', '价格从低到高', '价格从高到低', '销量最高']
|
||
|
|
|
||
|
|
const categoryText = computed(() => categoryOptions[category.value])
|
||
|
|
const sortText = computed(() => sortOptions[sort.value])
|
||
|
|
|
||
|
|
const handleSearch = async () => {
|
||
|
|
const params = {
|
||
|
|
keyword: searchText.value,
|
||
|
|
category: category.value,
|
||
|
|
sort: sort.value
|
||
|
|
}
|
||
|
|
|
||
|
|
// 调用搜索API
|
||
|
|
const res = await searchAPI(params)
|
||
|
|
results.value = res.data
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCategoryChange = (e) => {
|
||
|
|
category.value = e.detail.value
|
||
|
|
handleSearch()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSortChange = (e) => {
|
||
|
|
sort.value = e.detail.value
|
||
|
|
handleSearch()
|
||
|
|
}
|
||
|
|
</script>
|