classroom/src/views/cloudTextbooks/cloudTextbooks.vue

<!--
* @FileDescription: 云课堂
* @Author: 黄琪勇
* @Date:2024-03-21 15:11:49
-->
<template>
   <navContainer :navs="navs">
      <div class="cloudTextbooks">
         <div class="headCon">
            <div class="operate">
               <dictionary
                  :popper-class="'classTypePopper'"
                  v-model="classType"
                  :width="150"
                  :height="40"
                  :options="classTypeOpt"
                  placeholder="课程类型"
                  @change="handleQuery"
               />
               <myInput
                  class="queryIpt"
                  v-model="queryStr"
                  :width="382"
                  :height="40"
                  placeholder="请输入教材名称"
                  @keyup.enter="handleQuery"
                  @input="handleInputQuery"
                  @handleQuery="handleQuery"
                  clearable
               />
            </div>
         </div>
         <div class="cloudTextbooksCon">
            <ElScrollbar class="elScrollbar" v-loading="loading">
               <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" @click="handleClick(item.id)">
                           <ElImage class="img" :src="item.img" />
                           <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">共{{ item.courseNum }}课</div>
                        </div>
                        <div class="name">{{ item.name }}</div>
                     </div>
                  </div>
               </div>
            </ElScrollbar>
         </div>
         <el-empty class="empty" v-if="!listData.length && !loading" :image="require('@/img/layout/empty.png')" description="暂无搜索结果" />
      </div>
   </navContainer>
</template>

<script setup lang="ts">
import navContainer from "@/businessComponents/navContainer"
import { ref, shallowRef } from "vue"
import modalFrame from "@/plugin/modalFrame"
import chooseDialog from "./chooseDialog.vue"
import userStore from "@/store/modules/user"
import { useDataList } from "./useData"
import { debounce } from "@/libs/tools"
import { getLessonCoursewareSubjectList_gym } from "@/api/cloudTextbooks.api"
import { httpAjax } from "@/plugin/httpAjax"
import myInput from "@/components/myInput"

const userStoreHook = userStore()
const { handleGetList, listData, loading, handleListQuery } = useDataList()

const navs = [
   {
      name: "主页",
      url: "/"
   },
   {
      name: "云课堂"
   }
]
const classType = ref("")
const classTypeOpt = shallowRef<{ value: string; label: string }[]>([])
const queryStr = ref("")

handleGetClassTypeOpt()
handleGetList()

enum courseEmnu {
   PERCUSSION_SINGLE = "打击乐",
   FLUTE_SINGLE = "长笛",
   SAX_SINGLE = "萨克斯",
   CLARINET_SINGLE = "单簧管",
   TRUMPET_SINGLE = "小号",
   TROMBONE_SINGLE = "长号",
   HORN_SINGLE = "圆号",
   BARITONE_TUBA_SINGLE = "上低音号-大号",
   MUSIC_THEORY = "乐理",
   INSTRUMENTAL_ENSEMBLE = "合奏",
   EUPHONIUM_SINGLE = "上低音号",
   TUBA_SINGLE = "大号"
}
function handleGetClassTypeOpt() {
   //  区分管乐团和管乐迷课程类型
   if (userStoreHook.roles === "GYM") {
      httpAjax(getLessonCoursewareSubjectList_gym).then(res => {
         if (res.code === 200) {
            classTypeOpt.value = [
               {
                  value: "",
                  label: "全部"
               },
               ...res.data.map((item: any) => {
                  return {
                     value: item.id,
                     label: item.name
                  }
               })
            ]
         }
      })
   } else {
      classTypeOpt.value = [
         {
            value: "",
            label: "全部"
         },
         ...Object.keys(courseEmnu).map(type => {
            return {
               value: type,
               label: courseEmnu[type as keyof typeof courseEmnu]
            }
         })
      ]
   }
}

// 查询
function handleQuery() {
   handleListQuery(classType.value, queryStr.value)
}
const handleInputQuery = debounce(handleQuery)

//点击跳转详情
function handleClick(id: string) {
   modalFrame({
      template: chooseDialog,
      width: 1152,
      height: 700,
      btnShow: [],
      modalData: {
         id
      },
      maskClose: true,
      className: "chooseDialog"
   })
}
</script>

<style lang="scss" scoped>
.cloudTextbooks {
   width: 100%;
   height: 100%;
   position: relative;
   .headCon {
      padding: 30px 26px;
      display: flex;
      flex-direction: row-reverse;
      .operate {
         display: flex;
         .queryIpt {
            margin-left: 12px;
         }
      }
   }
   .cloudTextbooksCon {
      height: calc(100% - 122px);
      > :deep(.elScrollbar) {
         .el-scrollbar__wrap {
            overflow-x: hidden;
         }
      }
      .cloudTextbooksBox {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-top: 10px;
         .bookshelf {
            width: 1500px;
            padding: 0 116px;
            margin-bottom: 70px;
            display: flex;
            flex-wrap: wrap;
            background: url("@/img/cloudTextbooks/sj.png") no-repeat;
            background-size: contain;
            background-position-y: 120px;
            &:last-child {
               margin-bottom: 0;
            }
            .book {
               width: 20%;
               text-align: center;
               position: relative;
               padding-top: 4px;
               .imgCon {
                  width: 172px;
                  height: 212px;
                  display: inline-block;
                  position: relative;
                  cursor: pointer;
                  &:hover {
                     transform: translateY(-4px);
                  }
                  .img {
                     width: 172px;
                     height: 212px;
                  }
                  .imgbg {
                     position: absolute;
                     top: -20px;
                     right: -50px;
                     width: 76px;
                     height: 247px;
                     pointer-events: none;
                  }
                  .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;
               }
            }
         }
      }
   }
   &:deep(.empty) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .el-empty__image {
         width: 360px;
      }
   }
}
</style>
<style lang="scss">
.classTypePopper.el-cascader__dropdown.el-popper {
   .el-cascader-menu {
      width: 150px;
      min-width: auto;
   }
}
</style>