项目优化

data/src/goods/1.js

@@ -26,7 +26,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '课程费用4300元/人，考试费/认证费/教材费合计680元/人',
     sku_id: '7014129405609902080',
-    spu_id: '7014129404863315968'
+    spu_id: '7014129404863315968',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -85,7 +88,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148152972673024',
-    spu_id: '7018148152758763520'
+    spu_id: '7018148152758763520',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -130,7 +136,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148297881681920',
-    spu_id: '7018148297659383808'
+    spu_id: '7018148297659383808',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -175,7 +184,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148355993763840',
-    spu_id: '7018148355750494208'
+    spu_id: '7018148355750494208',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -220,7 +232,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148401996890112',
-    spu_id: '7018148401443241984'
+    spu_id: '7018148401443241984',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -265,7 +280,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148446439735296',
-    spu_id: '7018148446183882752'
+    spu_id: '7018148446183882752',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -310,7 +328,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148498998558720',
-    spu_id: '7018148498784649216'
+    spu_id: '7018148498784649216',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -355,7 +376,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148559375564800',
-    spu_id: '7018148559153266688'
+    spu_id: '7018148559153266688',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅰ）',
@@ -400,6 +424,9 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018148600190337024',
-    spu_id: '7018148600018370560'
+    spu_id: '7018148600018370560',
+    is_free: false,
+    is_new: true,
+    is_test: false
   }
 ]

data/src/goods/2.js

@@ -26,7 +26,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '课程费用7000元/人，考试费/认证费/教材费合计680元/人',
     sku_id: '7014130347952570368',
-    spu_id: '7014130347390533632'
+    spu_id: '7014130347390533632',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -71,7 +74,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018152688009347072',
-    spu_id: '7018152687816409088'
+    spu_id: '7018152687816409088',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -116,7 +122,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018152880926359552',
-    spu_id: '7018152880771170304'
+    spu_id: '7018152880771170304',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -161,7 +170,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018152942817509376',
-    spu_id: '7018152942582628352'
+    spu_id: '7018152942582628352',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -206,7 +218,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018153065505095680',
-    spu_id: '7018153065345712128'
+    spu_id: '7018153065345712128',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -251,7 +266,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018153097708961792',
-    spu_id: '7018153097490857984'
+    spu_id: '7018153097490857984',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -296,7 +314,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018153138490179584',
-    spu_id: '7018153138276270080'
+    spu_id: '7018153138276270080',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -341,7 +362,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018153186531737600',
-    spu_id: '7018153185999060992'
+    spu_id: '7018153185999060992',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAP（Ⅱ）',
@@ -386,6 +410,9 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018153236649476096',
-    spu_id: '7018153236393623552'
+    spu_id: '7018153236393623552',
+    is_free: false,
+    is_new: false,
+    is_test: false
   }
 ]

data/src/goods/3.js

@@ -26,7 +26,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '课程费用12000元/人，考试费/认证费/教材费合计980元/人',
     sku_id: '7014130543629434880',
-    spu_id: '7014130542861877248'
+    spu_id: '7014130542861877248',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -71,7 +74,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018154999255400448',
-    spu_id: '7018154999087628288'
+    spu_id: '7018154999087628288',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -116,7 +122,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155082088710144',
-    spu_id: '7018155081837051904'
+    spu_id: '7018155081837051904',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -161,7 +170,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155124648312832',
-    spu_id: '7018155124409237504'
+    spu_id: '7018155124409237504',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -206,7 +218,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155185348280320',
-    spu_id: '7018155185100816384'
+    spu_id: '7018155185100816384',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -251,7 +266,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155221046001664',
-    spu_id: '7018155220798537728'
+    spu_id: '7018155220798537728',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -296,7 +314,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155258798931968',
-    spu_id: '7018155258513719296'
+    spu_id: '7018155258513719296',
+    is_free: false,
+    is_new: true,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -341,7 +362,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155294282743808',
-    spu_id: '7018155294085611520'
+    spu_id: '7018155294085611520',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -386,7 +410,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155330718662656',
-    spu_id: '7018155330425061376'
+    spu_id: '7018155330425061376',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -431,7 +458,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155379125125120',
-    spu_id: '7018155378894438400'
+    spu_id: '7018155378894438400',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -476,7 +506,10 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155430316605440',
-    spu_id: '7018155430069141504'
+    spu_id: '7018155430069141504',
+    is_free: false,
+    is_new: false,
+    is_test: false
   },
   {
     category: 'PAAM',
@@ -521,6 +554,9 @@ export default [
     class_id: '7017001355222974464',
     total_price_desc: '',
     sku_id: '7018155468174393344',
-    spu_id: '7018155467947900928'
+    spu_id: '7018155467947900928',
+    is_free: false,
+    is_new: false,
+    is_test: false
   }
 ]

src/modules/home/components/Course.vue

@@ -49,7 +49,7 @@ watchEffect(() => {
 
 const courseIndex = $ref(0)
 const handleDetail = (id: any) => {
-  router.push(`/shop/detail/${id}`)
+  router.push(`/shop/?id=${id}`)
 }
 const handleBuy = (item: any) => {
   if (item.isBuy === true) {
@@ -177,7 +177,6 @@ const handleBuy = (item: any) => {
           </h2>
           <img :src="item.imgH5" class="img1" />
           <div class="btn-box">
-            {{ item.isBuy }}
             <div class="btn1" @click="handleDetail(item.id)">查看详情</div>
             <div class="btn2" @click="handleBuy(item)">
               {{ item.isBuy === true ? '联系我们' : '立即购买' }}

src/modules/pay/views/Order.vue

@@ -5,7 +5,7 @@ import { getOrderList } from '../api'
 import { useDevice } from '@/composables/useDevice'
 import { useShopStore } from '@/stores/shop'
 import { useUserStore } from '@/stores/user'
-
+import ContactDialog from '../../shop/components/ContactDialog.vue'
 interface Props {
   id: string
 }
@@ -17,6 +17,8 @@ const { mobile } = useDevice()
 
 const router = useRouter()
 const route = useRoute()
+const buyDialogVisible = ref(false)
+
 const orderId = useStorage('order_detail_id', route.query.order_detail_id)
 const order = ref<Order>()
 async function getOrder() {
@@ -44,7 +46,11 @@ const start_time = getDateTime(0)
 const end_time = getDateTime(90)
 
 const handleStudy = () => {
-  window.open('https://fi-learning.ezijing.com')
+  if (shopItem?.is_new === true) {
+    buyDialogVisible.value = true
+  } else {
+    window.open('https://fi-learning.ezijing.com')
+  }
 }
 const handlePrev = () => {
   router.replace({ path: `/shop/detail/${shopItem?.id}` })
@@ -87,7 +93,8 @@ const handlePrev = () => {
       <div class="course_con">
         <img
           src="https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
-          @click="handlePrev" />
+          @click="handlePrev"
+        />
         <div class="course_dec">
           <div class="info_title">{{ shopItem?.title }}</div>
           <div class="info_date">有效期：{{ start_time }} 至 {{ end_time }}</div>
@@ -106,6 +113,7 @@ const handlePrev = () => {
         <div class="study_con" @click="handleStudy">开始学习</div>
       </div>
     </div>
+    <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
   </div>
 </template>
 

src/modules/shop/components/ContactDialog.vue

@@ -82,6 +82,7 @@ const handleCancel = () => {
   .buy_alert {
     display: flex;
     align-items: center;
+    justify-content: center;
     flex-direction: column;
     .alert_con {
       text-align: center;

src/modules/shop/components/CourseCatalogH5.vue

@@ -21,7 +21,7 @@ const handleDetail = (item: any) => {
     <div class="info_line"></div>
     <div class="info_con1" v-if="shopItem?.type === '课程包'">
       <div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index" @click="handleDetail(item)">
-        <img :src="item.image_url" />
+        <img :src="item.image_url" alt="" />
         <div class="list_info">
           <div class="tit">{{ item.title }}</div>
           <div class="hour">{{ item.course_hour }}</div>

src/modules/shop/components/CourseCatalogPC.vue

@@ -21,7 +21,7 @@ const handleDetail = (item: any) => {
     <div class="info_line"></div>
     <div class="info_con1" v-if="shopItem?.type === '课程包'">
       <div class="course_list" v-for="(item, index) in shopItem?.course_list" :key="index" @click="handleDetail(item)">
-        <img :src="item.image_url" />
+        <img :src="item.image_url" alt="" />
         <div class="list_info">
           <div class="tit">{{ item.title }}</div>
           <div class="hour">{{ item.course_hour }}</div>

src/modules/shop/components/CourseFooter.vue

@@ -18,14 +18,17 @@ const buyDialogVisible = ref(false)
 const handleBuyCourse = () => {
   if (user.isLogin) {
     if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
-      // window.open('https://fi-learning.ezijing.com')
-      buyDialogVisible.value = true
+      if (props.shopItem?.category === 'system_course') {
+        buyDialogVisible.value = true
+      } else {
+        window.open('https://fi-learning.ezijing.com')
+      }
     } else {
-      // if (props.shopItem?.type === '课程包') {
-      //   buyDialogVisible.value = true
-      // } else {
-      router.push(`/shop/pay/${props.shopItem?.id}`)
-      // }
+      if (props.shopItem?.category === 'free_course') {
+        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)}`
@@ -46,7 +49,7 @@ const handleBuyCourse = () => {
       </div>
     </template>
     <div class="footer_btn" @click="handleBuyCourse">
-      {{ payStatus === '4' || shopItem?.isBuy === true ? '联系我们' : '立即购买' }}
+      {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
     </div>
   </div>
   <div class="detail_footer" v-else>
@@ -55,27 +58,22 @@ const handleBuyCourse = () => {
       <div class="footer_left" v-if="shopItem?.type === '课程包'">
         <div class="left_tit">
           总学费 <span class="tit_price">¥{{ shopItem?.price }}</span>
-          <!-- <div class="footer_price">
-            <div class="price_icon">¥</div>
-            <div class="price_price">{{ shopItem?.price }}</div>
-          </div> -->
         </div>
         <div class="left_desc">{{ shopItem?.total_price_desc }}</div>
       </div>
       <div class="footer_left" v-else>
-        <div class="left_tit">课程价格</div>
+        <div class="left_tit1" v-if="shopItem?.is_free === true">免费</div>
+        <div class="left_tit" v-else>
+          课程价格
+          <span class="tit_price">¥{{ shopItem?.price }}</span>
+        </div>
       </div>
     </template>
 
-    <div class="footer_btn" @click="handleBuyCourse" v-if="payStatus === '4' || shopItem?.isBuy === true">
-      <div class="btn_buy">联系我们</div>
-    </div>
-    <div class="footer_btn" @click="handleBuyCourse" v-else>
-      <!-- <div class="footer_price">
-        <div class="price_icon">¥</div>
-        <div class="price_price">{{ shopItem?.price }}</div>
-      </div> -->
-      <div class="btn_buy">立即购买</div>
+    <div class="footer_btn" @click="handleBuyCourse">
+      <div class="btn_buy">
+        {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
+      </div>
     </div>
   </div>
   <ContactDialog v-model:buyDialogVisible="buyDialogVisible" />
@@ -165,9 +163,15 @@ const handleBuyCourse = () => {
       }
     }
     .footer_left {
+      .left_tit1 {
+        color: #aa1941;
+        font-size: 0.36rem;
+        font-weight: bold;
+      }
       .left_tit {
         font-size: 0.24rem;
         color: #333333;
+        font-weight: 500;
         .tit_price {
           color: #aa1941;
           font-size: 0.36rem;

src/modules/shop/components/CourseFor.vue

@@ -6,21 +6,18 @@ defineProps({
 })
 </script>
 <template>
-<div class="course_info">
+  <div class="course_info">
     <div class="course_info course_info1">
-        <div class="info_tit">适用人群</div>
-        <div class="info_line"></div>
-        <div class="info_con">{{ shopItem?.for_people }}</div>
+      <div class="info_tit">适用人群</div>
+      <div class="info_line"></div>
+      <div class="info_con">{{ shopItem?.for_people }}</div>
     </div>
- </div>
+  </div>
 </template>
 
-
-
 <style lang="scss" scoped>
-.is-pc{
-
-.course_info {
+.is-pc {
+  .course_info {
     margin-top: 40px;
 
     .info_tit {
@@ -44,29 +41,28 @@ defineProps({
       line-height: 32px;
       color: #666666;
     }
+  }
 }
-}
-.is-h5{
-    .course_info{
-    .info_tit{
+.is-h5 {
+  .course_info {
+    .info_tit {
       font-size: 0.28rem;
       font-weight: 500;
       color: #333333;
-
     }
-    .info_line{
+    .info_line {
       display: none;
     }
-    .info_con{
-      padding:0.2rem;
-      background: #F4F8FB;
+    .info_con {
+      padding: 0.2rem;
+      background: #f4f8fb;
       font-size: 0.24rem;
       font-weight: 400;
       line-height: 0.4rem;
       color: #666666;
-      margin-top:0.2rem;
+      margin-top: 0.2rem;
       border-radius: 0.16rem;
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

src/modules/shop/components/CourseList.vue

@@ -12,9 +12,7 @@ const page = reactive({ size: 10, currentPage: 1 })
 
 // 筛选之后的数据
 const courseFilterList = $computed(() => {
-  return props.courseList.filter(
-    (item: any) => item.category === props.type || props.type === ''
-  )
+  return props.courseList.filter((item: any) => item.category === props.type || props.type === '')
 })
 
 // 当前页的数据
@@ -23,8 +21,7 @@ const currentCourseList = $computed<any[]>(() => {
   const start = (page.currentPage - 1) * page.size
   // 结束位置 = 当前页 x 每页的大小
   const end = page.currentPage * page.size
-  const pageList = courseFilterList.slice(start, end)
-  return pageList
+  return courseFilterList.slice(start, end)
 })
 
 const paginationLayout = $computed(() => {
@@ -34,11 +31,7 @@ const paginationLayout = $computed(() => {
 
 <template>
   <div class="course_list">
-    <CourseListItem
-      :courseItem="item"
-      v-for="(item, index) in currentCourseList"
-      :key="index"
-    ></CourseListItem>
+    <CourseListItem :courseItem="item" v-for="(item, index) in currentCourseList" :key="index"></CourseListItem>
   </div>
   <div class="pagination" v-if="courseFilterList.length > page.size">
     <el-pagination

src/modules/shop/components/CourseListItem.vue

@@ -2,7 +2,6 @@
 import ContactDialog from '../components/ContactDialog.vue'
 import { useDevice } from '@/composables/useDevice'
 import { useUserStore } from '@/stores/user'
-
 const { mobile } = useDevice()
 const user = useUserStore()
 
@@ -23,14 +22,17 @@ const handleDatail = (item: any) => {
 const handleBuy = (courseItem: any) => {
   if (user.isLogin) {
     if (courseItem?.isBuy === true) {
-      // window.open('https://fi-learning.ezijing.com')
-      buyDialogVisible.value = true
+      if (courseItem?.is_new === true) {
+        buyDialogVisible.value = true
+      } else {
+        window.open('https://fi-learning.ezijing.com')
+      }
     } else {
-      // if (courseItem.type === '课程包') {
-      //   buyDialogVisible.value = true
-      // } else {
-      router.push(`/shop/pay/${courseItem.id}`)
-      // }
+      if (courseItem?.is_free === true) {
+        buyDialogVisible.value = true
+      } else {
+        router.push(`/shop/pay/${courseItem.id}`)
+      }
     }
   } else {
     window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
@@ -59,14 +61,17 @@ const handleBuy = (courseItem: any) => {
           </div>
         </div>
         <div class="right_bottom">
-          <div class="bottom_price" v-if="!mobile">
+          <div class="bottom_price" v-if="!mobile && courseItem?.price !== 0">
             <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="price_icon">免费</div>
+          </div>
           <div class="bottom_btn">
             <div class="btn_detail" v-if="!mobile" @click="handleDatail(courseItem?.id)">查看详情</div>
             <div class="btn_buy" @click="handleBuy(courseItem)">
-              {{ courseItem?.isBuy === true ? '联系我们' : '立即购买' }}
+              {{ courseItem?.isBuy === true || courseItem?.category === 'free_course' ? '立即学习' : '立即购买' }}
             </div>
           </div>
         </div>
@@ -112,6 +117,7 @@ const handleBuy = (courseItem: any) => {
           position: absolute;
           top: 10px;
           right: 10px;
+          text-align: center;
         }
       }
       .con_right {
@@ -125,7 +131,7 @@ const handleBuy = (courseItem: any) => {
             .use_icon {
               width: 67px;
               height: 21px;
-              background: #f4eadb;
+              background: rgba(244, 234, 219, 0.39);
               border-radius: 2px;
               font-size: 14px;
               font-weight: 400;
@@ -191,6 +197,7 @@ const handleBuy = (courseItem: any) => {
               line-height: 32px;
               color: #e2971d;
               cursor: pointer;
+              text-align: center;
             }
             .btn_buy {
               width: 96px;
@@ -203,6 +210,7 @@ const handleBuy = (courseItem: any) => {
               color: #ffffff;
               margin-left: 20px;
               cursor: pointer;
+              text-align: center;
             }
           }
         }
@@ -242,6 +250,7 @@ const handleBuy = (courseItem: any) => {
           position: absolute;
           top: 10px;
           right: 10px;
+          text-align: center;
         }
       }
       .con_right {

src/modules/shop/components/DetailBanner.vue

@@ -33,14 +33,17 @@ const shareTit = computed(() => {
 const handleBuyCourse = () => {
   if (user.isLogin) {
     if (props.payStatus === '4' || props.shopItem?.isBuy === true) {
-      // window.open('https://fi-learning.ezijing.com')
-      buyDialogVisible.value = true
+      if (props.shopItem?.is_new === true) {
+        buyDialogVisible.value = true
+      } else {
+        window.open('https://fi-learning.ezijing.com')
+      }
     } else {
-      // if (props.shopItem?.type === '课程包') {
-      //   buyDialogVisible.value = true
-      // } else {
-      router.push(`/shop/pay/${props.shopItem?.id}`)
-      // }
+      if (props.shopItem?.is_free === true) {
+        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)}`
@@ -100,6 +103,7 @@ const handleCopyLink = () => {
   <div class="detail_banner">
     <div class="banner_con">
       <img class="con_img" :src="shopItem?.image_url" />
+
       <template v-if="!mobile">
         <div class="con_info">
           <div class="info_tit">{{ shopItem?.title }}</div>
@@ -121,17 +125,22 @@ const handleCopyLink = () => {
   <div class="detail_buy">
     <div class="buy_left">
       <div class="left_status" v-if="payStatus === '4' || shopItem?.isBuy === true">已购买</div>
-      <div class="left_price" v-else>
-        <div class="price_icon">¥</div>
-        <div class="price_num">{{ shopItem?.price }}</div>
-      </div>
+      <template v-else>
+        <div class="left_price" v-if="shopItem?.price !== 0">
+          <div class="price_icon">¥</div>
+          <div class="price_num">{{ shopItem?.price }}</div>
+        </div>
+        <div class="left_price" v-else>
+          <div class="price_icon">免费</div>
+        </div>
+      </template>
       <div class="left_tip">
-        <div class="tip1 tip">支付安全</div>
+        <div class="tip1 tip" v-if="shopItem?.price !== 0">支付安全</div>
         <div class="tip2 tip">课程回放</div>
       </div>
     </div>
     <div class="buy_right" @click="handleBuyCourse" v-if="!mobile">
-      {{ payStatus === '4' || shopItem?.isBuy === true ? '联系我们' : '立即购买' }}
+      {{ payStatus === '4' || shopItem?.isBuy === true || shopItem?.is_free === true ? '立即学习' : '立即购买' }}
     </div>
   </div>
   <div class="detail_info" v-if="mobile">
@@ -436,6 +445,7 @@ const handleCopyLink = () => {
       margin-top: 0.2rem;
       padding: 0.15rem 1.2rem;
       display: flex;
+      justify-content: space-around;
       align-items: center;
       border-radius: 0.08rem;
 

src/modules/shop/components/IncludeCourseCard.vue

@@ -127,8 +127,7 @@ defineProps({
       img {
         width: 1.6rem;
         height: 0.9rem;
-        border-radius: 0.06rem;
-        object-fit: cover;
+        border-radius: 0.05rem;
       }
       .course_info {
         margin-left: 0.14rem;

src/modules/shop/components/RecommendCourse.vue

@@ -182,7 +182,7 @@ const handleDetail = item => {
         .img {
           // width: 2.2rem;
           height: 1.4rem;
-          border-radius: 6px;
+          border-radius: 0.06rem;
         }
         .item_right {
           margin-left: 0.21rem;
@@ -192,6 +192,8 @@ const handleDetail = item => {
             font-size: 0.28rem;
             font-weight: 500;
             color: #333333;
+            // width: 3.69rem;
+            // white-space: wrap;
           }
           .right_price {
             display: flex;

src/modules/shop/views/Index.vue

@@ -2,16 +2,20 @@
 import CourseList from '../components/CourseList.vue'
 import { useShopStore } from '@/stores/shop'
 import { useDevice } from '@/composables/useDevice'
-
+const route = useRoute()
 const { mobile } = useDevice()
 const shopStore = useShopStore()
-
+let activeName = $ref('0')
+let activeNameH5 = $ref(0)
 const handleTabClick = (tab: any) => {
   if (tab.index === '4') {
     window.open('https://prp.ezijing.com')
     window.location.reload()
   }
 }
+watchEffect(() => {
+  if (route.query.id) !mobile ? (activeName = route.query.id.toString()) : (activeNameH5 = Number(route.query.id))
+})
 </script>
 
 <template>
@@ -19,8 +23,8 @@ const handleTabClick = (tab: any) => {
     <img src="https://webapp-pub.ezijing.com/project_online/paa/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.slice(0, 4)" :key="index" lazy>
+        <el-tabs class="my-tabs" @tab-click="handleTabClick" v-model="activeName">
+          <el-tab-pane v-for="(item, index) in shopStore.filters" :key="index" lazy>
             <template #label>
               {{ item.label }}
             </template>
@@ -33,8 +37,8 @@ const handleTabClick = (tab: any) => {
   <div class="main_shop" v-else>
     <img src="https://webapp-pub.ezijing.com/project_online/paa/shop_banner.jpg" class="shop_banner" />
 
-    <van-tabs>
-      <van-tab :title="item.label" v-for="(item, index) in shopStore.filters.slice(0, 4)" :key="index" lazy>
+    <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" />
       </van-tab>
     </van-tabs>

src/modules/shop/views/View.vue

@@ -10,6 +10,7 @@ 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()
 const shopStore = useShopStore()
 const route = useRoute()
@@ -18,15 +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 === '课程包') {
-    // 课程包推荐课程
-    return shopStore.shopRelatedList
-  } else {
-    // 单一课程推荐的课程
-    return shopStore.shopRelatedListOther
-  }
-})
 </script>
 
 <template>
@@ -34,31 +26,58 @@ const recommendCourse = computed(() => {
     <DetailBanner :shopItem="shopStore.shopItem" :payStatus="payStatus" />
     <div class="detail_con">
       <div class="con_left">
-        <div>
-          <IncludeCourseCard v-if="shopStore.shopItem?.type !== '课程包'" :courseItem="courseItem" />
-          <div class="left_course" v-if="shopStore.shopItem?.type === '课程包'">
-            <CourseIntrouduce :shopItem="shopStore.shopItem" />
-            <CourseFor v-if="!mobile" :shopItem="shopStore.shopItem" />
-            <CourseCatalogPC :shopItem="shopStore.shopItem" />
-          </div>
+        <IncludeCourseCard
+          v-if="
+            shopStore.shopItem?.type === '课程' &&
+            shopStore.shopItem?.category !== 'system_course' &&
+            shopStore.shopItem?.category !== 'free_course'
+          "
+          :courseItem="courseItem"
+        />
+        <div
+          class="left_course"
+          v-if="
+            shopStore.shopItem?.type === '课程包' ||
+            shopStore.shopItem?.category === 'system_course' ||
+            shopStore.shopItem?.category === 'free_course'
+          "
+        >
+          <CourseIntrouduce :shopItem="shopStore.shopItem" />
+          <CourseFor :shopItem="shopStore.shopItem" />
+
+          <CourseCatalogPC v-if="shopStore.shopItem?.type === '课程包'" :shopItem="shopStore.shopItem" />
         </div>
       </div>
       <div class="con_right">
-        <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
-        <RecommendCourse :shopRelatedList="recommendCourse" />
+        <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list"  /> -->
+        <RecommendCourse :shopRelatedList="shopStore.shopRelatedList" />
       </div>
     </div>
     <CourseFooter :payStatus="payStatus" :shopItem="shopStore.shopItem" v-if="shopStore.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" />
+    <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'
+        "
+      />
       <!-- <TeacherCard :lecturerList="shopStore.shopItem?.lecturer_list" /> -->
-      <CourseCatalogH5 :shopItem="shopStore.shopItem" />
+      <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

+import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'
 import { defineStore } from 'pinia'
 import { useUserStore } from './user'
 interface ShopFilter {
   label: string
   value: string
+  children?: any
   courseList: any
+  isActive?: boolean
 }
 type ShopListItem = Record<string, any>
 
@@ -29,22 +32,32 @@ export const useShopStore = defineStore('shop', () => {
     if (found) {
       found.course_list =
         found.child_ids && found.child_ids.length
-          ? found.child_ids.map((id: string) => shopList.value.find(item => item.id === id))
-          : shopList.value.filter(item => item.child_ids?.includes(found.id))
+          ? found.child_ids
+              .map((id: string) => shopList.value.find(item => item.id === id))
+              .filter((it: any) => !it.is_test)
+          : shopList.value.filter(item => item.child_ids?.includes(found.id)).filter(it => !it.is_test)
     }
     return found
   })
 
   // 相关推荐商品列表
   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?.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
+      )
+    }
   })
 
-  return { filters, list, shopList, shopItem, shopRelatedList, shopRelatedListOther }
+  return { filters, list, shopList, shopItem, shopRelatedList }
 })