配置课件

src/views/curriculum/chooseCourseware.vue

@@ -0,0 +1,251 @@
+<!--
+* @FileDescription: 选择课件
+* @Author: 黄琪勇
+* @Date:2024-04-02 10:43:20
+-->
+<template>
+   <div class="chooseCourseware">
+      <div class="close" @click="close"></div>
+      <div class="chooseCon" v-loading="loading">
+         <img class="imgMid" src="@/img/cloudTextbooks/shu.png" />
+         <div class="chooseBox" v-for="(listDetails, index) in listDetailData" :key="index">
+            <div
+               class="operate"
+               v-show="(index === 0 && pageNum !== 0) || (index === 1 && listData.length > pageNum + 1)"
+               @click="handlePage(index === 0 ? 'prev' : 'next')"
+            >
+               <img :src="require(`@/img/cloudTextbooks/${index === 0 ? 'left' : 'right'}.png`)" />
+            </div>
+            <div class="chooseList">
+               <div class="listItem" v-for="item in listDetails" :key="item.id">
+                  <div class="img">
+                     <template v-if="item.lockFlag">
+                        <img src="@/img/cloudTextbooks/jy.png" />
+                     </template>
+                     <template v-else>
+                        <img src="@/img/cloudTextbooks/bf.png" />
+                        <!-- <img src="@/img/cloudTextbooks/xm.png" /> -->
+                     </template>
+                  </div>
+                  <div class="nameCon">
+                     <div class="name">{{ item.name }}</div>
+                     <div class="text" v-if="item.useNum ?? false">已使用{{ item.useNum }}次</div>
+                  </div>
+                  <div class="play" :class="{ disabled: item.lockFlag }" @click="item.lockFlag === true">选择</div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowRef, computed } from "vue"
+
+type listDetail = {
+   name: string
+   id: string
+   useNum?: number
+   lockFlag?: boolean
+}[]
+type listDetailType = [listDetail, listDetail]
+const listData = shallowRef<listDetail[][]>([])
+const pageNum = ref<number>(0)
+const loading = ref(false)
+const listDetailData = computed<listDetailType>(() => {
+   const data = listData.value[pageNum.value] || []
+   return [data[0] || [], data[1] || []]
+})
+function handlePage(type: "next" | "prev") {
+   type === "next" ? pageNum.value++ : pageNum.value--
+}
+const props = defineProps<{
+   modalData: {
+      id: string
+   }
+}>()
+const emits = defineEmits<{
+   (e: "onClose"): void
+}>()
+
+function close() {
+   emits("onClose")
+}
+</script>
+
+<style lang="scss" scoped>
+.chooseCourseware {
+   width: 100%;
+   height: 100%;
+   padding: 40px;
+   .close {
+      position: absolute;
+      top: -14px;
+      right: -16px;
+      width: 42px;
+      height: 44px;
+      cursor: pointer;
+      background: url("@/img/useDialogConfirm/close.png") no-repeat;
+      background-size: cover;
+      &:hover {
+         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
+         background-size: cover;
+      }
+   }
+   .chooseCon {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      .imgMid {
+         width: 68px;
+         height: 518px;
+         position: absolute;
+         left: 50%;
+         top: 50%;
+         transform: translate(-50%, -50%);
+         z-index: 1;
+      }
+      .chooseBox {
+         width: 50%;
+         height: 100%;
+         background: #f6d7c1;
+         box-shadow: 0px 2px 3px 0px #a05400;
+         border-radius: 17px;
+         padding: 5px;
+         position: relative;
+         &:nth-child(2) {
+            .operate {
+               left: -30px;
+               border-radius: 6px 0px 0px 6px;
+            }
+            &:hover .operate {
+               opacity: 1;
+            }
+         }
+         &:nth-child(3) {
+            margin-left: 10px;
+            .operate {
+               right: -30px;
+               border-radius: 0px 6px 6px 0px;
+            }
+            &:hover .operate {
+               opacity: 1;
+            }
+         }
+         .operate {
+            width: 30px;
+            height: 68px;
+            background: #fffefb;
+            position: absolute;
+            top: 50%;
+            transform: translate(0, -50%);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.28s;
+            opacity: 0;
+            &:hover {
+               background-color: #edeff0;
+            }
+            > img {
+               width: 13px;
+               height: 21px;
+            }
+         }
+         .chooseList {
+            width: 100%;
+            height: 100%;
+            background: #fdf7f0;
+            border-radius: 17px;
+            padding: 0 40px 0 30px;
+            overflow: hidden;
+            .listItem {
+               margin-top: 12px;
+               padding: 10px 0;
+               display: flex;
+               justify-content: space-between;
+               align-items: center;
+               border-bottom: 1px solid #eaeaea;
+               &:first-child {
+                  margin-top: 32px;
+               }
+               &:last-child {
+                  border-bottom: none;
+               }
+               .img {
+                  flex-shrink: 0;
+                  width: 35px;
+                  height: 40%;
+                  position: relative;
+                  & > img:nth-child(1) {
+                     width: 100%;
+                  }
+                  & > img:nth-child(2) {
+                     position: absolute;
+                     left: 0;
+                     top: 0;
+                     z-index: 1;
+                  }
+               }
+               .nameCon {
+                  margin-left: 7px;
+                  flex-grow: 1;
+                  .name {
+                     font-weight: 600;
+                     font-size: 16px;
+                     color: #333333;
+                     line-height: 22px;
+                  }
+                  .text {
+                     font-weight: 400;
+                     font-size: 12px;
+                     color: #777777;
+                     line-height: 17px;
+                  }
+               }
+               .play {
+                  flex-shrink: 0;
+                  width: 64px;
+                  height: 24px;
+                  background: linear-gradient(180deg, #ffab71 0%, #ff6e45 100%);
+                  border-radius: 12px;
+                  line-height: 24px;
+                  text-align: center;
+                  font-weight: 500;
+                  font-size: 12px;
+                  color: #ffffff;
+                  letter-spacing: 1px;
+                  cursor: pointer;
+                  &:hover {
+                     opacity: $opacity-hover;
+                  }
+                  &.disabled {
+                     background: linear-gradient(180deg, #d3d3d3 0%, #b5b5b5 100%);
+                     cursor: not-allowed;
+                     &:hover {
+                        opacity: 1;
+                     }
+                  }
+               }
+            }
+         }
+      }
+   }
+}
+</style>
+<style lang="scss">
+.h-modalFrame.chooseCourseware {
+   /* prettier-ignore */
+   --modalFrameTitHeight: 0PX;
+   .modalFrameBox {
+      background: url("@/img/cloudTextbooks/bg.png") no-repeat;
+      background-size: cover;
+      box-shadow: none;
+      .modalFrameTitle {
+         display: none;
+      }
+   }
+}
+</style>

src/views/curriculum/curriculumDetail.vue

@@ -15,7 +15,7 @@
                      <img src="@/img/curriculum/jxmb.png" />
                      <div>教学目标</div>
                   </div>
-                  <div class="rightBtn">
+                  <div class="rightBtn" @click="handleSetUpCourseware(props.modalData.id)">
                      <div>更换课件</div>
                      <img src="@/img/curriculum/jt1.png" />
                   </div>
@@ -51,6 +51,9 @@
 
 <script setup lang="ts">
 import courseCollapse from "./components/courseCollapse"
+import modalFrame from "@/plugin/modalFrame"
+import setUpCourseware from "./setUpCourseware.vue"
+
 const props = defineProps<{
    modalData: {
       id: string
@@ -116,6 +119,23 @@ const data: courseListType = [
       children: null
    }
 ]
+
+/**
+ * 选择更换课件
+ */
+function handleSetUpCourseware(id: string) {
+   modalFrame({
+      template: setUpCourseware,
+      width: 924,
+      height: 452,
+      btnShow: [],
+      modalData: {
+         id
+      },
+      maskClose: true,
+      className: "setUpCourseware"
+   })
+}
 </script>
 
 <style lang="scss" scoped>

src/views/curriculum/setUpCourseware.vue

@@ -0,0 +1,218 @@
+<!--
+* @FileDescription: 配置课件
+* @Author: 黄琪勇
+* @Date:2024-04-02 09:43:51
+-->
+<template>
+   <div class="setUpCourseware">
+      <div class="close" @click="close"></div>
+      <img class="headImg" src="@/img/curriculum/ts3.png" />
+      <ElScrollbar class="elScrollbar">
+         <div class="cloudTextbooksBox">
+            <div class="bookshelf" v-for="(list, index) in listData" :key="index">
+               <div class="book" v-for="item in list" :key="item.id">
+                  <div class="imgCon">
+                     <ElImage class="img" :src="item.img" @click="handleClick(item.id)" />
+                     <img class="imgbg" src="@/img/cloudTextbooks/yy.png" />
+                     <img class="imgbg1" src="@/img/cloudTextbooks/hd1.png" />
+                     <img class="imgbg2" src="@/img/cloudTextbooks/hd.png" />
+                     <div class="courseNum" @click="handleClick(item.id)">共{{ item.courseNum }}课</div>
+                  </div>
+                  <div class="name">{{ item.name }}</div>
+               </div>
+            </div>
+         </div>
+      </ElScrollbar>
+   </div>
+</template>
+
+<script setup lang="ts">
+import modalFrame from "@/plugin/modalFrame"
+import chooseCourseware from "./chooseCourseware.vue"
+
+const props = defineProps<{
+   modalData: {
+      id: string
+   }
+}>()
+const emits = defineEmits<{
+   (e: "onClose"): void
+}>()
+
+function close() {
+   emits("onClose")
+}
+
+function handleClick(id: number) {
+   modalFrame({
+      template: chooseCourseware,
+      width: 1110,
+      height: 675,
+      btnShow: [],
+      modalData: {
+         id
+      },
+      maskClose: true,
+      className: "chooseCourseware"
+   })
+}
+const listData = [
+   [
+      { name: "萨克斯 Level1", type: 5, img: "https://oss.dayaedu.com/gyt/courseware/1698395357707.png", id: 1000102, courseNum: 17 },
+      { name: "打击乐 Level1", type: 23, img: "https://oss.dayaedu.com/gyt/courseware/1698395328495.png", id: 1000101, courseNum: 17 },
+      { name: "单簧管 Level1", type: 4, img: "https://oss.dayaedu.com/gyt/courseware/1698395308069.png", id: 1000097, courseNum: 17 }
+   ],
+   [
+      { name: "上低音号 Level1", type: 15, img: "https://oss.dayaedu.com/gyt/courseware/1698395289499.png", id: 1000096, courseNum: 17 },
+      { name: "长号 Level1", type: 14, img: "https://oss.dayaedu.com/gyt/courseware/1698395272103.png", id: 1000095, courseNum: 17 },
+      { name: "圆号 Level1", type: 13, img: "https://oss.dayaedu.com/gyt/courseware/1698395254028.png", id: 1000093, courseNum: 17 }
+   ],
+   [
+      { name: "小号 Level1", type: 12, img: "https://oss.dayaedu.com/gyt/courseware/1698395236339.png", id: 1000092, courseNum: 17 },
+      { name: "长笛 Level1", type: 2, img: "https://oss.dayaedu.com/gyt/courseware/1698395178311.png", id: 1000091, courseNum: 17 },
+      { name: "乐理 Level1", type: 31, img: "https://oss.dayaedu.com/gyt/courseware/1698395130108.png", id: 1000071, courseNum: 16 }
+   ]
+]
+</script>
+
+<style lang="scss" scoped>
+.setUpCourseware {
+   padding-top: 88px;
+   padding-bottom: 22px;
+   width: 100%;
+   height: 100%;
+   .close {
+      position: absolute;
+      top: -14px;
+      right: -16px;
+      width: 42px;
+      height: 44px;
+      cursor: pointer;
+      background: url("@/img/useDialogConfirm/close.png") no-repeat;
+      background-size: cover;
+      &:hover {
+         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
+         background-size: cover;
+      }
+   }
+   .headImg {
+      width: 163px;
+      height: 51px;
+      position: absolute;
+      left: 50%;
+      top: -13px;
+      transform: translate(-50%, 0);
+   }
+   & > :deep(.elScrollbar) {
+      .el-scrollbar__view {
+         width: 100%;
+         padding: 0 38px;
+      }
+      .el-scrollbar__wrap {
+         overflow-x: hidden;
+      }
+      .el-scrollbar__bar.is-vertical {
+         width: 4px;
+         right: 0;
+      }
+   }
+   .cloudTextbooksBox {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .bookshelf {
+         padding: 0 50px;
+         width: 100%;
+         margin-bottom: 30px;
+         display: flex;
+         flex-wrap: wrap;
+         background: url("@/img/curriculum/shujia.png") no-repeat;
+         background-size: contain;
+         background-position-y: 120px;
+         &:last-child {
+            margin-bottom: 0;
+         }
+         .book {
+            width: 33.3333%;
+            text-align: center;
+            position: relative;
+            padding-top: 4px;
+            .imgCon {
+               width: 172px;
+               height: 212px;
+               display: inline-block;
+               position: relative;
+               &:hover {
+                  transform: translateY(-4px);
+               }
+               .img {
+                  cursor: pointer;
+                  width: 172px;
+                  height: 212px;
+               }
+               .imgbg {
+                  position: absolute;
+                  top: -20px;
+                  right: -50px;
+                  width: 76px;
+                  height: 247px;
+               }
+               .imgbg1 {
+                  position: absolute;
+                  top: 0px;
+                  right: -4px;
+                  width: 4px;
+                  height: 212px;
+               }
+               .imgbg2 {
+                  position: absolute;
+                  top: 0px;
+                  left: 0px;
+                  width: 9px;
+                  height: 212px;
+               }
+               .courseNum {
+                  cursor: pointer;
+                  position: absolute;
+                  left: 50%;
+                  bottom: 10px;
+                  transform: translateX(-50%);
+                  background: #ffffff;
+                  padding: 0 10px;
+                  border-radius: 13px;
+                  opacity: 0.83;
+                  line-height: 25px;
+                  font-weight: 400;
+                  font-size: 16px;
+                  color: #6b3c2d;
+                  white-space: nowrap;
+               }
+            }
+            .name {
+               margin-top: 48px;
+               font-weight: 400;
+               font-size: 19px;
+               color: #393939;
+               line-height: 26px;
+            }
+         }
+      }
+   }
+}
+</style>
+<style lang="scss">
+.h-modalFrame.setUpCourseware {
+   /* prettier-ignore */
+   --modalFrameTitHeight: 0PX;
+   .modalFrameBox {
+      background: linear-gradient(180deg, #fdfef2 0%, #fdf6de 100%);
+      box-shadow: 0px 5px 0px 0px #ca8e2d, 0px 7px 10px 0px #6e6e6e;
+      border-radius: 20px;
+      border: 8px solid #ffdd98;
+      position: relative;
+      .modalFrameTitle {
+         display: none;
+      }
+   }
+}
+</style>