feat: add playlist classified page

* modify nav bar * modify ranking page * add new api * imporve search function * fix util method * player bar add buffershow

feat: add playlist classified page
* modify nav bar * modify ranking page * add new api * imporve search function * fix util method * player bar add buffershow
1b236c32 · Zachary · 2979712e · 1b236c32 · 1b236c32 · 1b236c32
10 changed file
--- a/src/assets/img/logo.jpeg
+++ b/src/assets/img/logo.jpeg
--- a/public/index.html
+++ b/public/index.html
 <!DOCTYPE html>
 <html lang="">
  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.jpeg" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

--- a/src/api/other.js
+++ b/src/api/other.js
@@ -3,5 +3,3 @@ import { requset } from "./base";
 export const getBanner = () => requset.get("/banner?type=0");

 export const getUserDetail = id => requset.get(`/user/detail?uid=${id}`);
-
-export const getCatList = () => requset.get("(/playlist/catlist");
--- a/src/api/playlist.js
+++ b/src/api/playlist.js
 import { requset } from "./base";

-export const getPlayList = (limit, page, cat) => {
-  let order = "hot";
+// ( 网友精选碟 )
+export const getPlayList = (limit, page, cat, order) => {
  let offset = (parseInt(page) - 1) * limit;
  let params = {
    limit: limit,
@@ -12,7 +12,12 @@ export const getPlayList = (limit, page, cat) => {
  return requset.get("/top/playlist", { params: params });
 };

+// 获取歌单详情
 export const getPlaylistDetial = id => requset.get(`playlist/detail?id=${id}`);

+// 调用后可获取歌单详情动态部分,如评论数,是否收藏,播放数
 export const getPlaylistDynamicDetial = id =>
  requset.get(`/playlist/detail/dynamic?id=${id}`);
+
+// 获取歌单种类
+export const getCatList = () => requset.get("/playlist/catlist");
--- a/src/common/apiHelper.js
+++ b/src/common/apiHelper.js
@@ -46,6 +46,7 @@ export function createOneSong(song) {
    id,
    name,
    img: al.picUrl,
+    url: genSongPlayUrl(song.id),
    artists: ar,
    artistsText: genArtistisText(ar),
    duration: dt,

--- a/src/components/common/SearchInput.vue
+++ b/src/components/common/SearchInput.vue
 <template>
  <el-autocomplete
    id="my-search-input"
-    placeholder="请输入内容"
+    placeholder="单曲/专辑/MV/歌手/用户/歌词"
    v-model="state"
    clearable="clearable"
    popper-class="my-autocomplete"
@@ -56,7 +56,6 @@ export default {
    },
    normalSearch() {
      let key = document.getElementById("my-search-input").value;
-      console.log(key);
      if (key)
        this.$router.push({
          path: "/musicLibrary/searchResultDetail",
@@ -88,7 +87,11 @@ export default {
            console.log(item.type);
        }
      } else {
-        console.log("handleSelect", item);
+        if (item.value)
+          this.$router.push({
+            path: "/musicLibrary/searchResultDetail",
+            query: { keyword: item.value },
+          });
      }
    },
    querySearchAsync(queryString, cb) {

--- a/src/components/content/NavBar.vue
+++ b/src/components/content/NavBar.vue
@@ -3,10 +3,10 @@
    <div class="mod_header">
      <div class="section_inner">
        <h1 class="qqmusic_title">
-          <a>
-            <!-- <img src="" alt="YZ-music" class="logo" /> -->
-            <h1 class="logo">YZ-music</h1>
-          </a>
+          <!-- <a>
+            <img src="" alt="YZ-music" class="logo" />
+          </a> -->
+          <h1 class="logo">YZ-music</h1>
        </h1>
        <!-- 导航 S -->
        <ul class="mod_top_nav" role="nav">
@@ -189,32 +189,11 @@ export default {
 </script>

 <style scoped>
-blockquote,
-body,
-button,
-dd,
-dl,
-dt,
-fieldset,
-form,
 h1,
 h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-html,
-input,
-lengend,
+ul,
 li,
-ol,
-p,
-pre,
-td,
-textarea,
-th,
-ul {
+p {
  margin: 0;
  padding: 0;
 }
@@ -400,6 +379,9 @@ ul {
  max-height: 800px;
  transition: max-height 0.6s ease-out;
 }
+a:hover {
+  color: #31c27c;
+}

 .logo {
  font-size: 38px;

--- a/src/components/content/Player.vue
+++ b/src/components/content/Player.vue
@@ -64,7 +64,7 @@
          </div>
          <div class="m-pbar" data-action="noop">
            <div class="barbg j-flag" @click="clickBar">
-              <div class="rdy" style="width: 0px"></div>
+              <div class="rdy" :style="'width:' + bufferPrecent + 'px'"></div>
              <div class="cur" :style="'width: ' + barPrecent + '%'">
                <span class="btn f-tdn f-alpha" @mousedown="onChangeBar">
                  <i></i>
@@ -159,6 +159,7 @@ export default {
      songReady: false,
      volumePrecent: 1,
      volume: 100,
+      bufferTime: 0,
    };
  },
  mounted() {
@@ -177,6 +178,7 @@ export default {
      this.songReady = true;
    },
    end() {
+      this.bufferTime = 0;
      this.next();
    },
    togglePlay() {
@@ -196,14 +198,19 @@ export default {
      this.audio.pause();
    },
    prev() {
+      this.bufferTime = 0;
      this.$store.dispatch("music/startSong", this.prevSong);
    },
    next() {
+      this.bufferTime = 0;
      this.$store.dispatch("music/startSong", this.nextSong);
    },
    timeupdate(e) {
      const time = e.target.currentTime;
-      //console.log(time);
+      let timeRang = e.target.buffered;
+      let buffer = timeRang.end(timeRang.length - 1);
+      this.bufferTime = buffer;
+      console.log(buffer);
      this.$store.commit("music/setCurrentTime", time);
    },
    onChangeMode() {
@@ -327,6 +334,9 @@ export default {
      if (!this.isHoldBtn)
        return (this.currentTime / (this.currentSong.duration / 1000)) * 100;
    },
+    bufferPrecent() {
+      return (this.bufferTime / (this.currentSong.duration / 1000)) * 493;
+    },
  },
  watch: {
    currentSong(newSong, oldSong) {

--- a/src/views/musicLibrary/Classified.vue
+++ b/src/views/musicLibrary/Classified.vue
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -158,10 +158,10 @@
              </div>

              <div class="songlist__songname">
-                <i
+                <!-- <i
                  class="songlist__icon songlist__icon_exclusive sprite"
                  title="独家"
-                ></i>
+                ></i> -->

                <a
                  class="songlist__icon songlist__icon_mv sprite"