ali_ai_learn_web/src/pages/LearningSystem/LearningSystemDetail.vue

<template>
  <div class="LearningSystemDetail container-height">
    <div v-if="!isChildRoute">
      <Breadcrumb />
      <div>
        <div style="width:100%;position: absolute;top: 60px;left: 0;overflow: hidden;z-index: -1;">
          <div :style="{backgroundImage: `url(${info.coverImageUrl})`}" class="coverImageUrlBg">
            <div style="background-color: rgba(255, 255, 255, 0.5);width: 100%;height: 400px;"></div>
          </div>
        </div>
      </div>
      <div class="flex-between" >
        <img :src="info.coverImageUrl" alt="" class="border_radius_16" style="width: 500px; height: 280px;">
        <div class="flex_1 ml20">
          <div class="gap10">
            <el-button type="primary" class="font_size14" v-if="info.skillTagName">{{info.skillTagName}}</el-button>
            <div class="bold font_size30">{{info.courseTitle}}</div>
          </div>
          <div>
            <el-button class="font_size12" type="primary" size="small"  plain v-if="info.studyStageName">{{info.studyStageName}}</el-button>
            <el-button class="font_size12" type="primary" size="small" plain v-if="info.courseCategoryName">{{info.courseCategoryName}}</el-button>
          </div>
          <div class="gray font_size16 mt10 line2" :title="info.courseIntro">
            {{info.courseIntro}}
          </div>
        </div>
      </div>
      <div class="border_radius_16 gradient mt20 pt10">
        <div class="border_radius_16 bg_color_fff flex-center-between" style="padding:0 16px">
          <div class="color_price">
            <span class="bold font_size36">{{info.coursePrice}}</span>
            <span class="font_size18">{{$t('common.baomibi')}}</span>
          </div>
          <div class="flex-center-between" @click="goDetail(info)">
            <img :src="zuIcon" alt="" style="height:98px">
            <div class="gap5 gradient border_radius_4 cursor-pointer xuexi ml10">
              <img :src="playIcon" alt="" style="width:13px;height:15px">
              <div>{{$t('common.lijixuexi')}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-between mt20">
        <div class="flex_1 bg_color_fff padding16 border_radius_16 box_shadow_card mr20">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane :label="$t('common.kechengjieshao')" name="first">
              <CourseDescription :info="info" />
            </el-tab-pane>
            <el-tab-pane :label="$t('common.kechengmulu')" name="kechengmulu">
              <keep-alive>
                <CourseDirectory :info="info" formPage="LearningSystemDetail" :chapterId="info.listTimeChapterId"/>
              </keep-alive>
            </el-tab-pane>
            <el-tab-pane :label="$t('common.pinglun')" name="pinglun">
              <keep-alive>
                <Pinglun :info="info" />
              </keep-alive>
            </el-tab-pane>
            <el-tab-pane :label="$t('common.xuxibiji')" name="xuxibiji">
              <keep-alive>
                <Xuxibiji :info="info" />
              </keep-alive>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="detail_right bg_color_fff padding16 border_radius_16 box_shadow_card">
          <keep-alive>
            <OtherCourse :info="info"/>
          </keep-alive>
        </div>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script setup>
  import playIcon from '@/assets/imgs/bofang.png'
  import zuIcon from '@/assets/imgs/zu.png'
  import OtherCourse from './components/OtherCourse.vue'
  import CourseDescription from './components/CourseDescription.vue'
  import CourseDirectory from './components/CourseDirectory.vue'
  import Pinglun from './components/pinglun.vue'
  import Xuxibiji from './components/xuxibiji.vue'

  // 引入api
  import { getCourseDetail } from '@/api/course.js'
  import { confirmBuy } from '@/utils/util.js'
  import { useI18n } from 'vue-i18n' 
  const { t } = useI18n() 

  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
 
  //获取当前路由路径
  const isChildRoute = computed(() => {
    return route.matched.length > 2
  });


  import { ref, computed, onMounted, onActivated, watch } from 'vue'
  import { useAppStore } from '@/pinia/appStore'
  const appStore = useAppStore()

  const activeName = ref('first');

 

  //获取参数
  const query = route.query;
  const courseId = ref(route.params.courseId || '');
  const info = ref({})

  //监听route.params.courseId变化
  watch(() => route.params.courseId, (newVal, oldVal) => {
    courseId.value = newVal || '';
    if(newVal !== oldVal){
      getDetail();
    }
  })


  
  onMounted(() => {
   getDetail();
  });
  const getDetail = async () => {
     getCourseDetail({id: courseId.value}).then(res => {
      if(res.code === 200){
        info.value = res.data || {};
      }
    })
  };
  const goDetail = (item) => {
    //如果未支付，跳转到支付页面
    if(item.buyFlag == 0 ){
      confirmBuy({
        callback:getDetail,
        appStore,
        router,
        price:item.coursePrice,
        t,
        productId:item.courseId,
        orderType:'course_purchase',
        payMethod:'BMI'
      })
      return
    }
    //增加参数名称
    router.push({
      path: `/learning-system/detail/${item.courseId}/course/${item.courseId}`,
      query: {
        courseId: item.courseId,
        chapterId: item.listTimeChapterId || '',
        metaTitle: '课程详情'
      }
    })
  };


</script>

<style scoped lang="scss">
  .LearningSystemDetail{
    .line5 {
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      /* height: 84px; */
    }
    .coverImageUrlBg{
      background-size: cover;
      background-position: center;
      
      width: 100%;
      height: 400px;
      //背景模糊
      filter: blur(80px);
      opacity: 0.8;
    }
    .xuexi{
      color: #ffffff;
      padding: 14px 20px;
      border-radius: 10px;
      font-size: 14px;
    }
  }

</style>