Merge remote-tracking branch 'origin/Lab6.0' into Lab6.0

components.d.ts

@@ -21,6 +21,8 @@ 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']

src/api/product.ts

@@ -9,6 +9,12 @@ type ProductInfo = {
     photoUrlList: string[]
 }
 
+type SearchInfo = {
+    name: string | null,
+    category: string | null,
+    price: number | null,      // 最高价格
+}
+
 // 创建商品
 export const createProduct = (productInfo: ProductInfo) => {
     return axios.post(`${PRODUCT_MODULE}/`, productInfo,
@@ -48,4 +54,12 @@ export const getCommentsById = (productId: number) => {
         .then(res => {
             return res;
         })
+}
+
+export const searchByCondition = (searchInfo: SearchInfo) => {
+    return axios.post(`${PRODUCT_MODULE}/condition`, searchInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        })
 }

src/components/Header.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import {router} from '../router'
 import {parseRole} from "../utils"
 import {User, Document, Discount, SwitchButton} from "@element-plus/icons-vue"   //图标
+import { Search } from "@element-plus/icons-vue"
+import {useRouter} from "vue-router";
+
+const router = useRouter()
 
 const role = sessionStorage.getItem('role')    //登录的时候插入的
 
+
 //退出登录
 function logout() {
   ElMessageBox.confirm(
@@ -28,8 +32,9 @@ function logout() {
 
 
 <template>
+
   <el-header class="custom-header" height="20">
-    <el-row :gutter="10">
+    <el-row :gutter="20">
 
       <el-col :span="3" class="header-icon">
         <router-link to="/allStore" v-slot="{navigate}" class="no-link">
@@ -41,7 +46,12 @@ function logout() {
         <el-tag class="role-tag" size="large">{{ parseRole(role) }}版</el-tag>
       </el-col>
 
-      <el-col :span="15">
+      <el-col :span="14"></el-col>
+
+      <el-col :span="1" class="header-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">
@@ -106,4 +116,5 @@ function logout() {
   align-items:center;
   justify-content: center;
 }
+
 </style>

src/router/index.ts

@@ -30,6 +30,12 @@ const router = createRouter({
                 component: () => import('../views/store/AllStore.vue'),
                 meta: {title: '商品列表界面/主页'}
             },
+            {
+                path: '/search',
+                name: 'search',
+                component: () => import('../views/product/ProductSearch.vue'),
+                meta: {title: '商品检索'}
+            },
             {
                 path: '/createStore',
                 name: 'createStore',

src/views/Home.vue

@@ -5,7 +5,7 @@ import Header from "../components/Header.vue"
 
 <template>
   <Header/>
-  <router-view />
+  <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/store/StoreDetail.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import {ref} from "vue"
-import {router} from '../../router'
 import {getStoreById} from "../../api/store.ts"
 import {getProductsByStoreId} from "../../api/product.ts"
 import {Back} from "@element-plus/icons-vue"
 import ProductItem from "../../components/ProductItem.vue"
 import {parseRating} from "../../utils";
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
 
 const role = sessionStorage.getItem("role")
 // 从当前router地址中获得storeId参数值