提交一下

1

src/components/pagination/index.module.less

@@ -1,5 +1,5 @@
 .pagination-container {
-  background: #fff;
+  background: transparent;
   padding: 24px 16px 32px;
   width: 100%;
   display: flex;

src/components/pagination/index.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
     },
     pageSizes: {
       type: Array,
-      default: [10, 20, 30, 50]
+      default: [5,10, 20, 30, 50]
     },
     layout: {
       type: String,

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -14,18 +14,27 @@ import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import 'swiper/css/scrollbar'
 import { ElTabPane, ElTabs } from 'element-plus'
+import pagination from '@/components/pagination'
 export default defineComponent({
   name: 'searchdetail',
   components: {
     hotSearch,
     silder,
     searchInput,
-    albumItem
+    albumItem,
+    pagination
   },
   setup() {
     const state = reactive({
       albumList: [],
-      musicList: []
+      musicList: [],
+      pageInfo: {
+        // 分页规则
+        limit: 5, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      }
     })
 
     const getAlbumList = async () => {
@@ -33,33 +42,17 @@ export default defineComponent({
         const res = await request.post('/api-website/open/music/album/list', {
           data: {
             albumStatus: 1,
-            page: 1,
-            rows: 10
+            page: state.pageInfo.page,
+            rows: state.pageInfo.limit,
           }
         })
 
         state.albumList = res.data.rows
+        state.pageInfo.total = res.data.total
       } catch (e) {
         console.log(e)
       }
     }
-    // const getMusicList = async () => {
-    //   try {
-    //     const res = await request.post('/api-website/open/music/sheet/list', {
-    //       data: {
-    //         albumStatus: 'PASS',
-    //         page: 1,
-    //         rows: 5,
-    //         state: 1
-    //       }
-    //     })
-
-    //     state.musicList = res.data.rows
-    //   } catch (e) {
-    //     console.log(e)
-    //   }
-    // }
-
     onMounted(() => {
       getAlbumList()
       // getMusicList()
@@ -79,6 +72,13 @@ export default defineComponent({
             </div>
           </div>
         </div>
+        <pagination
+          total={state.pageInfo.total}
+          v-model:page={state.pageInfo.page}
+          limit={state.pageInfo.limit}
+          pageSizes={state.pageInfo.page_size}
+          pagination={getAlbumList}
+        />
       </div>
     )
   }

src/views/musicLibrary/modals/searchMusic.tsx

@@ -9,6 +9,7 @@ import hotSearch from '@/components/hotSearch'
 import request from '@/helpers/request'
 import silder from '@/components/silder'
 import searchInput from '@/components/searchInput'
+import pagination from '@/components/pagination'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -21,12 +22,20 @@ export default defineComponent({
     silder,
     searchInput,
     albumItem,
-    musicListItem
+    musicListItem,
+    pagination
   },
   setup() {
     const state = reactive({
       albumList: [],
-      musicList: []
+      musicList: [],
+      pageInfo: {
+        // 分页规则
+        limit:5, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
+      }
     })
 
     // const getAlbumList = async () => {
@@ -49,13 +58,14 @@ export default defineComponent({
         const res = await request.post('/api-website/open/music/sheet/list', {
           data: {
             albumStatus: 'PASS',
-            page: 1,
-            rows: 5,
+            page: state.pageInfo.page,
+            rows: state.pageInfo.limit,
             state: 1
           }
         })
 
         state.musicList = res.data.rows
+        state.pageInfo.total = res.data.total
       } catch (e) {
         console.log(e)
       }
@@ -67,17 +77,24 @@ export default defineComponent({
     })
     return () => (
       <div>
-        <div >
+        <div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-            <div class={styles.musicList}>
-                {state.musicList.map(item=>{
-                  return  <musicListItem item={item}></musicListItem>
+              <div class={styles.musicList}>
+                {state.musicList.map(item => {
+                  return <musicListItem item={item}></musicListItem>
                 })}
               </div>
             </div>
           </div>
         </div>
+        <pagination
+          total={state.pageInfo.total}
+          v-model:page={state.pageInfo.page}
+          limit={state.pageInfo.limit}
+          pageSizes={state.pageInfo.page_size}
+          pagination={getMusicList}
+        />
       </div>
     )
   }

src/views/musicLibrary/searchdetail.tsx

@@ -26,7 +26,7 @@ export default defineComponent({
     const state = reactive({
       albumList: [],
       musicList: [],
-      chiose:'album'
+      chiose: 'album'
     })
 
     const getAlbumList = async () => {
@@ -68,17 +68,17 @@ export default defineComponent({
     return () => (
       <div>
         <div class="">
-        <div class='wall' style={{height:'70px'}}></div>
+          <div class="wall" style={{ height: '70px' }}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
               <searchInput isWhile={true}></searchInput>
               <hotSearch type={'search'}></hotSearch>
               <ElTabs class={styles.myTab} v-model={state.chiose}>
                 <ElTabPane label="专辑" name="album">
-                  <searchAlbum/>
+                  {state.chiose == 'album' ? <searchAlbum /> : null}
                 </ElTabPane>
                 <ElTabPane label="乐谱" name="music">
-                    <searchMusic/>
+                  {state.chiose == 'music' ? <searchMusic /> : null}
                 </ElTabPane>
               </ElTabs>
             </div>