|
|
@@ -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>
|
|
|
|