feat：公共search组件

src/views/home/Search.vue

@@ -1,44 +1,95 @@
+<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">
         <!-- 头部搜索 -->
-        <div>
             <van-sticky>
-                <div class="search_Box">
+                <CustomHeader title="搜索" leftIcon="arrow-left" leftText=""/>
-                    <div @click="back">
+                <form action="javascript:return true">
-                        <van-icon size="20" name="arrow-left" />
+                    <van-search
-                    </div>
+                        ref="search"
-                <div>
+                        @focus="isSearch = true"
-                        <form action="javascript:return true">
+                        placeholder="请输入搜索文字"
-                            <van-search
+                        shape="round"
-                                ref="search"
+                        v-model="value"
-                                @focus="isSearch = true"
+                        show-action
-                                placeholder="请输入搜索文字"
+                        @click="isSearch = true"
-                                shape="round"
+                        @search="handleSearch(value)"
-                                v-model="value"
+                        :autofocus="false"
-                                show-action
+                    >
-                                @click="isSearch = true"
+                        <template #action>
-                                @search="handleSearch(value)"
+                            <div class="search_Btn" @click="handleSearch(value)">搜索</div>
-                                :autofocus="false"
+                        </template>
-                            >
+                    </van-search>
-                                <template #action>
+                </form>
-                                    <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">
@@ -65,81 +116,6 @@
     </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 {