添加判断逻辑

.eslintrc.js

@@ -1,38 +1,39 @@
-module.exports = {
-   root: true,
-   env: {
-      node: true
-   },
-   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "plugin:prettier/recommended"],
-   parserOptions: {
-      ecmaVersion: 2020
-   },
-   //配置
-   rules: {
-      "prettier/prettier": "error",
-      "no-debugger": process.env.NODE_ENV == "production" ? 2 : 1,
-      "no-unreachable": process.env.NODE_ENV == "production" ? 2 : 1, //return 警告不报错
-      "no-undef": "off", // 没有声明的变量
-      "vue/no-v-html": "off",
-      "no-irregular-whitespace": "off",
-      "vue/html-self-closing": [
-         "error",
-         {
-            html: {
-               void: "always",
-               normal: "never",
-               component: "always"
-            },
-            svg: "always",
-            math: "always"
-         }
-      ],
-      "vue/multi-word-component-names": "off", // 关闭驼峰命名
-      /* ts相关 */
-      "@typescript-eslint/no-empty-function": "off", // 可以为空函数
-      "@typescript-eslint/explicit-module-boundary-types": "off", //函数不需要返回类型也可以
-      "@typescript-eslint/no-explicit-any": "off", //可以为any
-      "@typescript-eslint/no-non-null-assertion": "off", //! 非空断言
-      "@typescript-eslint/no-this-alias": "off" //忽略this关键字
-   }
-}
+module.exports = {
+   root: true,
+   env: {
+      node: true
+   },
+   extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/typescript/recommended", "plugin:prettier/recommended"],
+   parserOptions: {
+      ecmaVersion: 2020
+   },
+   //配置
+   rules: {
+      // "prettier/prettier": "error",
+      "prettier/prettier": ["error", { endOfLine: "auto" }],
+      "no-debugger": process.env.NODE_ENV == "production" ? 2 : 1,
+      "no-unreachable": process.env.NODE_ENV == "production" ? 2 : 1, //return 警告不报错
+      "no-undef": "off", // 没有声明的变量
+      "vue/no-v-html": "off",
+      "no-irregular-whitespace": "off",
+      "vue/html-self-closing": [
+         "error",
+         {
+            html: {
+               void: "always",
+               normal: "never",
+               component: "always"
+            },
+            svg: "always",
+            math: "always"
+         }
+      ],
+      "vue/multi-word-component-names": "off", // 关闭驼峰命名
+      /* ts相关 */
+      "@typescript-eslint/no-empty-function": "off", // 可以为空函数
+      "@typescript-eslint/explicit-module-boundary-types": "off", //函数不需要返回类型也可以
+      "@typescript-eslint/no-explicit-any": "off", //可以为any
+      "@typescript-eslint/no-non-null-assertion": "off", //! 非空断言
+      "@typescript-eslint/no-this-alias": "off" //忽略this关键字
+   }
+}

src/plugin/modalFrame/modalFrame.scss

@@ -1,109 +1,127 @@
-.bounceModalFrame-enter-active {
-   animation: bounce-in 0.2s;
-   .animationBox {
-      animation: bounce-in-box 0.2s;
-   }
-}
-
-.bounceModalFrame-leave-active {
-   animation: bounce-out 0.2s;
-   .animationBox {
-      animation: bounce-out-box 0.2s;
-   }
-}
-
-@keyframes bounce-in {
-   0% {
-      opacity: 0;
-   }
-   100% {
-      opacity: 1;
-   }
-}
-@keyframes bounce-out {
-   0% {
-      opacity: 1;
-   }
-   100% {
-      opacity: 0;
-   }
-}
-
-@keyframes bounce-in-box {
-   0% {
-      transform: translate(0, -30px);
-   }
-   100% {
-      transform: translate(0, 0);
-   }
-}
-@keyframes bounce-out-box {
-   0% {
-      transform: translate(0, 0);
-   }
-   100% {
-      transform: translate(0, -30px);
-   }
-}
-.h-modalFrame {
-   --modalFrameTitHeight: 40px;
-   --modalFrameBtnHeight: 50px;
-   position: fixed;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   z-index: 1234567;
-   background-color: $overlay-color-lighter;
-   .animationBox {
-      width: 100%;
-      height: 100%;
-   }
-   .modalFrameBox {
-      background-color: $bg-color;
-      box-shadow: $box-shadow-light;
-      border-radius: 4px;
-      /*modalFrameTitle*/
-      .modalFrameTitle {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 0 20px;
-         width: 100%;
-         height: var(--modalFrameTitHeight);
-         border-bottom: 1px solid $border-color-lighter;
-         font-size: $font-size-medium;
-         color: $text-color-primary;
-         cursor: move;
-         &.noMove {
-            cursor: auto;
-         }
-         .icon {
-            font-size: 24px;
-            color: $text-color-regular;
-            cursor: pointer;
-            &:hover {
-               opacity: $opacity-hover;
-            }
-         }
-      }
-      /*frameBox*/
-      .frameBox {
-         width: 100%;
-         height: calc(100% - (var(--modalFrameTitHeight) + var(--modalFrameBtnHeight)));
-         overflow: hidden;
-      }
-      .frameBox.frameBtnNone {
-         height: calc(100% - var(--modalFrameTitHeight));
-      }
-      /*frameBtn*/
-      .frameBtn {
-         padding: 0 20px;
-         width: 100%;
-         height: var(--modalFrameBtnHeight);
-         display: flex;
-         justify-content: flex-end;
-         align-items: center;
-      }
-   }
-}
+.bounceModalFrame-enter-active {
+   animation: bounce-in 0.2s;
+
+   .animationBox {
+      animation: bounce-in-box 0.2s;
+   }
+}
+
+.bounceModalFrame-leave-active {
+   animation: bounce-out 0.2s;
+
+   .animationBox {
+      animation: bounce-out-box 0.2s;
+   }
+}
+
+@keyframes bounce-in {
+   0% {
+      opacity: 0;
+   }
+
+   100% {
+      opacity: 1;
+   }
+}
+
+@keyframes bounce-out {
+   0% {
+      opacity: 1;
+   }
+
+   100% {
+      opacity: 0;
+   }
+}
+
+@keyframes bounce-in-box {
+   0% {
+      transform: translate(0, -30px);
+   }
+
+   100% {
+      transform: translate(0, 0);
+   }
+}
+
+@keyframes bounce-out-box {
+   0% {
+      transform: translate(0, 0);
+   }
+
+   100% {
+      transform: translate(0, -30px);
+   }
+}
+
+.h-modalFrame {
+   --modalFrameTitHeight: 40px;
+   --modalFrameBtnHeight: 50px;
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   z-index: 2000;
+   background-color: $overlay-color-lighter;
+
+   .animationBox {
+      width: 100%;
+      height: 100%;
+   }
+
+   .modalFrameBox {
+      background-color: $bg-color;
+      box-shadow: $box-shadow-light;
+      border-radius: 4px;
+
+      /*modalFrameTitle*/
+      .modalFrameTitle {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         padding: 0 20px;
+         width: 100%;
+         height: var(--modalFrameTitHeight);
+         border-bottom: 1px solid $border-color-lighter;
+         font-size: $font-size-medium;
+         color: $text-color-primary;
+         cursor: move;
+
+         &.noMove {
+            cursor: auto;
+         }
+
+         .icon {
+            font-size: 24px;
+            color: $text-color-regular;
+            cursor: pointer;
+
+            &:hover {
+               opacity: $opacity-hover;
+            }
+         }
+      }
+
+      /*frameBox*/
+      .frameBox {
+         width: 100%;
+         height: calc(100% - (var(--modalFrameTitHeight) + var(--modalFrameBtnHeight)));
+         overflow: hidden;
+      }
+
+      .frameBox.frameBtnNone {
+         height: calc(100% - var(--modalFrameTitHeight));
+      }
+
+      /*frameBtn*/
+      .frameBtn {
+         padding: 0 20px;
+         width: 100%;
+         height: var(--modalFrameBtnHeight);
+         display: flex;
+         justify-content: flex-end;
+         align-items: center;
+      }
+   }
+}

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

@@ -1,317 +1,317 @@
-<!--
-* @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)">
-      <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)">
-            <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"
-
-const props = defineProps<{
-   curriculumData: any[]
-}>()
-const emits = defineEmits<{
-   (e: "update"): void
-}>()
-
-//查看详情
-function handleClickDetail(id: string, teachMode: string) {
-   if (isONLINE_gym(teachMode)) {
-      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>
+<!--
+* @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)">
+      <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)">
+            <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"
+
+const props = defineProps<{
+   curriculumData: any[]
+}>()
+const emits = defineEmits<{
+   (e: "update"): void
+}>()
+
+//查看详情
+function handleClickDetail(id: string, teachMode: string) {
+   if (isONLINE_gym(teachMode)) {
+      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>

src/views/curriculum/hooks/useStartClass.ts

@@ -1,112 +1,132 @@
-import { getCourseScheduleDetail_gyt } from "@/api/curriculum.api"
-import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
-import { httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
-import useDialogConfirm from "@/hooks/useDialogConfirm"
-import { format } from "@/libs/tools"
-import router from "@/router"
-
-/* 管乐迷 开始上课 */
-export function handleStartClass_gym(id: string) {
-   httpAjaxLoadingErrMsg(getRecentCourseSchedule_gym, id).then(res => {
-      if (res.code === 200) {
-         const { signInStatusEnum, isCallNames, coursewareDetailId, startClassTime, endClassTime, status } = res.data
-         if (status === "OVER") {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts4.png"),
-               text: `该课程已结束`,
-               btnShow: [true]
-            })
-            return
-         }
-         if (signInStatusEnum === 3) {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts2.png"),
-               text: `您当前${format(startClassTime, "hh:ii")}-${format(endClassTime, "hh:ii")}的课程暂未签到，为避免考勤异常，请到APP进行签到。`,
-               btnShow: [true]
-            })
-            return
-         }
-         if (!isCallNames) {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts1.png"),
-               text: `您当前${format(startClassTime, "hh:ii")}-${format(endClassTime, "hh:ii")}的课程暂未点名，请到APP进行点名。`,
-               btnShow: [true]
-            })
-            return
-         }
-         if (!coursewareDetailId) {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts3.png"),
-               text: `该课程未配置课件，请配置课件。`,
-               btnShow: [true]
-            })
-            return
-         }
-         handlePaly(coursewareDetailId, id)
-      }
-   })
-}
-// 管乐迷是否为线上课
-export function isONLINE_gym(teachMode: string) {
-   if (teachMode === "ONLINE") {
-      useDialogConfirm({
-         headImg: require("@/img/curriculum/ts4.png"),
-         text: `线上课请在管乐迷老师端完成教学。`,
-         btnShow: [true]
-      })
-      return true
-   }
-   return false
-}
-/* 管乐团 开始上课 */
-export function handleStartClass_gyt(id: string) {
-   httpAjaxLoadingErrMsg(getCourseScheduleDetail_gyt, id).then(res => {
-      if (res.code === 200) {
-         const { signIn, rollCall, lessonCoursewareDetailId, startTime, endTime, status, needSignIn } = res.data
-         if (status === "COMPLETE") {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts4.png"),
-               text: `该课程已结束`,
-               btnShow: [true]
-            })
-            return
-         }
-         if (!signIn && needSignIn) {
-            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 (!lessonCoursewareDetailId) {
-            useDialogConfirm({
-               headImg: require("@/img/curriculum/ts3.png"),
-               text: `该课程未配置课件，请配置课件。`,
-               btnShow: [true]
-            })
-            return
-         }
-         handlePaly(lessonCoursewareDetailId, id)
-      }
-   })
-}
-
-function handlePaly(coursewareDetailId: string, coursewareId: string) {
-   const url = router.resolve({
-      name: "coursewarePlay",
-      params: { id: coursewareDetailId },
-      query: {
-         modeId: coursewareId
-      }
-   }).href
-   window.open(url, "_blank")
-}
+import { getCourseScheduleDetail_gyt } from "@/api/curriculum.api"
+import { getRecentCourseSchedule_gym } from "@/api/homePage.api"
+import { httpAjaxLoadingErrMsg } from "@/plugin/httpAjax"
+import useDialogConfirm from "@/hooks/useDialogConfirm"
+import { format } from "@/libs/tools"
+import router from "@/router"
+import { ElMessage } from "element-plus"
+
+/* 管乐迷 开始上课 */
+export function handleStartClass_gym(id: string) {
+   httpAjaxLoadingErrMsg(getRecentCourseSchedule_gym, id).then(res => {
+      if (res.code === 200) {
+         const { signInStatusEnum, isCallNames, coursewareDetailId, startClassTime, endClassTime, status, coursewareEnable } = res.data
+         if (status === "OVER") {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts4.png"),
+               text: `该课程已结束`,
+               btnShow: [true]
+            })
+            return
+         }
+         if (signInStatusEnum === 3) {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts2.png"),
+               text: `您当前${format(startClassTime, "hh:ii")}-${format(endClassTime, "hh:ii")}的课程暂未签到，为避免考勤异常，请到APP进行签到。`,
+               btnShow: [true]
+            })
+            return
+         }
+         if (!isCallNames) {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts1.png"),
+               text: `您当前${format(startClassTime, "hh:ii")}-${format(endClassTime, "hh:ii")}的课程暂未点名，请到APP进行点名。`,
+               btnShow: [true]
+            })
+            return
+         }
+         if (!coursewareDetailId) {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts3.png"),
+               text: `该课程未配置课件，请配置课件。`,
+               btnShow: [true]
+            })
+            return
+         }
+
+         if (!coursewareEnable) {
+            ElMessage({
+               showClose: true,
+               message: "该资源已失效",
+               type: "error"
+            })
+            return
+         }
+         handlePaly(coursewareDetailId, id)
+      }
+   })
+}
+// 管乐迷是否为线上课
+export function isONLINE_gym(teachMode: string) {
+   if (teachMode === "ONLINE") {
+      useDialogConfirm({
+         headImg: require("@/img/curriculum/ts4.png"),
+         text: `线上课请在管乐迷老师端完成教学。`,
+         btnShow: [true]
+      })
+      return true
+   }
+   return false
+}
+/* 管乐团 开始上课 */
+export function handleStartClass_gyt(id: string) {
+   httpAjaxLoadingErrMsg(getCourseScheduleDetail_gyt, id).then(res => {
+      if (res.code === 200) {
+         const { signIn, rollCall, lessonCoursewareDetailId, startTime, endTime, status, needSignIn, applyStatus } = res.data
+         if (status === "COMPLETE") {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts4.png"),
+               text: `该课程已结束`,
+               btnShow: [true]
+            })
+            return
+         }
+         if (!signIn && needSignIn) {
+            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 (!lessonCoursewareDetailId) {
+            useDialogConfirm({
+               headImg: require("@/img/curriculum/ts3.png"),
+               text: `该课程未配置课件，请配置课件。`,
+               btnShow: [true]
+            })
+            return
+         }
+
+         if (!applyStatus) {
+            ElMessage({
+               showClose: true,
+               message: "该资源已失效",
+               type: "error"
+            })
+            return
+         }
+
+         handlePaly(lessonCoursewareDetailId, id)
+      }
+   })
+}
+
+function handlePaly(coursewareDetailId: string, coursewareId: string) {
+   const url = router.resolve({
+      name: "coursewarePlay",
+      params: { id: coursewareDetailId },
+      query: {
+         modeId: coursewareId
+      }
+   }).href
+   window.open(url, "_blank")
+}

vue.config.js

@@ -1,49 +1,49 @@
-const { defineConfig } = require("@vue/cli-service")
-module.exports = defineConfig({
-   transpileDependencies: true,
-   productionSourceMap: false,
-   css: {
-      loaderOptions: {
-         //全局变量
-         sass: {
-            additionalData: `@use "@/assets/variables.scss" as *;`
-         },
-         postcss: {
-            postcssOptions: {
-               plugins: [
-                  require("postcss-pxtorem")({
-                     rootValue: 18, // 换算的基数
-                     selectorBlackList: ["-nopx"], // 忽略转换正则匹配项 列入一些ui库, ['.el'] 就是忽略elementUI库
-                     propList: ["*"],
-                     exclude: file => {
-                        if (file.includes("coursewarePlay")) {
-                           return true
-                        }
-                        if (file.includes("normalize")) {
-                           return true
-                        }
-                        return false
-                     }
-                  })
-               ]
-            }
-         }
-      }
-   },
-   devServer: {
-      proxy: {
-         "/gym": {
-            target: "https://dev.dayaedu.com",
-            pathRewrite: {
-               "^/gym": ""
-            }
-         },
-         "/gyt": {
-            target: "https://dev.lexiaoya.cn",
-            pathRewrite: {
-               "^/gyt": ""
-            }
-         }
-      }
-   }
-})
+const { defineConfig } = require("@vue/cli-service")
+module.exports = defineConfig({
+   transpileDependencies: true,
+   productionSourceMap: false,
+   css: {
+      loaderOptions: {
+         //全局变量
+         sass: {
+            additionalData: `@use "@/assets/variables.scss" as *;`
+         },
+         postcss: {
+            postcssOptions: {
+               plugins: [
+                  require("postcss-pxtorem")({
+                     rootValue: 18, // 换算的基数
+                     selectorBlackList: ["-nopx"], // 忽略转换正则匹配项 列入一些ui库, ['.el'] 就是忽略elementUI库
+                     propList: ["*"],
+                     exclude: file => {
+                        if (file.includes("coursewarePlay")) {
+                           return true
+                        }
+                        if (file.includes("normalize")) {
+                           return true
+                        }
+                        return false
+                     }
+                  })
+               ]
+            }
+         }
+      }
+   },
+   devServer: {
+      proxy: {
+         "/gym": {
+            target: "https://dev.gym.lexiaoya.cn",
+            pathRewrite: {
+               "^/gym": ""
+            }
+         },
+         "/gyt": {
+            target: "https://dev.lexiaoya.cn",
+            pathRewrite: {
+               "^/gyt": ""
+            }
+         }
+      }
+   }
+})