修改tab定位

src/modules/home/components/ProjectSystem.vue

@@ -10,6 +10,8 @@ interface List {
   h1: string
   card: {
     id: string
+    tabIndex: number | null
+    type: string
     img: string
     tit: string
     h5Img: string
@@ -29,6 +31,8 @@ const list: List[] = [
     card: [
       {
         id: '1',
+        tabIndex: 41,
+        type: 'PAAP（Ⅰ）',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_1.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-1.png',
         tit: '资产分析规划师(一级/二级)/ PAAP(I/II)',
@@ -45,6 +49,8 @@ const list: List[] = [
       },
       {
         id: '3',
+        tabIndex: 43,
+        type: 'PAAM',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_2.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-2.png',
         tit: '高级资产分析管理师 / PAAM',
@@ -61,6 +67,8 @@ const list: List[] = [
       },
       {
         id: '',
+        tabIndex: null,
+        type: '',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab1_3.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-1-3.png',
         tit: '公司金融管理师（CFM）',
@@ -85,6 +93,8 @@ const list: List[] = [
     card: [
       {
         id: '',
+        tabIndex: null,
+        type: '',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_1.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-2-1.png',
         tit: '金融保险高级经理人班',
@@ -101,6 +111,8 @@ const list: List[] = [
       },
       {
         id: '',
+        tabIndex: null,
+        type: '',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab2_2.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-2-2.png',
         tit: '金融保险董事长总裁班',
@@ -123,32 +135,10 @@ const list: List[] = [
     btnIconActive: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_hover.png',
     h1: '针对行业内所有相关人士，提供行业从业人员终身学习的底层逻辑和专业知识架构，建立系统思维，养成学习与从业的习惯，建立自我成长和职业发展的心智模式。',
     card: [
-      {
-        id: '5-1',
-        img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
-        h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
-        tit: '免费小课',
-        list: [
-          {
-            tit: '适用人群',
-            desc: '从事金融服务业销售人员'
-          }
-        ]
-      },
-      {
-        id: '4-1',
-        img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
-        h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
-        tit: '系统小课',
-        list: [
-          {
-            tit: '适用人群',
-            desc: '终身学习爱好者'
-          }
-        ]
-      },
       {
         id: '',
+        tabIndex: null,
+        type: '',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
         tit: '私人财富风险管理顾问 / PRP',
@@ -165,6 +155,8 @@ const list: List[] = [
       },
       {
         id: '',
+        tabIndex: null,
+        type: '',
         img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_2.png',
         h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-2.png',
         tit: '紫荆卓越保险理财规划师养成计划100天',
@@ -182,6 +174,34 @@ const list: List[] = [
             desc: '行业必备的专业知识、经营管理、服务技能、可持续发展理念，以及终身学习思维。'
           }
         ]
+      },
+      {
+        id: '',
+        tabIndex: 2,
+        type: 'free_course',
+        img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
+        h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
+        tit: '免费小课',
+        list: [
+          {
+            tit: '适用人群',
+            desc: '从事金融服务业销售人员'
+          }
+        ]
+      },
+      {
+        id: '',
+        tabIndex: 3,
+        type: 'system_course',
+        img: 'https://webapp-pub.ezijing.com/project_online/fi/tab3_1.png',
+        h5Img: 'https://webapp-pub.ezijing.com/project_online/fi/h5/system-3-1.png',
+        tit: '系统小课',
+        list: [
+          {
+            tit: '适用人群',
+            desc: '终身学习爱好者'
+          }
+        ]
       }
     ]
   }
@@ -192,8 +212,8 @@ const tab = function (e: number) {
   tabIndex = e
 }
 const handleDetail = (item: any) => {
-  if (item.id !== '') {
-    router.push(`/shop/detail/${item.id}`)
+  if (item.tabIndex !== null) {
+    router.push(`/shop/?activeIndex=${item.tabIndex}&type=${item.type}`)
   } else {
     ElMessage.warning('该课程暂未开通')
   }
@@ -213,7 +233,7 @@ const handleDetail = (item: any) => {
     </div>
     <div class="con_content">
       <el-tabs class="my-tabs">
-        <el-tab-pane v-for="fItem in list" :key="fItem.btnIcon">
+        <el-tab-pane v-for="fItem in list.slice(0, 2)" :key="fItem.btnIcon">
           <template #label>
             <img :src="fItem.btnIcon" class="icon" />
             <img :src="fItem.btnIconActive" class="active-icon" />
@@ -236,6 +256,53 @@ const handleDetail = (item: any) => {
           </div>
           <div class="content_btn" @click="router.push('/shop')">查看更多</div>
         </el-tab-pane>
+        <el-tab-pane v-for="fItem in list.slice(-1)" :key="fItem.btnIcon">
+          <template #label>
+            <img :src="fItem.btnIcon" class="icon" />
+            <img :src="fItem.btnIconActive" class="active-icon" />
+            <p>{{ fItem.btnName }}</p>
+          </template>
+          <div class="content_tit">
+            {{ fItem.h1 }}
+          </div>
+          <div class="content_part">
+            <div class="content_main1">
+              <div
+                class="main_list"
+                v-for="(item, index) in fItem.card.slice(0, 2)"
+                :key="index"
+                @click="handleDetail(item)"
+              >
+                <img :src="item.img" alt="" class="list_img1" />
+                <div class="list_tit">{{ item.tit }}</div>
+                <ul>
+                  <li class="list_desc" v-for="(it, index) in item.list" :key="index">
+                    <div class="desc_tit">{{ it.tit }}</div>
+                    <div class="desc_con">{{ it.desc }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="content_main2">
+              <div
+                class="main_list"
+                v-for="(item, index) in fItem.card.slice(-2)"
+                :key="index"
+                @click="handleDetail(item)"
+              >
+                <img :src="item.img" alt="" class="list_img1" />
+                <div class="list_tit">{{ item.tit }}</div>
+                <ul>
+                  <li class="list_desc" v-for="(it, index) in item.list" :key="index">
+                    <div class="desc_tit">{{ it.tit }}</div>
+                    <div class="desc_con">{{ it.desc }}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="content_btn" @click="router.push('/shop')">查看更多</div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -371,7 +438,7 @@ const handleDetail = (item: any) => {
       .content_main {
         margin-top: 29px;
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(3, 1fr);
         grid-column-gap: 30px;
 
         .main_list {
@@ -557,4 +624,70 @@ const handleDetail = (item: any) => {
     }
   }
 }
+:deep(.el-tab-pane:last-child) {
+  .content_part {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .content_main1 {
+    display: flex;
+
+    .main_list {
+      cursor: pointer;
+      background: rgba(255, 255, 255, 0.39);
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      padding: 15px;
+      box-sizing: border-box;
+      margin-right: 30px;
+      img {
+        width: 350px;
+      }
+    }
+  }
+  .content_main2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 20px;
+    .main_list {
+      cursor: pointer;
+      height: 275px;
+      background: rgba(255, 255, 255, 0.39);
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      padding: 15px;
+      img {
+        width: 350px;
+      }
+    }
+  }
+}
+
+.list_tit {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 34px;
+  color: #aa1941;
+  margin-top: 24px;
+  white-space: nowrap;
+}
+ul {
+  margin-top: 23px;
+  color: #c1ab85;
+  padding-left: 20px;
+  .list_desc {
+    list-style-type: square;
+    .desc_tit {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 34px;
+      color: #333333;
+    }
+    .desc_con {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 34px;
+      color: #666666;
+    }
+  }
+}
 </style>

src/modules/shop/views/Index.vue

@@ -7,15 +7,22 @@ const route = useRoute()
 const { mobile } = useDevice()
 const shopStore = useShopStore()
 let activeIndex = $ref('1')
-const type = ref('')
+let type = $ref('')
 const handleClickTab = (val: any) => {
-  type.value = val
+  type = val
   if (val === 'PRP') {
     window.open('https://prp.ezijing.com')
     window.location.reload()
   }
 }
-
+watchEffect(() => {
+  if (route.query.activeIndex) {
+    activeIndex = route.query.activeIndex.toString()
+  }
+  if (route.query.type) {
+    type = route.query.type.toString()
+  }
+})
 // tab
 let menuValue = $ref('')
 onMounted(() => {
@@ -23,7 +30,6 @@ onMounted(() => {
   let defaultMenu = ''
   const activeH5Index = route.query.activeIndex
   if (activeH5Index) {
-    activeIndex = activeH5Index?.toString()
     defaultMenu = activeH5Index === '2' ? 'free_course' : activeH5Index === '3' ? 'system_course' : ''
   }
   shopStore.filters.map((item: any) => item.value === defaultMenu && (item.isActive = true))
@@ -81,7 +87,7 @@ const clearActive = function () {
           <el-sub-menu index="4">
             <template #title>{{ shopStore.filters[3].label }} </template>
             <el-menu-item
-              :index="'4' + index"
+              :index="'4' + (index + 1)"
               v-for="(item, index) in shopStore.filters[3]?.children"
               :key="index"
               @click="handleClickTab(item.value)"

src/modules/shop/views/View.vue

@@ -19,17 +19,6 @@ const courseItem: any = ref([]) // 课程所属课程包
 courseItem.value = shopStore.shopList.filter(
   (item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
 )
-const recommendCourse = computed(() => {
-  if (shopStore.shopItem?.type === '课程包' && shopStore.shopItem?.category !== 'free_course') {
-    // 课程包推荐课程
-    return shopStore.shopRelatedList
-  } else if (shopStore.shopItem?.type === '课程' && shopStore.shopItem?.category !== 'free_course') {
-    // 单一课程推荐的课程
-    return shopStore.shopRelatedListOther
-  } else if (shopStore.shopItem?.category === 'free_course') {
-    return shopStore.shopList.filter(item => item.category === 'system_course')
-  }
-})
 </script>
 
 <template>
@@ -61,7 +50,7 @@ const recommendCourse = computed(() => {
       </div>
       <div class="con_right">
         <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list"  /> -->
-        <RecommendCourse :shopRelatedList="recommendCourse" />
+        <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
       </div>
     </div>
     <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type == '课程包'" />
@@ -88,7 +77,7 @@ const recommendCourse = computed(() => {
       <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
       <CourseCatalogH5 :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type === '课程包'" />
     </div>
-    <RecommendCourse :shopRelatedList="recommendCourse" />
+    <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
     <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" />
   </div>
 </template>

src/stores/shop.ts

@@ -39,15 +39,24 @@ export const useShopStore = defineStore('shop', () => {
 
   // 相关推荐商品列表
   const shopRelatedList = computed(() => {
-    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 === '课程'
-    )
+    if (shopItem.value?.type === '课程包') {
+      return shopList.value.filter(
+        item => item.category !== shopItem.value?.category && item.type === '课程包' && item.is_test === false
+      )
+    } else if (shopItem.value?.type === '课程') {
+      if (shopItem.value?.category === 'free_course') {
+        return shopList.value.filter(item => item.category === 'system_course' && item.is_test === false)
+      } else {
+        return shopList.value.filter(
+          item =>
+            item.category === shopItem.value?.category &&
+            item.id !== shopItem.value?.id &&
+            item.type === '课程' &&
+            item.is_test === false
+        )
+      }
+    }
   })
 
-  return { filters, list, shopList, shopItem, shopRelatedList, shopRelatedListOther }
+  return { filters, list, shopList, shopItem, shopRelatedList }
 })