feat: add song download and share func

Plan.md

@@ -27,11 +27,17 @@
 7. mv 列表页
    - [x] 无限滚动
    - [x] mv 详情播放页
-8. 功能条
+8. 大功能条
+   - [x] 播放
    - 收藏
    - 分享
    - 添加
-9. [x] 懒加载
+9. 小功能条
+   - [x] 播放
+   - [x] 下载
+   - [x] 分享
+   - 添加
+10. [x] 懒加载
 
 - [ ] 样式调整
 - [ ] 组件抽离

src/api/song.js

 import { requset } from "./base";
 
-export const getSong = id => requset.get(`/song/url?id=${id}`);
+export const getSongUrl = id => requset.get(`/song/url?id=${id}`);
 
 export const getSongDetail = ids => requset.get(`/song/detail?ids=${ids}`);
 

src/components/common/ModListMenu.vue

@@ -21,6 +21,7 @@
       title="下载"
       aria-haspopup="true"
       v-if="kind == 0"
+      @click="download(song.id)"
     >
       <i class="list_menu__icon_down"></i>
       <span class="icon_txt">下载</span>
@@ -29,18 +30,27 @@
       class="list_menu__item list_menu__share js_share"
       title="分享"
       aria-haspopup="true"
+      @click="share"
     >
       <i class="list_menu__icon_share"></i>
       <span class="icon_txt">分享</span>
     </a>
   </div>
+  <black-tip :ifShow="true" :tip="tip" v-if="ifShow" />
 </template>
 
 <script>
-import { playTheSong, playSonglist, createSongs } from "common/utils";
-import { getPlaylistDetial, getSongDetail, getAlbum } from "api";
+import BlackTip from "components/common/BlackTip";
+import { playTheSong, playSonglist, createSongs, copyText } from "common/utils";
+import { getPlaylistDetial, getSongDetail, getAlbum, getSongUrl } from "api";
 
 export default {
+  data() {
+    return {
+      ifShow: false,
+      tip: "",
+    };
+  },
   props: {
     song: {
       type: Object,
@@ -87,6 +97,69 @@ export default {
         playSonglist(songs);
       });
     },
+    share() {
+      switch (this.kind) {
+        case 0:
+          this.tip = "已复制歌曲链接";
+          let txt = this.song.url;
+          copyText(txt);
+          this.ifShow = true;
+          if (this.timer) clearTimeout(this.timer);
+          setTimeout(() => {
+            this.ifShow = false;
+          }, 1000);
+          break;
+        case 1:
+          break;
+        case 2:
+          break;
+        default:
+          console.log(this.kind);
+      }
+    },
+    download(id) {
+      getSongUrl(id).then((res) => {
+        console.log(res);
+        let url = res.data.data[0].url;
+        this.downloadFile(url);
+        //window.open(url, "_self");
+      });
+    },
+    downloadFile(url) {
+      url = url.replace(/\\/g, "/");
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.responseType = "blob";
+      // 文件下载进度
+      xhr.onprogress = (res) => {
+        this.loadingTip =
+          "源文件下载中: " + ((res.loaded / res.total) * 100).toFixed(2) + "%";
+      };
+      xhr.onload = () => {
+        this.loadingTip = "";
+        this.loading = false;
+
+        if (xhr.status === 200) {
+          // 获取文件blob数据并保存
+          var num = url.lastIndexOf("/") + 1;
+          //把参数和文件名分割开
+          var fileName = url.substring(num).split("?")[0];
+          var export_blob = new Blob([xhr.response]);
+          var save_link = document.createElementNS(
+            "http://www.w3.org/1999/xhtml",
+            "a"
+          );
+          save_link.href = URL.createObjectURL(export_blob);
+          save_link.download = fileName;
+          save_link.click();
+        }
+      };
+      this.loading = true;
+      xhr.send();
+    },
+  },
+  components: {
+    BlackTip,
   },
 };
 </script>

src/views/musicLibrary/Ranking.vue

@@ -315,12 +315,9 @@ export default {
         sortType: 2,
       };
       getCommentsNew(params).then((res) => {
-        console.log(res.data);
         this.commentCount =
           res.data.data.totalCount > 5000 ? 5000 : res.data.data.totalCount;
         this.comments = res.data.data.comments;
-        console.log(this.commentCount);
-        console.log(this.comments);
       });
     },
     currentChange(v) {