update

src/modules/shop/views/Index.vue

@@ -24,59 +24,37 @@ watchEffect(() => {
   }
 })
 // h5的tab
-let menuValue = $ref('')
+// tab选中值
+let tabValue = $ref('')
 onMounted(() => {
-  clearActive()
   const defaultMenu = route.query?.type || ''
-  shopStore.filters = shopStore.filters.reduce((a: any, b: any) => {
-    if (b.value === defaultMenu) {
-      b.isActive = true
-    } else {
-      if (b.children) {
-        b.children.map((i: any) => i.value === defaultMenu && (i.isActive = true))
-        b.children.find((i: any) => i.isActive) && (b.isActive = true)
-      }
-    }
-    a.push(b)
-    return a
-  }, [])
-  menuValue = defaultMenu as string
+  tabValue = defaultMenu as string
 })
 
+// menu下拉框显示
 let childMenuShow = $ref(false)
-const menuTab = function (item: any) {
-  if (item.value === 'PRP') {
-    window.open('https://prp.ezijing.com')
-    window.location.reload()
-  }
-  if (!item.children) {
-    clearActive()
-    item.isActive = true
-    childMenuShow = false
-    menuValue = item.value
-  } else {
-    childMenuShow = !childMenuShow
+
+const changeMenuTab = function (item: any) {
+  switch (item.value) {
+    case 'PAA':
+      childMenuShow = !childMenuShow
+      break
+    case 'PRP':
+      window.open('https://prp.ezijing.com')
+      break
+    default:
+      tabValue = item.value
+      childMenuShow = false
   }
 }
 
-const childMenuTab = function (item: any, cItem: any) {
-  clearActive()
-  item.isActive = true
-  cItem.isActive = true
-  menuValue = cItem.value
+// 点击下拉框
+const changeMenuChildTab = function (item: any) {
+  tabValue = item.value
   setTimeout(() => {
     childMenuShow = false
   }, 100)
 }
-
-const clearActive = function () {
-  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))
-    }
-  }
-}
 </script>
 
 <template>
@@ -116,15 +94,17 @@ const clearActive = function () {
     <img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
     <div class="mobile-tab-box">
       <div
-        :class="`item ${shopStore.filters[index].isActive && 'active'}`"
+        :class="`item ${item.children
+    ? item.children.find((i: any) => i.value === tabValue) && 'active'
+    : item.value === tabValue && 'active'}`"
         v-for="(item, index) in shopStore.filters"
         :key="index"
       >
-        <span @click="menuTab(item)">{{ item.label }}</span>
+        <span @click="changeMenuTab(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'}`"
+            @click="changeMenuChildTab(cItem)"
+            :class="`child-item ${tabValue === cItem.value && 'active'}`"
             v-for="(cItem, cIndex) in shopStore.filters[index]?.children"
             :key="cIndex"
           >
@@ -134,11 +114,11 @@ const clearActive = function () {
       </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" />
+      <CourseList v-if="tabValue === 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"
+            v-if="tabValue === cItem.value"
             :type="cItem.value"
             :courseList="shopStore.shopList"
             :key="index"