曲目列表增加分页

src/views/components/element/cloudCoachElement/cloudCoachList/cloudCoachList.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="cloudCoachList">
+  <div class="cloudCoachList" v-loading="loading">
     <div class="name">乐谱</div>
-    <div class="listCon" v-loading="loading">
+    <div class="listCon">
       <div class="list" v-for="item in listData" :key="item.id">
         <div>曲目名称：{{ item.name }}</div>
         <ElButton @click="handleUpdate(item.id)">添加</ElButton>
       </div>
     </div>
+    <div class="pagination">
+      <el-pagination layout="prev, pager, next" :default-page-size="20" @current-change="handleCurrentChange" :total="paginationData.total" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ElButton, ElLoading } from "element-plus"
+import { ElButton, ElLoading, ElPagination } from "element-plus"
 import { getMaterialQueryPage } from "@/api/pptOperate"
 import { httpAjax } from "@/plugins/httpAjax"
-import { ref } from "vue"
+import { ref, reactive } from "vue"
 
 const emit = defineEmits<{
   (event: "update", id: string): void
@@ -28,24 +31,38 @@ const loading = ref(false)
 
 const listData = ref<any[]>([])
 
-loading.value = true
-httpAjax(getMaterialQueryPage, {
-  type: "MUSIC",
-  sourceType: 2,
-  enableFlag: true,
+const paginationData = reactive({
   page: 1,
-  rows: 20
-}).then(res => {
-  loading.value = false
-  if (res.code === 200) {
-    listData.value = res.data.rows
-  }
+  total: 0
 })
+
+function handleCurrentChange(e: number) {
+  paginationData.page = e
+  queryFun()
+}
+
+queryFun()
+function queryFun() {
+  loading.value = true
+  httpAjax(getMaterialQueryPage, {
+    type: "MUSIC",
+    sourceType: 2,
+    enableFlag: true,
+    page: paginationData.page,
+    rows: 20
+  }).then(res => {
+    loading.value = false
+    if (res.code === 200) {
+      listData.value = res.data.rows
+      paginationData.total = res.data.total
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
 .cloudCoachList {
-  padding: 40px;
+  padding: 40px 40px 20px 40px;
   width: 100%;
   height: 100%;
   .name {
@@ -53,7 +70,7 @@ httpAjax(getMaterialQueryPage, {
     font-size: 20px;
   }
   .listCon {
-    height: calc(100% - 40px);
+    height: calc(100% - 100px);
     overflow: auto;
     .list {
       display: flex;
@@ -62,5 +79,12 @@ httpAjax(getMaterialQueryPage, {
       height: 40px;
     }
   }
+  .pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 40px;
+  }
 }
 </style>

src/views/components/element/cloudCoachElement/cloudCoachPlayer/cloudCoachPlayer.vue

@@ -34,7 +34,9 @@ const props = withDefaults(
 const url = computed(() => {
   return `${YJL_URL_API}?v=${Date.now()}&showGuide=true&showWebGuide=false&platform=pc&imagePos=right&zoom=0.8&modelType=practise&instrumentId=&iscurseplay=play&id=${props.id}&Authorization=${getToken()}`
 })
-const loading = ref(true)
+
+// 先关闭这个功能
+const loading = ref(false)
 function handleIframeLoad() {
   loading.value = false
 }