优化element弹窗

src/views/home/components/goods.vue

@@ -15,7 +15,8 @@
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName"></el-input>
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+                @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
     </div>
@@ -34,12 +35,17 @@
             </div>
         </div>
     </div>
+    <div class="empty">
+        <el-empty description="空空如也~" v-if="!goodsList.length" />
+    </div>
     <!-- 选择规格 -->
     <skuModal ref="skuModalRef" />
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import _ from 'lodash'
+
 import skuModal from '@/components/skuModal.vue'
 
 import { queryCategory, productqueryCommodityInfo } from '@/api/product'
@@ -58,6 +64,10 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
+const inputChange = _.debounce(function (e) {
+    productqueryCommodityInfoAjax()
+}, 500)
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
@@ -79,8 +89,16 @@ function changeShopListType() {
 // 切换分类
 function changeCategory(item, index) {
     categorysActive.value = index
-    // goodsList.value = originalGoods.value.find(val => val.id == item.categoryId)
-    console.log(originalGoods.value.find(val => val.id == item.categoryId))
+    if (item.id) {
+        goodsList.value = []
+        originalGoods.value.map(val => {
+            if (val.categoryId == item.id) {
+                goodsList.value.push(val)
+            }
+        })
+    } else {
+        goodsList.value = [...originalGoods.value]
+    }
 }
 
 // 查询分类信息
@@ -224,7 +242,7 @@ onMounted(async () => {
         }
 
         .dot {
-            padding: 0 8px;
+            padding: 0 14px;
             background-color: var(--el-color-danger);
             color: #fff;
             border-radius: 20px;
@@ -233,6 +251,7 @@ onMounted(async () => {
             right: 4px;
             z-index: 1;
             font-size: 12px;
+            font-size: 18px;
         }
 
         .cover {