云教材和播放

.env

@@ -1,3 +1,3 @@
 # 公共环境变量
 
-VUE_APP_TITLE="classroom"
+VUE_APP_TITLE="乐教通"

src/api/cloudTextbooks.api.ts

@@ -1,30 +1,70 @@
-import { httpAxios_gym } from "@/api/ApiInstance"
+import { httpAxios_gym, httpAxios_gyt } from "@/api/ApiInstance"
 
 /** 管乐迷 */
 
 //获取课程列表
-export const queryLessonCourseware_gym = () => {
+export const queryLessonCourseware_gym = (type: string) => {
    return httpAxios_gym.axioseRquest({
       method: "post",
       url: "/api-teacher/lessonCourseware/queryLessonCourseware",
       data: {
-         query: {}
+         query: {
+            subjectId: type,
+            page: 1,
+            rows: 9999
+         }
       }
    })
 }
 
+// 获取课程类型
+export const getLessonCoursewareSubjectList_gym = () => {
+   return httpAxios_gym.axioseRquest({
+      method: "get",
+      url: "/api-teacher/lessonCourseware/getLessonCoursewareSubjectList"
+   })
+}
+
 // 课程详情列表
-export const getLessonCoursewareCourseList_gym = (id: number) => {
+export const getLessonCoursewareCourseList_gym = (id: string) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
       url: "/api-teacher/lessonCourseware/getLessonCoursewareCourseList/" + id
    })
 }
 
-// 课程详情
+// 课程详情 播放用
 export const getLessonCourseDetail_gym = (id: string) => {
    return httpAxios_gym.axioseRquest({
       method: "get",
       url: "/api-teacher/lessonCourseware/getLessonCourseDetail/" + id
    })
 }
+
+/**
+ * 管乐团
+ */
+
+// 课程列表
+export const getMyCourseware_gyt = () => {
+   return httpAxios_gyt.axioseRquest({
+      method: "post",
+      url: "/api-teacher/courseSchedule/myCourseware"
+   })
+}
+
+// 课程详情列表
+export const getMyCoursewareDetail_gyt = (id: string) => {
+   return httpAxios_gyt.axioseRquest({
+      method: "post",
+      url: "/api-teacher/courseSchedule/myCoursewareDetail/" + id
+   })
+}
+
+// 课程详情 播放用
+export const getLessonCoursewareDetail_gyt = (id: string) => {
+   return httpAxios_gym.axioseRquest({
+      method: "get",
+      url: "/api-teacher/lessonCoursewareDetail/detail/" + id
+   })
+}

src/views/cloudTextbooks/chooseDialog.vue

@@ -8,130 +8,32 @@
       <div class="close" @click="close">
          <img src="@/img/useDialogConfirm/close.png" />
       </div>
-      <div class="chooseCon">
+      <div class="chooseCon" v-loading="loading">
          <img class="imgMid" src="@/img/cloudTextbooks/shu.png" />
-         <div class="chooseBox">
-            <div class="leftOperate">
-               <img src="@/img/cloudTextbooks/left.png" />
-            </div>
-            <div class="chooseList"></div>
-         </div>
-         <div class="chooseBox">
-            <div class="rightOperate">
-               <img src="@/img/cloudTextbooks/right.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">
-                  <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
-                     </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play">查看</div>
-               </div>
-               <div class="listItem">
-                  <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
-                     </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play disabled">查看</div>
-               </div>
-               <div class="listItem">
-                  <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
-                     </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play">查看</div>
-               </div>
-               <div class="listItem">
-                  <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
-                     </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play">查看</div>
-               </div>
-               <div class="listItem">
+               <div class="listItem" v-for="item in listDetails" :key="item.id">
                   <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
+                     <template v-if="item.lockFlag">
                         <img src="@/img/cloudTextbooks/jy.png" />
                      </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play">查看</div>
-               </div>
-               <div class="listItem">
-                  <div class="img">
-                     <template v-if="false">
-                        <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
                      <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
-                     </template>
-                  </div>
-                  <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
-                  </div>
-                  <div class="play">查看</div>
-               </div>
-               <div class="listItem">
-                  <div class="img">
-                     <template v-if="false">
                         <img src="@/img/cloudTextbooks/bf.png" />
-                        <img src="@/img/cloudTextbooks/xm.png" />
-                     </template>
-                     <template v-else>
-                        <img src="@/img/cloudTextbooks/jy.png" />
+                        <!-- <img src="@/img/cloudTextbooks/xm.png" /> -->
                      </template>
                   </div>
                   <div class="nameCon">
-                     <div class="name">第一课</div>
-                     <div class="text">已使用5次</div>
+                     <div class="name">{{ item.name }}</div>
+                     <div class="text" v-if="item.useNum ?? false">已使用{{ item.useNum }}次</div>
                   </div>
-                  <div class="play">查看</div>
+                  <div class="play" :class="{ disabled: item.lockFlag }" @click="item.lockFlag === true || handlePaly(item.id)">查看</div>
                </div>
             </div>
          </div>
@@ -140,19 +42,31 @@
 </template>
 
 <script setup lang="ts">
+import { useDataDetailList } from "./useData"
+const { handleGetDetailList, loading, listDetailData, listData, pageNum, handlePage } = useDataDetailList()
+import router from "@/router"
+
 const props = defineProps<{
    modalData: {
-      id: number
+      id: string
    }
 }>()
-
 const emits = defineEmits<{
    (e: "onClose"): void
 }>()
 
+handleGetDetailList(props.modalData.id)
+
 function close() {
    emits("onClose")
 }
+
+function handlePaly(id: string) {
+   emits("onClose")
+   router.push({
+      path: "/coursewarePlay/" + id
+   })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -178,6 +92,7 @@ function close() {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
+         z-index: 1;
       }
       .chooseBox {
          width: 50%;
@@ -188,18 +103,25 @@ function close() {
          padding: 5px;
          position: relative;
          &:nth-child(2) {
-            &:hover .leftOperate {
+            .operate {
+               left: -30px;
+               border-radius: 6px 0px 0px 6px;
+            }
+            &:hover .operate {
                opacity: 1;
             }
          }
-         &:last-child {
+         &:nth-child(3) {
             margin-left: 10px;
-            &:hover .rightOperate {
+            .operate {
+               right: -30px;
+               border-radius: 0px 6px 6px 0px;
+            }
+            &:hover .operate {
                opacity: 1;
             }
          }
-         .leftOperate,
-         .rightOperate {
+         .operate {
             width: 30px;
             height: 68px;
             background: #fffefb;
@@ -216,14 +138,6 @@ function close() {
                background-color: #edeff0;
             }
          }
-         .leftOperate {
-            left: -30px;
-            border-radius: 6px 0px 0px 6px;
-         }
-         .rightOperate {
-            right: -30px;
-            border-radius: 0px 6px 6px 0px;
-         }
          .chooseList {
             width: 100%;
             height: 100%;

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -8,33 +8,41 @@
       <div class="cloudTextbooks">
          <div class="headCon">
             <div class="operate">
-               <dictionary
-                  class="classTypes"
-                  v-model="value"
-                  :options="options"
-                  :propsOpt="{ label: 'label', value: 'value' }"
-                  placeholder="课程类型"
-               />
-               <el-input v-model="input3" style="max-width: 600px" placeholder="请输入教材名称" clearable class="iptSelect">
+               <dictionary class="classTypes" v-model="classType" :options="classTypeOpt" placeholder="课程类型" @change="handleQuery" />
+               <el-input
+                  @keyup.enter="handleQuery"
+                  @input="handleInputQuery"
+                  v-model="queryStr"
+                  style="max-width: 600px"
+                  placeholder="请输入教材名称"
+                  clearable
+                  class="iptSelect"
+               >
                   <template #prepend>
                      <img src="@/img/cloudTextbooks/ss.png" />
                   </template>
                   <template #append>
-                     <div class="btnSelect">搜索</div>
+                     <div class="btnSelect" @click="handleQuery">搜索</div>
                   </template>
                </el-input>
             </div>
          </div>
          <div class="cloudTextbooksCon">
-            <ElScrollbar class="elScrollbar">
+            <ElScrollbar class="elScrollbar" v-loading="loading">
                <div class="cloudTextbooksBox">
-                  <div class="bookshelf" v-for="(books, index) in []" :key="index">
-                     <div class="book" v-for="item in books" :key="item.id">
-                        <ElImage class="img" :src="item.cover" @click="handleClick(item.lessonCoursewareId)" />
+                  <div class="bookshelf" v-for="(list, index) in listData" :key="index">
+                     <div class="book" v-for="item in list" :key="item.id">
+                        <ElImage class="img" :src="item.img" @click="handleClick(item.id)" />
                         <div class="name">{{ item.name }}</div>
+                        <div class="courseNum">共{{ item.courseNum }}课</div>
                      </div>
                   </div>
-                  <el-empty :image-size="360" :image="require('@/img/layout/empty.png')" description="暂无搜索结果" />
+                  <el-empty
+                     v-if="!listData.length && !loading"
+                     :image-size="360"
+                     :image="require('@/img/layout/empty.png')"
+                     description="暂无搜索结果"
+                  />
                </div>
             </ElScrollbar>
          </div>
@@ -44,14 +52,17 @@
 
 <script setup lang="ts">
 import navContainer from "@/views/homePage/components/navContainer"
-import { queryLessonCourseware_gym, getLessonCoursewareCourseList_gym } from "@/api/cloudTextbooks.api"
-import { ref } from "vue"
-import { httpAjax } from "@/plugin/httpAjax"
+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"
 
 const userStoreHook = userStore()
+const { handleGetList, listData, loading, handleListQuery } = useDataList()
 
 const headImg = {
    img: require("@/img/homePage/back.png"),
@@ -66,25 +77,58 @@ const navs = [
       name: userStoreHook.roles === "GYM" ? "云教程" : "云教材"
    }
 ]
-const data = ref<any[]>([])
+const classType = ref("")
+const classTypeOpt = shallowRef<{ value: string; label: string }[]>([])
+const queryStr = ref("")
 
-const value = ref()
-const options = ref([
-   {
-      value: "guide",
-      label: "Guide"
-   }
-])
+handleGetClassTypeOpt()
+handleGetList()
 
-const input3 = ref()
+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 = res.data.map((item: any) => {
+               return {
+                  value: item.id,
+                  label: item.name
+               }
+            })
+         }
+      })
+   } else {
+      classTypeOpt.value = Object.keys(courseEmnu).map(type => {
+         return {
+            value: type,
+            label: courseEmnu[type as keyof typeof courseEmnu]
+         }
+      })
+   }
+}
 
-httpAjax(queryLessonCourseware_gym).then(res => {
-   console.log(res)
-   data.value = chunkArray([...res.data.rows, ...res.data.rows], 5)
-})
+// 查询
+function handleQuery() {
+   handleListQuery(classType.value, queryStr.value)
+}
+const handleInputQuery = debounce(handleQuery)
 
-function handleClick(id: number) {
-   console.log(id)
+//点击跳转详情
+function handleClick(id: string) {
    modalFrame({
       template: chooseDialog,
       width: 1110,
@@ -96,18 +140,6 @@ function handleClick(id: number) {
       maskClose: true,
       className: "chooseDialog"
    })
-   return
-   httpAjax(getLessonCoursewareCourseList_gym, id).then(res => {
-      console.log(res)
-   })
-}
-
-function chunkArray(array: any[], size: number) {
-   const result = []
-   for (let i = 0; i < array.length; i += size) {
-      result.push(array.slice(i, i + size))
-   }
-   return result
 }
 </script>
 
@@ -199,6 +231,7 @@ function chunkArray(array: any[], size: number) {
          display: flex;
          flex-direction: column;
          align-items: center;
+         min-width: 1500px;
          .bookshelf {
             width: 1500px;
             padding: 0 116px;
@@ -214,6 +247,7 @@ function chunkArray(array: any[], size: number) {
             .book {
                width: 20%;
                text-align: center;
+               position: relative;
                .img {
                   cursor: pointer;
                   width: 172px;
@@ -229,6 +263,20 @@ function chunkArray(array: any[], size: number) {
                   color: #393939;
                   line-height: 26px;
                }
+               .courseNum {
+                  position: absolute;
+                  left: 50%;
+                  top: 176px;
+                  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;
+               }
             }
          }
       }

src/views/cloudTextbooks/useData.ts

@@ -0,0 +1,171 @@
+// 处理 区分处理管乐迷 管乐团的数据
+
+import {
+   queryLessonCourseware_gym,
+   getLessonCoursewareCourseList_gym,
+   getMyCourseware_gyt,
+   getMyCoursewareDetail_gyt
+} from "@/api/cloudTextbooks.api"
+
+import { httpAjaxErrMsg } from "@/plugin/httpAjax"
+
+import userStore from "@/store/modules/user"
+import { ref, shallowRef, computed } from "vue"
+
+type listType = {
+   type: string
+   name: string
+   img: string
+   id: string
+   courseNum: number // 课程数量
+}[][]
+
+/**
+ * 列表数据
+ */
+export const useDataList = () => {
+   const userStoreHook = userStore()
+   const listData = shallowRef<listType>([])
+   let storeData: listType[number] = []
+   const loading = ref(false)
+
+   function handleGetList() {
+      userStoreHook.roles === "GYM" ? handleGetList_gym("", "") : handleGetList_gyt()
+   }
+   function handleListQuery(type: string, queryStr: string) {
+      userStoreHook.roles === "GYM" ? handleQueryGetList_gym(type, queryStr) : handleQueryGetList_gyt(type, queryStr)
+   }
+
+   // 获取管乐团数据
+   function handleGetList_gyt() {
+      loading.value = true
+      httpAjaxErrMsg(getMyCourseware_gyt).then(res => {
+         loading.value = false
+         if (res.code === 200) {
+            storeData = (res.data || []).map((item: any) => {
+               return {
+                  name: item.name,
+                  type: item.courseTypeCode,
+                  img: item.coverImg,
+                  id: item.id,
+                  courseNum: item.courseNum
+               }
+            })
+            listData.value = chunkArray(storeData, 5)
+         }
+      })
+   }
+   // 管乐团数据查询
+   function handleQueryGetList_gyt(type: string, queryStr: string) {
+      const computeData = storeData.filter(item => {
+         return (type ? item.type === type : true) && (queryStr ? item.name.includes(queryStr) : true)
+      })
+      listData.value = chunkArray(computeData, 5)
+   }
+   // 获取管乐迷数据
+   function handleGetList_gym(type: string, queryStr: string) {
+      loading.value = true
+      httpAjaxErrMsg(queryLessonCourseware_gym, type).then(res => {
+         loading.value = false
+         if (res.code === 200) {
+            const data = (res.data?.rows || []).reduce((arr: any[], item: any) => {
+               if ((type ? item.subjectId === type : true) && (queryStr ? item.name.includes(queryStr) : true)) {
+                  arr.push({
+                     name: item.name,
+                     type: item.subjectId,
+                     img: item.cover,
+                     id: item.lessonCoursewareId,
+                     courseNum: item.courseNum
+                  })
+               }
+               return arr
+            }, [])
+            listData.value = chunkArray(data, 5)
+         }
+      })
+   }
+   // 管乐迷数据查询
+   function handleQueryGetList_gym(type: string, queryStr: string) {
+      handleGetList_gym(type, queryStr)
+   }
+
+   return { loading, listData, handleGetList, handleListQuery }
+}
+
+/**
+ * 列表详情数据
+ */
+type listDetail = {
+   name: string
+   id: string
+   useNum?: number
+   lockFlag?: boolean
+}[]
+type listDetailType = [listDetail, listDetail]
+export const useDataDetailList = () => {
+   const userStoreHook = userStore()
+   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 handleGetDetailList(id: string) {
+      userStoreHook.roles === "GYM" ? handleGetDetaList_gym(id) : handleGetDetailList_gyt(id)
+   }
+   function handlePage(type: "next" | "prev") {
+      type === "next" ? pageNum.value++ : pageNum.value--
+   }
+   // 获取管乐迷
+   function handleGetDetaList_gym(id: string) {
+      loading.value = true
+      httpAjaxErrMsg(getLessonCoursewareCourseList_gym, id).then(res => {
+         loading.value = false
+         if (res.code === 200) {
+            const data = (res.data || []).map((item: any) => {
+               return {
+                  name: item.coursewareDetailName,
+                  id: item.coursewareDetailId
+               }
+            })
+            listData.value = chunkArray(chunkArray(data, 7), 2)
+         }
+      })
+   }
+   // 获取管乐团
+   function handleGetDetailList_gyt(id: string) {
+      loading.value = true
+      httpAjaxErrMsg(getMyCoursewareDetail_gyt, id).then(res => {
+         loading.value = false
+         if (res.code === 200) {
+            const data = (res.data || []).map((item: any) => {
+               return {
+                  name: item.coursewareDetailName,
+                  id: item.lessonCoursewareDetailId,
+                  useNum: item.useNum,
+                  lockFlag: item.lockFlag
+               }
+            })
+            listData.value = chunkArray(chunkArray(data, 7), 2)
+         }
+      })
+   }
+
+   return {
+      handleGetDetailList,
+      loading,
+      listDetailData,
+      listData,
+      pageNum,
+      handlePage
+   }
+}
+
+function chunkArray(array: any[], size: number) {
+   const result = []
+   for (let i = 0; i < array.length; i += size) {
+      result.push(array.slice(i, i + size))
+   }
+   return result
+}

src/views/coursewarePlay/component/video-item/index.module.scss

@@ -184,8 +184,7 @@
       display: inline-block;
       width: 24px;
       height: 24px;
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABGlBMVEUAAAAAraMAraEArKEArqIA18kArqIA08UA1McAq6AAraAArKAArKEArKAArKAAq6EA1MYAq6AArKIAraMA2csAr6AA28kAn58A1skA0sQA1ccA2csA1cgArZ8A3M4Ar6IA1cgA2csA3M0A1MUA3M0A39EA2swA1skA1cgA3tAA3c8A3c0A08cA2swAq58A3M4A2csA4NL ///8A3tAA1sgA2s0A3M4A18kA4tQA2MsA3c8A2cwA1McArKAA08UA5NVm6+Jm6N9x599m6eEAx7oAvLDr/PsA0MNM49oAua2j8u2H8OmH7OZM6N4As6dt5t413dII1skD1skAy74AwLRf49ta49sn2s4X2MwT18tW4tpJ4Nc33tMq288faTE+AAAAMXRSTlMAGfxfUkc/9YXw6M/FtrCSUEM0MiMjCgj4z7quqG3x7tfPg1hS+Pjr69C6lZWKbVhYjYIARgAAAqJJREFUSMelk2lD2kAQhjfhkltQ0Xpbe98xJljCRo6EgApKoa32+P9/o7NOliEboB98Pj/v7MzsLotRS63tHb/Z2Xl9vLeWqrH/kdrPuE3B+SM7+6mV+voz15336/X615MXS/XNXTfuA7ubi/3TjOpjwHEOvyzy19yF9cF3LOt53P+w3IeA9X5R/fHfe9SpHyf0Y2ecgv/zttO5kwGwZT+I/Tmynwz4HeA3lY/4tm0fzu8K9vlwC/6vcRi46fVuIj7wjvx1mPY7+P1vYf3+GdB3APIbDbpBuN878H9Iv94WgTbVBx14K/0UHnD7gD4FpI8B05Tvah/W3+50/tC8GIjUB9/cQ7+Wge3fYUPoy4Dimy9rOHJTcD+m68VAN/Qb6AvW8ZLV50ABe9Y/8hF3FH+eMkA+csIEGXo+/TZyJQJXXaDVag2lbxivhK8FM//mbCHX0jcaGgTS1E9vcaCHPmCmIZBsztpfETCQJAQS7mzcpS1J30yIQEDrEUN3ARy6hQxnB1xYIpD0RIB+o6ArAq1wneRfBEkx9LSu+laLAqiHAU8MrQ1U37bxBBOROuBrDDg6V36vbeMJMd84YoKSp/gyoPqXQYkJDgbgR38jBciHgP+JCTQ9oPbnA4p+6egae6Q4oADYwFAEhuhTwC8ypMInlvIdr3u9a9MIE6hfNnmFhRRGdeo/el3kG6MCk1R1n3zlutAHpnqVzShzD9uhAyI64PEyI7bz3BP+8voTnt9mc2zlRAJ1df1YP7fFImxkuW8tK29MeXaDKWzk+ChQXrPc54jnyKeu8pz75+gjqDs+53nsR2G7rHM+mER8IwBdL+O8caoFDgy8wGnA/7Vcz+dAocqWUynqPIJerLDVaAelrLSzpQNtlUuhdDKRSKZRfir/ACF6Xp1EeZtPAAAAAElFTkSuQmCC")
-         no-repeat center;
+      background: url("../../image/jia.png") no-repeat center;
       background-size: contain;
       flex-shrink: 0;
 
@@ -195,8 +194,7 @@
    }
 
    .iconCut {
-      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABCFBMVEUAAAAAraMAraEArKEArKEArqIArqIA2swA1cgA1sgAraAArKAArKEArKAArKAAq6EA2MoArZ8Aq6AArKIAraMAr6AA28kAn58A18oA08cA1cgA1MYA1sgA0cQA3c4A1skA08YA2swA08UA1skA2MsA2s0A18kA1sgA39AAzsIA3tAA2swA39EA39AA39EA4tMA3tAA2s0A2MoA1skA3M4A1ccA49QA3c8A2cwA4NIA4dP ///8ArKAA08Zx599x5t8A5NXi+/kA0cMAyLsAvK8Aua1J4dg13dIAzsAAvrIAs6dt5t4s29AD1chJ595h49tX49oV18sO1soAxLdm5NxS4tgd2MwAwrWCpB5XAAAAMHRSTlMAGfzvX1I/V1FH6M/FtrCShm1DNDIjCgj486iEI/jx19DPurGV+Ovr0M26uqiHSCOYWU5AAAACYklEQVRIx6WT12LaMBSGZTMS9p4hSTO6FwGMRyXj2GbTNqPj/d+kOjYCGcnkot/19/8+R5KRQDNzdnP5tt1+c3lTzjTRS2S6HaIFDCmDdjdzVD99RQjzgwDl6jRW710T0R8Yxsee3D/pMJ/C+cbdxYnMPyNPmz9CP/iUsujfks16Ys8FnwaAW7F/M5nY9kycJ2A0Kh/MTx7XNPD7u7x/RIns0euQn9SfSXwW0C++coFrMqf+gxbXDwH9A3dfhH7AXj/F9oOv9/dD0fv9ZYcnFOOPqN9/x/wMIWRuPxzth0D/CwrpwgU/Cgvv60EHPoV+83z/gMR92TyA2WQrM53CfBaA+l0gfLhlPjAI4OfnfPMzAt7LHmjIgW9eIeA8zh8d+tZr8BWXm2d2/03g/gfzLV2hgTTh5gdfTDDfMtM0kCLUfylgbgMpGkiSXX/cSMwf95MQWAgXLJwP+BC4g0DKY7rwIJjf3/pjNwVL/wVf7OcCzB97sLQylflM53yKryBKQhse8U3OtxIIKHoSX5gHcIsIqEyPz2Myf+xXEKCoLvUpsf3jEENVUEBhGnnQOiDpd5YFFFLFC+GHD2HzB2i4irbkV0PphYHPAo61yiNGTfWjvtjvOEu1hnaU8HNkX3Fhx8MltKeVw57Yb3L9C5xrIY5GFj/LL5j1ZxsoQj2BfUM8zxBriRN1dEA9i1eu9MIcbYWzzOenymHsa+KBGkuMcw0koVVSMZ4udP4DlutjrJZaSE4tjylTzx2M6G9muJ6PKfkaiqdaUHEEtVBFx1EqxQSzE8WKIgjSUDqVTKbSIP8//wBbnlQnTJqlUQAAAABJRU5ErkJggg==")
-         no-repeat center;
+      background: url("../../image/jian.png") no-repeat center;
       background-size: contain;
    }
 
@@ -204,15 +202,15 @@
       background: #ffffff;
       box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
       border-radius: 10px;
-      font-size: 14px;
+      font-size: 16px;
       font-weight: 500;
-      color: rgba(1, 193, 181, 1);
+      color: #ff8057;
       min-width: 35px;
       text-align: center;
       vertical-align: text-bottom;
 
       span {
-         font-size: 12px;
+         font-size: 16px;
       }
    }
 

src/views/coursewarePlay/component/video-item/index.tsx

@@ -5,7 +5,8 @@ import styles from "./index.module.scss"
 
 import icons from "../../image/icons.json"
 
-const { iconVideoBg, iconLoop, iconLoopActive, iconPlay, iconPause, iconSpeed } = icons
+const { iconVideoBg, iconPlay, iconPause, iconSpeed } = icons
+
 import { Slider } from "vant"
 
 export default defineComponent({
@@ -24,6 +25,10 @@ export default defineComponent({
    },
    emits: ["play", "pause", "ended", "close"],
    setup(props, { emit, expose }) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const iconLoopActive = require("../../image/iconLoopActive.png")
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const iconLoop = require("../../image/iconLoop.png")
       const { item } = toRefs(props)
       const data = reactive({
          videoContianerRef: null as unknown as HTMLAudioElement,
@@ -122,9 +127,9 @@ export default defineComponent({
                             <img class="${styles.playIcon}" src="${iconPlay}" />
                             <img class="${styles.playIcon}" src="${iconPause}" />
                         </div>
-                        <div id="${loopBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
-                            <img class="loop" src="${iconLoop}" />
-                            <img class="loopActive" src="${iconLoopActive}" />
+                        <div id="${loopBtnId}" style="margin-top:-6px;" class="${styles.actionBtn} ${styles.loopBtn}">
+                            <img class="loop" style="width:48px;height:48px;" src="${iconLoop}" />
+                            <img class="loopActive" style="width:48px;height:48px;" src="${iconLoopActive}" />
                         </div>
                         <div style="position: relative">
                           <div id="${speedBtnId}" class="${styles.actionBtn} ${styles.speedBtn}">
@@ -293,6 +298,7 @@ export default defineComponent({
                      max={1.5}
                      step={0.1}
                      v-model={data.defaultSpeed}
+                     active-color="#FF8057"
                      vertical
                      barHeight={5}
                      reverse

src/views/coursewarePlay/index.tsx

@@ -11,7 +11,7 @@ const state = {
    platformApi: "/api",
    platformType: "TEACHER"
 }
-import { useRoute } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import { postMessage, promisefiyPostMessage } from "./helpers/native-message"
 import MusicScore from "./component/musicScore"
 import iconDian from "./image/icon-dian.svg"
@@ -33,13 +33,16 @@ import Tool, { ToolItem, ToolType } from "./component/tool"
 import Pen from "./component/tools/pen"
 import VideoItem from "./component/video-item"
 
-import { getLessonCourseDetail_gym } from "@/api/cloudTextbooks.api"
-import { httpAjax } from "@/plugin/httpAjax"
+import { getLessonCourseDetail_gym, getLessonCoursewareDetail_gyt } from "@/api/cloudTextbooks.api"
+import { httpAjaxErrMsg } from "@/plugin/httpAjax"
+import userStore from "@/store/modules/user"
 
 export default defineComponent({
    name: "CoursewarePlay",
    setup() {
       const pageVisibility = usePageVisibility()
+      const userStoreHook = userStore()
+      const router = useRouter()
       /** 页面显示和隐藏 */
       watch(
          () => pageVisibility.value,
@@ -252,7 +255,10 @@ export default defineComponent({
       const getDetail = async () => {
          try {
             //const res: any = await request.get(state.platformApi + `/lessonCourseware/getLessonCourseDetail/${route.query.id}`)
-            const res: any = await httpAjax(getLessonCourseDetail_gym, route.query.id as string)
+            const res: any = await httpAjaxErrMsg(
+               userStoreHook.roles === "GYM" ? getLessonCourseDetail_gym : getLessonCoursewareDetail_gyt,
+               route.params.id as string
+            )
             data.detail = res.data
             if (res?.data?.lockFlag) {
                postMessage({
@@ -345,6 +351,7 @@ export default defineComponent({
             console.log(error)
          }
          postMessage({ api: "goBack" })
+         router.back()
       }
 
       const popupData = reactive({
@@ -822,7 +829,7 @@ export default defineComponent({
                            <div
                               class={[styles.fullBtn, styles.point]}
                               onClick={() => {
-                                 console.log("结束")
+                                 goback()
                               }}
                            >
                               <img src={require("./image/js.png")} />