AIClass/src/views/programming/ProgrammingCourset.vue

<!-- 编程课列表内容 -->
<template>
  <div class="programming-content">
    <!-- 标题部分 -->
    <div class="top-box">
      <!-- 返回按钮 -->
      <div class="top-left-box">
        <div class="top-left-inner-box">
          <!-- 左侧返回图标 -->
          <el-icon class="left-icon" @click="goBackIndex"><ArrowLeftBold /></el-icon>
          <span class="left-text">返回</span>
        </div>
      </div>
      <!-- 标题 -->
      <div class="top-center-box">
        <div class="top-center-inner-box" style="background-image: url('./src/assets/programming/list_title.png');">
          <span>{{ pageTitle }}</span>
        </div>
      </div>
      <!-- 课程提示 -->
      <div class="top-right-box">
        <div class="top-right-inner-box">
          <div class="course-info-box">{{ originalCourseTitle }}</div>
        </div>
      </div>
    </div>

    <!-- 课程部分 -->
    <div class="lower-box">
      <div class="content-box">
        <!-- 动态渲染课程内容 -->
        <div 
          v-for="item in courseItems" 
          :key="item.id"
          :class="item.positionClass"
          @click="handleCourseItemClick(item)"
        >
          <div class="box-content">
            <img :src="item.image" :alt="item.title" class="box-image" />
            <div class="box-text">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 视频和编程界面 -->
    <Interface v-if="showVideo" :courseData="selectedCourseData" :courseList="resData" @closeVideo="showVideo = false" />

  </div>
</template>

<script setup>
// 返回图标
import { ArrowLeftBold } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
// 导入路由
import { useRouter, useRoute } from 'vue-router';
// 导入接口
import { TopicType } from '@/api/programming/index.js'
// 导入图片
import  explanation  from '@/assets/programming/explanation.png'
import  practice  from '@/assets/programming/practice.png'
import  summary  from '@/assets/programming/summary.png'

import Interface from './Interface.vue'


// 获取路由实例
const router = useRouter()
const route = useRoute()
// 页面标题
const pageTitle = ref('')
// 保存原始的课程ID和标题
const originalCourseId = ref('')
const originalCourseTitle = ref('')
// 主题ID（从ProgrammingList页面传递过来）
const topicId = ref('')
// 控制视频界面显示
const showVideo = ref(false) 
// 动态课程项数据
const courseItems = ref([])
// 当前选中的课程数据
const selectedCourseData = ref(null)
// 保存原始API返回的数据
const resData = ref([])

// 组件挂载时获取路由参数设置标题
onMounted(() => {
  // 检查路由参数中是否有courseTitle
  const courseTitle = route.query.courseTitle
  if (courseTitle) {
    // 设置页面标题
    pageTitle.value = courseTitle
  }
  // 获取当前主题ID
  topicId.value = route.query.topicId
  
  // 保存原始的课程ID和标题，返回时使用
  originalCourseId.value = route.query.originalCourseId
  originalCourseTitle.value = route.query.originalCourseTitle
  
  // 获取到topicId后，再调用TopicType接口
  if (topicId.value) {
    TopicType(topicId.value).then(res => {
      console.log(topicId.value, res);
      if (res && res.data && Array.isArray(res.data)) {
        // 保存原始API返回的数据
        resData.value = res.data;
        // 创建映射，保持原有的图片和位置样式
        const positionMap = {
          1: { image: explanation, positionClass: 'left-content-box' },
          2: { image: practice, positionClass: 'center-content-box' },
          3: { image: summary, positionClass: 'right-content-box' }
        }
        // 遍历接口返回的数据，设置课程项
        res.data.forEach((item, index) => {
          // 每个课程项都对应位置样式和图片
          const positionIndex = (index % 3) + 1
          const positionInfo = positionMap[positionIndex]
          courseItems.value.push({
            id: item.id,
            title: item.bcName,
            image: positionInfo.image,
            positionClass: positionInfo.positionClass,
            contentType: item.bcContentType
          })
        })
      }
    })
  }
})

// 处理课程项点击事件
const handleCourseItemClick = (item) => {
  if (item.contentType === 'video' || item.contentType === 'blockly') {
    showVideo.value = true
    // 查找并保存完整的课程数据
    const fullCourseData = resData.value.find(course => course.id === item.id)
    if (fullCourseData) {
      selectedCourseData.value = fullCourseData
    }
  }
}

// 返回编程课列表
const goBackIndex = () => {
  // 隐藏视频和游戏界面
  showVideo.value = false
  // 返回时携带原始的课程参数，使用categoryId保持与ProgrammingList.vue中参数名一致
  router.push({
    path: '/programminglist',
    query: {
      categoryId: originalCourseId.value,
      courseTitle: originalCourseTitle.value
    }
  })
}
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.programming-content{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('@/assets/programming/list_bg03.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}

.top-box {
  height: 20%;
  display: flex;
}

.top-left-box,
.top-right-box {
  flex: 1;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-center-box {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-center-inner-box{
  width: 100%;
  height: 100%;
  background-size: 70%; 
  background-position: 50% 80%;
  background-repeat: no-repeat;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  span{
      font-size: rpx(15);
      color: white;
  }
}

.top-left-inner-box{
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  width: 100%;
  height: 100%;
  .left-icon{
    font-size: rpx(14);
    color: white;
    padding-left: rpx(20);
    cursor: pointer;
  }
  .left-text{
    font-size: rpx(14);
    color: white;
    padding-left: rpx(10);
    cursor: pointer;
  }
}

.top-right-inner-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: rpx(20);
  .course-info-box {
    width: rpx(60);
    height: rpx(20);
    background-color: rgb(255, 255, 255);
    border-radius: rpx(15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #45300b;
    font-size: rpx(10);
  }
}

.lower-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.content-box {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/programming/track.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.left-content-box, .center-content-box, .right-content-box {
  flex: 1;
  height: 40%; /* 高度缩小 */
  margin: 0 rpx(10);
  border-radius: rpx(40);
  background-color: rgba(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 rpx(5) rpx(10) rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}

/* 位置调整 */
.left-content-box {
  position: absolute;
  left: 5%;
  top: 10%; /* 偏上 */
  width: calc(20% - rpx(10));
}

.center-content-box {
  position: absolute;
  left: 48%;
  transform: translateX(-50%);
  bottom: 15%; /* 偏下 */
  width: calc(20% - rpx(10));
}

.right-content-box {
  position: absolute;
  right: 5%;
  top: 10%; /* 偏上 */
  width: calc(20% - rpx(10));
}

/* 内容样式 */
.box-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* 鼠标悬停放大效果 */
.left-content-box:hover,
.right-content-box:hover{
  transform: scale(1.1);
}
.center-content-box:hover {
  transform: translateX(-50%) scale(1.1);
}
.box-image {
  width: 100%;
  height: 90%;
  object-fit: contain;
}

.box-text {
  width: 100%;
  height: 20%;
  line-height: 20%;
  font-size: rpx(13);
  color: #333;
  text-align: center;
}
</style>