代码优化

src/modules/shop/components/ContactDialog.vue

@@ -28,7 +28,6 @@ const handleCancel = () => {
       title="上课方式"
     >
       <div class="buy_alert">
-        <!-- <img src="https://webapp-pub.ezijing.com/project_online/fi/icon_contact.png" alt="" /> -->
         <div class="alert_con">
           <img src="https://webapp-pub.ezijing.com/project_online/fi/contact_wx.png" class="con_img" />
           <div class="con_desc">请联系小秘书：13263110169(同微信)</div>

src/modules/shop/components/CourseFooter.vue

@@ -6,9 +6,6 @@ const user = useUserStore()
 const { mobile } = useDevice()
 const router = useRouter()
 const props = defineProps({
-  payStatus: {
-    type: String
-  },
   shopItem: {
     type: Object
   }
@@ -17,7 +14,7 @@ const buyDialogVisible = ref(false)
 
 const handleBuyCourse = () => {
   if (user.isLogin) {
-    if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
+    if (props.shopItem?.isBuy === true) {
       if (props.shopItem?.category === 'system_course') {
         buyDialogVisible.value = true
       } else {
@@ -37,7 +34,7 @@ const handleBuyCourse = () => {
 </script>
 <template>
   <div class="detail_footer" v-if="!mobile">
-    <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
+    <div class="left_status" v-if="shopItem?.isBuy === true">已购买</div>
     <template v-else>
       <div class="footer_left">
         <div class="left_tit">总学费</div>
@@ -49,11 +46,11 @@ const handleBuyCourse = () => {
       </div>
     </template>
     <div class="footer_btn" @click="handleBuyCourse">
-      {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
+      {{ shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
     </div>
   </div>
   <div class="detail_footer" v-else>
-    <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
+    <div class="left_status" v-if="shopItem?.isBuy === true">已购买</div>
     <template v-else>
       <div class="footer_left" v-if="shopItem?.type === '课程包'">
         <div class="left_tit">
@@ -72,7 +69,7 @@ const handleBuyCourse = () => {
 
     <div class="footer_btn" @click="handleBuyCourse">
       <div class="btn_buy">
-        {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
+        {{ shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
       </div>
     </div>
   </div>

src/modules/shop/components/CourseListItem.vue

 <script setup lang="ts">
 import ContactDialog from '../components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
-import { useUserStore } from '@/stores/user'
 const { mobile } = useDevice()
-const user = useUserStore()
-
 const router = useRouter()
 const buyDialogVisible = ref(false)
 
@@ -14,20 +11,20 @@ defineProps({
   }
 })
 // 查看详情
-const handleDatail = (item: any) => {
+const handleDetail = (item: any) => {
   router.push({
     path: `/shop/detail/${item}`
   })
 }
 const handleBuy = (courseItem: any) => {
-  if (courseItem?.isBuy === true) {
-    if (courseItem?.is_new === true) {
+  if (courseItem?.isBuy) {
+    if (courseItem?.is_new) {
       buyDialogVisible.value = true
     } else {
       window.open('https://fi-learning.ezijing.com')
     }
   } else {
-    if (courseItem?.is_free === true) {
+    if (courseItem?.is_free) {
       buyDialogVisible.value = true
     } else {
       router.push(`/shop/pay/${courseItem.id}`)
@@ -39,14 +36,14 @@ const handleBuy = (courseItem: any) => {
 <template>
   <div class="main_tab">
     <div class="tab_con">
-      <div class="con_left" @click="handleDatail(courseItem?.id)">
+      <div class="con_left" @click="handleDetail(courseItem?.id)">
         <div class="left_img">
           <img :src="courseItem?.image_url" class="left_img" />
         </div>
         <div class="left_type">{{ courseItem?.type }}</div>
       </div>
       <div class="con_right">
-        <div class="right_top" @click="handleDatail(courseItem?.id)">
+        <div class="right_top" @click="handleDetail(courseItem?.id)">
           <div class="top_use">
             <div class="use_icon">适用人群</div>
             <div class="use_tips">{{ courseItem?.for_people }}</div>
@@ -57,17 +54,17 @@ const handleBuy = (courseItem: any) => {
           </div>
         </div>
         <div class="right_bottom">
-          <div class="bottom_price" v-if="!mobile && courseItem?.price !== 0">
+          <div class="bottom_price" v-if="!mobile && !courseItem?.is_free">
             <div class="price_icon">¥</div>
             <div class="price_num">{{ courseItem?.price }}</div>
           </div>
-          <div class="bottom_price" v-if="!mobile && courseItem?.price === 0">
+          <div class="bottom_price" v-if="!mobile && courseItem?.is_free">
             <div class="price_icon">免费</div>
           </div>
           <div class="bottom_btn">
-            <div class="btn_detail" v-if="!mobile" @click="handleDatail(courseItem?.id)">查看详情</div>
+            <div class="btn_detail" v-if="!mobile" @click="handleDetail(courseItem?.id)">查看详情</div>
             <div class="btn_buy" @click="handleBuy(courseItem)">
-              {{ courseItem?.isBuy === true || courseItem?.category === 'free_course' ? '立即学习' : '立即购买' }}
+              {{ courseItem?.isBuy === true || courseItem?.is_free ? '立即学习' : '立即购买' }}
             </div>
           </div>
         </div>

src/modules/shop/components/DetailBanner.vue

@@ -2,16 +2,11 @@
 import ShareDialog from './ShareDialog.vue'
 import ContactDialog from '../components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
-import { useUserStore } from '@/stores/user'
 
-const user = useUserStore()
 const { mobile } = useDevice()
 const props = defineProps({
   shopItem: {
     type: Object
-  },
-  payStatus: {
-    type: String
   }
 })
 const router = useRouter()
@@ -31,23 +26,19 @@ const shareTit = computed(() => {
 })
 // 购买课程
 const handleBuyCourse = () => {
-  if (user.isLogin) {
-    if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
-      if (props.shopItem?.is_new === true) {
+  if (props.shopItem?.isBuy) {
+    if (props.shopItem?.is_new) {
       buyDialogVisible.value = true
     } else {
       window.open('https://fi-learning.ezijing.com')
     }
   } else {
-      if (props.shopItem?.is_free === true) {
+    if (props.shopItem?.is_free) {
       buyDialogVisible.value = true
     } else {
       router.push(`/shop/pay/${props.shopItem?.id}`)
     }
   }
-  } else {
-    window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
-  }
 }
 // 控制复制弹窗显示
 const handleShare = () => {
@@ -124,9 +115,9 @@ const handleCopyLink = () => {
   </div>
   <div class="detail_buy">
     <div class="buy_left">
-      <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
+      <div class="left_status" v-if="shopItem?.isBuy">已购买</div>
       <template v-else>
-        <div class="left_price" v-if="shopItem?.price !== 0">
+        <div class="left_price" v-if="!shopItem?.is_free">
           <div class="price_icon">¥</div>
           <div class="price_num">{{ shopItem?.price }}</div>
         </div>
@@ -135,12 +126,12 @@ const handleCopyLink = () => {
         </div>
       </template>
       <div class="left_tip">
-        <div class="tip1 tip" v-if="shopItem?.price !== 0">支付安全</div>
+        <div class="tip1 tip" v-if="shopItem?.is_free">支付安全</div>
         <div class="tip2 tip">课程回放</div>
       </div>
     </div>
     <div class="buy_right" @click="handleBuyCourse" v-if="!mobile">
-      {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
+      {{ shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
     </div>
   </div>
   <div class="detail_info" v-if="mobile">

src/modules/shop/views/Index.vue

@@ -63,28 +63,25 @@ const changeMenuChildTab = function (item: any) {
     <div class="shop_con">
       <div class="con_tab">
         <el-menu :default-active="activeIndex" mode="horizontal" menu-trigger="click">
-          <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" :popper-offset="20">
-            <template #title>{{ shopStore.filters[3].label }} </template>
+          <template v-for="(item, index) in shopStore.filters" :key="index">
+            <template v-if="item?.children && item?.children.length">
+              <el-sub-menu :index="(index + 1).toString()" :popper-offset="20">
+                <template #title>{{ item.label }} </template>
                 <el-menu-item
-              :index="'4' + (index + 1)"
-              v-for="(item, index) in shopStore.filters[3]?.children"
-              :key="index"
-              @click="handleClickTab(item.value)"
-              >{{ item.label }}</el-menu-item
+                  :index="((index + 1).toString() + (index1 + 1)).toString()"
+                  v-for="(it, index1) in item.children"
+                  :key="index1"
+                  @click="handleClickTab(it.value)"
+                  >{{ it.label }}</el-menu-item
                 >
               </el-sub-menu>
-          <el-menu-item index="5" @click="handleClickTab(shopStore.filters[4].value)"
-            >{{ shopStore.filters[4].label }}
+            </template>
+            <template v-else>
+              <el-menu-item :index="(index + 1).toString()" @click="handleClickTab(item.value)"
+                >{{ item.label }}
               </el-menu-item>
+            </template>
+          </template>
         </el-menu>
         <CourseList :type="type" :courseList="shopStore.shopList" />
       </div>

src/modules/shop/views/View.vue

@@ -10,74 +10,53 @@ import RecommendCourse from '../components/RecommendCourse.vue'
 import CourseFooter from '../components/CourseFooter.vue'
 import { useShopStore } from '@/stores/shop'
 import { useDevice } from '@/composables/useDevice'
-
+import { storeToRefs } from 'pinia'
 const { mobile } = useDevice()
 const shopStore = useShopStore()
-const route = useRoute()
-const payStatus: any = ref(route.query.payStatus)
-const courseItem: any = ref([]) // 课程所属课程包
-courseItem.value = shopStore.shopList.filter(
-  (item: any) => item.type === '课程包' && item.child_ids.includes(shopStore.shopItem?.id)
-)
+const { shopItem } = storeToRefs(shopStore)
 </script>
 
 <template>
   <div class="course_detail" v-if="!mobile">
-    <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
+    <DetailBanner :shopItem="shopItem" />
     <div class="detail_con">
       <div class="con_left">
         <IncludeCourseCard
-          v-if="
-            shopStore.shopItem?.type === '课程' &&
-            shopStore.shopItem?.category !== 'system_course' &&
-            shopStore.shopItem?.category !== 'free_course'
-          "
-          :courseItem="courseItem"
+          :courseItem="shopItem?.course_list"
+          v-if="shopItem?.type === '课程' && shopItem?.course_list.length"
         />
         <div
           class="left_course"
-          v-if="
-            shopStore.shopItem?.type === '课程包' ||
-            shopStore.shopItem?.category === 'system_course' ||
-            shopStore.shopItem?.category === 'free_course'
-          "
+          v-if="shopItem?.type === '课程包' || ['system_course', 'free_course'].includes(shopItem?.category)"
         >
-          <CourseIntrouduce :shopItem="shopStore.shopItem" />
-          <CourseFor :shopItem="shopStore.shopItem" />
-          <CourseCatalogPC v-if="shopStore.shopItem?.type === '课程包'" :shopItem="shopStore.shopItem" />
+          <CourseIntrouduce :shopItem="shopItem" />
+          <CourseFor :shopItem="shopItem" />
+          <CourseCatalogPC v-if="shopItem?.type === '课程包'" :shopItem="shopItem" />
         </div>
       </div>
       <div class="con_right">
-        <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list"  /> -->
+        <!-- <TeacherCard :lecturerList="shopItem?.lecturer_list"  /> -->
         <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
       </div>
     </div>
-    <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type == '课程包'" />
+    <CourseFooter :shopItem="shopItem" v-if="shopItem?.type == '课程包'" />
   </div>
   <div class="course_detail" v-else>
-    <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
+    <DetailBanner :shopItem="shopItem" />
     <IncludeCourseCard
-      v-if="
-        shopStore.shopItem?.type === '课程' &&
-        shopStore.shopItem?.category !== 'system_course' &&
-        shopStore.shopItem?.category !== 'free_course'
-      "
-      :courseItem="courseItem"
-    />
-    <div class="detail_con">
-      <CourseIntrouduce
-        :shopItem="shopStore.shopItem"
-        v-if="
-          shopStore.shopItem?.type === '课程包' ||
-          shopStore.shopItem?.category !== 'system_course' ||
-          shopStore.shopItem?.category !== 'free_course'
-        "
+      :courseItem="shopItem?.course_list"
+      v-if="shopItem?.type === '课程' && shopItem?.course_list.length > 0"
     />
-      <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
-      <CourseCatalogH5 :shopItem="shopStore.shopItem" v-if="shopStore.shopItem?.type === '课程包'" />
+    <div
+      class="detail_con"
+      v-if="shopItem?.type === '课程包' || ['system_course', 'free_course'].includes(shopItem?.category)"
+    >
+      <CourseIntrouduce :shopItem="shopItem" />
+      <!-- <TeacherCard :lecturerList="shopItem?.lecturer_list" /> -->
+      <CourseCatalogH5 :shopItem="shopItem" v-if="shopItem?.type === '课程包'" />
     </div>
     <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
-    <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" />
+    <CourseFooter :shopItem="shopItem" />
   </div>
 </template>
 <style lang="scss" scoped>

src/stores/shop.ts

@@ -43,20 +43,12 @@ export const useShopStore = defineStore('shop', () => {
   const shopRelatedList = computed(() => {
     if (shopItem.value?.category === 'free_course') {
       return shopList.value.filter(item => item.category === 'system_course' && !item.is_test)
-    } else if (shopItem.value?.type === '课程包') {
-      return shopList.value.filter(
-        item => item.type === shopItem.value?.type && !item.is_test && item.id !== shopItem.value?.id
-      )
     } else {
-      return shopList.value.filter(
-        item =>
-          item.type === shopItem.value?.type &&
-          !item.is_test &&
-          item.id !== shopItem.value?.id &&
-          item.category === shopItem.value?.category
+      const list = shopList.value.filter(
+        item => item.type === shopItem.value?.type && !item.is_test && item.id !== shopItem.value?.id
       )
+      return shopItem.value?.type === '课程包' ? list : list.filter(item => item.category === shopItem.value?.category)
     }
   })
-
   return { filters, list, shopList, shopItem, shopRelatedList }
 })