fi的tab修改

data/src/goods/5.js

+export default [
+  {
+    category: 'free_course',
+    id: '5-1',
+    title: '如何全年持续成交大客户',
+    desc: '首席教练与一线实战伙伴，线上针对前线问题，共同研讨持续成交大客户的秘诀。有方法、有工具，有案例，有刨析。',
+    for_people: '从事金融服务业销售人员',
+    image_url: 'https://webapp-pub.ezijing.com/project_online/fi/paam_banner.png',
+    type: '课程',
+    price: 0,
+    lecturer_list: [
+      {
+        name: '张伟',
+        avatar: '',
+        title_list: ['清华五道口金融学院硕士生导师首席经济学家', '清华五道口金融学院硕士生导师首席经济学家']
+      }
+    ],
+    course_card: '知名导师专家',
+    course_compulsory: 6,
+    course_elective: 5,
+    course_chapter: '56',
+    course_total_hour: '80',
+    course_hour: '8课时',
+    course_id: '7016965100288344064',
+    class_id: '7017001355222974464',
+    total_price_desc: '课程费用12000元/人，考试费/认证费/教材费合计980元/人',
+    sku_id: '7014130543629434880',
+    spu_id: '7014130542861877248'
+  }
+]

data/src/shop.js

@@ -6,16 +6,30 @@ export const SHOP_FILTERS = [
     value: ''
   },
   {
-    label: 'PAAP(Ⅰ)认证系列课程',
-    value: 'PAAP（Ⅰ）'
+    label: '免费小课',
+    value: 'free_course'
   },
   {
-    label: 'PAAP(Ⅱ)认证系列课程',
-    value: 'PAAP（Ⅱ）'
+    label: '系统小课',
+    value: 'system_course'
   },
   {
-    label: 'PAAM认证系列课程',
-    value: 'PAAM'
+    label: 'PAA系列课程',
+    value: 'PAA',
+    children: [
+      {
+        label: 'PAAP(Ⅰ)认证系列课程',
+        value: 'PAAP（Ⅰ）'
+      },
+      {
+        label: 'PAAP(Ⅱ)认证系列课程',
+        value: 'PAAP（Ⅱ）'
+      },
+      {
+        label: 'PAAM认证系列课程',
+        value: 'PAAM'
+      }
+    ]
   },
   {
     label: 'PRP',

src/modules/shop/components/CourseList.vue

@@ -12,7 +12,11 @@ const page = reactive({ size: 10, currentPage: 1 })
 
 // 筛选之后的数据
 const courseFilterList = $computed(() => {
-  return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
+  if (props.type === 'PAA') {
+    return props.courseList
+  } else {
+    return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
+  }
 })
 
 // 当前页的数据

src/modules/shop/components/CourseListItem.vue

@@ -111,6 +111,7 @@ const handleBuy = (courseItem: any) => {
           position: absolute;
           top: 10px;
           right: 10px;
+          text-align: center;
         }
       }
       .con_right {
@@ -190,6 +191,7 @@ const handleBuy = (courseItem: any) => {
               line-height: 32px;
               color: #e2971d;
               cursor: pointer;
+              text-align: center;
             }
             .btn_buy {
               width: 96px;
@@ -202,6 +204,7 @@ const handleBuy = (courseItem: any) => {
               color: #ffffff;
               margin-left: 20px;
               cursor: pointer;
+              text-align: center;
             }
           }
         }
@@ -241,6 +244,7 @@ const handleBuy = (courseItem: any) => {
           position: absolute;
           top: 10px;
           right: 10px;
+          text-align: center;
         }
       }
       .con_right {

src/modules/shop/views/Index.vue

@@ -2,11 +2,13 @@
 import CourseList from '../components/CourseList.vue'
 import { useShopStore } from '@/stores/shop'
 import { useDevice } from '@/composables/useDevice'
-
 const { mobile } = useDevice()
 const shopStore = useShopStore()
-const handleTabClick = (tab: any) => {
-  if (tab.index === '4') {
+const activeIndex = ref('1')
+const type = ref('')
+const handleClickTab = (val: any) => {
+  type.value = val
+  if (val === 'PRP') {
     window.open('https://prp.ezijing.com')
     window.location.reload()
   }
@@ -18,14 +20,31 @@ const handleTabClick = (tab: any) => {
     <img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
     <div class="shop_con">
       <div class="con_tab">
-        <el-tabs class="my-tabs" @tab-click="handleTabClick">
-          <el-tab-pane v-for="(item, index) in shopStore.filters" :key="index" lazy>
-            <template #label>
-              {{ item.label }}
-            </template>
-            <CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
-          </el-tab-pane>
-        </el-tabs>
+        <el-menu :default-active="activeIndex" mode="horizontal">
+          <el-menu-item index="1" @click="handleClickTab(shopStore.filters[0].value)"
+            >{{ shopStore.filters[0].label }}
+          </el-menu-item>
+          <el-menu-item index="2" @click="handleClickTab(shopStore.filters[1].value)"
+            >{{ shopStore.filters[1].label }}
+          </el-menu-item>
+          <el-menu-item index="3" @click="handleClickTab(shopStore.filters[2].value)"
+            >{{ shopStore.filters[2].label }}
+          </el-menu-item>
+          <el-sub-menu index="4">
+            <template #title>{{ shopStore.filters[3].label }} </template>
+            <el-menu-item
+              :index="'4' + index"
+              v-for="(item, index) in shopStore.filters[3]?.children"
+              :key="index"
+              @click="handleClickTab(item.value)"
+              >{{ item.label }}</el-menu-item
+            >
+          </el-sub-menu>
+          <el-menu-item index="5" @click="handleClickTab(shopStore.filters[4].value)"
+            >{{ shopStore.filters[4].label }}
+          </el-menu-item>
+        </el-menu>
+        <CourseList :type="type" :courseList="shopStore.shopList" />
       </div>
     </div>
   </div>
@@ -57,49 +76,33 @@ const handleTabClick = (tab: any) => {
       box-sizing: border-box;
       .con_tab {
         margin-bottom: 20px;
-        :deep(.my-tabs) {
-          text-align: center;
-          box-sizing: border-box;
-          .el-tabs__active-bar,
-          .el-tabs__nav-wrap::after {
-            display: none;
-          }
-          .el-tabs__nav {
-            background: #ffffff;
-            box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
-            border-radius: 10px;
-            width: 1200px;
-            height: 76px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            border-radius: 6px;
-          }
-          .el-tabs__content {
-            overflow: inherit;
-          }
-          .el-tabs__nav-scroll {
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-          }
+        :deep(.el-menu) {
+          box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.1);
+          border-radius: 10px;
+          width: 1200px;
+          height: 76px;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          border-radius: 6px;
+        }
 
-          .el-tabs__item {
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-            padding: 9px 31px 10px 26px;
-            border-radius: 6px;
-            border-bottom: none;
-            font-size: 18px;
-            font-weight: 400;
-            color: #535353;
-            box-sizing: border-box;
+        :deep(.el-menu-item) {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          padding: 9px 31px 10px 26px;
+          border-radius: 6px;
+          border-bottom: none;
+          font-size: 18px;
+          font-weight: 400;
+          color: #535353;
+          box-sizing: border-box;
+          height: 50px;
 
-            &.is-active {
-              background-color: #e8c484;
-              color: #ffffff;
-            }
+          &.is-active {
+            background-color: #e8c484;
+            color: #ffffff;
           }
         }
       }
@@ -181,4 +184,33 @@ const handleTabClick = (tab: any) => {
   overflow: scroll;
   white-space: nowrap;
 }
+:deep(.el-dropdown) {
+  span {
+    font-size: 18px;
+  }
+}
+:deep(.el-menu--horizontal > .el-menu-item.is-active) {
+  background-color: #e8c484;
+  color: #fff !important;
+  border-bottom: none;
+}
+:deep(.el-sub-menu) {
+  font-size: 18px;
+  font-weight: 400;
+  color: #535353;
+}
+:deep(.el-sub-menu__title) {
+  font-size: 18px;
+  font-weight: 400;
+  color: #535353;
+}
+:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
+  background-color: #e8c484;
+  color: #fff !important;
+  border-bottom: none;
+  border-radius: 6px;
+}
+:deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
+  color: #535353 !important;
+}
 </style>

src/stores/shop.ts

@@ -3,6 +3,7 @@ import { useUserStore } from './user'
 interface ShopFilter {
   label: string
   value: string
+  children?: any
   courseList: any
 }
 type ShopListItem = Record<string, any>
@@ -37,12 +38,13 @@ export const useShopStore = defineStore('shop', () => {
 
   // 相关推荐商品列表
   const shopRelatedList = computed(() => {
-    return shopList.value.filter(item => item.category !== shopItem.value?.category && item.type==='课程包')
+    return shopList.value.filter(item => item.category !== shopItem.value?.category && item.type === '课程包')
   })
 
   const shopRelatedListOther = computed(() => {
     return shopList.value.filter(
-      (item: ShopListItem) => item.category === shopItem.value?.category && item.id !== shopItem.value?.id && item.type=== '课程'
+      (item: ShopListItem) =>
+        item.category === shopItem.value?.category && item.id !== shopItem.value?.id && item.type === '课程'
     )
   })