mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-04-06 03:57:55 +08:00
init：非sfc语法公共组件搜索，后续修改
This commit is contained in:
talktao
parent
079d449c41
commit
e4a2011fbc
199
src/views/home/Search.vue
Normal file
199
src/views/home/Search.vue
Normal file
@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<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 { getSearchQuery } from 'api/search'
|
||||
export default {
|
||||
setup(props, ctx) {
|
||||
const value = ref('') // 搜索input框的值
|
||||
const isSearch = ref(true) // 是否显示历史搜索
|
||||
const goodsList = ref([]) // 根据搜索关键字返回的商品数据
|
||||
const searchHistory = ref([]) // 搜索历史记录的数据
|
||||
const titleText = ref('搜索')
|
||||
const scrollTop = ref(0) // 获取滚动高度
|
||||
|
||||
const active = ref(0) // tab切换默认值
|
||||
|
||||
let testData = [
|
||||
{id:1,title:'四件套', price: 999},
|
||||
{id:2,title:'被子', price: 555},
|
||||
{id:3,title:'枕头', price: 888},
|
||||
]
|
||||
|
||||
// 获取搜索成功的数据
|
||||
const getSearchResult = (params) => {
|
||||
console.log(params,'params');
|
||||
getSearchQuery().then(res=>{
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 点击搜索的回调
|
||||
const handleSearch = (e) => {
|
||||
getSearchResult(e)
|
||||
console.log(e,'eeeeeehandleSearch');
|
||||
}
|
||||
|
||||
// 切换tab分类标签的回调
|
||||
const handleTab = (e) => {
|
||||
// getSearchResult({keywords:value.value,searchValue: e.name})
|
||||
// console.log(e,'etabs');
|
||||
switch (e.name) {
|
||||
case 0:
|
||||
testData = testData
|
||||
console.log(testData,'000000000');
|
||||
break;
|
||||
case 1:
|
||||
testData = testData
|
||||
console.log(testData,'111111111');
|
||||
break;
|
||||
case 2:
|
||||
testData = testData.sort((a,b) => a.price - b.price)
|
||||
console.log(testData,'222222222');
|
||||
break;
|
||||
case 3:
|
||||
testData = testData.sort((a,b) => b.price - a.price)
|
||||
console.log(testData,'33333333333');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
return {
|
||||
value,
|
||||
isSearch,
|
||||
goodsList,
|
||||
searchHistory,
|
||||
titleText,
|
||||
scrollTop,
|
||||
active,
|
||||
getSearchResult,
|
||||
handleSearch,
|
||||
testData,
|
||||
handleTab
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search {
|
||||
overflow: hidden;
|
||||
.search_Box {
|
||||
padding: 4px 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
>div:nth-child(1){
|
||||
width: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #5f656b;
|
||||
font-size: 20px;
|
||||
}
|
||||
>div:nth-child(2) {
|
||||
width: calc(100% - 8vw);
|
||||
.search_Btn {
|
||||
color: #b91c3b;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mrn {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
>div:nth-child(1){
|
||||
margin-top: 10px;
|
||||
}
|
||||
.list_content{
|
||||
height: 32vw;
|
||||
/* background-color: #f5f5f5; */
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
padding: 0 10px;
|
||||
.left {
|
||||
|
||||
}
|
||||
.right {
|
||||
overflow: hidden;
|
||||
>div{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.price{
|
||||
color: red;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user