classroom/src/views/curriculum/curriculumDetail.vue

<!--
* @FileDescription: 课程详情
* @Author: 黄琪勇
* @Date:2024-04-01 16:27:48
-->
<template>
   <div class="curriculumDetail">
      <div class="close" @click="close"></div>
      <div v-loading="loading" class="curriculumDetailCon">
         <img class="imgMid" src="@/img/curriculum/mid.png" />
         <div class="curriculumDetailBox">
            <div class="teachingObjectives">
               <div class="head">
                  <div class="leftTit">
                     <img src="@/img/curriculum/jxmb.png" />
                     <div>教学目标</div>
                  </div>
                  <div v-if="coursewareShow" class="rightBtn" @click="handleSetUpCourseware(props.modalData.id)">
                     <div>{{ curriculumDetailData.id ? "更换课件" : "配置课件" }}</div>
                     <img src="@/img/curriculum/jt1.png" />
                  </div>
               </div>
               <div class="content">
                  <ElScrollbar class="elScrollbar">
                     <div class="title" v-for="tit in curriculumDetailData.targetDesc.split('\n')" :key="tit">{{ tit }}</div>
                  </ElScrollbar>
                  <el-empty
                     v-if="!curriculumDetailData.targetDesc && !loading"
                     class="empty"
                     :image="require('@/img/layout/empty.png')"
                     description="暂无教学目标"
                  />
               </div>
            </div>
         </div>
         <div class="curriculumDetailBox">
            <div class="knowledgePoints">
               <div class="head">
                  <div class="points">
                     <img src="@/img/curriculum/zsd.png" />
                     <div>知识点</div>
                  </div>
               </div>
               <div class="content">
                  <ElScrollbar class="elScrollbar">
                     <courseCollapse :courseList="curriculumDetailData.pointList" @handleClick="handleCourseClick" />
                  </ElScrollbar>
                  <el-empty
                     v-if="!curriculumDetailData.pointList.length && !loading"
                     class="empty"
                     :image="require('@/img/layout/empty.png')"
                     description="暂无知识点"
                  />
               </div>
            </div>
         </div>
      </div>
      <div class="curriculumStart" v-if="['ING', 'UNDERWAY'].includes(statusVal) && !loading">
         <div class="startBtn" @click="handleStartClass(modalData.id)">开始上课</div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus"
import courseCollapse from "./components/courseCollapse"
import { useSetUpCourseware } from "./index"
import {
   getCourseScheduleDetail_gyt,
   getLessonCoursewareDetail_gyt,
   getCurrentCourseDetail_gym,
   getLessonCourseDetail_gym
} from "@/api/curriculum.api"
import { httpAjaxErrMsg } from "@/plugin/httpAjax"
import { ref, shallowRef, computed } from "vue"
import { handleStartClass_gyt, handleStartClass_gym, isONLINE_gym } from "./hooks/useStartClass"
import userStore from "@/store/modules/user"
import router from "@/router"

const userStoreHook = userStore()
const props = defineProps<{
   modalData: {
      id: string
   }
}>()
const emits = defineEmits<{
   (e: "onClose"): void
}>()

function close() {
   emits("onClose")
}
const loading = ref(false)
const statusVal = ref("") //课程状态 ING 和 UNDERWAY 代表可以上课
const teachModeVal = ref("") //课程类型 ONLINE课的时候提示去app
const coursewareFlagVal = ref(false) // 管乐团能否配置课件 coursewareFlag字段为true并且不是结束就能配置
const coursewareShow = computed(() => {
   if (userStoreHook.roles === "GYM") {
      return statusVal.value === "UNDERWAY"
   } else {
      return coursewareFlagVal.value && statusVal.value !== "COMPLETE"
   }
})
const curriculumDetailData = shallowRef<{
   pointList: any[]
   targetDesc: string
   id: string
}>({
   pointList: [],
   targetDesc: "",
   id: ""
})

getCurriculumDetailData()
function getCurriculumDetailData() {
   userStoreHook.roles === "GYM" ? getCurriculumDetailData_gym() : getCurriculumDetailData_gyt()
}
/* 处理管乐迷 */
function getCurriculumDetailData_gym() {
   loading.value = true
   httpAjaxErrMsg(getCurrentCourseDetail_gym, props.modalData.id).then(res => {
      if (res.code === 200) {
         const { coursewareDetailId, courseStatus, teachMode } = res.data || {}
         statusVal.value = courseStatus
         teachModeVal.value = teachMode
         if (coursewareDetailId) {
            httpAjaxErrMsg(getLessonCourseDetail_gym, coursewareDetailId).then(resData => {
               loading.value = false
               if (resData.code === 200) {
                  const { lessonTargetDesc, id, knowledgePointList } = resData.data || {}
                  curriculumDetailData.value = {
                     pointList: knowledgePointList || [],
                     targetDesc: lessonTargetDesc,
                     id
                  }
               }
            })
         } else {
            loading.value = false
         }
      } else {
         loading.value = false
      }
   })
}
/* 处理管乐团 */
function getCurriculumDetailData_gyt() {
   loading.value = true
   httpAjaxErrMsg(getCourseScheduleDetail_gyt, props.modalData.id).then(res => {
      if (res.code === 200) {
         const { lessonCoursewareDetailId, status, coursewareFlag } = res.data || {}
         statusVal.value = status
         coursewareFlagVal.value = coursewareFlag
         if (lessonCoursewareDetailId) {
            httpAjaxErrMsg(getLessonCoursewareDetail_gyt, lessonCoursewareDetailId).then(resData => {
               loading.value = false
               if (resData.code === 200) {
                  const { lessonTargetDesc, id, knowledgePointList } = resData.data || {}
                  curriculumDetailData.value = {
                     pointList: knowledgePointList || [],
                     targetDesc: lessonTargetDesc,
                     id
                  }
               }
            })
         } else {
            loading.value = false
         }
      } else {
         loading.value = false
      }
   })
}

// 开始上课
function handleStartClass(id: string) {
   if (userStoreHook.roles === "GYM") {
      if (isONLINE_gym(teachModeVal.value)) {
         return
      }
      handleStartClass_gym(id)
   } else {
      handleStartClass_gyt(id)
   }
}

// 选择更换课件
function handleSetUpCourseware(id: string) {
   useSetUpCourseware(id, () => {
      //选择课件成功后的回调
      // 刷新数据
      getCurriculumDetailData()
   })
}
function handleCourseClick(item: any) {
   const url = router.resolve({
      name: "coursewarePlay",
      params: { id: curriculumDetailData.value.id },
      query: {
         materialId: item.id
      }
   }).href
   window.open(url, "_blank")
}
</script>

<style lang="scss" scoped>
.curriculumDetail {
   width: 100%;
   height: 100%;
   padding: 20px 20px 30px 20px;
   display: flex;
   flex-direction: column;
   .close {
      position: absolute;
      top: -9px;
      right: -9px;
      width: 47px;
      height: 49px;
      cursor: pointer;
      background: url("@/img/useDialogConfirm/close.png") no-repeat;
      background-size: cover;
      z-index: 1;
      &:hover {
         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
         background-size: cover;
      }
   }
   .curriculumDetailCon {
      flex-grow: 1;
      overflow: hidden;
      display: flex;
      position: relative;
      & > :deep(.el-loading-mask) {
         border-radius: 35px;
      }
      .imgMid {
         width: 62px;
         height: 470px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         z-index: 1;
      }
      .curriculumDetailBox {
         width: 50%;
         height: 100%;
         background: #fff2e1;
         border-radius: 35px;
         padding: 10px;
         overflow: hidden;
         &:nth-child(3) {
            margin-left: 10px;
         }
         .teachingObjectives,
         .knowledgePoints {
            width: 100%;
            height: 100%;
            background: #ffffff;
            border-radius: 35px;
            .content {
               position: relative;
               padding-top: 18px;
               padding-left: 18px;
               height: calc(100% - 57px);
               & > :deep(.elScrollbar) {
                  .el-scrollbar__view {
                     width: 100%;
                  }
                  .el-scrollbar__wrap {
                     overflow-x: hidden;
                  }
               }
               &:deep(.empty) {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  .el-empty__image {
                     width: 278px;
                  }
               }
            }
         }
         .teachingObjectives {
            padding: 16px 16px 20px;
            .head {
               width: 100%;
               height: 57px;
               background: #fff2e1;
               border-radius: 12px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0 18px;
               .leftTit {
                  display: flex;
                  align-items: center;
                  & > img {
                     width: 27px;
                     height: 27px;
                  }
                  & > div {
                     margin-left: 8px;
                     font-weight: 500;
                     font-size: 24px;
                     color: #333333;
                  }
               }
               .rightBtn {
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  &:hover {
                     opacity: $opacity-hover;
                  }
                  & > img {
                     margin-left: 4px;
                     width: 10px;
                     height: 17px;
                  }
                  & > div {
                     margin-left: 8px;
                     font-weight: 500;
                     font-size: 20px;
                     color: #f67146;
                  }
               }
            }
            .title {
               line-height: 34px;
               font-weight: 400;
               font-size: 18px;
               color: #333333;
            }
         }
         .knowledgePoints {
            padding: 16px 0 20px 16px;
            .head {
               margin-right: 33px;
               height: 57px;
               background: #fff2e1;
               border-radius: 12px;
               display: flex;
               align-items: center;
               padding: 0 18px;
               .points {
                  display: flex;
                  align-items: center;
                  & > img {
                     width: 28px;
                     height: 27px;
                  }
                  & > div {
                     margin-left: 8px;
                     font-weight: 500;
                     font-size: 24px;
                     color: #333333;
                  }
               }
            }
            .content {
               & > :deep(.elScrollbar) {
                  .el-scrollbar__view {
                     padding-right: 33px;
                  }
               }
            }
         }
      }
   }
   .curriculumStart {
      flex-shrink: 0;
      padding-top: 20px;
      display: flex;
      justify-content: center;
      .startBtn {
         width: 363px;
         height: 68px;
         background: linear-gradient(180deg, #ffffff 0%, #ffdbc1 100%);
         box-shadow: 4px 6px 0px 0px rgba(236, 102, 52, 0.45), inset 0px -8px 3px 0px rgba(254, 163, 138, 0.46);
         border-radius: 41px;
         font-weight: 500;
         font-size: 24px;
         color: #f67146;
         line-height: 68px;
         text-align: center;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
   }
}
</style>
<style lang="scss">
.h-modalFrame.curriculumDetail {
   /* prettier-ignore */
   --modalFrameTitHeight: 0PX;
   .modalFrameBox {
      background: linear-gradient(180deg, #ffdd5d 0%, #ffb93b 100%);
      border-radius: 57px;
      box-shadow: none;
      .modalFrameTitle {
         display: none;
      }
   }
}
</style>