完成单曲搜索,其他pr

src/views/SearchResult.vue

@@ -1,38 +1,44 @@
 <script setup>
-import { ref, onActivated, watch } from "vue";
+import { ref, onActivated, watch, onMounted } from "vue";
 import { searchResult } from "../network/search";
 import Songlist from "../components/Songlist.vue";
 import SongsList from "../components/SongsList.vue";
-import { useStore } from 'vuex';
+import { useStore } from "vuex";
+import { NPagination } from "naive-ui";
 
 const props = defineProps({
   type: String,
   keywords: String,
 });
 
-const store = useStore()
+const store = useStore();
 
 onActivated(() => {});
 
 const type = ref(props.type);
 const keywords = ref(props.keywords);
 const count = ref(0);
+const page = ref(1);
+const pageSize = ref(50);
 const things = ref("单曲");
 const songs = ref([]);
 
 watch(
-  () => [props.type, props.keywords],
+  () => [props.type, props.keywords, page.value, pageSize.value],
   ([t, k]) => {
-    search(t, k);
+    type.value = t;
+    keywords.value = k;
+    search();
   }
   // { immediate: true }
 );
 
-const search = (t, k) => {
-  type.value = t;
-  keywords.value = k;
+onMounted(() => {
+  search();
+});
 
-  switch (t) {
+const search = () => {
+  switch (type.value) {
     case "1":
     default:
       type.value = "1";
@@ -41,7 +47,12 @@ const search = (t, k) => {
   }
 
   if (keywords.value.length > 0) {
-    searchResult(k, 20, 0, t)
+    searchResult(
+      keywords.value,
+      pageSize.value,
+      (page.value - 1) * pageSize.value,
+      type.value
+    )
       .then((res) => {
         if (res.data.code == 200) {
           if (type.value == 1) {
@@ -58,13 +69,14 @@ const search = (t, k) => {
 };
 
 const selStyle = (t) => {
-  if(t == type.value){
-  const {primaryColor} = store.state.theme.themeOverrides.common
-  return {
-    color: primaryColor,
-    borderBottom: 'solid 2px ' +  primaryColor, 
-  }}
-}
+  if (t == type.value) {
+    const { primaryColor } = store.state.theme.themeOverrides.common;
+    return {
+      color: primaryColor,
+      borderBottom: "solid 2px " + primaryColor,
+    };
+  }
+};
 </script>
 
 <template>
@@ -78,9 +90,7 @@ const selStyle = (t) => {
       <div class="tabs">
         <div class="tab">
           <div class="btns">
-            <span class="caption" :style="selStyle('1')">
-              单曲
-            </span>
+            <span class="caption" :style="selStyle('1')"> 单曲 </span>
             <span class="caption" :style="selStyle('10')">
               专辑
             </span>
@@ -109,6 +119,12 @@ const selStyle = (t) => {
         <div class="panel" v-show="type == '100'"></div>
         <div class="panel" v-show="type == '1000'"></div>
       </div>
+      <div class="pager">
+        <NPagination
+          v-model:page="page"
+          :page-count="Math.ceil(count / pageSize)"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -146,12 +162,18 @@ export default {};
         //   border-bottom: solid 2px red;
         // }
       }
-      .bt{
+      .bt {
         margin-top: -2px;
         height: 2px;
         background-color: #f0f0f0;
       }
     }
   }
+
+  .pager{
+    margin: 18px;
+    display: flex;
+    justify-content: center;
+  }
 }
 </style>