fix: 搜索功能修复

src/components/Header.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {parseRole, parseCategory} from "../utils"
+import {parseRole} from "../utils"
 import {User, Document, Discount, SwitchButton} from "@element-plus/icons-vue"   //图标
-import { ref, computed } from "vue"
 import { Search } from "@element-plus/icons-vue"
 import {useRouter} from "vue-router";
 
@@ -9,34 +8,6 @@ const router = useRouter()
 
 const role = sessionStorage.getItem('role')    //登录的时候插入的
 
-const searchValue = ref(null)
-const typeValue = ref(null)
-const priceValue = ref(null)
-const possibleCategories = ['FOOD','CLOTHES','ELECTRONICS','FURNITURE','ENTERTAINMENT', 'SPORTS', 'LUXURY']
-
-const drawer = ref()
-const searchDisabled = computed(() => !(searchValue.value != null || typeValue.value != null || priceValue.value != null))
-
-
-function openSearchBar() {
-  drawer.value = true
-}
-
-function closeSearchBar() {
-  drawer.value = false
-}
-
-function search() {
-  drawer.value = false
-  router.push({
-    name: "searchResult",
-    query: {
-      name: searchValue.value,
-      category: typeValue.value,
-      price: priceValue.value,
-    }
-  })
-}
 
 //退出登录
 function logout() {
@@ -62,46 +33,6 @@ function logout() {
 
 <template>
 
-  <el-drawer
-      v-model="drawer"
-      direction="ttb"
-  >
-    <template #default>
-      <el-form label-position="top" :inline="true">
-
-        <el-form-item label="商品名称">
-          <el-input
-              v-model="searchValue"
-              @keyup.enter.native="search"
-              placeholder="不限"
-              size="large"
-              style="width: 300px"
-          >
-          </el-input>
-
-        </el-form-item>
-        <el-form-item label="商品品类">
-          <el-select v-model="typeValue" placeholder="任意" style="width: 300px" size="large">
-            <el-option v-for = "item in possibleCategories" :key="item" :label="parseCategory(item)" :value="item"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="商品最高价格">
-          <el-input-number v-model="priceValue" placeholder="不限" size="large" style="width: 300px">
-
-          </el-input-number>
-        </el-form-item>
-      </el-form>
-
-    </template>
-
-    <template #footer>
-      <div style="flex: auto">
-        <el-button @click="closeSearchBar">取消</el-button>
-        <el-button type="primary" @click="search" :disabled="searchDisabled">搜索</el-button>
-      </div>
-    </template>
-  </el-drawer>
-
   <el-header class="custom-header" height="20">
     <el-row :gutter="20">
 
@@ -117,14 +48,10 @@ function logout() {
 
       <el-col :span="14"></el-col>
 
-
-<!--      <el-col :span="13" class="search-holder">-->
-
-
-<!--      </el-col>-->
-
       <el-col :span="1" class="header-icon">
-          <el-icon @click="openSearchBar" :size="35" color="white" style="cursor: pointer" ><Search /></el-icon>
+        <router-link to="/search" v-slot="{navigate}">
+          <el-icon @click="navigate" :size="35" color="white" style="cursor: pointer" ><Search /></el-icon>
+        </router-link>
       </el-col>
 
       <el-col :span="1" class="header-icon">

src/router/index.ts

@@ -31,10 +31,10 @@ const router = createRouter({
                 meta: {title: '商品列表界面/主页'}
             },
             {
-                path: '/searchResult',
-                name: 'searchResult',
-                component: () => import('../views/product/ProductSearchResult.vue'),
-                meta: {title: '商品检索结果'}
+                path: '/search',
+                name: 'search',
+                component: () => import('../views/product/ProductSearch.vue'),
+                meta: {title: '商品检索'}
             },
             {
                 path: '/createStore',

src/views/Home.vue

@@ -5,7 +5,7 @@ import Header from "../components/Header.vue"
 
 <template>
   <Header/>
-  <router-view :key="$route.fullPath"/>
+  <router-view/>
 </template>
 
 

src/views/product/ProductSearch.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import {Back} from "@element-plus/icons-vue";
+import {searchByCondition} from "../../api/product.ts";
+import { ref, computed } from "vue"
+import {useRouter} from "vue-router";
+import ProductItem from "../../components/ProductItem.vue";
+import {parseCategory} from "../../utils";
+
+
+const productList = ref()
+
+const router = useRouter()
+
+const name = ref()
+const category = ref()
+const price = ref()
+const possibleCategories = ['FOOD','CLOTHES','ELECTRONICS','FURNITURE','ENTERTAINMENT', 'SPORTS', 'LUXURY']
+const searchDisabled = computed(() => !(name.value != null || category.value != null || price.value != null))
+
+function search() {
+  const payload = {
+    name: name.value,
+    category: category.value,
+    price: price.value,
+  }
+  searchByCondition(payload).then(res => {
+        console.log(payload)
+        productList.value = res.data.result
+        console.log(productList.value)
+      }
+  )
+}
+
+function clearData() {
+  name.value = ''
+  category.value = ''
+  price.value = ''
+}
+
+
+function toBackPage() {
+  router.push("/allStore")
+}
+
+function toProductDetailPage(productId: number) {
+  router.push("/productDetail/" + productId)
+}
+
+</script>
+
+<template>
+  <el-container>
+    <el-main>
+
+
+      <el-row :gutter="20">
+
+        <el-col :span="1">
+          <el-button @click="toBackPage()"
+                     type="primary" circle plain class="back-button">
+            <el-icon>
+              <Back/>
+            </el-icon>
+          </el-button>
+        </el-col>
+
+        <el-col :span="8">
+          <el-form-item label="商品名称">
+            <el-input
+                v-model="name"
+                @keyup.enter.native="search"
+                placeholder="不限"
+            >
+            </el-input>
+
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="6">
+          <el-form-item label="商品品类">
+            <el-select v-model="category" placeholder="任意">
+              <el-option v-for = "item in possibleCategories" :key="item" :label="parseCategory(item)" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="5">
+          <el-form-item label="最高价格">
+            <el-input-number v-model="price" placeholder="不限" >
+
+            </el-input-number>
+          </el-form-item>
+        </el-col>
+
+
+        <el-col :span="1.5">
+          <el-button @click="clearData">清空</el-button>
+        </el-col>
+
+        <el-col :span="1">
+          <el-button type="primary" @click="search" :disabled="searchDisabled">搜索</el-button>
+        </el-col>
+      </el-row>
+
+      <el-divider />
+
+      <div class="all-product-main">
+
+           <ProductItem class="product-item-list"
+               v-for = "productVO in productList"
+                        :productId="productVO.id"
+                        :key="productVO.id"
+                        @click="toProductDetailPage(productVO.id)"/>
+      </div>
+    </el-main>
+
+  </el-container>
+</template>
+
+<style scoped>
+.all-product-main {
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  flex-flow: wrap;
+  align-content: start;
+  justify-content: start;
+}
+</style>

src/views/product/ProductSearchResult.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import {Back} from "@element-plus/icons-vue";
-import {searchByCondition} from "../../api/product.ts";
-import { ref } from "vue"
-import {useRoute, useRouter} from "vue-router";
-import ProductItem from "../../components/ProductItem.vue";
-
-
-const productList = ref()
-
-const route = useRoute()
-const router = useRouter()
-
-let name = route.query.name === null ? null : String(route.query.name)
-let category = route.query.category === null ? null : String(route.query.category)
-let price = route.query.price === null ? null : Number(route.query.price)
-
-const payload = {
-  name: name,
-  category: category,
-  price: price,
-}
-
-searchByCondition(payload).then(res => {
-    console.log(payload)
-    productList.value = res.data.result
-    console.log(productList.value)
-  }
-)
-
-function toBackPage() {
-  router.push("/allStore")
-}
-
-</script>
-
-<template>
-  <el-container>
-    <el-main>
-      <el-button @click="toBackPage()"
-                 type="primary" circle plain class="back-button">
-        <el-icon>
-          <Back/>
-        </el-icon>
-      </el-button>
-
-      <ProductItem v-for = "productVO in productList" :productId="productVO.id"/>
-
-    </el-main>
-
-  </el-container>
-</template>
-
-<style scoped>
-
-</style>