代码优化

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

 <script lang="ts" setup>
 import ContactDialog from '../components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
-import { useUserStore } from '@/stores/user'
-const user = useUserStore()
+
 const { mobile } = useDevice()
 const router = useRouter()
 const props = defineProps({
-  payStatus: {
-    type: String
-  },
   shopItem: {
     type: Object
   }
@@ -16,7 +12,7 @@ const props = defineProps({
 const buyDialogVisible = ref(false)
 
 const handleBuyCourse = () => {
-  if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
+  if (props.shopItem?.isBuy === true) {
     if (props.shopItem?.category === 'system_course') {
       buyDialogVisible.value = true
     } else {
@@ -29,7 +25,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>
@@ -41,11 +37,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 ? '立即学习' : '立即购买' }}
     </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">
@@ -54,7 +50,7 @@ const handleBuyCourse = () => {
         <div class="left_desc">{{ shopItem?.total_price_desc }}</div>
       </div>
       <div class="footer_left" v-else>
-        <div class="left_tit1" v-if="shopItem?.is_free === true">免费</div>
+        <div class="left_tit1" v-if="shopItem?.is_free">免费</div>
         <div class="left_tit" v-else>
           课程价格
           <span class="tit_price">¥{{ shopItem?.price }}</span>
@@ -64,7 +60,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 ? '立即学习' : '立即购买' }}
       </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 +12,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?.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 +37,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 +55,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?.isBuy === true || courseItem?.is_free ? '立即学习' : '立即购买' }}
             </div>
           </div>
         </div>

src/modules/shop/components/DetailBanner.vue

@@ -9,9 +9,6 @@ const { mobile } = useDevice()
 const props = defineProps({
   shopItem: {
     type: Object
-  },
-  payStatus: {
-    type: String
   }
 })
 const router = useRouter()
@@ -31,22 +28,18 @@ const shareTit = computed(() => {
 })
 // 购买课程
 const handleBuyCourse = () => {
-  if (user.isLogin) {
-    if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
-      if (props.shopItem?.is_new === true) {
-        buyDialogVisible.value = true
-      } else {
-        window.open('https://fi-learning.ezijing.com')
-      }
+  if (props.shopItem?.isBuy === true) {
+    if (props.shopItem?.is_new) {
+      buyDialogVisible.value = true
     } else {
-      if (props.shopItem?.is_free === true) {
-        buyDialogVisible.value = true
-      } else {
-        router.push(`/shop/pay/${props.shopItem?.id}`)
-      }
+      window.open('https://fi-learning.ezijing.com')
     }
   } else {
-    window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
+    if (props.shopItem?.is_free) {
+      buyDialogVisible.value = true
+    } else {
+      router.push(`/shop/pay/${props.shopItem?.id}`)
+    }
   }
 }
 // 控制复制弹窗显示
@@ -124,7 +117,7 @@ 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 === true">已购买</div>
       <template v-else>
         <div class="left_price" v-if="shopItem?.price !== 0">
           <div class="price_icon">¥</div>
@@ -140,7 +133,7 @@ const handleCopyLink = () => {
       </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 ? '立即学习' : '立即购买' }}
     </div>
   </div>
   <div class="detail_info" v-if="mobile">

src/modules/shop/views/Index.vue

@@ -14,7 +14,8 @@ const handleTabClick = (tab: any) => {
   }
 }
 watchEffect(() => {
-  if (route.query.id) !mobile ? (activeName = route.query.id.toString()) : (activeNameH5 = Number(route.query.id))
+  console.log(typeof route.query.id)
+  if (route.query.id) !mobile ? (activeName = route.query.id as string) : (activeNameH5 = Number(route.query.id))
 })
 </script>
 
@@ -36,7 +37,6 @@ watchEffect(() => {
   </div>
   <div class="main_shop" v-else>
     <img src="https://webapp-pub.ezijing.com/project_online/paa/shop_banner.jpg" class="shop_banner" />
-
     <van-tabs v-model:active="activeNameH5">
       <van-tab :title="item.label" v-for="(item, index) in shopStore.filters" :key="index" lazy>
         <CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />

src/modules/shop/views/View.vue

@@ -10,27 +10,22 @@ import RecommendCourse from '../components/RecommendCourse.vue'
 import CourseFooter from '../components/CourseFooter.vue'
 import { useShopStore } from '@/stores/shop'
 import { useDevice } from '@/composables/useDevice'
-
-const { mobile } = useDevice()
+import { storeToRefs } from 'pinia'
 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)
+const { mobile } = useDevice()
 </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 === '课程'" :courseItem="courseItem" />
-        <div class="left_course" v-if="shopStore.shopItem?.type === '课程包'">
-          <CourseIntrouduce :shopItem="shopStore.shopItem" />
-          <CourseFor :shopItem="shopStore.shopItem" />
-          <CourseCatalogPC v-if="shopStore.shopItem?.type === '课程包'" :shopItem="shopStore.shopItem" />
+        <IncludeCourseCard v-if="shopItem?.type === '课程'" :courseItem="shopItem?.course_list" />
+        <div class="left_course" v-if="shopItem?.type === '课程包'">
+          <CourseIntrouduce :shopItem="shopItem" />
+          <CourseFor :shopItem="shopItem" />
+          <CourseCatalogPC v-if="shopItem?.type === '课程包'" :shopItem="shopItem" />
         </div>
       </div>
       <div class="con_right">
@@ -38,18 +33,18 @@ courseItem.value = shopStore.shopList.filter(
         <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" />
-    <IncludeCourseCard v-if="shopStore.shopItem?.type === '课程'" :courseItem="courseItem" />
-    <div class="detail_con" v-if="shopStore.shopItem?.type === '课程包'">
-      <CourseIntrouduce :shopItem="shopStore.shopItem" />
+    <DetailBanner :shopItem="shopItem" />
+    <IncludeCourseCard v-if="shopItem?.type === '课程'" :courseItem="shopItem?.course_list" />
+    <div class="detail_con" v-if="shopItem?.type === '课程包'">
+      <CourseIntrouduce :shopItem="shopItem" />
       <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
-      <CourseCatalogH5 :shopItem="shopStore.shopItem" />
+      <CourseCatalogH5 :shopItem="shopItem" />
     </div>
     <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
-    <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" />
+    <CourseFooter :shopItem="shopItem" />
   </div>
 </template>
 <style lang="scss" scoped>

src/stores/shop.ts

@@ -41,19 +41,10 @@ export const useShopStore = defineStore('shop', () => {
 
   // 相关推荐商品列表
   const shopRelatedList = computed(() => {
-    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 }