classroom/src/views/homePage/components/curriculum/curriculum_gyt.vue

<!--
* @FileDescription: 管乐团课表
* @Author: 黄琪勇
* @Date:2024-03-29 17:31:26
-->
<template>
   <div class="curriculum_gyt">
      <div class="head">
         <div class="timeBox">
            <img class="timeImg" src="@/img/curriculum/sj.png" />
            <div class="time">{{ classData.classDate && format(classData.classDate) }}</div>
         </div>
         <div class="operateBox">
            <template v-if="classData.coursewareFlag && !classData.lessonCoursewareId && classData.status !== 'COMPLETE'">
               <img class="dangerImg" src="@/img/curriculum/jg.png" />
               <div class="operateBtn" @click="handleSetUpCourseware(classData.id)">配置课件</div>
            </template>
            <template v-else-if="classData.status === 'NOT_START'">
               <div class="noStart">未开始</div>
            </template>
            <template v-else-if="classData.status === 'ING'">
               <div class="ing">进行中</div>
            </template>
            <template v-else>
               <div class="end">已结束</div>
            </template>
         </div>
      </div>
      <div class="timeTitBox">
         {{ classData.startTime && format(classData.startTime, "hh:ii") }}-{{ classData.endTime && format(classData.endTime, "hh:ii") }}
      </div>
      <div class="nameTitBox">
         <ellipsisScroll :title="`${classData.className}-${classData.teacherName}`" />
      </div>
      <div class="schoolTitBox">
         <ellipsisScroll :title="'·' + classData.orchestraName + '·'" />
      </div>
      <div class="stateBox">
         <div>
            <img :src="classData.signIn ? require('@/img/curriculum/qd1.png') : require('@/img/curriculum/qd.png')" />
            <div :class="{ signIn: classData.signIn }">{{ classData.signIn ? "已签到" : "未签到" }}</div>
         </div>
         <div>
            <img :src="classData.signOut ? require('@/img/curriculum/qt1.png') : require('@/img/curriculum/qt.png')" />
            <div :class="{ signOut: classData.signOut }">{{ classData.signOut ? "已签退" : "未签退" }}</div>
         </div>
      </div>
      <div class="btnCon">
         <div class="btnDetail" @click="handleClickDetail(classData.id, classData)">查看详情</div>
         <div class="btnGoClass" v-if="classData.status === 'ING'" @click="handleStartClass(classData.id)">开始上课</div>
      </div>
   </div>
</template>

<script setup lang="ts">
import useDialogConfirm from "@/hooks/useDialogConfirm"
import { format } from "@/libs/tools"
import { useCurriculumDetail, useSetUpCourseware } from "@/views/curriculum"
import { handleStartClass_gyt } from "@/views/curriculum/hooks/useStartClass"
const emits = defineEmits<{
   (e: "update"): void
}>()
defineProps<{
   classData: Record<string, any>
}>()

// 开始上课
function handleStartClass(id: string) {
   handleStartClass_gyt(id)
}
//查看详情
function handleClickDetail(id: string, classData: any) {
   if (!classData.applyStatus && classData.status !== "ING") {
      useDialogConfirm({
         headImg: require("@/img/curriculum/ts4.png"),
         text: `该资源已失效`,
         btnShow: [true]
      })
      return
   }
   useCurriculumDetail(id)
}
// 配置课表
function handleSetUpCourseware(id: string) {
   useSetUpCourseware(id, () => {
      emits("update")
   })
}
</script>

<style lang="scss" scoped>
.curriculum_gyt {
   padding: 0 30px;
   .head {
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .timeBox {
         display: flex;
         align-items: center;
         .timeImg {
            width: 28px;
            height: 28px;
         }
         .time {
            margin-left: 8px;
            font-weight: 500;
            font-size: 24px;
            color: #777777;
         }
      }
      .operateBox {
         display: flex;
         align-items: center;
         .dangerImg {
            width: 24px;
            height: 24px;
         }
         .operateBtn {
            margin-left: 10px;
            font-weight: 500;
            font-size: 24px;
            color: #f44541;
            cursor: pointer;
            &:hover {
               opacity: $opacity-hover;
            }
         }
         .noStart {
            font-weight: 500;
            font-size: 24px;
            color: #777777;
         }
         .ing {
            font-weight: 500;
            font-size: 24px;
            color: #f67146;
         }
         .end {
            font-weight: 500;
            font-size: 24px;
            color: #aaaaaa;
         }
      }
   }
   .timeTitBox {
      text-align: center;
      margin-top: 68px;
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 52px;
      color: #f67146;
   }
   .nameTitBox {
      margin: 34px 30px 0;
      font-weight: 600;
      font-size: 25px;
      color: #333333;
      text-align: center;
      overflow: hidden;
   }
   .schoolTitBox {
      margin: 32px 38px 0;
      font-weight: 500;
      font-size: 22px;
      color: #777777;
      text-align: center;
      overflow: hidden;
   }
   .stateBox {
      margin-top: 76px;
      display: flex;
      justify-content: space-between;
      & > div {
         width: 216px;
         height: 65px;
         background: #f2f2f2;
         border-radius: 18px;
         display: flex;
         justify-content: center;
         align-items: center;
         & > img {
            width: 27px;
            height: 27px;
         }
         & > div {
            margin-left: 6px;
            font-weight: 500;
            font-size: 22px;
            color: #aaaaaa;
            &.signIn,
            &.signOut {
               color: #01c199;
            }
         }
      }
   }
   .btnCon {
      margin-top: 58px;
      display: flex;
      .btnGoClass,
      .btnDetail {
         flex-grow: 1;
         height: 74px;
         background: linear-gradient(180deg, #ffffff 0%, #ffdbc1 100%);
         box-shadow: 4px 5px 0px 0px rgba(236, 102, 52, 0.45), inset 0px -7px 3px 0px rgba(254, 163, 138, 0.46);
         border-radius: 37px;
         font-weight: 500;
         font-size: 24px;
         color: #f67146;
         line-height: 74px;
         text-align: center;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
      .btnGoClass {
         margin-left: 20px;
      }
   }
}
</style>