ali_ai_learn_web/src/pages/LearningSystem/LearningSystem.vue

<template>
  <div class="LearningSystem container-height">
    <div v-if="!isChildRoute">
      <div :style="{height: carouselHeight}">
        <div style="width:100%;position: absolute;top: 60px;left: 0;">
          <el-carousel :height="carouselHeight" style="width: 100%;">
            <el-carousel-item v-for="(item,index) in 3" :key="index">
              <img
                :src="`https://baomiai.oss-cn-shanghai.aliyuncs.com/static/learn-0${index+1}.png`"
                style="width:100%"
                @load="onImageLoad"
              />
            </el-carousel-item>
            <!-- <el-carousel-item>
              <img
                :src="learnIcon"
                style="width:100%"
                @load="onImageLoad"
              />
            </el-carousel-item> -->
            
          </el-carousel>
        </div>
      </div>
      <Breadcrumb />
      <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
        <div class="typeList flex-between typeborder" :class="{isShow:isShowStudyStage}">
          <div class="gray font_size14 typeName">{{$t('common.studyStage')}}：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.studyStage === ''}"
            @click="searchFom.studyStage = '';getList('init');"
            :key="-1">
              {{$t('common.all')}}
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in bus_study_stage" :key="item.dictValue"
             :class="{'active':searchFom.studyStage === item.dictValue}"
             @click="searchFom.studyStage = item.dictValue;getList('init');">
              {{item.dictLabel}}
            </div>
          </div>
          <div>
            <el-link type="primary" v-if="!isShowStudyStage" @click="isShowStudyStage = true;">
              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
            <el-link type="primary" v-else @click="isShowStudyStage = false;">
              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
          </div>
        </div>
        <div class="typeList flex-between typeborder" :class="{isShow:isShowCourseCategory}">
          <div class="gray font_size14 typeName">{{$t('common.courseCategory')}}：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.courseCategory === ''}"
            @click="searchFom.courseCategory = '';getList('init');"
            :key="-1">
              {{$t('common.all')}}
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in bus_course_category" :key="item.dictValue"
             :class="{'active':searchFom.courseCategory === item.dictValue}"
             @click="searchFom.courseCategory = item.dictValue;getList('init');">
              {{item.dictLabel}}
            </div>
          </div>
          <div>
            <el-link type="primary" v-if="!isShowCourseCategory" @click="isShowCourseCategory = true;">
              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
            <el-link type="primary" v-else @click="isShowCourseCategory = false;">
              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
          </div>
        </div>
        <div class="typeList flex-between" :class="{isShow:isShowSkillTag}">
          <div class="gray font_size14 typeName">{{$t('common.skillTag')}}：</div>
          <div class="flex_1 gap10">
            <div class="font_size14 typeItem"  :class="{'active':searchFom.skillTag === ''}"
            @click="searchFom.skillTag = ''; getList('init');"
            :key="-1">
              {{$t('common.all')}}
            </div>
            <div class="font_size14 typeItem" 
             v-for="item in bus_skill_tag" :key="item.dictValue"
             :class="{'active':searchFom.skillTag === item.dictValue}"
             @click="searchFom.skillTag = item.dictValue; getList('init');">
              {{item.dictLabel}}
            </div>
          </div>
          <div>
            <el-link type="primary" v-if="!isShowSkillTag" @click="isShowSkillTag = true;">
              {{$t('common.expand')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
            <el-link type="primary" v-else @click="isShowSkillTag = false;">
              {{$t('common.collapse')}}<el-icon><ArrowDown /></el-icon>
            </el-link>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <div class="course-list mt20">
        <div class="course-grid">
          <div v-for="(item, index) in list" :key="index" class="course-item list_item_animation box_shadow_card">
            <div class="bg_color_f5 coverImg" @click.stop.prevent="goDetail(item)" >
              <img :src="item.coverImageUrl" alt="" class="coverImg" />
            </div>
            <div class="padding16">
              <div class="font_size18 bold">
                {{item.courseTitle}}
              </div> 
              <div class="mt10 line1 gray font_size13">
                {{item.courseIntro}}
              </div>
              <div class="flex-center-between mt10">
                <div class="gap5">
                  <img :src="viewIcon" alt="" style="width:16px;height:16px">
                  <div>{{item.viewCount}} {{ $t('common.renkanguo') }}</div>
                </div>
                <div class="gap5 gradient border_radius_4 cursor-pointer xuexi" @click.stop.prevent="goDetail(item)">
                  <img :src="playIcon" alt="" style="width:13px;height:15px">
                  <div>{{$t('common.lijixuexi')}}</div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- 分页 -->
      <!-- 替换原有的分页代码 -->
      <Pagination 
        :total="listTotal"
        :page-size="searchFom.pageSize"
        :current-page="searchFom.pageNum"
        @page-change="handlePageChange"
      />
    </div>
    <router-view />
  </div>
</template>

<script setup>
  import viewIcon from '@/assets/imgs/view.png'
  import playIcon from '@/assets/imgs/bofang.png'

  import CourseCard from '@/components/course-card.vue'
  import Pagination from '@/components/Pagination.vue'

  import { getCategoryListTree } from '@/api/category.js'
  import { getCourseList } from '@/api/course.js'
  import { getDictType } from '@/api/common.js'

  import { isLogin,openFullScreenLoading } from '@/utils/util.js'
  import { useI18n } from 'vue-i18n' 
  const { t } = useI18n() 


  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter();
  const route = useRoute();
  import { ref, computed, reactive, onMounted, inject } from 'vue'
  //获取参数
  const query = route.query
  const categoryId = ref(query.categoryId || '');
  const activePlatform = ref(query.activePlatform || '');
  //获取当前路由路径
  // const currentPath = ref(router.currentRoute.value.path)
  const isChildRoute = computed(() => {
    return route.matched.length > 1
  });
  // 监听图片加载完成，动态设置轮播图高度
  const carouselHeight = ref('auto')
  const onImageLoad = (event) => {
    const img = event.target
    const aspectRatio = img.naturalWidth / img.naturalHeight
    const containerWidth = img.offsetWidth
    const calculatedHeight = containerWidth / aspectRatio
    carouselHeight.value = calculatedHeight + 'px'
  }

  const openLoginDialog = inject('openLoginDialog')

  // 学习阶段
  const isShowStudyStage = ref(false);
  // 课程分类
  const isShowCourseCategory = ref(false);
  // 技能标签
  const isShowSkillTag = ref(false);



  // 一级分类列表
  const bus_study_stage = ref([]);
  const bus_course_category = ref([]);
  const bus_skill_tag = ref([]);
  // 活动平台

  // 添加分页相关数据
  const list = ref([]);
  const listTotal = ref(0);
  const searchFom = reactive({
    studyStage: '',
    courseCategory: '',
    skillTag: '',
    pageNum: 1,
    pageSize: 10,
    orderByColumn: 'courseId',
    isAsc: 'desc'
  })

  onMounted(() => {
    getList();
    getDictTypeFn('bus_study_stage');
    getDictTypeFn('bus_course_category');
    getDictTypeFn('bus_skill_tag');
  })

   // 列表
  const getList = async (type) => {
    if(type === 'init'){
      searchFom.pageNum = 1
    }
    // 打开loading
    const loading = openFullScreenLoading();
    const res = await getCourseList(searchFom)
    // 关闭loading
    loading.close();
    if(res.code === 200){
      list.value = res.rows || [];
      listTotal.value = res.total || 0;
    }
  }
  const handlePageChange = (page) => {
    searchFom.pageNum = page
    // 这里可以添加获取数据的逻辑
    console.log('当前页:', page)
    getList();
  }

  const goDetail = (item) => {
    //判断是否登录
    if(!isLogin({callback: openLoginDialog,t})){
      return;
    }
    //增加参数名称
    router.push({
      path: `/learning-system/detail/${item.courseId}`,
      query: {
        courseId: item.courseId,
        metaTitle: item.courseTitle || '课程详情'
      }
    })
  };

  // 获取课程标签
  //学习阶段  bus_study_stage
  //教程分类  bus_course_category
  //技能标签  bus_skill_tag
  const getDictTypeFn = (dictType) => {
    getDictType({dictType}).then(res => {
      switch (dictType) {
        case 'bus_study_stage':
          bus_study_stage.value = res.rows || [];
          break;
        case 'bus_course_category':
          bus_course_category.value = res.rows || [];
          break;
        case 'bus_skill_tag':
          bus_skill_tag.value = res.rows || [];
          break;
      }
    })
  };

  
</script>

<style scoped lang="scss">
.LearningSystem {
  .typeList{
    padding: 20px 0;
    height: 70px;
    overflow: hidden;
    &.isShow{
      height: auto;
    }
    &.typeborder{
      border-bottom: 1px dashed #DCDFE6;
    }
    .typeName{
      margin-top: 6px;
      min-width: 80px;
      white-space: nowrap;
    }
    .typeItem{
      margin: 4px 8px;
      cursor: pointer;
      padding: 4px 8px;
      &.active{
        background: rgba(45,113,255,0.1);
        border-radius: 4px 4px 4px 4px;
        
        color: $primary-color;
        font-weight: 600;
      }
    }
  }
  .course-item{
    width: 345.5px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    .coverImg{
      width: 100%;
      height: 204px;
    }
  }
  .xuexi{
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
}
</style>