From b86def187bb9a6a15f3545a8f3979af732b6d4c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E9=B9=8F=E9=A3=9E?=
 <14315049+Hld-yupengfei@user.noreply.gitee.com>
Date: Wed, 19 Jun 2024 09:35:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=97=A0=E6=B3=95=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E9=A1=B5=E9=9D=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json                       |   3 +-
 src/api/courseChaptersApi.ts                  |  35 ++++--
 src/views/MyCourseStudy/ContainerCla.vue      |  43 +++----
 src/views/MyCourseStudy/ContainerKno.vue      |  61 +++++-----
 src/views/MyCourseStudy/courseCollections.vue | 106 ++++++++++++------
 5 files changed, 147 insertions(+), 101 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index c0a6e5a..b7b60da 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,4 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+  "recommendations": [
+    "Vue.volar""]
 }
diff --git a/src/api/courseChaptersApi.ts b/src/api/courseChaptersApi.ts
index 10135cd..6254975 100644
--- a/src/api/courseChaptersApi.ts
+++ b/src/api/courseChaptersApi.ts
@@ -1,22 +1,37 @@
 import request from '@/utils/request'
 
+
+/**
+ * 课程收藏获取资源
+ */
+export function getAssApi(params: {
+  page: number,
+  pageSize: number,
+  resourceIdList: string,
+  type: 1 | 2 | 3 | 4 | 5
+}) {
+  return request.get('/Favour/get', {
+    params
+  })
+}
+
 /**
  * 请求视频资源
  * @param par 
  */
 
-export function aaaApi(par:any){
-    if(par)return request.get(`url${par}`)
-    else return request.get(`url`)
-    
+export function aaaApi(par: any) {
+  if (par) return request.get(`url${par}`)
+  else return request.get(`url`)
+
 }
 
-export const uploadFile = (data:any) => {
-    return request({
-        url:'/upload',
-        method:"POST",
-        data
-    })
+export const uploadFile = (data: any) => {
+  return request({
+    url: '/upload',
+    method: "POST",
+    data
+  })
 }
 
 
diff --git a/src/views/MyCourseStudy/ContainerCla.vue b/src/views/MyCourseStudy/ContainerCla.vue
index 090e6b4..8288c9f 100644
--- a/src/views/MyCourseStudy/ContainerCla.vue
+++ b/src/views/MyCourseStudy/ContainerCla.vue
@@ -27,15 +27,9 @@
       </div>
     </div>
     <div class="Page-1">
-      <el-pagination
-        v-model:current-page="params.current"
-        v-model:page-size="params.pageSize"
-        :page-sizes="[6, 8, 12, 15]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <el-pagination v-model:current-page="params.current" v-model:page-size="params.pageSize"
+        :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
     </div>
   </el-tab-pane>
 </template>
@@ -48,24 +42,22 @@ const container = ref()
 function handleResize() {
   const style = getComputedStyle(container.value)
   const width = Number(style.width.slice(0, -2))
-  if (width >= 350 * 4.5)
-    container.value.style.gridTemplateColumns = 'repeat(4, 350px)'
-  else container.value.style.gridTemplateColumns = 'repeat(auto-fill, 350px)'
+  if (width >= 350 * 4.5) container.value.style.gridTemplateColumns = "repeat(4, 350px)"
+  else container.value.style.gridTemplateColumns = "repeat(auto-fill, 350px)"
 }
 function debounce(func: any, delay: any) {
   let timer: any
   return function () {
-    clearTimeout(timer)
+    clearTimeout(timer);
     timer = setTimeout(() => {
       // @ts-ignore
-      func.apply(this, arguments)
-    }, delay)
-  }
+      func.apply(this, arguments);
+    }, delay);
+  };
 }
 const deHR = debounce(handleResize, 500)
-const myObserver = new ResizeObserver(deHR)
+const myObserver = new ResizeObserver((deHR))
 onMounted(() => myObserver.observe(container.value))
-onBeforeUnmount(myObserver.disconnect)
 // ===============================
 const total = ref(0)
 const datalist = ref([
@@ -104,10 +96,7 @@ const getDatalist = async () => {
     params.value,
   )
   datalist.value = res.data.records
-  console.log('datalist ' + datalist.value[0].name)
   total.value = res.data.total
-  console.log('pages ' + total.value)
-  console.log('datalist ' + datalist.value[0].img)
 }
 
 getDatalist()
@@ -132,7 +121,7 @@ const handleCurrentChange = (page: any) => {
   justify-content: center;
 }
 
-.example-pagination-block + .example-pagination-block {
+.example-pagination-block+.example-pagination-block {
   margin-top: 10px;
 }
 
@@ -191,7 +180,7 @@ const handleCurrentChange = (page: any) => {
   border-bottom: 1px solid rgb(217, 217, 217);
 }
 
-.ClassImg > img {
+.ClassImg>img {
   width: 100%;
   height: 180px;
 }
@@ -225,14 +214,14 @@ const handleCurrentChange = (page: any) => {
   justify-content: space-around;
 }
 
-.Con > h3 {
+.Con>h3 {
   margin-left: 15px;
   font-size: 25px;
   font-weight: 600;
   cursor: pointer;
 }
 
-.Con > p {
+.Con>p {
   margin-left: 15px;
   margin-top: 5px;
   font-size: 13px;
@@ -240,14 +229,14 @@ const handleCurrentChange = (page: any) => {
   cursor: pointer;
 }
 
-.Con > p > span {
+.Con>p>span {
   margin-left: 5px;
   margin-right: 5px;
   color: rgb(94, 188, 231);
   font-weight: 600;
 }
 
-.Con > button {
+.Con>button {
   width: 45px;
   height: 20px;
   font-size: 9px;
diff --git a/src/views/MyCourseStudy/ContainerKno.vue b/src/views/MyCourseStudy/ContainerKno.vue
index e7d5dc4..3001dfa 100644
--- a/src/views/MyCourseStudy/ContainerKno.vue
+++ b/src/views/MyCourseStudy/ContainerKno.vue
@@ -1,32 +1,35 @@
 <template>
-  <el-tab-pane label="知识点收藏" name="third">
-    <div class="Container_Kno">
-      <div class="item_3" v-for="(item_3, index) in 10" :key="index">
-        <div>
-          <div class="KnowledgeCollent">
-            <div class="KnoCon">
-              <h4>课程名称</h4>
-              <p>第{{ item_3 }}章-xxxx</p>
+        <el-tab-pane label="知识点收藏" name="third">
+          <div class="Container_Kno">
+            <div class="item_3" v-for="(item_3, index) in 10" :key="index">
+              <div>
+                <div class="KnowledgeCollent">
+                  <div class="KnoCon">
+                    <h4>课程名称</h4>
+                    <p>第{{ item_3 }}章-xxxx</p>
+                  </div>
+                  <div class="KnoBtn" >
+                    <img src="../../assets/icons/更多.svg" alt="" />
+                  </div>
+                </div>
+                <div class="Knowledge_point">
+                  <ul>
+                    <li v-for="(item, index) in 6" :key="index">
+                      知识点知识点知识点{{ item }} 
+                      <span class="btn" >×</span>
+                      &nbsp;
+                    </li>
+                  </ul>
+                </div>
+              </div>
             </div>
-            <div class="KnoBtn">
-              <img src="../../assets/icons/更多.svg" alt="" />
-            </div>
-          </div>
-          <div class="Knowledge_point">
-            <ul>
-              <li v-for="(item, index) in 6" :key="index">
-                知识点知识点知识点{{ item }} &nbsp;
-                <div class="btn">×</div>
-                &nbsp;
-              </li>
-            </ul>
           </div>
-        </div>
-      </div>
-    </div>
-  </el-tab-pane>
+        </el-tab-pane>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+
+
+</script>
 <style lang="scss" scoped>
 .Container_Kno {
   width: 100%;
@@ -65,7 +68,7 @@
   justify-content: space-around;
 }
 
-.KnoBtn > img {
+.KnoBtn>img {
   padding-top: 20px;
   cursor: pointer;
 }
@@ -93,7 +96,7 @@
   flex-direction: column;
 }
 
-.Knowledge_point > ul > li {
+.Knowledge_point>ul>li {
   display: inline-block;
   margin-top: 3px;
   margin-bottom: 3px;
@@ -108,11 +111,11 @@
 }
 
 .btn {
-  display: inline;
+  display: none;
 }
 
 .btn:hover {
   cursor: pointer;
   color: rgb(15, 57, 76);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/MyCourseStudy/courseCollections.vue b/src/views/MyCourseStudy/courseCollections.vue
index 3916d9d..9561848 100644
--- a/src/views/MyCourseStudy/courseCollections.vue
+++ b/src/views/MyCourseStudy/courseCollections.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="curse-collection">
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      class="demo-tabs"
-      @tab-click="handleClick"
-      style="padding-top: 0"
-    >
+    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick" style="padding-top: 0">
       <!-- 课程收藏页面 -->
       <ContainerCla />
       <!-- 资源收藏页面 -->
@@ -69,17 +63,28 @@
         </div>
         <!-- 小页面-3 -->
         <div class="Res_con" v-show="activeIndex == 3">
-          <div class="item_2-3" v-for="(item, index) in 6" :key="index">
+          <div class="item_2-3" v-for="(item, index) in 8" :key="index">
             <div class="ResImg-2">
               <div class="Img">
                 <img src="../../assets/icons/视频.png" />
               </div>
             </div>
             <div class="ResClaDic">
-              <p>视频名称-----{{ item }}</p>
+              <p>{{ item }}</p>
+              <el-button plain @click="centerDialogVisible = true">
+                点击播放
+              </el-button>
             </div>
           </div>
         </div>
+        <el-dialog v-model="centerDialogVisible" title="视频播放中" width="1000" align-center>
+          <span>点击开了一个弹框</span>
+          <template #footer>
+            <div class="dialog-footer">
+              <video src=""></video>
+            </div>
+          </template>
+        </el-dialog>
         <!-- 小页面-4 -->
         <div class="Res_con" v-show="activeIndex == 4">
           <div class="item_2-4" v-for="(item, index) in 8" :key="index">
@@ -92,8 +97,8 @@
               <p>文本名称-----{{ item }}</p>
             </div>
           </div>
-          <div></div>
         </div>
+
         <!-- 小页面-5 -->
         <div class="Res_con" v-show="activeIndex == 5">
           <div class="item_2-5" v-for="(item, index) in 10" :key="index">
@@ -108,16 +113,9 @@
           </div>
         </div>
         <div class="Page-2">
-          <el-pagination
-            v-model:current-page="currentPage1"
-            v-model:page-size="pageSize1"
-            :disabled="disabled"
-            :page-sizes="[6, 8, 12, 15]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="10"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+          <el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :disabled="disabled"
+            :page-sizes="[6, 8, 12, 15]" layout="total, sizes, prev, pager, next, jumper" :total="10"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
         </div>
       </el-tab-pane>
       <!-- 知识点收藏页面 -->
@@ -128,33 +126,73 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { TabsPaneContext } from 'element-plus'
 import ContainerCla from './ContainerCla.vue'
 import ContainerKno from './ContainerKno.vue'
-// import ContainerRes from "./ContainerRes.vue";
-// import { getDataListApi } from '@/api/user/corc.js'
+import { getAssApi } from "@/api/courseChaptersApi";
+const centerDialogVisible = ref(false)
+
 const activeIndex = ref(1)
 function hsndelShow(index: number) {
   activeIndex.value = index
 }
-
-const activeName = ref('first')
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+//=========================
+function handleApi(params) {
+  getAssApi(params).then(res => {
+    arr.value = res.data.records
+    total.value = res.data.total
+    console.log(arr.value, '-', total.value)
+  })
 }
-
+const arr = ref([])
+const total = ref(0)
 // 分页器
 const currentPage1 = ref(1)
 const pageSize1 = ref(10)
 const disabled = ref(false)
 
 const handleSizeChange = (val: number) => {
-  console.log(`${val} items per page`)
+  hand()
 }
 const handleCurrentChange = (val: number) => {
-  console.log(`current page: ${val}`)
+  hand()
 }
+
+function initFenYie() {
+  arr.value.length = 0
+  currentPage1.value = 1
+  pageSize1.value = 10
+}
+
+
+watch(activeIndex, (newVal) => {
+  initFenYie()
+  hand()
+})
+function hand() {
+  const params = {
+    type: activeIndex.value,
+    page: currentPage1.value,
+    pageSize: pageSize1.value,
+    resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
+  }
+  handleApi(params)
+}
+const obj = {
+  type: activeIndex.value,
+  page: currentPage1.value,
+  pageSize: pageSize1.value,
+  resourceIdList: '1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20'
+}
+handleApi(obj)
+//=========================
+
+const activeName = ref('first')
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -162,7 +200,7 @@ const handleCurrentChange = (val: number) => {
   justify-content: center;
 }
 
-.example-pagination-block + .example-pagination-block {
+.example-pagination-block+.example-pagination-block {
   margin-top: 10px;
 }
 
@@ -299,7 +337,7 @@ const handleCurrentChange = (val: number) => {
   align-items: center;
 }
 
-.ResClaDic > p {
+.ResClaDic>p {
   font-family: Inter, Inter;
   font-weight: 500;
   font-size: 20px;
@@ -330,7 +368,7 @@ const handleCurrentChange = (val: number) => {
   position: flex;
   justify-content: center;
   background-color: #fff;
-  border-top: 1px solid rgb(229, 227, 227, 0.5);
-  border-bottom: 1px solid rgb(229, 227, 227, 0.5);
+  border-top: 1px solid rgb(229, 227, 227, .5);
+  border-bottom: 1px solid rgb(229, 227, 227, .5);
 }
 </style>