blackteay/Vue3-Vite-Vant-TS-H5
1
0
Fork 0
mirror of https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git synced 2025-04-25 02:58:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：公共search组件

Browse Source
This commit is contained in:
talktao 2022-03-25 00:53:22 +08:00
parent a551ded7e3
commit 65614eb09c
1 changed files with 81 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/views/home/Search.vue
View File

@ -1,81 +1,18 @@
<template> <script setup lang="ts">
<div class="search d-flex flex-column justify-content-start">
<!-- 头部搜索 -->
<div>
<van-sticky>
<div class="search_Box">
<div @click="back">
<van-icon size="20" name="arrow-left" />
</div>
<div>
<form action="javascript:return true">
<van-search
ref="search"
@focus="isSearch = true"
placeholder="请输入搜索文字"
shape="round"
v-model="value"
show-action
@click="isSearch = true"
@search="handleSearch(value)"
:autofocus="false"
>
<template #action>
<div class="search_Btn" @click="handleSearch(value)">搜索</div>
</template>
</van-search>
</form>
</div>
</div>
<van-tabs v-model:active="active" @click-tab="handleTab">
<van-tab title="综合"></van-tab>
<van-tab title="销量"></van-tab>
<van-tab title="价格升序"></van-tab>
<van-tab title="价格降序"></van-tab>
</van-tabs>
<!-- <van-dropdown-menu class="dropMenu" active-color="#29be81">
<van-dropdown-item @change="handleLeftMenuChange" v-model="synthesis" :options="option1" />
<van-dropdown-item @change="handleRightMenuChange" v-model="defaultSort" :options="option2" />
</van-dropdown-menu> -->
</van-sticky>
</div>
<!-- 商品列表展示 -->
<div class="card_Box mrn d-flex flex-column justify-content-start">
<div v-for="item in testData" :key="item.id">
<div class="list_content d-flex justify-content-between align-items-center">
<div class="left">
<van-image radius="14" width="130" height='120' fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" >
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
<template v-slot:error>
<van-image></van-image>
</template>
</van-image>
</div>
<div class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4">
<div>{{item.title}}</div>
<div>副标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<div class="price">价格：￥{{item.price}}</div>
<div>{{item.id}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue' import { ref, reactive, toRefs } from 'vue'
import { getSearchQuery } from 'api/search'
export default { // 搜索相关
setup(props, ctx) { const searchState = () => {
const value = ref('') // 搜索input框的值 const state = reactive({
const isSearch = ref(true) // 是否显示历史搜索 value: '', // 搜索input框的值
const goodsList = ref([]) // 根据搜索关键字返回的商品数据 isSearch: true, // 是否显示历史搜索
const searchHistory = ref([]) // 搜索历史记录的数据 goodsList: [], // 根据搜索关键字返回的商品数据
const titleText = ref('搜索') titleText: '搜索',
const scrollTop = ref(0) // 获取滚动高度 scrollTop: 0 // 获取滚动高度
})
return toRefs(state)
}
const {value, isSearch, goodsList, titleText, scrollTop} = searchState()
const active = ref(0) // tab切换默认值 const active = ref(0) // tab切换默认值
@ -88,9 +25,7 @@ export default {
// 获取搜索成功的数据 // 获取搜索成功的数据
const getSearchResult = (params) => { const getSearchResult = (params) => {
console.log(params,'params'); console.log(params,'params');
getSearchQuery().then(res=>{ // 接口
})
} }
// 点击搜索的回调 // 点击搜索的回调
@ -124,23 +59,64 @@ export default {
break; break;
} }
} }
return {
value,
isSearch,
goodsList,
searchHistory,
titleText,
scrollTop,
active,
getSearchResult,
handleSearch,
testData,
handleTab
}
}
}
</script> </script>
<template>
<div class="search d-flex flex-column justify-content-start">
<!-- 头部搜索 -->
<van-sticky>
<CustomHeader title="搜索" leftIcon="arrow-left" leftText=""/>
<form action="javascript:return true">
<van-search
ref="search"
@focus="isSearch = true"
placeholder="请输入搜索文字"
shape="round"
v-model="value"
show-action
@click="isSearch = true"
@search="handleSearch(value)"
:autofocus="false"
>
<template #action>
<div class="search_Btn" @click="handleSearch(value)">搜索</div>
</template>
</van-search>
</form>
<van-tabs v-model:active="active" @click-tab="handleTab">
<van-tab title="综合"></van-tab>
<van-tab title="销量"></van-tab>
<van-tab title="价格升序"></van-tab>
<van-tab title="价格降序"></van-tab>
</van-tabs>
</van-sticky>
<!-- 商品列表展示 -->
<div class="card_Box mrn d-flex flex-column justify-content-start">
<div v-for="item in testData" :key="item.id">
<div class="list_content d-flex justify-content-between align-items-center">
<div class="left">
<van-image radius="14" width="130" height='120' fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" >
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
<template v-slot:error>
<van-image></van-image>
</template>
</van-image>
</div>
<div class="right d-flex flex-column justify-content-around w-100 h-100 ps-4 fs-4">
<div>{{item.title}}</div>
<div>副标题xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<div class="price">价格：￥{{item.price}}</div>
<div>{{item.id}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.search { .search {
overflow: hidden; overflow: hidden;