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.status === 'ING' && !classData.lessonCoursewareId">
               <img class="dangerImg" src="@/img/curriculum/jg.png" />
               <div class="operateBtn">配置课件</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">查看详情</div>
         <div class="btnGoClass" v-if="classData.status === 'ING'" @click="handleStartClass(classData.id)">开始上课</div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { format } from "@/libs/tools"
import { getCourseScheduleDetail_gyt } from "@/api/curriculum.api"
import { httpAjaxErrMsg } from "@/plugin/httpAjax"
import useDialogConfirm from "@/hooks/useDialogConfirm"

defineProps<{
   classData: Record<string, any>
}>()

function handleStartClass(id: string) {
   httpAjaxErrMsg(getCourseScheduleDetail_gyt, id).then(res => {
      if (res.code === 200) {
         const { signIn, rollCall, lessonCoursewareId, startTime, endTime } = res.data
         if (!signIn) {
            useDialogConfirm({
               headImg: require("@/img/curriculum/ts2.png"),
               text: `您当前${format(startTime, "hh:ii")}-${format(endTime, "hh:ii")}的课程暂未签到，为避免考勤异常，请到APP进行签到。`,
               btnShow: [true]
            })
            return
         }
         if (!rollCall) {
            useDialogConfirm({
               headImg: require("@/img/curriculum/ts1.png"),
               text: `您当前${format(startTime, "hh:ii")}-${format(endTime, "hh:ii")}的课程暂未点名，请到APP进行点名。`,
               btnShow: [true]
            })
            return
         }
         if (!lessonCoursewareId) {
            useDialogConfirm({
               headImg: require("@/img/curriculum/ts3.png"),
               text: `该课程未配置课件，请配置课件。`,
               btnShow: [true]
            })
            return
         }
      }
   })
}
</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: 20px;
            color: #aaaaaa;
         }
      }
   }
   .timeTitBox {
      text-align: center;
      margin-top: 68px;
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 52px;
      color: #f67146;
   }
   .nameTitBox {
      margin-top: 34px;
      font-weight: 600;
      font-size: 25px;
      color: #333333;
      text-align: center;
      overflow: hidden;
   }
   .schoolTitBox {
      margin-top: 32px;
      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>