|
@@ -1,28 +1,24 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div>
|
|
|
- <Navbar style="min-width: 1184px;" @search="keyword=> getData(keyword)" />
|
|
|
- <div class="white-bgc py-3" style="border-top: 1px solid #eee;">
|
|
|
- <div class="default-width my-3" :loading="loading">
|
|
|
- <div v-if="goodList.length">
|
|
|
- <div class="goods-box mt-5">
|
|
|
- <v-card v-for="val in goodList" :key="val.id" class="goods-box-item" hover elevation="2" @click="handleClickGood(val)">
|
|
|
- <v-img :src="val.picUrl" width="100%" height="68%" cover></v-img>
|
|
|
- <div class="px-3 pt-3">
|
|
|
- <p class="ellipsis color-333">{{ val.name }}</p>
|
|
|
- <p class="color-999 ellipsis font-size-14 mt-1">{{ val.introduction }}</p>
|
|
|
- <div class="mt-1 d-flex justify-space-between">
|
|
|
- <div class="goods-box-item-price">¥{{ isArray(val.price) ? fen2yuan(val.price[0]) : fen2yuan(val.price) }}</div>
|
|
|
- <div class="font-size-15 mt-1" style="color: #c4c4c4">{{ salesAndStock(val) }}</div>
|
|
|
- </div>
|
|
|
+ <Navbar style="min-width: 1184px;" @search="handleSearch" />
|
|
|
+ <div v-if="goodList.length" class="default-width white-bgc my-3 pa-5" :loading="loading" style="border-radius: 5px;">
|
|
|
+ <div class="goods-box">
|
|
|
+ <v-card v-for="val in goodList" :key="val.id" class="goods-box-item" hover elevation="2" @click="handleClickGood(val)">
|
|
|
+ <v-img :src="val.picUrl" width="100%" height="68%" cover></v-img>
|
|
|
+ <div class="px-3 pt-3">
|
|
|
+ <p class="ellipsis color-333">{{ val.name }}</p>
|
|
|
+ <p class="color-999 ellipsis font-size-14 mt-1">{{ val.introduction }}</p>
|
|
|
+ <div class="mt-1 d-flex justify-space-between">
|
|
|
+ <div class="goods-box-item-price">¥{{ isArray(val.price) ? fen2yuan(val.price[0]) : fen2yuan(val.price) }}</div>
|
|
|
+ <div class="font-size-15 mt-1" style="color: #c4c4c4">{{ salesAndStock(val) }}</div>
|
|
|
</div>
|
|
|
- </v-card>
|
|
|
- </div>
|
|
|
- <CtPagination :total="total" :page="page.pageNo" :limit="page.pageSize" @handleChange="handleChangePage"></CtPagination>
|
|
|
+ </div>
|
|
|
+ </v-card>
|
|
|
</div>
|
|
|
- <Empty v-else :elevation="false" message="没有找到相关商品~"></Empty>
|
|
|
+ <CtPagination :total="total" :page="page.pageNo" :limit="page.pageSize" @handleChange="handleChangePage"></CtPagination>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <Empty v-else class="default-width my-3" :elevation="false" :message=message ></Empty>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -44,13 +40,11 @@ const page = ref({
|
|
|
const loading = ref(false)
|
|
|
const total = ref(0)
|
|
|
const goodList = ref([])
|
|
|
-const getData = async (keyword) => {
|
|
|
+const getData = async () => {
|
|
|
const params = {
|
|
|
- ...page.value
|
|
|
+ ...page.value,
|
|
|
+ keyword: keyword.value,
|
|
|
}
|
|
|
- console.log('keyword:', keyword)
|
|
|
- console.log('route.query.keyWord:', route.query.keyWord)
|
|
|
- if (route?.query?.keyWord || keyword) params.keyword = keyword || route.query.keyWord
|
|
|
const { list, total: number } = await getGoodsList(params)
|
|
|
goodList.value = list
|
|
|
total.value = number || 0
|
|
@@ -63,6 +57,15 @@ const handleChangePage = (e) => {
|
|
|
getData()
|
|
|
}
|
|
|
|
|
|
+const message = ref('')
|
|
|
+const keyword = ref('')
|
|
|
+// 关键字检索
|
|
|
+const handleSearch = (val) => {
|
|
|
+ keyword.value = val
|
|
|
+ message.value = keyword.value ? `没有找到“${keyword.value}”相关商品` : '没有找到相关商品'
|
|
|
+ getData()
|
|
|
+}
|
|
|
+
|
|
|
// 格式化销量、库存信息
|
|
|
const salesAndStock = computed(() => (data) => {
|
|
|
let text = []
|