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

<!--
* @FileDescription: 管乐团课表list
* @Author: 黄琪勇
* @Date:2024-03-29 15:29:06
-->
<template>
   <div class="curriculumList_gyt" v-for="item in props.curriculumData" :key="item.id" @click="handleClickDetail(item.id)">
      <div class="head">
         <div class="timeBox">
            <img class="timeImg" src="@/img/curriculum/sj.png" />
            <div class="time">{{ item.classDate && format(item.classDate) }}</div>
         </div>
         <div class="operateBox">
            <template v-if="item.coursewareFlag && !item.lessonCoursewareId && item.status !== 'COMPLETE'">
               <img class="dangerImg" src="@/img/curriculum/jg.png" />
               <div class="operateBtn" @click.stop="handleSetUpCourseware(item.id)">配置课件</div>
            </template>
            <template v-else-if="item.status === 'NOT_START'">
               <div class="noStart">未开始</div>
            </template>
            <template v-else-if="item.status === 'ING'">
               <div class="ing">进行中</div>
            </template>
            <template v-else>
               <div class="end">已结束</div>
            </template>
         </div>
      </div>
      <div class="curriculumName">
         <div class="leftCon">{{ item.startTime && format(item.startTime, "hh:ii") }}-{{ item.endTime && format(item.endTime, "hh:ii") }}</div>
         <div class="rightCon">
            <img :src="item.signIn ? require('@/img/curriculum/qd1.png') : require('@/img/curriculum/qd.png')" />
            <div :class="{ signIn: item.signIn }">{{ item.signIn ? "已签到" : "未签到" }}</div>
            <img class="qtImg" :src="item.signOut ? require('@/img/curriculum/qt1.png') : require('@/img/curriculum/qt.png')" />
            <div :class="{ signOut: item.signOut }">{{ item.signOut ? "已签退" : "未签退" }}</div>
         </div>
      </div>
      <div class="endCon">
         <div class="addressCon">
            <div class="adressBox"><ellipsisScroll :title="`${item.className}-${item.teacherName}`" /></div>
            <div><ellipsisScroll :title="item.orchestraName" /></div>
         </div>
         <div class="btnGoClass" v-if="item.status === 'ING'" @click.stop="handleStartClass(item.id)">开始上课</div>
         <div class="btnDetail" v-else @click.stop="handleClickDetail(item.id)">
            <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 "@/views/curriculum"
import { handleStartClass_gyt } from "@/views/curriculum/hooks/useStartClass"

const emits = defineEmits<{
   (e: "update"): void
}>()
const props = defineProps<{
   curriculumData: any[]
}>()
// 开始上课
function handleStartClass(id: string) {
   handleStartClass_gyt(id)
}
//查看详情
function handleClickDetail(id: string) {
   useCurriculumDetail(id)
}
// 配置课表
function handleSetUpCourseware(id: string) {
   useSetUpCourseware(id, () => {
      emits("update")
   })
}
</script>

<style lang="scss" scoped>
.curriculumList_gyt {
   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: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftCon {
         flex-grow: 1;
         font-family: DINAlternate, DINAlternate;
         font-weight: bold;
         font-size: 38px;
         color: #333333;
         overflow: hidden;
      }
      .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;
            }
         }
         .qtImg {
            margin-left: 34px;
         }
      }
   }
   .endCon {
      margin-top: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 22px;
      .addressCon {
         flex-grow: 1;
         overflow: hidden;
         & > div {
            font-weight: 500;
            font-size: 16px;
            color: #777777;
         }
         & > div:nth-child(2) {
            margin-right: 116px;
            overflow: hidden;
            margin-top: 12px;
         }
         .adressBox {
            margin-right: 56px;
            overflow: hidden;
            font-weight: 600;
            font-size: 20px;
            color: #333333;
         }
      }
      .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>