classroom/src/views/homePage/homePage.vue

<!--
* @FileDescription: 首页
* @Author: 黄琪勇
* @Date:2024-03-29 17:20:39
-->
<template>
   <navContainer class="homePageNav" :headImg="headImg" :navs="navs">
      <div class="homePage">
         <ElScrollbar class="elScrollbar">
            <div class="classTypes">
               <div class="classType" v-for="item in classTypeObj[userStoreHook.roles!]" :key="item.name" @click="handleRouter(item.url)">
                  <img :src="item.img" />
                  <div>{{ item.name }}</div>
               </div>
            </div>
            <div class="courseBoard" :class="{ isEmpty: isEmptyClassData && !classDataLoading }">
               <div class="details">
                  <div class="head">
                     <div class="leftCon">
                        <div class="line"></div>
                        <div class="title">下次课程</div>
                     </div>
                     <img v-if="userStoreHook.roles !== 'KLX'" class="rightRouter" @click="handleRouterCurriculum" src="@/img/homePage/back.png" />
                  </div>
                  <el-skeleton class="elSkeleton" :loading="classDataLoading">
                     <template #template>
                        <el-skeleton-item class="elSkeletonItem" variant="p" />
                        <el-skeleton-item class="elSkeletonItem" variant="p" />
                        <el-skeleton-item class="elSkeletonItem" variant="h1" />
                        <el-skeleton-item class="elSkeletonItem" variant="h1" />
                        <div class="elSkeletonBtnCon">
                           <el-skeleton-item class="elSkeletonItem" variant="button" />
                           <el-skeleton-item class="elSkeletonItem" variant="button" />
                        </div>
                        <el-skeleton-item class="elSkeletonItem" variant="button" />
                     </template>
                     <template #default>
                        <component
                           v-if="!isEmptyClassData"
                           :classData="classData"
                           :is="userStoreHook.roles === 'GYM' ? curriculum_gym : curriculum_gyt"
                           @update="handleClassData"
                        />
                        <el-empty v-else class="empty" :image="require('@/img/layout/empty1.png')" description="您还没有待上课程哦～" />
                     </template>
                  </el-skeleton>
               </div>
            </div>
         </ElScrollbar>
      </div>
   </navContainer>
</template>
<script setup lang="ts">
import navContainer from "@/businessComponents/navContainer"
import { useRouter } from "vue-router"
import { ref, computed } from "vue"
import useDialogConfirm from "@/hooks/useDialogConfirm"
import userStore from "@/store/modules/user"
import curriculum_gym from "./components/curriculum/curriculum_gym.vue"
import curriculum_gyt from "./components/curriculum/curriculum_gyt.vue"
import { getRemind_gyt, getRecentCourseSchedule_gym } from "@/api/homePage.api"
import { httpAjax } from "@/plugin/httpAjax"
import { format } from "@/libs/tools"

const userStoreHook = userStore()
const router = useRouter()

const headImg = {
   img: require("@/img/homePage/home.png")
}
const navs = [
   {
      name: "主页"
   }
]
const classTypes_gym = [
   {
      img: require("@/img/homePage/kb.png"),
      name: "课表",
      url: "/curriculum"
   },
   {
      img: require("@/img/homePage/xl.png"),
      name: "训练",
      url: ""
   },
   {
      img: require("@/img/homePage/jdcp.png"),
      name: "进度测评",
      url: ""
   },
   {
      img: require("@/img/homePage/xltj.png"),
      name: "训练统计",
      url: ""
   },
   {
      img: require("@/img/homePage/yjl.png"),
      name: "云练习",
      url: "/cloudPractice"
   },
   {
      img: require("@/img/homePage/yjc.png"),
      name: "云课堂",
      url: "/cloudTextbooks"
   }
]
const classTypes_gyt = [
   {
      img: require("@/img/homePage/kb.png"),
      name: "课表",
      url: "/curriculum"
   },
   {
      img: require("@/img/homePage/xl.png"),
      name: "课后作业",
      url: ""
   },
   {
      img: require("@/img/homePage/jdzc.png"),
      name: "阶段自测",
      url: ""
   },
   {
      img: require("@/img/homePage/xltj.png"),
      name: "练习情况",
      url: ""
   },
   {
      img: require("@/img/homePage/yjl.png"),
      name: "云练习",
      url: "/cloudPractice"
   },
   {
      img: require("@/img/homePage/yjc.png"),
      name: "云课堂",
      url: "/cloudTextbooks"
   }
]
const classTypes_klx = [
   {
      img: require("@/img/homePage/kb.png"),
      name: "课表",
      url: ""
   },
   {
      img: require("@/img/homePage/xl.png"),
      name: "训练",
      url: ""
   },
   {
      img: require("@/img/homePage/jdcp.png"),
      name: "进度测评",
      url: ""
   },
   {
      img: require("@/img/homePage/xltj.png"),
      name: "训练统计",
      url: ""
   },
   {
      img: require("@/img/homePage/yjl.png"),
      name: "云练习",
      url: "/cloudPractice"
   },
   {
      img: require("@/img/homePage/yjc.png"),
      name: "云课堂",
      url: "/cloudTextbooks"
   }
]
const classTypeObj = {
   GYT: classTypes_gyt,
   GYM: classTypes_gym,
   KLX: classTypes_klx
}

/* 下次课程信息 */
const classData = ref<Record<string, any>>({})
const classDataLoading = ref(true)
const isEmptyClassData = computed(() => {
   return !Object.keys(classData.value).length
})

// 现在酷乐秀没有课表功能
if (userStoreHook.roles !== "KLX") {
   handleClassData()
} else {
   classDataLoading.value = false
}

function handleClassData() {
   if (userStoreHook.roles === "GYM") {
      classDataLoading.value = true
      httpAjax(getRecentCourseSchedule_gym).then(res => {
         classDataLoading.value = false
         if (res.code === 200) {
            classData.value = res.data || {}
         }
      })
   } else {
      classDataLoading.value = true
      httpAjax(getRemind_gyt).then(res => {
         classDataLoading.value = false
         if (res.code === 200) {
            classData.value = res.data || {}
         }
      })
   }
}

function handleRouter(url?: string) {
   url
      ? router.push(url)
      : useDialogConfirm({
           headImg: require("@/img/homePage/ts.png"),
           text: "该功能暂未开放，敬请期待哦～",
           btnShow: [true]
        })
}
function handleRouterCurriculum() {
   router.push({
      path: "/curriculum",
      query: {
         date: classData.value.classDate ? format(classData.value.classDate) : ""
      }
   })
}
</script>
<style lang="scss" scoped>
.homePageNav.navContainer {
   &:deep(.navCon) {
      .navImg {
         margin-left: 50px;
         > img {
            width: 91px;
            height: 92px;
            top: 70%;
         }
      }
      .nav {
         font-size: 28px;
         font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
         &:last-child {
            margin-right: 30px;
         }
      }
   }
}
.homePage {
   width: 100%;
   height: 100%;
   & > :deep(.elScrollbar) {
      .el-scrollbar__view {
         width: 100%;
         display: flex;
         padding: 50px 50px 0;
      }
      .el-scrollbar__wrap {
         overflow-x: hidden;
      }
   }
   .classTypes {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 729px;
      align-content: space-between;
      .classType {
         background: #feffff;
         box-shadow: 0px 2px 14px 0 #f1e3cc;
         border-radius: 34px;
         width: 360px;
         height: 350px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         cursor: pointer;
         padding: 44px 53px;
         &:hover {
            transform: scale(1.02);
            box-shadow: 0px 2px 14px 0px #e4d7c2;
         }
         > div {
            margin-top: 10px;
            font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
            font-weight: bold;
            font-size: 28px;
            color: #393939;
         }
         > img {
            width: 100%;
         }
      }
   }
   .courseBoard {
      flex-shrink: 0;
      margin-left: 50px;
      margin-top: -35px;
      width: 572px;
      height: 764px;
      background: url("@/img/homePage/bg1.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      &.isEmpty {
         background: url("@/img/homePage/bg.png") no-repeat;
         background-size: 100% 100%;
      }
      .details {
         width: 100%;
         position: absolute;
         top: 88px;
         left: 0;
         padding: 0 30px;
         .head {
            height: 81px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            .leftCon {
               display: flex;
               align-items: center;
               .line {
                  width: 8px;
                  height: 28px;
                  background: linear-gradient(180deg, #ffcb35 0%, #fea60a 100%), #ff6a67;
                  border-radius: 7px;
               }
               .title {
                  margin-left: 12px;
                  font-family: AlimamaFangYuanTiVF, AlimamaFangYuanTiVF;
                  font-weight: bold;
                  font-size: 28px;
                  color: #994d1c;
               }
            }
            .rightRouter {
               width: 38px;
               height: 38px;
               cursor: pointer;
               &:hover {
                  opacity: $opacity-hover;
               }
            }
         }
         .elSkeleton {
            padding: 0 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            > .elSkeletonItem {
               &:nth-child(1) {
                  margin-top: 25px;
                  height: 34px;
               }
               &:nth-child(2) {
                  width: 50%;
                  margin-top: 58px;
                  height: 60px;
               }
               &:nth-child(3) {
                  margin-top: 34px;
               }
               &:nth-child(4) {
                  margin-top: 34px;
               }
               &:nth-child(6) {
                  width: 100%;
                  height: 74px;
                  margin-top: 58px;
               }
            }
            .elSkeletonBtnCon {
               width: 100%;
               margin-top: 76px;
               display: flex;
               justify-content: space-between;
               > .elSkeletonItem {
                  width: 216px;
                  height: 65px;
               }
            }
         }
         :deep(.empty) {
            margin-top: 114px;
            padding: 0;
            .el-empty__image {
               width: 360px;
            }
         }
      }
   }
}
</style>