From fcf14d27fe15229de0cb0ff1c5e7a8f967233463 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Wed, 28 Feb 2024 16:43:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=A8=E9=83=A8=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |  4 +++
 src/views/home/components/goods.vue | 41 +++++++++++++++++++++++++----
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 82ee359..62a0aad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -98,6 +98,10 @@ html {
   font-size: var(--el-font-size-base) !important;
 }
 
+.el-popover__title {
+  font-size: var(--el-font-size-base) !important;
+}
+
 .el-dialog__header {
   background-color: #555;
   margin-right: 0 !important;
diff --git a/src/views/home/components/goods.vue b/src/views/home/components/goods.vue
index 0bd7e94..495bc38 100644
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@@ -7,11 +7,23 @@
                 <el-text>{{ item.name }}</el-text>
             </div>
         </div>
-        <div class="all">
-            <el-icon class="icon">
-                <Menu />
-            </el-icon>
-        </div>
+        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
+            <template #reference>
+                <div class="all" @click="showMoreMenu">
+                    <el-icon class="icon" :class="{ active: showPopover }">
+                        <Menu />
+                    </el-icon>
+                </div>
+            </template>
+            <template #default>
+                <div class="popover_wrap">
+                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
+                        :key="item.id" @click="changeCategory(item, index)">
+                        {{ item.name }}
+                    </el-button>
+                </div>
+            </template>
+        </el-popover>
     </div>
     <div class="search_wrap">
         <div class="input">
@@ -64,10 +76,17 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
+const showPopover = ref(false)
+
 const inputChange = _.debounce(function () {
     productqueryCommodityInfoAjax()
 }, 500)
 
+// 显示全部分类
+function showMoreMenu() {
+    showPopover.value = !showPopover.value
+}
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
@@ -88,6 +107,7 @@ function changeShopListType() {
 
 // 切换分类
 function changeCategory(item, index) {
+    showPopover.value = false
     categorysActive.value = index
     if (item.id) {
         goodsList.value = []
@@ -143,6 +163,12 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
+.popover_wrap {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px 0;
+}
+
 .header {
     display: flex;
     height: 80px;
@@ -202,6 +228,11 @@ onMounted(async () => {
     .icon {
         color: #555;
         font-size: 20px;
+        transition: all .2s ease-in-out;
+
+        &.active {
+            transform: rotate(45deg)
+        }
     }
 }