mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-04-06 03:57:55 +08:00
feat：公共search组件
This commit is contained in:
talktao
parent
a551ded7e3
commit
65614eb09c
@ -1,81 +1,18 @@
|
||||
<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>
|
||||
<script setup lang="ts">
|
||||
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 searchState = () => {
|
||||
const state = reactive({
|
||||
value: '', // 搜索input框的值
|
||||
isSearch: true, // 是否显示历史搜索
|
||||
goodsList: [], // 根据搜索关键字返回的商品数据
|
||||
titleText: '搜索',
|
||||
scrollTop: 0 // 获取滚动高度
|
||||
})
|
||||
return toRefs(state)
|
||||
}
|
||||
const {value, isSearch, goodsList, titleText, scrollTop} = searchState()
|
||||
|
||||
const active = ref(0) // tab切换默认值
|
||||
|
||||
@ -88,9 +25,7 @@ export default {
|
||||
// 获取搜索成功的数据
|
||||
const getSearchResult = (params) => {
|
||||
console.log(params,'params');
|
||||
getSearchQuery().then(res=>{
|
||||
|
||||
})
|
||||
// 接口
|
||||
}
|
||||
|
||||
// 点击搜索的回调
|
||||
@ -124,23 +59,64 @@ export default {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return {
|
||||
value,
|
||||
isSearch,
|
||||
goodsList,
|
||||
searchHistory,
|
||||
titleText,
|
||||
scrollTop,
|
||||
active,
|
||||
getSearchResult,
|
||||
handleSearch,
|
||||
testData,
|
||||
handleTab
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
.search {
|
||||
overflow: hidden;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user