classroom/src/views/curriculum/components/curriculumList/curriculumList_gym.vue

<!--
* @FileDescription: 管乐迷课表list
* @Author: 黄琪勇
* @Date:2024-03-29 15:29:06
-->
<template>
   <div
      class="curriculumList_gym"
      v-for="item in props.curriculumData"
      :key="item.id"
      @click="handleClickDetail(item.id, item.teachMode, item.coursewareEnable)"
   >
      <div class="head">
         <div class="timeBox">
            <img class="timeImg" src="@/img/curriculum/sj.png" />
            <div class="time">
               {{ item.classDate && format(item.classDate) }} {{ item.startClassTime && format(item.startClassTime, "hh:ii") }}-{{
                  item.endClassTime && format(item.endClassTime, "hh:ii")
               }}
            </div>
         </div>
         <div class="operateBox">
            <template v-if="item.status === 'UNDERWAY' && !item.coursewareDetailId && item.teachMode !== 'ONLINE'">
               <img class="dangerImg" src="@/img/curriculum/jg.png" />
               <div class="operateBtn" @click.stop="handleSetUpCourseware(item.id, item.teachMode)">配置课件</div>
            </template>
            <template v-else-if="item.status === 'NOT_START'">
               <div class="noStart">未开始</div>
            </template>
            <template v-else-if="item.status === 'UNDERWAY'">
               <div class="ing">进行中</div>
            </template>
            <template v-else>
               <div class="end">已结束</div>
            </template>
         </div>
      </div>
      <div class="curriculumName">
         <div class="leftCon">
            <img class="xxImg" :src="item.teachMode === 'ONLINE' ? require('@/img/curriculum/xs.png') : require('@/img/curriculum/xx.png')" />
            <img class="typeImg" :src="require(`@/img/curriculum/${classImgType[item.type as keyof typeof classImgType]}.png`)" />
            <div class="className">
               <ellipsisScroll :title="`${classNameType[item.type as keyof typeof classNameType]}·${item.name}`" />
            </div>
         </div>
         <div class="rightCon">
            <img
               :src="
                  item.signInStatusEnum === 1
                     ? require('@/img/curriculum/qd1.png')
                     : item.signInStatusEnum === 0
                     ? require('@/img/curriculum/qd2.png')
                     : require('@/img/curriculum/qd.png')
               "
            />
            <div :class="[item.signInStatusEnum === 1 ? 'signIn' : item.signInStatusEnum === 0 && 'abnormalSignIn']">
               {{ item.signInStatusEnum === 1 ? "正常签到" : item.signInStatusEnum === 0 ? "异常签到" : "未签到" }}
            </div>
            <img
               class="qtImg"
               :src="
                  item.signOutStatusEnum === 1
                     ? require('@/img/curriculum/qt1.png')
                     : item.signOutStatusEnum === 0
                     ? require('@/img/curriculum/qt2.png')
                     : require('@/img/curriculum/qt.png')
               "
            />
            <div :class="[item.signOutStatusEnum === 1 ? 'signOut' : item.signOutStatusEnum === 0 && 'abnormalSignOut']">
               {{ item.signOutStatusEnum === 1 ? "正常签退" : item.signOutStatusEnum === 0 ? "异常签退" : "未签退" }}
            </div>
         </div>
      </div>
      <div class="endCon">
         <div class="addressCon">
            <div class="adressBox">
               <div>上课地点：</div>
               <div class="adress">
                  <ellipsisScroll :title="item.teachMode === 'ONLINE' ? '网络教室' : item.schoolName" />
               </div>
            </div>
            <div class="adressBox">
               <div>上课学生：</div>
               <div class="adress">
                  <ellipsisScroll :title="item.studentNames" />
               </div>
            </div>
         </div>
         <div class="btnGoClass" v-if="item.status === 'UNDERWAY'" @click.stop="handleStartClass(item.id, item.teachMode)">开始上课</div>
         <div class="btnDetail" v-else @click.stop="handleClickDetail(item.id, item.teachMode, item.coursewareEnable)">
            <div>查看详情</div>
            <img class="jtImg" src="@/img/curriculum/jt.png" />
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { format } from "@/libs/tools"
import { useCurriculumDetail, useSetUpCourseware } from "../../index"
import { handleStartClass_gym, isONLINE_gym } from "@/views/curriculum/hooks/useStartClass"
import { classImgType, classNameType } from "@/views/curriculum/type"
import useDialogConfirm from "@/hooks/useDialogConfirm"

const props = defineProps<{
   curriculumData: any[]
}>()
const emits = defineEmits<{
   (e: "update"): void
}>()

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

<style lang="scss" scoped>
.curriculumList_gym {
   background: #ffffff;
   border-radius: 35px;
   padding: 0 30px;
   margin-bottom: 18px;
   cursor: pointer;
   &:last-child {
      margin-bottom: 0;
   }
   .head {
      padding: 20px 0 16px 0;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .timeBox {
         display: flex;
         align-items: center;
         .timeImg {
            width: 24px;
            height: 24px;
         }
         .time {
            margin-left: 6px;
            font-weight: 500;
            font-size: 22px;
            color: #777777;
         }
      }
      .operateBox {
         display: flex;
         align-items: center;
         .dangerImg {
            width: 22px;
            height: 22px;
         }
         .operateBtn {
            margin-left: 8px;
            font-weight: 500;
            font-size: 20px;
            color: #f44541;
            cursor: pointer;
            &:hover {
               opacity: $opacity-hover;
            }
         }
         .noStart {
            font-weight: 500;
            font-size: 20px;
            color: #777777;
         }
         .ing {
            font-weight: 500;
            font-size: 20px;
            color: #f67146;
         }
         .end {
            font-weight: 500;
            font-size: 20px;
            color: #aaaaaa;
         }
      }
   }
   .curriculumName {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftCon {
         flex-grow: 1;
         display: flex;
         align-items: center;
         overflow: hidden;
         .xxImg {
            flex-shrink: 0;
            width: 46px;
            height: 24px;
         }
         .typeImg {
            flex-shrink: 0;
            margin-left: 6px;
            width: 55px;
            height: 24px;
         }
         .className {
            flex-grow: 1;
            overflow: hidden;
            margin-left: 6px;
            font-weight: 600;
            font-size: 24px;
            color: #333333;
         }
      }
      .rightCon {
         display: flex;
         align-items: center;
         flex-shrink: 0;
         & > img {
            width: 22px;
            height: 22px;
         }
         & > div {
            margin-left: 6px;
            font-weight: 500;
            font-size: 20px;
            color: #aaaaaa;
            &.signIn,
            &.signOut {
               color: #01c199;
            }
            &.abnormalSignIn,
            &.abnormalSignOut {
               color: #ff0000;
            }
         }
         .qtImg {
            margin-left: 34px;
         }
      }
   }
   .endCon {
      margin-top: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 22px;
      .addressCon {
         flex-grow: 1;
         overflow: hidden;
         padding-right: 56px;
         & > div {
            font-weight: 500;
            font-size: 16px;
            color: #777777;
         }
         & > div:nth-child(2) {
            margin-top: 16px;
         }
         .adressBox {
            display: flex;
            align-items: center;
            & > div:nth-child(1) {
               flex-shrink: 0;
            }
            .adress {
               flex-grow: 1;
               overflow: hidden;
            }
         }
      }
      .btnGoClass {
         flex-shrink: 0;
         font-weight: 500;
         font-size: 20px;
         color: #ffffff;
         padding: 11px 14px;
         background: #ff8057;
         border-radius: 21px;
         text-align: center;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
      .btnDetail {
         flex-shrink: 0;
         display: flex;
         align-items: center;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
         & > div {
            font-weight: 500;
            font-size: 20px;
            color: #f67146;
         }
         .jtImg {
            margin-left: 6px;
            width: 6px;
            height: 13px;
         }
      }
   }
}
</style>