Search.vue

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'

    // 搜索相关
    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切换默认值

    let testData = [
        {id:1,title:'四件套', price: 999},
        {id:2,title:'被子', price: 555},
        {id:3,title:'枕头', price: 888},
    ]

    // 获取搜索成功的数据
    const getSearchResult = (params) => {
        console.log(params,'params');
        // 接口
    }

    // 点击搜索的回调
    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;
        }
    }
</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;
    .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>