瀏覽代碼

修复搜索方法,完善LAB6代码

chillqi 2 年之前
父節點
當前提交
bafced81f6
共有 2 個文件被更改,包括 20 次插入27 次删除
  1. 0 4
      components.d.ts
  2. 20 23
      src/views/product/ProductSearch.vue

+ 0 - 4
components.d.ts

@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     CommentItem: typeof import('./src/components/CommentItem.vue')['default']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -21,8 +20,6 @@ declare module 'vue' {
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
@@ -35,7 +32,6 @@ declare module 'vue' {
     ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     Header: typeof import('./src/components/Header.vue')['default']

+ 20 - 23
src/views/product/ProductSearch.vue

@@ -1,7 +1,8 @@
+<!--Lab5新增,搜索界面-->
 <script setup lang="ts">
 import {Back} from "@element-plus/icons-vue";
-import {searchByCondition} from "../../api/product.ts";
-import { ref, computed } from "vue"
+import {searchByCondition} from "../../api/product";
+import {ref, computed} from "vue"
 import {useRouter} from "vue-router";
 import ProductItem from "../../components/ProductItem.vue";
 import {parseCategory} from "../../utils";
@@ -12,32 +13,28 @@ const productList = ref()
 const router = useRouter()
 
 const name = ref()
-const category = ref()
+const category = ref(null)
 const price = ref()
-const possibleCategories = ['FOOD','CLOTHES','ELECTRONICS','FURNITURE','ENTERTAINMENT', 'SPORTS', 'LUXURY']
+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,
+    category: category.value === null ? 'ALL' : category.value,
     price: price.value,
   }
   searchByCondition(payload).then(res => {
-        console.log(payload)
-        productList.value = res.data.result
-        console.log(productList.value)
-      }
-  )
+    productList.value = res.data.result
+  })
 }
 
 function clearData() {
-  name.value = ''
-  category.value = ''
-  price.value = ''
+  name.value = null
+  category.value = null
+  price.value = null
 }
 
-
 function toBackPage() {
   router.push("/allStore")
 }
@@ -52,7 +49,6 @@ function toProductDetailPage(productId: number) {
   <el-container>
     <el-main>
 
-
       <el-row :gutter="20">
 
         <el-col :span="1">
@@ -79,14 +75,15 @@ function toProductDetailPage(productId: number) {
         <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-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 v-model="price" placeholder="不限">
 
             </el-input-number>
           </el-form-item>
@@ -102,15 +99,15 @@ function toProductDetailPage(productId: number) {
         </el-col>
       </el-row>
 
-      <el-divider />
+      <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)"/>
+        <ProductItem class="product-item-list"
+                     v-for="productVO in productList"
+                     :productId="productVO.id"
+                     :key="productVO.id"
+                     @click="toProductDetailPage(productVO.id)"/>
       </div>
     </el-main>