update

src/modules/shop/views/Index.vue

@@ -13,6 +13,44 @@ const handleClickTab = (val: any) => {
     window.location.reload()
   }
 }
+//
+onMounted(() => {
+  shopStore.filters[0].isActive = true
+})
+
+let childMenuShow = $ref(false)
+let menuValue = $ref('')
+console.log(shopStore.filters, 'shopStore.filters')
+const menuTab = function (item: any) {
+  if (!item.children) {
+    for (let i = 0; i < shopStore.filters.length; i++) {
+      shopStore.filters[i].isActive = false
+      if (shopStore.filters[i].children) {
+        shopStore.filters[i].children.map((c: any) => (c.isActive = false))
+      }
+    }
+    item.isActive = true
+    childMenuShow = false
+    menuValue = item.value
+  } else {
+    childMenuShow = !childMenuShow
+  }
+}
+
+const childMenuTab = function (item: any, cItem: any) {
+  for (let i = 0; i < shopStore.filters.length; i++) {
+    shopStore.filters[i].isActive = false
+    if (shopStore.filters[i].children) {
+      shopStore.filters[i].children.map((c: any) => (c.isActive = false))
+    }
+  }
+  item.isActive = true
+  cItem.isActive = true
+  menuValue = cItem.value
+  // setTimeout(() => {
+  //   childMenuShow = false
+  // }, 100)
+}
 </script>
 
 <template>
@@ -50,11 +88,43 @@ const handleClickTab = (val: any) => {
   </div>
   <div class="main_shop" v-else>
     <img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
-    <van-tabs>
+    <!-- <van-tabs>
       <van-tab :title="item.label" v-for="(item, index) in shopStore.filters" :key="index" lazy>
         <CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
       </van-tab>
-    </van-tabs>
+    </van-tabs> -->
+    <div class="mobile-tab-box">
+      <div
+        :class="`item ${shopStore.filters[index].isActive && 'active'}`"
+        v-for="(item, index) in shopStore.filters"
+        :key="index"
+      >
+        <span @click="menuTab(item)">{{ item.label }}</span>
+        <div class="child" v-if="shopStore.filters[index]?.children && childMenuShow">
+          <div
+            @click="childMenuTab(item, cItem)"
+            :class="`child-item ${cItem.isActive && 'active'}`"
+            v-for="(cItem, cIndex) in shopStore.filters[index]?.children"
+            :key="cIndex"
+          >
+            {{ cItem.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-for="(item, index) in shopStore.filters" :key="index">
+      <CourseList v-if="menuValue === item.value" :type="item.value" :courseList="shopStore.shopList" :key="index" />
+      <template v-if="shopStore.filters[index]?.children">
+        <div v-for="(cItem, cIndex) in shopStore.filters[index]?.children" :key="cIndex">
+          <CourseList
+            v-if="menuValue === cItem.value"
+            :type="cItem.value"
+            :courseList="shopStore.shopList"
+            :key="index"
+          />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -213,4 +283,61 @@ const handleClickTab = (val: any) => {
 :deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
   color: #535353 !important;
 }
+.mobile-tab-box {
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  margin-bottom: 15px;
+  .item {
+    padding: 10px;
+    position: relative;
+    &.active {
+      span {
+        color: #eda023;
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background: #eda023;
+        width: 100%;
+        height: 3px;
+        border-radius: 3px;
+        z-index: 9;
+      }
+    }
+    .child {
+      position: absolute;
+      top: 40px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #fff;
+      padding: 3px 8px;
+      z-index: 999;
+      box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+      border-radius: 5px;
+      &::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid #fff;
+      }
+      .child-item {
+        font-size: 12px;
+        white-space: nowrap;
+        padding: 5px 0;
+        &.active {
+          color: #eda023;
+        }
+      }
+    }
+  }
+}
 </style>

src/stores/shop.ts

@@ -5,6 +5,7 @@ interface ShopFilter {
   value: string
   children?: any
   courseList: any
+  isActive?: boolean
 }
 type ShopListItem = Record<string, any>