基本完成单曲搜索

src/views/SearchResult.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { ref, onActivated, watch } from "vue";
+import { searchResult } from "../network/search";
+import Songlist from "../components/Songlist.vue";
+import SongsList from "../components/SongsList.vue";
+import { useStore } from 'vuex';
+
+const props = defineProps({
+  type: String,
+  keywords: String,
+});
+
+const store = useStore()
+
+onActivated(() => {});
+
+const type = ref(props.type);
+const keywords = ref(props.keywords);
+const count = ref(0);
+const things = ref("单曲");
+const songs = ref([]);
+
+watch(
+  () => [props.type, props.keywords],
+  ([t, k]) => {
+    search(t, k);
+  }
+  // { immediate: true }
+);
+
+const search = (t, k) => {
+  type.value = t;
+  keywords.value = k;
+
+  switch (t) {
+    case "1":
+    default:
+      type.value = "1";
+      things.value = "单曲";
+      break;
+  }
+
+  if (keywords.value.length > 0) {
+    searchResult(k, 20, 0, t)
+      .then((res) => {
+        if (res.data.code == 200) {
+          if (type.value == 1) {
+            count.value = res.data.result.songCount;
+            songs.value = res.data.result.songs;
+            console.log(songs.value);
+          }
+        }
+      })
+      .catch((err) => {
+        console.log("searchResult err ", err);
+      });
+  }
+};
+
+const selStyle = (t) => {
+  if(t == type.value){
+  const {primaryColor} = store.state.theme.themeOverrides.common
+  return {
+    color: primaryColor,
+    borderBottom: 'solid 2px ' +  primaryColor, 
+  }}
+}
+</script>
+
+<template>
+  <div class="main-content">
+    <div class="lmt-width">
+      <div class="title">
+        {{ keywords }}
+        <span class="result">找到 {{ count }} {{ things }}</span>
+      </div>
+
+      <div class="tabs">
+        <div class="tab">
+          <div class="btns">
+            <span class="caption" :style="selStyle('1')">
+              单曲
+            </span>
+            <span class="caption" :style="selStyle('10')">
+              专辑
+            </span>
+            <span class="caption" :style="selStyle('100')">
+              歌手
+            </span>
+            <span class="caption" :style="selStyle('1000')">
+              歌单
+            </span>
+            <span class="caption" :style="selStyle('1009')">
+              电台
+            </span>
+            <span class="caption" :style="selStyle('1004')">
+              MV
+            </span>
+            <span class="caption" :style="selStyle('1014')">
+              视频
+            </span>
+          </div>
+          <div class="bt"></div>
+        </div>
+        <div class="panel" v-show="type == '1'">
+          <Songlist :songs="songs"></Songlist>
+        </div>
+        <div class="panel" v-show="type == '10'"></div>
+        <div class="panel" v-show="type == '100'"></div>
+        <div class="panel" v-show="type == '1000'"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/css/common.less";
+
+.lmt-width {
+  padding: 0 12px;
+  .title {
+    font-size: 30px;
+    .result {
+      font-size: 13px;
+      color: #999;
+    }
+  }
+
+  .tabs {
+    .tab {
+      .btns {
+        font-size: 16px;
+        display: flex;
+        .caption {
+          padding: 6px 6px;
+          margin-right: 16px;
+          color: #666;
+          border-bottom: solid 2px #f0f0f0;
+        }
+        // .sel {
+        //   color: red;
+        //   border-bottom: solid 2px red;
+        // }
+      }
+      .bt{
+        margin-top: -2px;
+        height: 2px;
+        background-color: #f0f0f0;
+      }
+    }
+  }
+}
+</style>