├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── screenshot
    │   ├── MV详情.png
    │   ├── 专辑详情.png
    │   ├── 发现音乐.png
    │   ├── 推荐歌单.png
    │   ├── 搜索结果.png
    │   ├── 播放列表.png
    │   ├── 最新MV.png
    │   ├── 最新音乐.png
    │   ├── 歌单详情.png
    │   ├── 歌手详情.png
    │   ├── 歌词详情.png
    │   └── 热搜榜.png
├── src
    ├── App.vue
    ├── assets
    │   ├── common
    │   │   └── tab.css
    │   ├── icon
    │   │   ├── iconfont.css
    │   │   ├── iconfont.json
    │   │   └── iconfont.ttf
    │   ├── imgs
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   ├── 6.jpg
    │   │   ├── 7.jpg
    │   │   ├── 8.jpg
    │   │   ├── defaultImg.png
    │   │   ├── loading.png
    │   │   ├── musicDemo.jpg
    │   │   ├── mvDemo.jpg
    │   │   └── player_bar.png
    │   └── logo.png
    ├── components
    │   ├── AudioChen.vue
    │   ├── Bottom.vue
    │   ├── Index.vue
    │   ├── Pagination.vue
    │   ├── Queue.vue
    │   ├── SongDetail.vue
    │   └── Top.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   ├── index.js
    │   └── mutation.js
    ├── utils
    │   ├── api.js
    │   ├── request.js
    │   └── utils.js
    └── views
    │   ├── Album
    │       └── Album.vue
    │   ├── Artist
    │       └── Artist.vue
    │   ├── Discover
    │       └── Discover.vue
    │   ├── MVs
    │       └── MVs.vue
    │   ├── MvDetail
    │       └── MvDetail.vue
    │   ├── NewSongs
    │       └── NewSongs.vue
    │   ├── Playlist
    │       └── Playlist.vue
    │   ├── Recommend
    │       └── Recommend.vue
    │   └── Result
    │       └── Result.vue
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 MrRainbowYoo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 小陈音乐播放器
  2 | 
  3 | ## 💬前言
  4 | 一款在线音乐播放器，是我个人练手的小项目，使用Vue2全家桶编写，部分UI风格参考**网易云音乐**。目前暂未做移动端适配。
  5 | 
  6 | 路过的朋友们麻烦点个 "⭐Star" ~ 
  7 | 
  8 | > 请使用PC访问 **[在线演示](http://duoduozuikeail.top/)** (最好用Chrome)
  9 | 
 10 | ## 💪网易云音乐NodeJS版API
 11 | > 感谢开源项目 *NeteaseCloudMusicApi* 提供的支持<br>
 12 | > [Github地址](https://github.com/Binaryify/NeteaseCloudMusicApi)<br>
 13 | > [使用文档](https://binaryify.github.io/NeteaseCloudMusicApi/#/)
 14 | 
 15 | ## 👉技术栈
 16 | - Vue
 17 | - Vue Cli
 18 | - Vue Router
 19 | - Vuex
 20 | - ElementUI
 21 | - Axios
 22 | 
 23 | ## 🚩运行项目
 24 | #### 后端
 25 |     # 克隆项目到本地
 26 |     git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
 27 | 
 28 |     # 进入项目文件夹
 29 |     cd NeteaseCloudMusicApi
 30 | 
 31 |     # 安装依赖
 32 |     npm install
 33 | 
 34 |     # 启动项目（默认3000端口）
 35 |     node app.js
 36 | #### 本项目
 37 |     # 克隆项目到本地
 38 |     git clone https://github.com/MrRainbowYoo/Music_Player.git
 39 | 
 40 |     # 进入项目文件夹
 41 |     cd Music_Player
 42 | 
 43 |     # 安装依赖
 44 |     npm install
 45 | 
 46 |     # 启动项目
 47 |     npm run serve
 48 | 
 49 | 
 50 | ## 🚀功能列表
 51 | - [x] 音乐播放/暂停/下一首/上一首
 52 | - [x] 进度条控制
 53 | - [x] 音量调节
 54 | - [x] 推荐歌单
 55 | - [x] 最新音乐
 56 | - [x] 推荐MV
 57 | - [x] MV播放
 58 | - [x] 自动切换下一首
 59 | - [x] 列表循环播放
 60 | - [x] 播放列表
 61 | - [x] 模糊搜索
 62 | - [x] 热搜榜
 63 | - [x] 搜索历史
 64 | - [x] 歌词滚动
 65 | - [x] 歌单/专辑/歌手详情
 66 | - [x] 查看评论
 67 | - [ ] 快捷键操作
 68 | - [ ] 用户登录
 69 | - [ ] 收藏歌单
 70 | 
 71 | ## 💻部分页面截图
 72 | 
 73 | **发现音乐**<br>
 74 | [![发现音乐](https://z3.ax1x.com/2021/07/28/WT09sA.md.png)](https://imgtu.com/i/WT09sA)
 75 | 
 76 | **推荐歌单**<br>
 77 | [![推荐歌单](https://z3.ax1x.com/2021/07/28/WT0CqI.md.png)](https://imgtu.com/i/WT0CqI)
 78 | 
 79 | **最新音乐**<br>
 80 | [![最新音乐](https://z3.ax1x.com/2021/07/28/WT0kIf.md.png)](https://imgtu.com/i/WT0kIf)
 81 | 
 82 | **最新MV**<br>
 83 | [![最新MV](https://z3.ax1x.com/2021/07/28/WT0iZt.md.png)](https://imgtu.com/i/WT0iZt)
 84 | 
 85 | **搜索结果**<br>
 86 | [![搜索结果](https://z3.ax1x.com/2021/07/28/WTwxRe.md.png)](https://imgtu.com/i/WTwxRe)
 87 | 
 88 | **歌词详情**<br>
 89 | [![歌词详情](https://z3.ax1x.com/2021/07/28/WT0ZRg.md.png)](https://imgtu.com/i/WT0ZRg)
 90 | 
 91 | **播放列表**<br>
 92 | [![播放列表](https://z3.ax1x.com/2021/07/28/WT0FdP.md.png)](https://imgtu.com/i/WT0FdP)
 93 | 
 94 | **MV详情**<br>
 95 | [![MV详情](https://z3.ax1x.com/2021/07/28/WT0Ei8.md.png)](https://imgtu.com/i/WT0Ei8)
 96 | 
 97 | **歌手详情**<br>
 98 | [![歌手详情](https://z3.ax1x.com/2021/07/28/WT0pMd.md.png)](https://imgtu.com/i/WT0pMd)
 99 | 
100 | <!-- **热搜榜与搜索历史**
101 | [![热搜榜](https://z3.ax1x.com/2021/07/28/WTwvGD.png )](https://imgtu.com/i/WTwvGD) -->
102 | 
103 | **其他界面**
104 | | 歌单详情        |  专辑详情    |
105 | | -------   | -----   |
106 | | [![歌单详情](https://z3.ax1x.com/2021/07/28/WT0ezQ.md.png)](https://imgtu.com/i/WT0ezQ)        | [![专辑详情](https://z3.ax1x.com/2021/07/28/WTwzxH.md.png)](https://imgtu.com/i/WTwzxH)      |
107 | 
108 | ## 📆历史版本
109 | #### V1.0.0 (2021年7月28日)
110 | - 正式版发布
111 | 
112 | ## 📣结语
113 | 本项目音视频文件来自各网站接口，不会修改任何音视频文件。
114 | 
115 | 本项目仅为个人前端练手项目。本站音频版权来自各网站，只提供数据查询服务，不提供任何音频存储和贩卖服务。
116 | 
117 | 请勿用作商业用途，请勿通过本项目下载盗版歌曲资源，否则后果自负！
118 | 
119 | **正常使用请选择[网易云音乐官方客户端](https://music.163.com/)**
120 | 
121 | ## 📝License
122 | [MIT](LICENSE)


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "musicplayer",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "description": "a music player developed by Vue",
 6 |   "author": "xiaochen",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "lint": "vue-cli-service lint"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.21.1",
14 |     "colorthief": "^2.3.2",
15 |     "core-js": "^3.6.5",
16 |     "el-table-infinite-scroll": "^1.0.10",
17 |     "element-ui": "^2.15.2",
18 |     "vue": "^2.6.11",
19 |     "vue-lazyload": "^1.3.3",
20 |     "vue-router": "^3.5.1",
21 |     "vuex": "^3.6.2"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "babel-eslint": "^10.1.0",
28 |     "eslint": "^6.7.2",
29 |     "eslint-plugin-vue": "^6.2.2",
30 |     "vue-template-compiler": "^2.6.11"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>小陈音乐</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/public/screenshot/MV详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/MV详情.png


--------------------------------------------------------------------------------
/public/screenshot/专辑详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/专辑详情.png


--------------------------------------------------------------------------------
/public/screenshot/发现音乐.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/发现音乐.png


--------------------------------------------------------------------------------
/public/screenshot/推荐歌单.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/推荐歌单.png


--------------------------------------------------------------------------------
/public/screenshot/搜索结果.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/搜索结果.png


--------------------------------------------------------------------------------
/public/screenshot/播放列表.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/播放列表.png


--------------------------------------------------------------------------------
/public/screenshot/最新MV.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/最新MV.png


--------------------------------------------------------------------------------
/public/screenshot/最新音乐.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/最新音乐.png


--------------------------------------------------------------------------------
/public/screenshot/歌单详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/歌单详情.png


--------------------------------------------------------------------------------
/public/screenshot/歌手详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/歌手详情.png


--------------------------------------------------------------------------------
/public/screenshot/歌词详情.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/歌词详情.png


--------------------------------------------------------------------------------
/public/screenshot/热搜榜.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/public/screenshot/热搜榜.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Top></Top>
 4 |     <Index>
 5 |       <keep-alive>
 6 |         <router-view v-if="this.$route.meta.keepAlive"></router-view>
 7 |       </keep-alive>
 8 |       <router-view v-if="!this.$route.meta.keepAlive"></router-view>
 9 |     </Index>
10 |     <SongDetail :show="show"></SongDetail>
11 |     <transition name="fade">
12 |       <Queue v-show="showQueue"></Queue>
13 |     </transition>
14 |     <Bottom></Bottom>
15 |     <div style="fontSize:12px; position: absolute; bottom: 10%;left:10px;zIndex: -1;">
16 |       备案号：<a href="https://beian.miit.gov.cn" target="_blank">浙ICP备19010344号-1</a>
17 |     </div>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import Top from './components/Top.vue'
23 | import Index from './components/Index.vue'
24 | import Bottom from './components/Bottom.vue'
25 | import SongDetail from './components/SongDetail.vue'
26 | import Queue from './components/Queue.vue'
27 | 
28 | export default {
29 |   name: 'App',
30 |   components: {
31 |     Top,
32 |     Index,
33 |     Bottom,
34 |     SongDetail,
35 |     Queue
36 |   },
37 |   data(){
38 |     return {
39 |       show:true,
40 |       showQueue:false
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style>
47 |   *{
48 |     margin: 0;
49 |     padding: 0;
50 |   }
51 | 
52 |   #app {
53 |     height: 100vh;
54 |     display: flex;
55 |     flex-direction: column;
56 |     min-width: 500px;
57 |   }
58 | 
59 |   .header {
60 |     height: 60px;
61 |     position: relative;
62 |     top: 0;
63 |     left: 0;
64 |     right: 0;
65 |   }
66 | 
67 |   .bottom {
68 |     position: fixed;
69 |     bottom: 0;
70 |     left: 0;
71 |     right: 0;
72 |     height: 60px;
73 |   }
74 | 
75 |   .index {
76 |     position: fixed;
77 |     top: 60px;
78 |     bottom: 60px;
79 |     left: 0;
80 |     right: 0;
81 |   }
82 | 
83 |   /* 去除scrollbar横向滚动条 */
84 |   .el-scrollbar__wrap {
85 |       overflow-x: hidden !important;
86 |   }
87 | 
88 |   .fade-enter-active, .fade-leave-active {
89 |       transition: transform .5s
90 |   }
91 |   .fade-enter, .fade-leave-active {
92 |     transform: translate3d(0,100%,0);
93 |   }
94 | 
95 |   .el-loading-spinner .path {
96 |     stroke: rgb(236, 65, 65) !important;
97 |   }
98 | </style>
99 | 


--------------------------------------------------------------------------------
/src/assets/common/tab.css:
--------------------------------------------------------------------------------
 1 | .songs-table .el-table__row:hover .plus{
 2 |     display: block;
 3 | }
 4 | 
 5 | .el-tabs__active-bar {
 6 |     background-color: rgb(236, 65, 65) !important;
 7 | }
 8 | 
 9 | .el-tabs__item.is-active {
10 |     color: rgb(236, 65, 65) !important;
11 | }
12 | 
13 | .el-tabs__item:not(.is-active):hover {
14 |     color: rgba(236, 65, 65, 0.555) !important;
15 | }


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: "iconfont"; /* Project id  */
 3 |   src: url('iconfont.ttf?t=1625120574940') format('truetype');
 4 | }
 5 | 
 6 | .iconfont {
 7 |   font-family: "iconfont" !important;
 8 |   /*font-size: 16px;*/
 9 |   font-style: normal;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 | }
13 | 
14 | .icon-jingyin:before {
15 |   content: "\e65e";
16 | }
17 | 
18 | .icon-yinliang:before {
19 |   content: "\e662";
20 | }
21 | 
22 | .icon-dianzan:before {
23 |   content: "\e63b";
24 | }
25 | 
26 | .icon-music:before {
27 |   content: "\e617";
28 | }
29 | 
30 | .icon-yinle:before {
31 |   content: "\e609";
32 | }
33 | 
34 | .icon-shangyishou:before {
35 |   content: "\e63c";
36 | }
37 | 
38 | .icon-xiayishou:before {
39 |   content: "\e63e";
40 | }
41 | 
42 | .icon-yinleliebiao-:before {
43 |   content: "\e60f";
44 | }
45 | 
46 | .icon-yinfu:before {
47 |   content: "\e604";
48 | }
49 | 
50 | .icon-zanting:before {
51 |   content: "\e887";
52 | }
53 | 
54 | .icon-bofangMV:before {
55 |   content: "\e6a3";
56 | }
57 | 
58 | .icon-yinleliebiao:before {
59 |   content: "\e7fe";
60 | }
61 | 
62 | .icon-pause:before {
63 |   content: "\e664";
64 | }
65 | 
66 | .icon-play:before {
67 |   content: "\e665";
68 | }
69 | 
70 | .icon-lajitong:before {
71 |   content: "\e76e";
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "id": "",
  3 |   "name": "",
  4 |   "font_family": "iconfont",
  5 |   "css_prefix_text": "icon-",
  6 |   "description": "",
  7 |   "glyphs": [
  8 |     {
  9 |       "icon_id": "807273",
 10 |       "name": "静音",
 11 |       "font_class": "jingyin",
 12 |       "unicode": "e65e",
 13 |       "unicode_decimal": 58974
 14 |     },
 15 |     {
 16 |       "icon_id": "807277",
 17 |       "name": "音量",
 18 |       "font_class": "yinliang",
 19 |       "unicode": "e662",
 20 |       "unicode_decimal": 58978
 21 |     },
 22 |     {
 23 |       "icon_id": "1703514",
 24 |       "name": "点赞",
 25 |       "font_class": "dianzan",
 26 |       "unicode": "e63b",
 27 |       "unicode_decimal": 58939
 28 |     },
 29 |     {
 30 |       "icon_id": "3878673",
 31 |       "name": "音乐",
 32 |       "font_class": "music",
 33 |       "unicode": "e617",
 34 |       "unicode_decimal": 58903
 35 |     },
 36 |     {
 37 |       "icon_id": "4608957",
 38 |       "name": "音乐",
 39 |       "font_class": "yinle",
 40 |       "unicode": "e609",
 41 |       "unicode_decimal": 58889
 42 |     },
 43 |     {
 44 |       "icon_id": "8341784",
 45 |       "name": "上一首",
 46 |       "font_class": "shangyishou",
 47 |       "unicode": "e63c",
 48 |       "unicode_decimal": 58940
 49 |     },
 50 |     {
 51 |       "icon_id": "8341786",
 52 |       "name": "下一首",
 53 |       "font_class": "xiayishou",
 54 |       "unicode": "e63e",
 55 |       "unicode_decimal": 58942
 56 |     },
 57 |     {
 58 |       "icon_id": "11428241",
 59 |       "name": "音乐列表-01",
 60 |       "font_class": "yinleliebiao-",
 61 |       "unicode": "e60f",
 62 |       "unicode_decimal": 58895
 63 |     },
 64 |     {
 65 |       "icon_id": "15056495",
 66 |       "name": "音符",
 67 |       "font_class": "yinfu",
 68 |       "unicode": "e604",
 69 |       "unicode_decimal": 58884
 70 |     },
 71 |     {
 72 |       "icon_id": "17782644",
 73 |       "name": "暂停",
 74 |       "font_class": "zanting",
 75 |       "unicode": "e887",
 76 |       "unicode_decimal": 59527
 77 |     },
 78 |     {
 79 |       "icon_id": "18965598",
 80 |       "name": "播放MV",
 81 |       "font_class": "bofangMV",
 82 |       "unicode": "e6a3",
 83 |       "unicode_decimal": 59043
 84 |     },
 85 |     {
 86 |       "icon_id": "19654124",
 87 |       "name": "音乐列表",
 88 |       "font_class": "yinleliebiao",
 89 |       "unicode": "e7fe",
 90 |       "unicode_decimal": 59390
 91 |     },
 92 |     {
 93 |       "icon_id": "19663518",
 94 |       "name": "暂停",
 95 |       "font_class": "pause",
 96 |       "unicode": "e664",
 97 |       "unicode_decimal": 58980
 98 |     },
 99 |     {
100 |       "icon_id": "19663520",
101 |       "name": "播放",
102 |       "font_class": "play",
103 |       "unicode": "e665",
104 |       "unicode_decimal": 58981
105 |     },
106 |     {
107 |       "icon_id": "21777665",
108 |       "name": "垃圾桶",
109 |       "font_class": "lajitong",
110 |       "unicode": "e76e",
111 |       "unicode_decimal": 59246
112 |     }
113 |   ]
114 | }
115 | 


--------------------------------------------------------------------------------
/src/assets/icon/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/icon/iconfont.ttf


--------------------------------------------------------------------------------
/src/assets/imgs/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/1.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/2.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/3.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/4.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/5.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/6.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/7.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/8.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/defaultImg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/defaultImg.png


--------------------------------------------------------------------------------
/src/assets/imgs/loading.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/loading.png


--------------------------------------------------------------------------------
/src/assets/imgs/musicDemo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/musicDemo.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/mvDemo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/mvDemo.jpg


--------------------------------------------------------------------------------
/src/assets/imgs/player_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/imgs/player_bar.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrRainbowYoo/Music_Player/766ee81612a5b4d8818e8d4b6b41ba2d46a2918c/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/AudioChen.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="audio-wrap">
  3 |     <audio
  4 |         :src="musicUrl"
  5 |         controls 
  6 |         autoplay 
  7 |         ref="audio" 
  8 |         style="display:none" 
  9 |         @canplay="getDuration" 
 10 |         @timeupdate="updateTime"
 11 |         @ended="onEnded" 
 12 |         您的浏览器不支持audio标签
 13 |     ></audio>
 14 |     <div class="audio-left">
 15 |         <div class="audio-btns">
 16 |         <span class="iconfont icon-shangyishou" title="上一首" @click="prev"></span>
 17 |         <span class="iconfont icon-play" title="播放" v-if="!isPaused" @click="changeStatus('play')"></span>
 18 |         <span class="iconfont icon-pause" title="暂停" v-if="isPaused" @click="changeStatus('pause')"></span>        
 19 |         <span class="iconfont icon-xiayishou" title="下一首" @click="next"></span>
 20 |         </div>
 21 | 
 22 |         <div class="audio-progress">
 23 |             <span>{{currentTime | timeFormat}}</span>
 24 |             <div class="block">
 25 |                 <el-slider 
 26 |                     v-model="currentTime"
 27 |                     :max="duration"
 28 |                     :show-tooltip="false"
 29 |                     @change="changeCurrentTime"
 30 |                     @mousedown.native="isDrag = true"
 31 |                     @mouseup.native="isDrag = false"
 32 |                 ></el-slider>
 33 |             </div>
 34 |             <span>{{duration | timeFormat}}</span>
 35 |         </div>
 36 |     </div>
 37 | 
 38 |     <div class="audio-right">
 39 |         <div class="slot"></div>
 40 |         <div class="audio-voice">
 41 |             <span class="iconfont icon-yinliang" v-if="voice" @click="voice=0"></span>
 42 |             <span class="iconfont icon-jingyin" v-if="!voice" @click="voice=(cacheVoice == 0 ? 0.7 : cacheVoice)"></span>
 43 |             <div class="block">
 44 |                 <el-slider
 45 |                     v-model="voice"
 46 |                     :max=1
 47 |                     :step=0.1
 48 |                     :show-tooltip="true"
 49 |                     @input="changeVolume"
 50 |                     @change="changeCacheVolume"
 51 |                     :format-tooltip="formatTooltip"
 52 |                 ></el-slider>
 53 |             </div>
 54 |         </div>
 55 |     </div>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | export default {
 61 |     data(){
 62 |         return {
 63 |             currentTime:0,
 64 |             duration:0,
 65 |             isPaused:false,
 66 |             isDrag:false, //添加判断是否拖拽，可解决拖动超过1s出现的bug
 67 |             voice:0.7,
 68 |             cacheVoice:0.7
 69 |         }
 70 |     },
 71 |     props:{
 72 |         musicUrl:String
 73 |     },
 74 |     methods:{
 75 |         changeStatus(option){
 76 |             if(option=='play'){
 77 |                 if(this.musicUrl){
 78 |                     this.isPaused = !this.isPaused
 79 |                     this.$refs.audio.play()
 80 |                     this.$emit('play')
 81 |                 }else {
 82 |                     this.$message({
 83 |                         type:'error',
 84 |                         message:'还没有播放音乐哦',
 85 |                         showClose:true
 86 |                     })
 87 |                 }
 88 |             }else{
 89 |                 this.isPaused = !this.isPaused
 90 |                 this.$refs.audio.pause()
 91 |                 this.$emit('pause')
 92 |             }
 93 |         },
 94 |         changeCurrentTime(){
 95 |             // 存在拖动进度条歌词不随着滚动的bug
 96 |             this.$refs.audio.currentTime = this.currentTime
 97 |             this.isDrag = false
 98 |             // this.changeStatus(this.isPaused?'play':'pause')
 99 |         },
100 |         updateTime(e){
101 |             // console.log(e.target.currentTime)
102 |             if(!this.isDrag){
103 |                 this.currentTime = e.target.currentTime
104 |                 this.$emit('timeupdate',event)
105 |             }
106 |         },
107 |         getDuration(e){
108 |             // console.log(e.target.duration)
109 |             this.duration = e.target.duration
110 | 
111 |             // 下面两句会导致在暂停时滑动进度条使得按钮状态改变，图片旋转而不播放的bug
112 |             // this.isPaused = true
113 |             // this.$emit('play')
114 |         },
115 |         changeVolume(){
116 |             this.$refs.audio.volume = this.voice
117 |         },
118 |         changeCacheVolume(){
119 |             // 设置缓存音量,点击静音恢复至该音量，如缓存也为0，恢复默认0.7
120 |             this.cacheVoice = this.voice
121 |         },
122 |         formatTooltip(val) {
123 |             return val*100+"%";
124 |         },
125 |         onEnded(){
126 |             // this.isPaused = false
127 |             // this.$emit('pause')
128 |             this.$emit('end')
129 |         },
130 |         next(){
131 |             this.$emit('next')
132 |         },
133 |         prev(){
134 |             this.$emit('prev')
135 |         }
136 | 
137 |     },
138 |     filters:{
139 |         timeFormat(time){
140 |             let min = parseInt(time / 60).toString().padStart(2,'0')
141 |             let second = parseInt(time-min*60).toString().padStart(2,'0')
142 |             return min+":"+second
143 |         },
144 |     },
145 |     watch:{
146 |         voice(){
147 |             if(!this.voice){
148 |                 this.$refs.audio.muted = true
149 |             }else
150 |                 this.$refs.audio.muted = false
151 |         },
152 |         musicUrl(){
153 |             if(this.musicUrl)
154 |                 this.isPaused = true
155 |             else{
156 |                 this.isPaused = false
157 |                 this.duration = 0
158 |                 this.$refs.audio.currentTime = 0
159 |                 this.currentTime = 0
160 |             }
161 |         }
162 |     }
163 | }
164 | </script>
165 | 
166 | <style>
167 |     .audio-wrap {
168 |         width: 600px;
169 |         min-width: 400px;
170 |         height: 100%;
171 |         margin: 0 auto;
172 |         padding: 10px;
173 |         box-sizing: border-box;
174 |         display: flex;
175 |     }
176 | 
177 |     .audio-left {
178 |         flex: 1;
179 |     }
180 | 
181 |     .audio-btns {
182 |         width: 50%;
183 |         height: 50%;
184 |         margin: 0 auto;
185 |         display: flex;
186 |         justify-content: space-evenly;
187 |         align-items: center;
188 |     }
189 | 
190 |     .audio-btns span {
191 |         cursor: pointer;
192 |         font-size: 26px;
193 |         padding: 5px;
194 |         border-radius: 10px;
195 |     }
196 | 
197 |     .audio-btns span:hover {
198 |         background-color: #ecf0f1;
199 |     }
200 | 
201 |     .audio-progress{
202 |         display: flex;
203 |         align-items: center;
204 |     }
205 | 
206 |     .audio-progress span {
207 |         font-size: 12px;
208 |         color: #bdc3c7;
209 |     }
210 | 
211 |     .block {
212 |         flex: 1;
213 |         margin: 0 10px;
214 |     }
215 |     
216 |     .el-slider__bar {
217 |         background-color: rgb(225, 62, 62) !important;
218 |     }
219 | 
220 |     .el-slider__button {
221 |         border-color: rgb(225, 62, 62) !important;
222 |         width: 8px !important;
223 |         height: 8px !important;
224 |     }
225 | 
226 |     .audio-right {
227 |         width: 20%;
228 |         min-width: 100px;
229 |         margin-left: 50px;
230 |     }
231 | 
232 |     .slot {
233 |         height: 50%;
234 |     }
235 | 
236 |     .audio-voice {
237 |         display: flex;
238 |         align-items: center;
239 |     }
240 | 
241 |     .audio-voice span {
242 |         cursor: pointer;
243 |         margin-right: 10px; /* 远离音量条，防止误触 */
244 |     }
245 | </style>


--------------------------------------------------------------------------------
/src/components/Bottom.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bottom">
  3 |     <div class="music-box">
  4 |     <!-- onselectstart="return false" 为的是避免多次点击左下角歌曲封面的时候出现蓝色选中效果 -->
  5 |     <div class="img-wrap el-icon-arrow-up" @click="toSongDetail()" title="打开音乐详情页" onselectstart="return false"> 
  6 |         <img :src="globalMusicInfo.imgUrl ? globalMusicInfo.imgUrl : defaultImg" alt="">
  7 |     </div>
  8 |     <div class="music-info" v-show="globalMusicInfo.songName">
  9 |         <span class="music-name" :title="globalMusicInfo.songName">{{globalMusicInfo.songName}}</span>
 10 |         
 11 |         <div class="music-singer">
 12 |             <span v-for="(singer,i) in globalMusicInfo.artistInfo" :key="i+99">{{singer.name}} </span>
 13 |         </div>
 14 |     </div>
 15 |     <span class="music-name" v-show="!globalMusicInfo.songName" style="line-height:50px">还没有播放音乐哦</span>
 16 |     </div>
 17 |     <AudioChen :musicUrl="globalMusicUrl" @timeupdate="updateTime" @play="playStatus" @pause="pauseStatus" @next="next" @prev="prev" @end="next"></AudioChen>
 18 |     <!-- <audio :src="globalMusicUrl" autoplay controls ref="audio" @timeupdate="updateTime" @pause="pauseStatus" @play="playStatus"></audio> -->
 19 | 
 20 |     <!-- el-tooltip会在#app外生成一个dom -->
 21 |     <!-- <el-tooltip content="播放队列" placement="top" effect="light"> -->
 22 |     <div @click="showQueue($event)" 
 23 |         ref="queue"
 24 |         title="播放队列"
 25 |         :class="{'delete-queue-style bofangliebiao'
 26 |         :this.queueStyle=='delete','add-queue-style bofangliebiao'
 27 |         :this.queueStyle=='add','bofangliebiao'
 28 |         :this.queueStyle=='normal'}">
 29 |             <span class="iconfont icon-yinleliebiao"></span>
 30 |             <span>{{musicQueue.length}}</span>
 31 |     </div>
 32 |     <!-- </el-tooltip> -->
 33 | 
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script scoped>
 38 | import AudioChen from './AudioChen.vue'
 39 | export default {
 40 |     data(){
 41 |         return{
 42 |             defaultImg: require("@/assets/imgs/defaultImg.png"),
 43 |             musicUrl:"",
 44 |             currentTime:0,
 45 |         }
 46 |     },
 47 |     components:{
 48 |         AudioChen
 49 |     },
 50 |     props:{
 51 |         // 父组件传参，调用props算是方便的，但是子组件，孙组件通过this.$parent.$parent.xxx = 'xx'改变过于复杂，用Vuex优化
 52 |         // musicUrl:String,
 53 |         // musicInfo:Object
 54 |     },
 55 |     computed:{
 56 |         globalMusicUrl(){
 57 |             return this.$store.state.globalMusicUrl
 58 |         },
 59 |         globalMusicInfo(){
 60 |             return this.$store.state.globalMusicInfo
 61 |         },
 62 |         musicQueue(){
 63 |             return this.$store.state.musicQueue
 64 |         },
 65 |         nowIndex(){
 66 |             return this.$store.state.nowIndex
 67 |         },
 68 |         queueStyle(){
 69 |             return this.$store.state.queueStyle
 70 |         }
 71 |     },
 72 |     mounted(){
 73 |         this.changeQueuePostion()
 74 | 
 75 |         window.onresize = () => this.changeQueuePostion()
 76 |     },
 77 |     methods:{
 78 |         changeQueuePostion() {
 79 |             if(this.$refs.queue.getBoundingClientRect){
 80 |                 // console.log(that.$refs.queue.getBoundingClientRect())
 81 |                 let pos = {
 82 |                     top:Math.floor(this.$refs.queue.getBoundingClientRect().top),
 83 |                     left:Math.floor(this.$refs.queue.getBoundingClientRect().left)
 84 |                 }
 85 |                 this.$store.commit("changeQueuePos",pos)
 86 |             }
 87 |         },
 88 |         toSongDetail(){
 89 |             if(this.globalMusicUrl)
 90 |                 this.$parent.show = !this.$parent.show
 91 |             else
 92 |                 this.$message({
 93 |                     showClose: true,
 94 |                     message: '还没有播放音乐哦',
 95 |                     type: 'error'
 96 |                 });
 97 |         },
 98 |         updateTime(e){
 99 |             // console.log(e.target.currentTime)
100 |             this.currentTime = e.target.currentTime
101 |             console.log("目前歌单index为："+this.nowIndex)
102 |         },
103 |         pauseStatus(){
104 |             this.$store.commit('changeMusicStatus',true)
105 |         },
106 |         playStatus(){
107 |             this.$store.commit('changeMusicStatus',false)
108 |         },
109 |         showQueue(e){
110 |             this.$parent.showQueue = !this.$parent.showQueue
111 |             console.log(`logo x:${e.x}, y:${e.y}`)
112 |         },
113 |         next(){
114 |             if(this.musicQueue.length == 0)
115 |                 this.$message({
116 |                     type:'warning',
117 |                     message:'播放列表是空的~',
118 |                     showClose:true
119 |                 })
120 |             else {
121 |                 if(this.musicQueue.length == 1){
122 |                     // 若播放列表只有一首歌 则单曲循环
123 |                     this.currentTime = 0
124 |                     let musicUrl = this.globalMusicUrl
125 |                     this.$store.commit('changeMusicUrl',"")
126 |                     setTimeout(() => {
127 |                         this.$store.commit('changeMusicUrl',musicUrl)
128 |                     }, 0);
129 |                 }else{
130 |                     let ids = []
131 |                     for (const item of this.musicQueue) {
132 |                         ids.push(item.id)
133 |                     }
134 |                     // console.log(ids)
135 |                     let nowIndex = ids.indexOf(this.globalMusicInfo.id)
136 |                     // console.log(nowIndex)
137 |                     let nextIndex = (nowIndex + 1) % this.musicQueue.length
138 |                     // let nextId = this.musicQueue[nextIndex].id
139 |                     this.$store.commit('changeNowIndex',nextIndex)
140 |                     this.$store.commit('changeMusicStatus',false)  
141 |                 }                         
142 |             }
143 |         },
144 |         prev(){
145 |             if(this.musicQueue.length == 0)
146 |                 this.$message({
147 |                     type:'warning',
148 |                     message:'播放列表是空的~',
149 |                     showClose:true
150 |                 })
151 |             else {
152 |                 if(this.musicQueue.length == 1){
153 |                     this.currentTime = 0
154 |                     let musicUrl = this.globalMusicUrl
155 |                     this.$store.commit('changeMusicUrl',"")
156 |                     setTimeout(() => {
157 |                         this.$store.commit('changeMusicUrl',musicUrl)
158 |                     }, 0);
159 |                 }else{                            
160 |                 let ids = []
161 |                     for (const item of this.musicQueue) {
162 |                         ids.push(item.id)
163 |                     }
164 |                     let nowIndex = ids.indexOf(this.globalMusicInfo.id)
165 |                     let prevIndex = (nowIndex - 1) % this.musicQueue.length < 0 ? ((nowIndex - 1) % this.musicQueue.length + this.musicQueue.length) : (nowIndex - 1) % this.musicQueue.length
166 |                     this.$store.commit('changeNowIndex',prevIndex)
167 |                     this.$store.commit('changeMusicStatus',false)
168 |                 }  
169 |             }
170 |         }
171 |     },
172 |     watch:{
173 |         currentTime(){
174 |             this.$store.commit('changeCurrentTime',this.currentTime)
175 |         },
176 |         globalMusicInfo(){
177 |             let obj = {
178 |                 musicUrl:this.globalMusicUrl,
179 |                 ...this.globalMusicInfo
180 |             }
181 |             this.$store.commit('changeMusicQueue',obj)
182 |         }
183 |     }
184 | }
185 | </script>
186 | 
187 | <style>
188 | 
189 |     .add-queue-style{
190 |         animation-name: addAni;
191 |         animation-duration: .3s;
192 |         animation-direction: alternate-reverse;
193 |         transform: scale(1);
194 |     }
195 | 
196 |     @keyframes addAni {
197 |         to{
198 |             color: rgb(236, 65, 65);
199 |             transform: scale(1.5);
200 |         }
201 |     }
202 | 
203 |     .add-queue-style::before{
204 |         content: "+1";
205 |         position: absolute;
206 |         top: -8px;
207 |         left: -20px;
208 |         transform: scale(0.8);
209 |         font-weight: bold;
210 |     }
211 | 
212 |     .delete-queue-style{
213 |         animation-name: deleteAni;
214 |         animation-duration: .3s;
215 |         animation-direction: alternate-reverse;
216 |         transform: scale(1);
217 |     }
218 | 
219 |     @keyframes deleteAni {
220 |         to{
221 |             color: green;
222 |             transform: scale(1.5);
223 |         }
224 |     }
225 | 
226 |     .delete-queue-style::before{
227 |         content: "-1";
228 |         position: absolute;
229 |         top: -8px;
230 |         left: -20px;
231 |         transform: scale(0.8);
232 |         font-weight: bold;
233 |     }    
234 | 
235 |     .bottom {
236 |         display: flex;
237 |         align-items: center;
238 |         background-color: #f1f3f4;
239 |         box-shadow: 0px -2px 2px rgba(0, 0, 0,.3);
240 | 
241 |         position: relative; /* 防止被覆盖 */
242 |         /* #f1f3f4 */
243 |     }
244 | 
245 |     .bottom audio {
246 |         width: 100%;
247 |         outline: none;
248 |     }
249 | 
250 |     .music-box{
251 |         display: flex;
252 |         padding: 5px;
253 |         box-sizing: border-box;
254 |     }
255 | 
256 |     .music-box .img-wrap {
257 |         width: 50px;
258 |         height: 50px;
259 |         margin-right: 10px;
260 |         cursor: pointer;
261 |         position: relative;
262 |     }
263 | 
264 |     .music-box .img-wrap::before{
265 |         position: absolute;
266 |         width: 100%;
267 |         height: 100%;
268 |         display: flex;
269 |         justify-content: center;
270 |         align-items: center;
271 |         background-color: rgba(0, 0, 0,.3);
272 |         color: #fff;
273 |         border-radius: 5px;
274 |         display: none;
275 |     }
276 | 
277 |     .music-box .img-wrap:hover::before{
278 |         display: flex;
279 |     }
280 | 
281 |     .music-box .img-wrap img {
282 |         height: 100%;
283 |         border-radius: 5px;
284 |     }
285 | 
286 |     .music-name {
287 |         font-size: 14px;
288 |         width: 150px;
289 |         display: block;
290 |         overflow-x: hidden;
291 |         text-overflow: ellipsis;
292 |         white-space: nowrap;
293 |     }
294 | 
295 |     .music-singer {
296 |         margin-top: 5px;
297 |         font-size: 12px;
298 |         width: 150px;
299 |         display: block;
300 |         overflow-x: hidden;
301 |         text-overflow: ellipsis;
302 |         white-space: nowrap;
303 |     }
304 | 
305 |     .bofangliebiao{
306 |         margin-right: 100px;
307 |         font-size: 12px;
308 |         cursor: pointer;
309 |     }
310 | 
311 |     .bofangliebiao span:nth-of-type(1){
312 |         font-size: 22px;
313 |     }
314 | </style>


--------------------------------------------------------------------------------
/src/components/Index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index">
 3 |       <div class="index-left">
 4 |           <ul>
 5 |               <li>
 6 |                   <router-link to="/discover"><span class="iconfont icon-yinle">发现音乐</span></router-link>
 7 |               </li>
 8 |               <li>
 9 |                   <router-link to="/recommend"><span class="iconfont icon-yinleliebiao-">推荐歌单</span></router-link>                  
10 |               </li>
11 |               <!-- <li>
12 |                   <router-link to="/newsongs"><span class="iconfont icon-music"></span>最新音乐</router-link>
13 |               </li> -->
14 |               <li>
15 |                   <router-link to="/mvs"><span class="iconfont icon-bofangMV">最新MV</span></router-link>
16 |               </li>
17 |           </ul>
18 |       </div>
19 |       <main>
20 |           <el-scrollbar style="height:100%">
21 |             <!-- <router-view></router-view> -->
22 |             <slot></slot>
23 |           </el-scrollbar>
24 |       </main>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | export default {
30 |     data(){
31 |         return {
32 |         }
33 |     }
34 | }
35 | </script>
36 | 
37 | <style>
38 |     .index {
39 |         /* height: 800px; */
40 |         display: flex;
41 |     }
42 | 
43 |     .index-left {
44 |         width: 200px;
45 |         min-width: 200px;
46 |         /* background-color: #ededed; */
47 |         text-align: center;
48 |         border-right: 1px solid #ededed;
49 |     }
50 | 
51 |     .index-left ul {
52 |         list-style: none;
53 |     }
54 | 
55 |     .index-left li {
56 |         cursor: pointer;
57 |         letter-spacing: .3rem;
58 |         height: 60px;
59 |         line-height: 60px;
60 |         display: flex;
61 |     }
62 | 
63 |     .index-left li:hover {
64 |         background-color: #ededed;
65 |     }
66 | 
67 |     .index-left a {
68 |         text-decoration: none;
69 |         color: #333;
70 |         display: block;
71 |         width: 100%;
72 |         height: 100%;
73 |         font-size: 18px;
74 |         padding-left: 30px; 
75 |         text-align: left;  
76 |     }
77 | 
78 |     .index-left a::before {
79 |         margin-right: 10px;
80 |     }
81 | 
82 |     .router-link-active {
83 |         color: #e74c3c !important;
84 |     }
85 | 
86 |     main {
87 |         flex: 1;
88 |         min-width: 750px;
89 |         /* height: 800px; */
90 |         /* overflow-y: scroll; */
91 |         /* background-color: skyblue; */
92 |     }
93 | </style>


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="page-wrap">
 3 |         <el-pagination
 4 |             @current-change="handleCurrentChange"
 5 |             background
 6 |             layout="prev, pager, next"
 7 |             :total="total"
 8 |             :page-size="pageSize"
 9 |             :current-page="currentPage">
10 |         </el-pagination>            
11 |     </div>    
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |     data(){
17 |         return{}
18 |     },
19 |     props: ['total', 'pageSize', 'currentPage'],
20 |     methods: {
21 |         handleCurrentChange(page) {
22 |             this.$emit('changePage', page)
23 |         }
24 |     }
25 | }
26 | </script>
27 | 
28 | <style>
29 |     .page-wrap {
30 |         display: flex;
31 |         justify-content: center;
32 |         margin-top: 20px;
33 |     }
34 | 
35 |     .el-pagination.is-background .el-pager li:not(.disabled).active {
36 |         background-color: rgb(236, 65, 65);
37 |     }
38 | 
39 |     .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
40 |         background: none;
41 |         border-radius: 5px;
42 |         border: 1px solid #f4f4f5;
43 |     }
44 | 
45 |     .el-pagination.is-background .el-pager li:not(.disabled):not(.active):hover {
46 |         color: rgb(236, 65, 65)!important;
47 |     }
48 | </style>


--------------------------------------------------------------------------------
/src/components/Queue.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="queue">
  3 |       <div class="queue-tabs">
  4 |           <el-tabs v-model="activeName" @tab-click="handleClick">
  5 |             <el-tab-pane label="播放列表" name="playList">
  6 |                 <div class="queue-head">
  7 |                     <span>共{{musicQueue.length}}首</span>
  8 |                     <span class="clear" @click="clearMusicQueue">清空列表</span>
  9 |                 </div>
 10 |                 <ul class="queue-wrap">
 11 |                     <el-scrollbar style="height:100%">
 12 |                         <li class="queue-song" v-for="item in musicQueue" :key="item.id" @dblclick="play(item)" :class="{'active-song':item.id==globalMusicInfo.id}">
 13 |                             <div class="playingIcon" v-show="item.id==globalMusicInfo.id && !isMusicPaused">
 14 |                                 <div class="playingIcon1"></div>
 15 |                                 <div class="playingIcon2"></div>
 16 |                                 <div class="playingIcon3"></div>
 17 |                             </div>
 18 |                             <span :class="{'playingIcon iconfont icon-zanting':isMusicPaused && item.id==globalMusicInfo.id}"></span>
 19 |                             <span class="queue-song-name">{{item.songName}}</span>
 20 | 
 21 |                             <div class="queue-song-singer">
 22 |                                 <span v-for="(singer,i) in item.artistInfo" :key="i" @click.stop="toArtist(singer.id)">{{singer.name}} </span>
 23 |                             </div>
 24 | 
 25 |                             <span class="queue-song-duration">{{item.duration}}</span>
 26 |                             <span class="queue-song-delete" @click="deleteQueue(item.id)">×</span>
 27 |                         </li>
 28 |                     </el-scrollbar>
 29 |                 </ul>
 30 |             </el-tab-pane>
 31 |             <!-- <el-tab-pane label="播放历史" name="history">播放历史</el-tab-pane> -->
 32 |         </el-tabs>
 33 |         <span v-if="!musicQueue.length" class="queue-tip">什么都没有~快去听歌吧</span>
 34 |       </div>
 35 |   </div>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { playMusicAPI } from '@/utils/api'
 40 | 
 41 | export default {
 42 |     data(){
 43 |         return {
 44 |             activeName: 'playList'
 45 |         }
 46 |     },
 47 |     methods:{
 48 |         handleClick(tab, event) {
 49 |             console.log(tab, event);
 50 |         },
 51 |         toArtist(id){
 52 |             this.$router.push(`/artist?artistId=${id}`)
 53 |         },         
 54 |         deleteQueue(id){
 55 |             //   console.log(id)
 56 |             this.$confirm('确定删除该歌曲吗?', '提示', {
 57 |                 confirmButtonText: '确定',
 58 |                 cancelButtonText: '取消',
 59 |                 type: 'warning'
 60 |             }).then(() => {
 61 |                 let ids = []
 62 |                 for (const item of this.musicQueue) {
 63 |                     ids.push(item.id)
 64 |                 }
 65 |                 let ii = ids.indexOf(id)
 66 | 
 67 |                 setTimeout(() => {
 68 |                     this.$store.commit('changeQueueStyle','delete') 
 69 |                     this.$store.commit('deleteMusic',id)
 70 |                     if(ii < this.nowIndex){
 71 |                         this.$store.commit('changeNowIndex',this.nowIndex-1)          
 72 |                     }else if(ii== this.nowIndex){
 73 |                         this.$store.commit('deleteToNext')
 74 |                     }     
 75 |                 }, 300);
 76 | 
 77 | 
 78 |                 setTimeout(() => {
 79 |                     this.$store.commit('changeQueueStyle','normal')                   
 80 |                 }, 1000);
 81 | 
 82 |                 // this.$message({
 83 |                 //     type: 'success',
 84 |                 //     message: '删除成功!'
 85 |                 // });
 86 |             }).catch(() => {
 87 |                 this.$message({
 88 |                 type: 'info',
 89 |                 message: '已取消删除'
 90 |                 });          
 91 |             });
 92 |         },
 93 |         clearMusicQueue(){
 94 |             if(this.musicQueue.length == 0)
 95 |                 this.$message({
 96 |                     message:'已经是空的了~',
 97 |                     type:'warning',
 98 |                     showClose:true
 99 |                 })
100 |             else{
101 |                 this.$confirm('确定清空列表吗?', '提示', {
102 |                     confirmButtonText: '确定',
103 |                     cancelButtonText: '取消',
104 |                     type: 'warning'
105 |                 }).then(() => {
106 |                     this.$store.commit("changeMusicUrl","")
107 |                     this.$store.commit("changeMusicInfo",{})
108 |                     this.$store.commit("changeMusicStatus",true)
109 |                     this.$store.commit("changeCurrentTime",0)
110 |                     setTimeout(() => {
111 |                         this.$store.commit('clearMusicQueue')               
112 |                     }, 100);
113 | 
114 |                     // 强制刷新当前页面，初始化state
115 |                     // this.$router.go(0)
116 | 
117 |                     this.$message({
118 |                         type: 'success',
119 |                         message: '已清空!'
120 |                     });
121 |                 }).catch(() => {
122 |                     this.$message({
123 |                         type: 'info',
124 |                         message: '已取消清空'
125 |                     });          
126 |                 });            
127 |             }
128 |         },
129 |         play(item){
130 |             console.log(item)
131 |             playMusicAPI({id:item.id}).then(res=>{
132 |                 if(res.data.data[0].url){
133 |                 let songUrl = res.data.data[0].url
134 |                 let musicInfo = {
135 |                     id:item.id,
136 |                     imgUrl:item.imgUrl,
137 |                     songName:item.songName,
138 |                     artistInfo:item.artistInfo,
139 |                     // singer:item.singer,
140 |                     duration:item.duration
141 |                 }
142 |                 this.$store.commit("changeMusicUrl",songUrl)
143 |                 this.$store.commit("changeMusicInfo",musicInfo)
144 |                 this.$store.commit("changeMusicStatus",false)  
145 | 
146 |                 let ids = []
147 |                 for (const item of this.musicQueue) {
148 |                     ids.push(item.id)
149 |                 }
150 |                 this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))                
151 | 
152 |                 }else{
153 |                     this.$message({
154 |                         showClose: true,
155 |                         message: '对不起，歌曲暂时无法播放。',
156 |                         type: 'error'
157 |                     });
158 |                     // 若下一首没有版权，则自动跳到后一首歌;但是如果换做上一首没有版权，则无法跳到前一首，待解决这个bug
159 |                     let nextIndex = (this.nowIndex + 1) % this.musicQueue.length
160 |                     this.$store.commit('changeNowIndex',nextIndex)
161 |                 }
162 |             })
163 | 
164 |         }
165 |     },
166 |     computed:{
167 |         musicQueue(){
168 |             return this.$store.state.musicQueue
169 |         },
170 |         globalMusicInfo(){
171 |             return this.$store.state.globalMusicInfo
172 |         },
173 |         isMusicPaused(){
174 |             return this.$store.state.isMusicPaused
175 |         },
176 |         nowIndex(){
177 |             return this.$store.state.nowIndex
178 |         },
179 |         deleteToNext(){
180 |             return this.$store.state.deleteToNext
181 |         }
182 |     },
183 |     watch:{
184 |         nowIndex(){
185 |             this.play(this.musicQueue[this.nowIndex])
186 |         },
187 |         deleteToNext(){
188 |             if(this.nowIndex < this.musicQueue.length)
189 |                 this.play(this.musicQueue[this.nowIndex])
190 |             if(this.musicQueue.length == 0){
191 |                 this.$store.commit("changeNowIndex",0)
192 |                 this.$store.commit("changeMusicUrl","")
193 |                 this.$store.commit("changeMusicInfo",{})
194 |                 this.$store.commit("changeMusicStatus",true)
195 |                 this.$store.commit("changeCurrentTime",0)
196 |                 // 如果打开歌词页面 则关闭
197 |                 this.$parent.show = true
198 |                 setTimeout(() => {
199 |                 this.$store.commit('clearMusicQueue')               
200 |                 }, 100);           
201 |             }
202 |             if(this.nowIndex == this.musicQueue.length)
203 |                 this.$store.commit("changeNowIndex",0)
204 |         }
205 |     }
206 | }
207 | </script>
208 | 
209 | <style>
210 |     @import '../assets/common/tab.css';
211 | 
212 |     .queue {
213 |         width: 25%;
214 |         min-width: 300px;
215 |         height: 70%;
216 |         position: fixed;
217 |         right: 10px;
218 |         bottom: 59px;
219 |         border: 1px solid #7f8c8d;
220 |         /* border-radius: 10px; */
221 |         border-top-left-radius: 10px;
222 |         border-top-right-radius: 10px;
223 |         background-color: #fff;
224 |         box-sizing: border-box;
225 |         font-size: 14px;
226 |         box-shadow: 0 0 5px rgba(0,0,0,.6);
227 |     }
228 | 
229 |     .queue-tabs .el-tabs__item{
230 |         font-size: 14px;
231 |     }
232 | 
233 |     .queue-tabs .el-tabs__header {
234 |         margin: 15px;
235 |     }
236 | 
237 |     .queue-head {
238 |         color: #bdc3c7;
239 |         padding-bottom: 10px;
240 |         margin: 10px 15px;
241 |         border-bottom: 1px solid #eee;
242 |     }
243 | 
244 |     .clear {
245 |         color: #686de0;
246 |         float: right;
247 |         cursor: pointer;
248 |     }
249 | 
250 |     .queue-wrap {
251 |         height: 550px;
252 |         position: relative;
253 |     }
254 | 
255 |     .queue-tip {
256 |         position: absolute;
257 |         top: 50%;
258 |         left: 50%;
259 |         transform: translate3d(-50%,-50%,0);
260 |         color: #bdc3c7;
261 |     }
262 | 
263 |     .queue-song{
264 |         display: flex;
265 |         align-items: center;
266 |         padding: 10px 0;
267 |         background-color: #fff;
268 |         font-weight: 200;
269 |         color: #363636;
270 |         cursor: pointer;
271 |     }
272 | 
273 |     .playingIcon {
274 |         width: 14px;
275 |         height: 14px;
276 |         overflow: hidden;
277 |         display: flex;
278 |         position: absolute;
279 |         left: 5px;
280 |         font-weight: bold;
281 |     }
282 | 
283 |     .playingIcon div{
284 |         background-color: rgb(236, 65, 65);
285 |         width: 4px;
286 |         margin: 0 1px;
287 |         height: 100%;
288 |     }
289 | 
290 |     .playingIcon1 {
291 |         /* transform: translate3d(0,0,0); */
292 |         animation: playingIcon;
293 |         animation-duration: .5s;
294 |         animation-delay: 0;
295 |         animation-iteration-count: infinite;
296 |         animation-timing-function: ease-out;
297 |         animation-direction: alternate-reverse;
298 |     }
299 | 
300 |     .playingIcon2 {
301 |         /* transform: translate3d(0,4px,0); */
302 |         animation: playingIcon;
303 |         animation-duration: .5s;
304 |         animation-delay: .2s;
305 |         animation-iteration-count: infinite;
306 |         animation-timing-function: ease-out;
307 |         animation-direction: alternate-reverse;
308 |     }
309 | 
310 |     .playingIcon3 {
311 |         /* transform: translate3d(0,8px,0); */
312 |         animation: playingIcon;
313 |         animation-duration: .5s;
314 |         animation-delay: .5s;
315 |         animation-iteration-count: infinite;
316 |         animation-timing-function: ease-out;
317 |         animation-direction: alternate-reverse;
318 |     }
319 | 
320 |     @keyframes playingIcon {
321 |         from{
322 |             transform: translate3d(0,0,0);
323 |         }
324 |         to{
325 |             transform: translate3d(0,80%,0);
326 |         }
327 |     }
328 | 
329 | 
330 |     .queue-song:nth-of-type(even) {
331 |         background-color: #f9f9f9;
332 |     }
333 | 
334 |     .queue-song:not(.active-song):hover {
335 |         background-color: #f5f6fa;
336 |         color: #0097e6;
337 |     }
338 | 
339 |     .queue-song:hover .queue-song-delete {
340 |         display: block;
341 |     }
342 | 
343 |     .queue-song-name {
344 |         width: 40%;
345 |         margin-left: 25px;
346 |         margin-right: 20px;
347 |         overflow: hidden;
348 |         text-overflow: ellipsis;
349 |         white-space: nowrap;
350 |     }
351 | 
352 |     .queue-song-singer {
353 |         width: 30%;
354 |         overflow: hidden;
355 |         text-overflow: ellipsis;
356 |         white-space: nowrap;
357 |         color: #2980b9;
358 |     }
359 | 
360 |     .queue-song-duration {
361 |         width: 15%;
362 |     }
363 | 
364 |     .queue-song-delete {
365 |         cursor: pointer;
366 |         margin-right:15px;
367 |         color: #3e3e3e;
368 |         display: none;
369 |     }
370 | 
371 |     .active-song {
372 |         color: rgb(236, 65, 65);
373 |         position: relative;
374 |     }
375 | </style>


--------------------------------------------------------------------------------
/src/components/SongDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition leave-active-class="closeWindow">
  3 |         <div class="song-detail" v-show="!show" ref="bg">
  4 |             <i class="el-icon-arrow-down" @click="close"></i>
  5 |             <div class="content">
  6 |                 <div class="img-box">
  7 |                     <img :src="playerBar" alt="" :class="{'player-bar isplay':!isMusicPaused,'player-bar':isMusicPaused}">
  8 |                     <div class="img-wrap-rotate">
  9 |                         <img :src="globalMusicInfo.imgUrl?globalMusicInfo.imgUrl:defaultImgUrl" alt="" :class="{'running':!isMusicPaused,'paused':isMusicPaused}" crossorigin="anonymous" ref="cover">
 10 |                     </div>
 11 |                 </div>
 12 |                 
 13 |                 <div class="song-wrap">
 14 |                     <h2>{{globalMusicInfo.songName}}</h2>
 15 |                     <div style="margin:5px 0 60px 0">
 16 |                         <span class="song-info" v-for="(singer,i) in globalMusicInfo.artistInfo" :key="i">{{singer.name}} </span>
 17 |                     </div>
 18 |                     <div class="lyric-wrap">
 19 |                         <el-scrollbar style="height:100%" v-if="hasLyric" ref="scroll">
 20 |                             <p v-for="(item,index) in lyric" :key="index" :class="{'active-lyric':currentIndex===index}">{{item.lyricWords}}</p>
 21 |                         </el-scrollbar>
 22 |                         <p v-if="!hasLyric">抱歉，暂无歌词</p>
 23 |                     </div>
 24 |                 </div>
 25 |             </div>
 26 |             <!-- <ul style="display:flex">
 27 |                 <li v-for="(item,index) in colors" :key="index" :style="`backgroundColor:rgb(${item[0]},${item[1]},${item[2]})`">{{item}}</li>
 28 |             </ul> -->
 29 |         </div>
 30 |     </transition>
 31 | </template>
 32 | 
 33 | <script>
 34 | import ColorThief from 'colorthief'
 35 | import { lyricAPI } from '@/utils/api'
 36 | 
 37 | export default {
 38 |     data(){
 39 |         return {
 40 |             playerBar:require("../assets/imgs/player_bar.png"),
 41 |             defaultImgUrl:require("@/assets/imgs/defaultImg.png"),
 42 |             lyric:[],
 43 |             currentIndex:0,
 44 |             hasLyric:true,
 45 |             colors:[]
 46 |         }
 47 |     },
 48 |     props:{
 49 |         show:Boolean
 50 |     },
 51 |     methods:{
 52 |         close(){
 53 |             this.$parent.show = true
 54 |         },
 55 |         getColor(){
 56 |             let img = this.$refs.cover
 57 | 
 58 |             img.addEventListener('load',()=>{
 59 |                 let colorthief = new ColorThief()
 60 |                 this.colors = colorthief.getPalette(img,2)
 61 |                 // console.dir(this.colors)    
 62 |                 this.$refs.bg.style.background = `linear-gradient(to right bottom, 
 63 |                                                 rgb(${this.colors[0][0]},${this.colors[0][1]},${this.colors[0][2]}), 
 64 |                                                 rgb(${this.colors[1][0]},${this.colors[1][1]},${this.colors[1][2]}))`                                 
 65 |             })
 66 |         },
 67 |         getLyric(id){
 68 |             lyricAPI({id}).then(res=>{
 69 |                 console.log(res)
 70 | 
 71 |                 let _this = this
 72 |                 this.$nextTick(()=>{
 73 |                     _this.getColor()
 74 |                 })
 75 |                 // setTimeout(() => {
 76 |                 //  this.getColor()                   
 77 |                 // }, 0);
 78 | 
 79 |                 if(!Object.hasOwnProperty.call(res.data,'lrc')){
 80 |                     _this.hasLyric = false
 81 |                 }
 82 |                 else{
 83 |                     this.hasLyric = true
 84 |                     let lyricStr = res.data.lrc.lyric
 85 |                     let lyricList = lyricStr.split("\n")
 86 |                     let lyric = []
 87 |                     for(let item of lyricList){
 88 |                         // console.log(item)
 89 |                         // 截取时间 去掉[]
 90 |                         let end = item.indexOf(']')
 91 |                         let time = item.slice(1,end)
 92 |                         let currentTime = this.timeFormat(time)
 93 | 
 94 |                         // 截取歌词,正则表达式去除[]及其包括的内容
 95 |                         let lyricWords = item.replace(/\[.*?\]/g,'')
 96 |                         // let lyricWords = item.slice(end+1).trim()
 97 |                         if(lyricWords)
 98 |                             lyric.push({
 99 |                                 currentTime,
100 |                                 lyricWords
101 |                             })
102 |                     }
103 |                     this.lyric = lyric
104 |                     console.log(res.data.lrc.lyric)
105 |                 }
106 |                 
107 |             })
108 |         },
109 |         timeFormat(time){
110 |             let minute = parseInt(time.split(":")[0])
111 |             let second = Math.ceil(time.split(":")[1])
112 |             let currentTime = minute * 60 + second
113 |             return currentTime
114 |         },
115 |         lryicActive(time){
116 |             for(let i=0;i<this.lyric.length;i++){
117 |                 if(this.lyric[i].currentTime == Math.ceil(time)){
118 |                     // console.log(`第${i}句，时间为${this.lyric[i].currentTime},${this.lyric[i].lyricWords}`)
119 | 
120 | 
121 |                     // let _view = document.querySelector(".lyric-wrap .el-scrollbar__view")
122 |                     // let top = parseInt(window.getComputedStyle(_view).top)
123 |                     // _view.style.transform = `translate3d(0,${80 - i * 73}px,0)` //还是会存在bug，歌词会自动滚动，滚动条不会，导致无法上拉显示已经放过的歌词。
124 | 
125 |                     // 可实现歌词垂直居中
126 |                     let _p = document.querySelector('.active-lyric')
127 |                     let _pOffsetTop = _p.offsetTop
128 |                     this.$refs['scroll'].wrap.scrollTop = _pOffsetTop-_p.offsetHeight*3  //想滚到哪个高度，就写多少
129 |                     this.currentIndex = i
130 |                 }
131 |             }
132 |         }
133 |     },
134 |     computed:{
135 |         globalMusicInfo(){
136 |             return this.$store.state.globalMusicInfo
137 |         },
138 |         globalCurrentTime(){
139 |             return this.$store.state.globalCurrentTime
140 |         },
141 |         isMusicPaused(){
142 |             return this.$store.state.isMusicPaused
143 |         },
144 |         globalMusicUrl(){
145 |             return this.$store.state.globalMusicUrl
146 |         }
147 |     },
148 |     watch:{
149 |         globalCurrentTime(){
150 |             if(this.hasLyric) //解决没有歌词仍会滚动的bug
151 |                 this.lryicActive(this.globalCurrentTime)
152 |         },
153 |         globalMusicUrl(){
154 |             if(this.globalMusicUrl != ""){
155 |                 let id = this.$store.state.globalMusicInfo.id
156 |                 this.getLyric(id)
157 |             }
158 |         }
159 |     }
160 | }
161 | </script>
162 | 
163 | <style>
164 |     ul{
165 |         list-style: none;
166 |     }
167 | 
168 |     .lyric-wrap .el-scrollbar__view {
169 |         position: relative;
170 |         padding: 100px 0 300px 0;
171 | 
172 |         /* 已设置滚动条滚动到自定义位置，下方效果取消 */
173 |         /* transform: translate3d(0,80px,0);
174 |         transition: .6s ease-out; */
175 |     }
176 | 
177 |     .song-detail {
178 |         width: 100%;
179 |         height: calc(100% - 60px);
180 | 
181 |         /* 歌词界面全屏 */
182 |         /* height: 100%;
183 |         z-index: 1; */
184 | 
185 |         background: linear-gradient(to left top, rgb(60, 50, 62), rgb(77, 70, 88));
186 |         /* background: linear-gradient(to left top, rgb(133, 68, 62), rgb(181, 97, 131)); */
187 |         position: fixed;
188 |         top: 100%;
189 |         color: #fff;
190 | 
191 |         animation-duration: .5s;
192 |         animation-name: showWindow;
193 |         animation-fill-mode: forwards;
194 |         animation-timing-function: ease-out;        
195 |     }
196 |     @keyframes showWindow {
197 |         from{
198 |             top: 100%;
199 |         }
200 |         to{
201 |             top: 0;
202 |         }
203 |     }
204 | 
205 |     @keyframes closeWindow {
206 |         from{
207 |             top: 0;
208 |         }
209 |         to{
210 |             top: 100%;
211 |         }
212 |     }    
213 | 
214 |     .closeWindow {
215 |         animation-duration: .3s;
216 |         animation-name: closeWindow;
217 |         animation-fill-mode: forwards;
218 |         animation-timing-function: ease-out;
219 |     }
220 | 
221 |     .song-detail i{
222 |         margin: 10px;
223 |         font-size: 23px;
224 |         cursor: pointer;
225 |         opacity: .28;
226 |         padding: 5px;
227 |         border-radius: 50%;
228 |     }
229 | 
230 |     .song-detail i:hover {
231 |         background-color: rgb(176, 174, 179);
232 |     }
233 | 
234 |     .content {
235 |         display: flex;
236 |     }
237 | 
238 |     .content .img-box {
239 |         width: 50%;
240 |         display: flex;
241 |         flex-direction: column;
242 |         align-items: center;
243 |         position: relative;
244 |         margin-top: 120px;
245 |     }
246 | 
247 |     .player-bar {
248 |         position: absolute;
249 |         left: 50%;
250 |         top: -10px;
251 |         z-index: 10;
252 |         transform: rotate(-25deg);
253 |         transform-origin: 12px 12px;
254 |         transition: 1s;
255 |     }
256 | 
257 |     .isplay {
258 |         transform: rotate(0);
259 |     }
260 | 
261 |     .running {
262 |         animation-play-state: running;
263 |     }
264 | 
265 |      .paused {
266 |         animation-play-state: paused;   
267 |     }   
268 | 
269 |     .img-wrap-rotate {
270 |         position: relative;
271 |         width: 400px;
272 |         height: 400px;
273 |         display: flex;
274 |         justify-content: center;
275 |         align-items: center;
276 |         margin: 50px 0;
277 |     }
278 | 
279 |     .img-wrap-rotate::after {
280 |         content: "";
281 |         position: absolute;
282 |         width: 100%;
283 |         height: 100%;
284 |         border-radius: 50%;
285 |         background-color: rgba(0, 0, 0, .3);
286 |     }
287 | 
288 |     .img-wrap-rotate::before {
289 |         content: "";
290 |         position: absolute;
291 |         width: 90%;
292 |         height: 90%;
293 |         border-radius: 50%;
294 |         background-color: #000;
295 |     }    
296 | 
297 |     .img-wrap-rotate img {
298 |         width: 70%;
299 |         height: 70%;
300 |         border-radius: 50%;
301 |         position: relative;
302 | 
303 |         animation-name: rotation;
304 |         animation-duration: 30s;
305 |         animation-iteration-count: infinite;
306 |         animation-timing-function: linear;
307 |     }
308 | 
309 |     @keyframes rotation {
310 |         from{
311 |             transform: rotate(0);
312 |         }
313 |         to{
314 |             transform: rotate(360deg);
315 |         }
316 |     }
317 | 
318 |     span.song-info {
319 |         margin: 5px 0 60px 0;
320 |         font-size: 16px;
321 |         opacity: .28;
322 |     }
323 | 
324 |     .song-wrap {
325 |         flex: 1;
326 |         display: flex;
327 |         flex-direction: column;
328 |         height: 60vh;
329 |     }
330 | 
331 |     .song-wrap h2 {
332 |         font-weight: normal;
333 |         font-size: 23px;
334 |     }
335 | 
336 |     .lyric-wrap {
337 |         height: 100%;
338 |         width: 80%;
339 |     }
340 | 
341 |     .lyric-wrap p {
342 |         padding: 18px;
343 |         font-size: 28px;
344 |         opacity: .28;
345 |         cursor: default;
346 |         border-radius: 12px;
347 |     }
348 | 
349 |     .lyric-wrap p:hover {
350 |         background-color: rgb(176, 174, 179);
351 |     }
352 | 
353 |     .active-lyric {
354 |         font-weight: bold;
355 |         font-size: 15px;
356 |         opacity: 1 !important;
357 |     }
358 | </style>


--------------------------------------------------------------------------------
/src/components/Top.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="header">
  3 |         <h2>小陈音乐</h2>
  4 |         <div class="btns">
  5 |             <i class="el-icon-arrow-left" @click="go(-1)"></i>
  6 |             <i class="el-icon-arrow-right" @click="go(1)"></i>            
  7 |         </div>
  8 |         <div class="input-box">
  9 |             <el-input
 10 |                 placeholder="搜索"
 11 |                 v-model="searchValue"
 12 |                 prefix-icon="el-icon-search"
 13 |                 clearable
 14 |                 @keyup.enter.native="search"
 15 |                 @focus="getSearchHot"
 16 |                 @blur="showHot = false"
 17 |             >
 18 |             </el-input>
 19 |         </div>
 20 |         <div class="search-hot" v-show="showHot" ref="hot" @mousedown.stop="prevent">
 21 |             <el-scrollbar style="height:100%">
 22 |                 <div class="history" v-if="history.length">
 23 |                     <span class="hot-title" style="display: inline-block;margin-right: 5px;">搜索历史</span>
 24 |                     <span class="iconfont icon-lajitong" style="cursor:pointer" title="清空搜索历史" @mousedown="deleteHistory(0,true)"></span>
 25 |                     <div class="history-wrap">
 26 |                         <div class="history-item" v-for="(item,index) in history" :key="index" @mousedown="toHot(item)">
 27 |                             {{item}}
 28 |                             <span class="delete-btn" title="删除" @mousedown.stop="deleteHistory(index,false)">×</span>
 29 |                         </div>
 30 |                     </div>
 31 |                 </div>
 32 | 
 33 | 
 34 |                 <div class="hot-title">热搜榜</div>
 35 |                 <ul>
 36 |                     <li class="hot-item" v-for="(item,index) in hotData" :key="index" @mousedown.prevent="toHot(item.searchWord)">
 37 |                         <div class="hot-index">{{index+1}}</div>
 38 |                         <div class="hot-info">
 39 |                             <div class="hot-top">
 40 |                                 <div class="hot-name">{{item.searchWord}}</div>
 41 |                                 <div class="hot-score">{{item.score}}</div>
 42 |                                 <img class="hot-icon" v-show="item.iconUrl && item.iconType!=5" :src="item.iconUrl"/>
 43 |                             </div>
 44 |                             <div class="hot-content">{{item.content}}</div>
 45 |                         </div>
 46 |                     </li>
 47 |                 </ul>
 48 |             </el-scrollbar>
 49 |         </div>
 50 |     </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | import { hotSearchAPI } from '@/utils/api'
 55 | 
 56 | export default {
 57 |     data(){
 58 |         return {
 59 |             searchValue:"",
 60 |             showHot:false,
 61 |             hotData:[],
 62 |             history:[]
 63 |         }
 64 |     },
 65 |     methods:{
 66 |         search(){
 67 |             // alert(this.searchValue)
 68 |             if(this.isNull(this.searchValue))
 69 |                 this.showError()
 70 |             else{
 71 |                 this.$router.push({path:`/result?keywords=${this.searchValue}`})
 72 |                 if(!this.history.includes(this.searchValue))
 73 |                     this.history.push(this.searchValue)
 74 |             }
 75 |         },
 76 |         showError() {
 77 |             this.$message({
 78 |                 showClose: true,
 79 |                 message: '请输入内容',
 80 |                 type: 'error'
 81 |             });
 82 |         },
 83 |         isNull( str ){
 84 |             if ( str == "" ) return true;
 85 |             var regu = "^[ ]+$";
 86 |             var re = new RegExp(regu);
 87 |             return re.test(str);
 88 |         },
 89 |         go(n) {
 90 |             this.$router.go(n)
 91 |         },
 92 |         getSearchHot(){
 93 |             this.showHot=true
 94 |             if(this.hotData.length == 0) {
 95 |                 hotSearchAPI().then(res=>{
 96 |                     console.log(res)
 97 |                     this.hotData = res.data.data
 98 |                 })
 99 |             }
100 |         },
101 |         toHot(value){
102 |             this.searchValue = value
103 |             this.search()
104 |             //阻止blur事件 也可以用@mousedown.prevent; mousedown的优先级高于blur
105 |             // event.preventDefault();
106 |         },
107 |         deleteHistory(index,all){
108 |             if(all)
109 |                 this.history = []
110 |             else
111 |                 for(let i=0;i<this.history.length;i++){
112 |                     if(i == index)
113 |                         this.history.splice(i,1)
114 |                 }
115 |             // 防止点击x删除的时候，导致热搜榜消失，也可以通过.prevent修饰符
116 |             event.preventDefault();
117 |         },
118 |         prevent(){
119 |             event.preventDefault();
120 |         }  
121 |     },
122 | }
123 | </script>
124 | 
125 | <style>
126 |     .header {
127 |         display: flex;
128 |         align-items: center;
129 |         background-color: rgb(236, 65, 65);
130 |         padding: 0 30px;
131 |     }
132 | 
133 |     .header h2 {
134 |         color: #fff;
135 |         letter-spacing: .5rem;
136 |         margin-right: 30px;
137 |     }
138 | 
139 |     .btns {
140 |         margin-right: auto;
141 |     }
142 | 
143 |     .btns i {
144 |         color: #fff;
145 |         border-radius: 50%;
146 |         padding: 10px;
147 |         box-sizing: border-box;
148 |         cursor: pointer;
149 |     }
150 | 
151 |     .btns i:hover {
152 |         background-color: rgba(255, 255, 255,.3);
153 |     }
154 | 
155 |     .header .input-box {
156 |         width: 200px;
157 |     }
158 | 
159 |     .input-box input {
160 |         border-radius: 20px;
161 |         background-color: rgb(225, 62, 62);
162 |         border: none;
163 |         outline: none;
164 |         font-size: 12px;
165 |         color: #fff;
166 |     }
167 | 
168 |     .el-input__icon {
169 |         color: #fff;
170 |     }
171 | 
172 |     .search-hot {
173 |         width: 400px;
174 |         height: 300px;
175 |         /* border: 1px solid #333; */
176 |         box-shadow: 0 0 5px 2px rgba(0, 0, 0,.3);
177 |         border-radius: 10px;
178 |         background-color: #fff;
179 |         position: absolute;
180 |         top: 55px;
181 |         right: 30px;
182 |         z-index: 1;
183 |         padding: 10px 10px;
184 |         box-sizing: border-box;
185 |     }
186 | 
187 |     .hot-title {
188 |         margin: 10px 0;
189 |         font-weight: bold;
190 |     }
191 | 
192 |     .hot-item {
193 |         display: flex;
194 |         align-items: center;
195 |         padding: 5px;
196 |         cursor: default;
197 |     }
198 | 
199 |     .hot-item:hover {
200 |         background-color: seashell;
201 |     }
202 | 
203 |     .hot-index {
204 |         font-size: 20px;
205 |         color: rgb(236, 65, 65);
206 |         margin-right: 15px;
207 |     }
208 | 
209 |     .hot-info {
210 |         flex: 1;
211 |         font-size: 12px;
212 |         color: slategray;
213 |     }
214 | 
215 |     .hot-top {
216 |         display: flex;
217 |         align-items: center;
218 |         margin-bottom: 5px;
219 |     }
220 | 
221 |     .hot-name {
222 |         font-size: 16px;
223 |         margin-right: 15px;
224 |         color: #000;
225 |     }
226 | 
227 |     .hot-icon {
228 |         width: 30px;
229 |         /* height: 15px; */
230 |         margin-left: 5px;
231 |     }
232 | 
233 |     .history-wrap {
234 |         display: flex;
235 |         justify-content: flex-start;
236 |         flex-wrap: wrap;
237 |     }
238 | 
239 |     .history-item {
240 |         border: 1px solid #ddd;
241 |         padding: 5px 10px;
242 |         border-radius: 10px;
243 |         font-size: 13px;
244 |         display: inline-block;
245 |         cursor: pointer;
246 |         margin: 5px;
247 |     }
248 | 
249 |     .history-item:hover {
250 |         background-color: #F5F7FA;
251 |     }
252 | 
253 |     .history-item:hover .delete-btn{
254 |         opacity: 1;
255 |     }
256 | 
257 |     .delete-btn {
258 |         cursor: pointer;
259 |         opacity: 0;
260 |     }
261 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from "element-ui"
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | import "./assets/icon/iconfont.css"
 6 | import router from './router'
 7 | import store from './store'
 8 | import Vuelazyload from 'vue-lazyload'
 9 | 
10 | Vue.config.productionTip = false
11 | 
12 | Vue.use(ElementUI)
13 | 
14 | Vue.use(Vuelazyload,{
15 |   preLoad:1.3,
16 |   loading: require('./assets/imgs/loading.png'),
17 |   attempt:2
18 | })
19 | 
20 | console.log = function(){}
21 | 
22 | console.info(`%c
23 | 欢迎使用小陈音乐！
24 | 作者：小陈同学吗
25 | GitHub：https://github.com/MrRainbowYoo/Music_Player
26 | 歌曲来源于网易云音乐(https://music.163.com)
27 | * 本项目仅供个人学习研究使用，禁止用于商业或非法用途。`,`color:#2980b9`)
28 | 
29 | new Vue({
30 |   router,
31 |   store,
32 |   render: h => h(App)
33 | }).$mount('#app')
34 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from "vue-router"
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | // 解决重复点击导航时，控制台出现报错
 7 | const VueRouterPush = VueRouter.prototype.push;
 8 | VueRouter.prototype.push = function push(to) {
 9 |   return VueRouterPush.call(this, to).catch(err => err)
10 | }
11 | 
12 | const routes = [
13 |   {
14 |     path:"/",
15 |     redirect:'/discover'
16 |   },
17 |   {
18 |     path:"/discover",
19 |     component: () => import('@/views/Discover/Discover.vue'),
20 |     meta: {
21 |       keepAlive: true
22 |     }
23 |   },
24 |   {
25 |     path:"/recommend",
26 |     component: () => import('@/views/Recommend/Recommend.vue'),
27 |     meta: {
28 |       keepAlive:true,
29 |     }
30 |   },
31 |   {
32 |     path:"/newsongs",
33 |     component: () => import('@/views/NewSongs/NewSongs.vue'),
34 |   },
35 |   {
36 |     path:"/mvs",
37 |     component: () => import('@/views/MVs/MVs.vue'),
38 |     meta: {
39 |       keepAlive: true
40 |     }
41 |   },
42 |   {
43 |     path:'/result',
44 |     component: () => import('@/views/Result/Result.vue'),
45 |   },
46 |   {
47 |     path:'/playlist',
48 |     component: () => import('@/views/Playlist/Playlist.vue'),
49 |   },
50 |   {
51 |     path:'/mvdetail',
52 |     component: () => import('@/views/MvDetail/MvDetail.vue')
53 |   },
54 |   {
55 |     path:'/artist',
56 |     component: () => import('@/views/Artist/Artist.vue')
57 |   },
58 |   {
59 |     path:'/album',
60 |     component: () => import('@/views/Album/Album.vue')
61 |   }
62 | ]
63 | 
64 | const router = new VueRouter({
65 |   routes,
66 |   // mode: 'history'
67 | })
68 | 
69 | // router.beforeEach((to,from,next)=>{
70 | //   let needKeepAlive = ['/recommend','/mvs']
71 | //   if(needKeepAlive.includes(to.path) && (from.path==="/mvdetail" || from.path === '/playlist'))
72 | //     to.meta.keepAlive = true
73 | //   else
74 | //     to.meta.keepAlive = false
75 | //   next()
76 | // })
77 | 
78 | export default router


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import mutations from './mutation'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | const store = new Vuex.Store({
 8 |     state:{
 9 |         globalMusicUrl:"",
10 |         globalMusicInfo:{},
11 |         globalCurrentTime:0,
12 |         isMusicPaused:true,
13 |         musicQueue:[],
14 |         nowIndex:0,
15 |         deleteToNext:false,
16 |         queuePos:{},
17 |         queueStyle:'normal',
18 |     },
19 |     mutations
20 | })
21 | 
22 | export default store


--------------------------------------------------------------------------------
/src/store/mutation.js:
--------------------------------------------------------------------------------
 1 | const mutations = {
 2 |     changeMusicUrl(state,url){
 3 |         state.globalMusicUrl = url
 4 |     },
 5 |     changeMusicInfo(state,info){
 6 |         state.globalMusicInfo = info
 7 |     },
 8 |     changeCurrentTime(state,time){
 9 |         state.globalCurrentTime = time
10 |     },
11 |     changeMusicStatus(state,status){
12 |         state.isMusicPaused = status
13 |     },
14 |     changeMusicQueue(state,obj){
15 |         let ids = []
16 |         for (const item of state.musicQueue) {
17 |             ids.push(item.id)
18 |         }
19 |         if(!ids.includes(obj.id))
20 |             state.musicQueue.push(obj)
21 |     },
22 |     deleteMusic(state,id){
23 |         let queue = state.musicQueue
24 |         for(let i=0;i<queue.length;i++){
25 |             if(queue[i].id === id){
26 |                 queue.splice(i,1)
27 |             }
28 |         }
29 |     },
30 |     clearMusicQueue(state){
31 |         state.musicQueue = []
32 |     },
33 |     changeNowIndex(state,index){
34 |         state.nowIndex = index
35 |     },
36 |     deleteToNext(state){
37 |         state.deleteToNext = !state.deleteToNext
38 |     },
39 |     changeQueuePos(state,pos){
40 |         state.queuePos = pos
41 |     },
42 |     changeQueueStyle(state,status){
43 |         state.queueStyle = status
44 |     },
45 | }
46 | 
47 | export default mutations


--------------------------------------------------------------------------------
/src/utils/api.js:
--------------------------------------------------------------------------------
  1 | import request from './request'
  2 | 
  3 | export function getNewSongsAPI(params){
  4 |     return request({
  5 |         url:'/top/song',
  6 |         method:'get',
  7 |         params
  8 |     })
  9 | }
 10 | 
 11 | export function playMusicAPI(params){
 12 |     return request({
 13 |         url:'/song/url',
 14 |         method:'get',
 15 |         params
 16 |     })
 17 | }
 18 | 
 19 | export function bannerAPI(){
 20 |     return request({
 21 |         url:'/banner',
 22 |         method:'get',
 23 |     })
 24 | }
 25 | 
 26 | export function recommendSonglistAPI(params){
 27 |     return request({
 28 |         url:'/personalized',
 29 |         method:'get',
 30 |         params
 31 |     })
 32 | }
 33 | 
 34 | export function recommendSongAPI(){
 35 |     return request({
 36 |         url:'/personalized/newsong',
 37 |         method:'get',
 38 |     })
 39 | }
 40 | 
 41 | export function recommendMVAPI(){
 42 |     return request({
 43 |         url:'/personalized/mv',
 44 |         method:'get',
 45 |     })
 46 | }
 47 | 
 48 | export function highQualityAPI(params){
 49 |     return request({
 50 |         url:'/top/playlist/highquality',
 51 |         method:'get',
 52 |         params
 53 |     })
 54 | }
 55 | 
 56 | export function songListAPI(params){
 57 |     return request({
 58 |         url:'/top/playlist',
 59 |         method:'get',
 60 |         params
 61 |     })
 62 | }
 63 | 
 64 | export function mvListAPI(params){
 65 |     return request({
 66 |         url:"/mv/all",
 67 |         method:'get',
 68 |         params
 69 |     })
 70 | }
 71 | 
 72 | export function playlistDetailAPI(params){
 73 |     return request({
 74 |         url:"/playlist/detail",
 75 |         method:'get',
 76 |         params
 77 |     })    
 78 | }
 79 | 
 80 | export function songInfoAPI(params){
 81 |     return request({
 82 |         url:"/song/detail",
 83 |         method:'get',
 84 |         params
 85 |     })      
 86 | }
 87 | 
 88 | export function commentsAPI(params,type){
 89 |     return request({
 90 |         url:"/comment/"+type,
 91 |         method:'get',
 92 |         params
 93 |     })      
 94 | }
 95 | 
 96 | export function searchAPI(params){
 97 |     return request({
 98 |         url:"/cloudsearch",
 99 |         method:'get',
100 |         params
101 |     })      
102 | }
103 | 
104 | export function playMVAPI(params){
105 |     return request({
106 |         url:"/mv/url",
107 |         method:'get',
108 |         params
109 |     })       
110 | }
111 | 
112 | export function simiMVAPI(params){
113 |     return request({
114 |         url:"/simi/mv",
115 |         method:'get',
116 |         params
117 |     })       
118 | }
119 | 
120 | export function mvDetailAPI(params){
121 |     return request({
122 |         url:"/mv/detail",
123 |         method:'get',
124 |         params
125 |     })       
126 | }
127 | 
128 | export function artistsAPI(params,type=""){
129 |     let url = type=="" ? '/artists' : '/artist/'+type
130 |     if(type == 'simi')
131 |         url = '/simi/artist'
132 |     return request({
133 |         url,
134 |         method:'get',
135 |         params
136 |     })     
137 | }
138 | 
139 | export function albumAPI(params){
140 |     return request({
141 |         url:"/album",
142 |         method:'get',
143 |         params
144 |     })       
145 | }
146 | 
147 | export function lyricAPI(params){
148 |     return request({
149 |         url:"/lyric",
150 |         method:'get',
151 |         params
152 |     })       
153 | }
154 | 
155 | export function hotSearchAPI(){
156 |     return request({
157 |         url:"/search/hot/detail",
158 |         method:'get',
159 |     })       
160 | }


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import {Message} from 'element-ui'
 3 | 
 4 | let baseURL = ""
 5 | 
 6 | if(process.env.NODE_ENV == "development"){
 7 |     baseURL = 'http://localhost:3000'
 8 | }else{
 9 |     baseURL = 'http://duoduozuikeail.top:3000'
10 |     // baseURL = 'https://netease-cloud-music-api-lemon-chi.vercel.app'
11 | }
12 | 
13 | const service = axios.create({
14 |     baseURL,
15 |     timeout:5000
16 | })
17 | 
18 | service.interceptors.response.use(
19 |     response => {
20 |         if(response.status == 200) {
21 |             return Promise.resolve(response)
22 |         }else{
23 |             return Promise.reject(response)
24 |         }
25 |     },
26 |     error => {
27 |         error && Message({
28 |             type:'error',
29 |             message:'网络连接出问题了~',
30 |             showClose:true
31 |         })
32 |     }
33 | )
34 | 
35 | export default service


--------------------------------------------------------------------------------
/src/utils/utils.js:
--------------------------------------------------------------------------------
 1 | export  function formatDate(now) { 
 2 |     var year=now.getFullYear();  //取得4位数的年份
 3 |     var month=(now.getMonth()+1).toString().padStart(2,'0');  //取得日期中的月份，其中0表示1月，11表示12月
 4 |     var date=now.getDate().toString().padStart(2,'0');      //返回日期月份中的天数（1到31）
 5 |     return year+"-"+month+"-"+date; 
 6 | }
 7 | 
 8 | export  function formatDateFully(now) { 
 9 |     var year=now.getFullYear();  //取得4位数的年份
10 |     var month=(now.getMonth()+1).toString().padStart(2,'0');  //取得日期中的月份，其中0表示1月，11表示12月
11 |     var date=now.getDate().toString().padStart(2,'0');      //返回日期月份中的天数（1到31）
12 |     var hour=now.getHours().toString().padStart(2,'0');     //返回日期中的小时数（0到23）
13 |     var minute=now.getMinutes().toString().padStart(2,'0'); //返回日期中的分钟数（0到59）
14 |     var second=now.getSeconds().toString().padStart(2,'0'); //返回日期中的秒数（0到59）
15 |     return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
16 | }


--------------------------------------------------------------------------------
/src/views/Album/Album.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="playlist"  v-loading="loading">
  3 |         <div class="playlist-top-card">
  4 |             <div class="playlist-img-wrap">
  5 |                 <img v-lazy="albumInfo.picUrl" alt="">
  6 |             </div>
  7 |             <div class="playlist-info">
  8 |                 <div class="playlist-name">
  9 |                     <div class="tag1">专辑</div>{{albumInfo.name}}
 10 |                 </div>
 11 |                 <div class="playlist-user-info">
 12 |                     <div class="playlist-user-name">歌手：{{artistName}}</div>
 13 |                     <div class="playlist-user-name">时间：{{albumInfo.publishTime}}</div>
 14 |                     <div class="playlist-user-name">共{{albumInfo.size}}首</div>
 15 |                 </div>
 16 |                 <div class="playAllBtn iconfont icon-play" @click="playAll"> 播放全部</div>
 17 |             </div>
 18 |         </div>
 19 | 
 20 |         <div class="playlist-tabs-wrap">
 21 |             <el-tabs v-model="activeName" @tab-click="handleClick">
 22 |                 <el-tab-pane label="歌曲列表" name="first">
 23 |                     <div class="songs-table">
 24 |                         <el-table
 25 |                             :data="tableData"
 26 |                             stripe
 27 |                             @row-dblclick="play">
 28 | 
 29 |                             <el-table-column type="index" width="50"></el-table-column>
 30 | 
 31 |                             <el-table-column prop="name" label="音乐标题" width=""></el-table-column>
 32 | 
 33 |                             <el-table-column prop="artistInfo" label="歌手" width="">
 34 |                                 <template slot-scope="scope">
 35 |                                     <div v-for="(singer,i) in scope.row.ar" :key="i" style="cursor:pointer;color:#2980b9;display:inline-block" @click="toArtist(singer.id)">{{singer.name}}<span style="color:#606266;margin:0 5px" v-show="scope.row.ar.length != 1 && i!=scope.row.ar.length-1">/</span></div>
 36 |                                 </template>                                                                 
 37 |                             </el-table-column>                          
 38 | 
 39 |                             <el-table-column prop="al.name" label="专辑" >
 40 |                                 <template slot-scope="scope">
 41 |                                     <span style="cursor:pointer;color:#2980b9;" @click="toAlbum(scope.row.al.id)">{{scope.row.al.name}}</span>
 42 |                                     <span class="plus" title="添加至歌单" @click="addToQueue(scope.row,$event)">+</span>
 43 |                                 </template>                                
 44 |                             </el-table-column>
 45 | 
 46 |                             <el-table-column prop="dt" label="时长" width="100"></el-table-column>                            
 47 |                         </el-table>
 48 |                     </div>                    
 49 |                 </el-tab-pane>
 50 |                 <el-tab-pane :label="`评论(${commentCount})`" name="second">
 51 | 
 52 |                     <div class="comment-wrap" v-if="hotComments.length!=0">
 53 |                         <h4 class="comment-title">最热评论({{hotComments.length}})</h4>
 54 |                         <ul>
 55 |                             <li v-for="(item,index) in hotComments" :key="index">
 56 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
 57 |                                 <div class="comment-info">
 58 |                                     <div class="comment">
 59 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
 60 |                                         <span class="comment-content">{{item.content}}</span>
 61 |                                     </div>
 62 |                                     <div class="re-comment" v-if="item.beReplied.length!=0">
 63 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
 64 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
 65 |                                     </div>
 66 |                                     <div class="comment-bottom">
 67 |                                         <p class="comment-time">{{item.time}}</p>
 68 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
 69 |                                     </div>
 70 |                                 </div>
 71 |                             </li>
 72 |                         </ul>
 73 |                     </div>
 74 | 
 75 |                     <div class="comment-wrap">
 76 |                         <h4 class="comment-title">最新评论({{commentCount-hotComments.length}})</h4>
 77 |                         <ul>
 78 |                             <li v-for="(item,index) in comments" :key="index">
 79 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
 80 |                                 <div class="comment-info">
 81 |                                     <div class="comment">
 82 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
 83 |                                         <span class="comment-content">{{item.content}}</span>
 84 |                                     </div>
 85 |                                     <div class="re-comment" v-if="item.beReplied.length!=0">
 86 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
 87 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
 88 |                                     </div>                                    
 89 |                                     <div class="comment-bottom">
 90 |                                         <p class="comment-time">{{item.time}}</p>
 91 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
 92 |                                     </div>
 93 | 
 94 |                                 </div>
 95 |                             </li>
 96 |                         </ul>
 97 |                             <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>
 98 |                     </div>
 99 | 
100 | 
101 |                 </el-tab-pane>
102 |                 <el-tab-pane label="专辑详情" name="third">
103 |                     <span class="tt">专辑介绍</span>
104 |                     <p v-for="(item,index) in albumDescList" :key="index" class="dd">{{item}}</p>
105 |                 </el-tab-pane>
106 |             </el-tabs>     
107 |         </div>
108 |         <div class="add-ball iconfont icon-yinfu" v-show="showAddBall" ref="addBall"></div>     
109 |     </div>
110 | </template>
111 | 
112 | <script>
113 | import {formatDate,formatDateFully} from '../../utils/utils'
114 | import { albumAPI,playMusicAPI,commentsAPI } from '@/utils/api'
115 | import Pagination from '@/components/Pagination.vue'
116 | 
117 | export default {
118 |     data(){
119 |         return {
120 |             activeName:'first',
121 |             albumId:"",            
122 |             albumInfo:{},
123 |             artistName:"",
124 |             commentCount:0,
125 |             albumDescList:"",            
126 |             tableData:[],
127 |             comments:[],
128 |             hotComments:[],
129 |             total:0,
130 |             pageSize:10,
131 |             page:1,
132 |             loading:true,
133 |             showAddBall:false            
134 |         }
135 |     },
136 |     components: {
137 |         Pagination
138 |     },
139 |     created(){
140 |         console.log(this.$route.query.id)
141 |         this.albumId = this.$route.query.id
142 | 
143 |         this.getTableData()
144 |         this.getComments(true)    
145 |     },
146 |     computed:{
147 |         nowIndex(){
148 |             return this.$store.state.nowIndex
149 |         },
150 |         musicQueue(){
151 |             return this.$store.state.musicQueue
152 |         },
153 |         queuePos(){
154 |             return this.$store.state.queuePos
155 |         }        
156 |     },
157 |     methods:{
158 |         handleClick(tab) {
159 |             console.log(tab)
160 |         },
161 |         toArtist(id){
162 |             this.$router.push(`/artist?artistId=${id}`)
163 |         },          
164 |         handleCurrentChange(page){
165 |             this.page = page
166 |             this.getComments()
167 |         },
168 |         addToQueue(row,e){
169 |             // console.log(row)
170 |             let obj = {
171 |                 id:row.id,
172 |                 imgUrl:row.al.picUrl,
173 |                 duration:row.dt,
174 |                 // singer:row.ar[0].name,
175 |                 // artistId:row.ar[0].id,
176 |                 artistInfo:row.ar,
177 |                 songName:row.name
178 |             }
179 | 
180 |             let ids = []
181 |             for (const item of this.musicQueue) {
182 |                 ids.push(item.id)
183 |             }
184 |             if(ids.indexOf(obj.id) == -1){
185 |                 this.beginAnimation(e.x,e.y)
186 | 
187 |                 setTimeout(() => {
188 |                     this.$store.commit('changeQueueStyle','add')      
189 |                     this.$store.commit('changeMusicQueue',obj)  
190 |                 }, 500);
191 |          
192 | 
193 |                 setTimeout(() => {
194 |                     this.$store.commit('changeQueueStyle','normal')                   
195 |                 }, 1000);
196 |             }else{
197 |                 this.$message({
198 |                     type:'warning',
199 |                     message:"已存在播放列表哦",
200 |                     showClose:true
201 |                 })
202 |             }            
203 |         },
204 |         beginAnimation(x,y){
205 |             this.showAddBall = true
206 |             let endX = this.queuePos.left
207 |             let endY = this.queuePos.top
208 |             console.log('起始位置 x:'+x+' y:'+y)
209 |             console.log('终点位置 x:'+endX+' y:'+endY)
210 | 
211 |             let el = document.querySelector(".add-ball")
212 |             el.style.left = x+'px'
213 |             el.style.top = y+'px'
214 |             
215 |             setTimeout(() => {
216 |                 el.style.left = endX+'px'
217 |                 el.style.top = endY+'px'
218 |             }, 0);
219 | 
220 |             setTimeout(() => {
221 |                 this.showAddBall = false
222 |             }, 500);
223 |         },                
224 |         getTableData(){
225 |             albumAPI({id:this.albumId}).then(res=>{
226 |                 console.log(res)
227 |                 this.albumInfo = res.data.album
228 |                 this.commentCount = this.albumInfo.info.commentCount
229 |                 this.artistName = res.data.album.artist.name
230 |                 this.albumInfo.publishTime = formatDate(new Date(this.albumInfo.publishTime))
231 |                 for(let item of res.data.songs){
232 |                     let duration = item.dt
233 |                     let min = parseInt(duration / 60000).toString().padStart(2,'0')
234 |                     let second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
235 |                     item.dt =  `${min}:${second}`                      
236 |                 }
237 |                 this.tableData = res.data.songs
238 | 
239 |                 let albumDesc = this.albumInfo.description
240 |                 this.albumDescList = albumDesc.split(/[\n]/)
241 |             }).then(()=>{
242 |                 this.loading = false
243 |             })
244 |         },                
245 |         play(row){
246 |             console.log(row)
247 |             let id = row.id
248 |             playMusicAPI({id}).then(res=>{
249 |                 if(res.data.data[0].url){
250 |                 this.songUrl = res.data.data[0].url
251 |                 
252 |                 let musicInfo = {
253 |                     imgUrl:row.al.picUrl,
254 |                     // singer:row.ar[0].name,
255 |                     artistInfo:row.ar,
256 |                     songName:row.name,
257 |                     id:row.id,
258 |                     duration:row.dt              
259 |                 }
260 | 
261 |                 this.$store.commit("changeMusicUrl",this.songUrl)
262 |                 this.$store.commit("changeMusicInfo",musicInfo)
263 |                 this.$store.commit("changeMusicStatus",false)
264 |                 this.$store.commit("changeMusicQueue",musicInfo)
265 | 
266 |                 let ids = []
267 |                 for (const item of this.musicQueue) {
268 |                     ids.push(item.id)
269 |                 }
270 |                 this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))
271 | 
272 |                 }else{
273 |                     this.$message({
274 |                     showClose: true,
275 |                     message: '对不起，歌曲暂时无法播放。',
276 |                     type: 'error'
277 |                     });
278 |                 }
279 |             })
280 |         },        
281 |         getComments(isFirst=false){
282 |             this.loading = true
283 |             let params = {
284 |                 id:this.albumId,
285 |                 limit:this.pageSize,
286 |                 offset:(this.page-1)*this.pageSize                
287 |             }
288 |             commentsAPI(params,'album').then(res=>{
289 |                 console.log(res)
290 | 
291 |                 for(let item of res.data.comments){
292 |                     item.time = formatDateFully(new Date(item.time))
293 |                 }
294 |                 
295 |                 if(isFirst){
296 |                     if(Object.prototype.hasOwnProperty.call(res.data,'hotComments')){
297 |                         for(let item of res.data.hotComments){
298 |                             item.time = formatDateFully(new Date(item.time))
299 |                         }
300 |                         this.hotComments = res.data.hotComments
301 |                     }              
302 |                 }
303 | 
304 |                 this.total = this.commentCount - this.hotComments.length    
305 |                 this.comments = res.data.comments                    
306 |             })
307 | 
308 |             setTimeout(() => {
309 |                 this.loading = false
310 |             }, 500);
311 |         },
312 |         playAll(){
313 |             let allSongs = this.tableData
314 |             this.$store.commit('clearMusicQueue')
315 |             for (const item of allSongs) {
316 |                 let obj = {
317 |                     duration:item.dt,
318 |                     id:item.id,
319 |                     imgUrl:item.al.picUrl,
320 |                     singer:item.ar[0].name,
321 |                     songName:item.name
322 |                 }
323 |                 this.$store.commit('changeMusicQueue',obj)
324 |             }
325 |             // 若第一首歌无版权无法播放，会出现bug，自动播放也是
326 |             this.$store.commit('changeNowIndex',0)
327 |             this.play(allSongs[0])
328 |         },
329 |         toAlbum(id){
330 |             this.$router.push(`/album?id=${id}`)
331 |         }          
332 |     },
333 |     watch:{
334 |         $route(newVal){
335 |             this.albumId = newVal.query.id
336 |             this.getTableData()
337 |             this.getComments(true)
338 | 
339 |             setTimeout(() => {
340 |                 this.activeName = "first"                
341 |                 this.loading = false
342 |             }, 0);            
343 |         }
344 |     }     
345 | }
346 | </script>
347 | 
348 | <style scoped>
349 |     .add-ball {
350 |         position: fixed;
351 |         color: rgb(236, 65, 65);
352 |         transition: top .5s ease-in,left .5s linear;
353 |     }
354 | 
355 |     ul {
356 |         list-style: none;
357 |     }
358 | 
359 |     .playlist {
360 |       max-width: 1300px;
361 |       margin: 0 auto;
362 |       padding: 20px;        
363 |     }
364 | 
365 |     .playlist-top-card {
366 |         display: flex;
367 |         /* height: 300px; */
368 |     }
369 | 
370 |     .playlist-img-wrap {
371 |         width: 200px;
372 |         height: 200px;
373 |     }
374 | 
375 |     .playlist-img-wrap img {
376 |         width: 100%;
377 |         height: 100%;
378 |     }
379 | 
380 |     .playlist-info {
381 |         /* font-size: 16px; */
382 |         padding: 0 20px;
383 |         flex: 1;
384 |     }
385 | 
386 |     .playlist-info .tag1 {
387 |         color: rgb(208, 53, 53);
388 |         border: 1px solid rgb(208, 53, 53);
389 |         display: inline-block;
390 |         font-size: 20px;
391 |         margin-right: 10px;
392 |         border-radius: 5px;
393 |         padding: 0px 7px;
394 |         cursor: default;
395 |     }
396 | 
397 |     .playlist-name {
398 |         font-size: 25px;
399 |         font-weight: 600;
400 |         display: flex;
401 |         align-items: center;
402 |     }
403 | 
404 |     .playlist-user-info {
405 |         /* display: flex; */
406 |         align-items: center;
407 |         font-size: 14px;
408 |     }
409 | 
410 |     .playlist-user-info img {
411 |         margin: 10px 0;
412 |     }
413 | 
414 |     .playlist-user-avatar img {
415 |         height: 30px;
416 |         width: 30px;
417 |         border-radius: 50%;
418 |     }
419 | 
420 |     .playlist-user-name {
421 |         margin: 20px 10px;
422 |     }
423 | 
424 |     .playAllBtn {
425 |         display: inline-block;
426 |         margin-right: 10px;
427 |         border-radius: 20px;
428 |         background: #d03535;
429 |         padding: 5px 15px;
430 |         color: #fff;
431 |         cursor: pointer;
432 |     }
433 | 
434 |     .playlist-tags {
435 |         margin: 10px 0;
436 |     }
437 | 
438 |     .playlist-desc {
439 |         overflow: hidden;
440 |         text-overflow: ellipsis;
441 |         display: -webkit-box;
442 |         -webkit-box-orient: vertical;
443 |         -webkit-line-clamp: 2;
444 |     }
445 | 
446 |     .playlist-desc span:nth-of-type(2){
447 |         font-size: 14px;
448 |     }
449 | 
450 |     .playlist-tags .tags {
451 |         font-size: 14px;
452 |     }
453 | 
454 |     .playlist-tags .tags:not(:last-of-type)::after {
455 |         content: '/';
456 |         margin: 0 4px;
457 |     }
458 | 
459 |     .playlist-tabs-wrap {
460 |         margin-top: 20px;
461 |     }
462 | 
463 |   .el-table td, .el-table th.is-leaf {
464 |     border-bottom: none;
465 |   }
466 | 
467 |   .el-table::before {
468 |     opacity: 0;
469 |   }
470 | 
471 |   .songs-table {
472 |     width: 100%;
473 |   }
474 | 
475 |   .img-wrap {
476 |     width: 60px;
477 |     height: 60px;
478 |     position: relative;
479 |   }
480 | 
481 |   .img-wrap img {
482 |     width: 100%;
483 |     height: 100%;
484 |     border-radius: 10px;
485 |   }
486 | 
487 |   .img-wrap p::before {
488 |     position: absolute;
489 |     top: 50%;
490 |     left: 50%;
491 |     transform: translate(-50%,-50%);
492 |     width: 30px;
493 |     height: 30px;
494 |     background-color: rgba(255, 255, 255, .8);
495 |     border-radius: 50%;
496 |     display: flex;
497 |     justify-content: center;
498 |     align-items: center;
499 |     color: #c0392b;
500 |     font-size: 14px;
501 |     cursor: pointer;
502 |   }
503 |   
504 |   .comment-title {
505 |     margin-bottom: 20px;
506 |   }
507 | 
508 |   .comment-wrap ul li {
509 |     display: flex;
510 |     margin: 10px 0 30px 0;
511 |   }
512 | 
513 |   .comment-avatar {
514 |     width: 50px;
515 |     height: 50px;
516 |     border-radius: 50%;
517 |   }
518 | 
519 |   .comment-info {
520 |     flex: 1;
521 |     font-size: 14px;
522 |     margin-left: 10px;
523 |   }
524 | 
525 |   .comment {
526 |     margin-bottom: 10px;
527 |   }
528 | 
529 |   .comment-user {
530 |     color: #517eaf;
531 |     margin-right: 10px;
532 |     cursor: pointer;
533 |   }
534 | 
535 |   .comment-content {
536 |     display: inline;
537 |   }
538 | 
539 |   .comment-time {
540 |     color: grey;
541 |     margin-right: 20px;
542 |     margin-top: 5px;
543 |   }
544 | 
545 |   .comment-bottom {
546 |     display: flex;
547 |     align-items: center;
548 |     font-size: 14px!important;
549 |   }
550 | 
551 |   .re-comment {
552 |     background-color: #f3f1f3;
553 |     padding: 5px 10px;
554 |     color: rgba(0,0,0,.6);
555 |     margin-bottom: 5px;
556 |   }
557 | 
558 |   .dd {
559 |     line-height: 2.5rem;
560 |     text-indent: 2rem;
561 |     margin: 1rem 0;      
562 |   }
563 | 
564 |   .tt {
565 |     font-weight: bold;
566 |     font-size: 20px;
567 |     display: inline-block;
568 |     margin: 10px 0;      
569 |   }
570 | </style>


--------------------------------------------------------------------------------
/src/views/Artist/Artist.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="artist" v-loading="loading">
  3 |         <div class="artist-info">
  4 |             <div class="artist-img-wrap">
  5 |                 <img v-lazy="topInfo.picUrl" alt="">
  6 |             </div>
  7 |             <div class="artist-others">
  8 |                 <div class="artist-name">{{topInfo.name}}</div>
  9 |                 <div class="artsit-works">
 10 |                     <div class="artist-works-count">单曲数：{{topInfo.musicSize}}</div>
 11 |                     <div class="artist-works-count">专辑数：{{topInfo.albumSize}}</div>
 12 |                     <div class="artist-works-count">MV数：{{mvData.length}}</div>
 13 |                 </div>
 14 |             </div>
 15 |         </div>
 16 | 
 17 |         <el-tabs v-model="activeName" @tab-click="handleClick">
 18 |             <el-tab-pane label="专辑" name="album">
 19 |                 <ul class="albums">
 20 |                     <li class="al-item" v-for="(item,index1) in albumData" :key="index1" @click="toAlbum(item.id)">
 21 |                         <div class="al-img-wrap">
 22 |                             <p class="iconfont icon-play bofang"></p>
 23 |                             <img v-lazy="item.picUrl" alt="">
 24 |                         </div>
 25 |                         <div class="al-name" :title="item.name">{{item.name}}</div>
 26 |                         <div class="al-time">{{item.publishTime | formatDate}}</div>
 27 |                     </li>
 28 |                 </ul>
 29 |             </el-tab-pane>
 30 |             <el-tab-pane label="MV" name="mv">
 31 |                 <ul class="artist-mv">
 32 |                     <li class="mv-item" v-for="(item,index2) in mvData" :key="index2" @click="toMvDetail(item.id)">
 33 |                         <div class="al-img-wrap mv-img-wrap">
 34 |                             <p class="iconfont icon-play bofang"></p>
 35 |                             <img v-lazy="item.imgurl" alt="">
 36 |                             <p class="play-count iconfont icon-play">{{item.playCount | dealPlayCount}}</p>
 37 |                         </div>
 38 |                         <div class="al-name" :title="item.name">{{item.name}}</div>                     
 39 |                     </li>
 40 |                     <span v-if="mvData.length==0">暂无MV</span>                    
 41 |                 </ul>
 42 |             </el-tab-pane>
 43 |             <el-tab-pane label="歌手详情" name="detail">
 44 | 
 45 |                 <span class="detail-title">个人简介</span>
 46 |                 <p class="detail-words" v-for="(y,index3) in briefDescList" :key="index3">{{y}}</p>
 47 | 
 48 |                 <div v-for="(item,index4) in introduction" :key="index4+999">
 49 |                     <span class="detail-title">{{item.ti}}</span>
 50 |                     <p class="detail-words" v-for="(x,i) in item.strList" :key="i">{{x}}</p>                    
 51 |                 </div>
 52 | 
 53 |             </el-tab-pane>
 54 |             <el-tab-pane label="相似歌手" name="similar">
 55 |                 <ul class="simi">
 56 |                     <li class="simi-item" v-for="(item,index) in simi" :key="index" @click="toArtist(item.id)">
 57 |                         <div class="simi-img-wrap">
 58 |                             <img v-lazy="item.picUrl" alt="">
 59 |                         </div>
 60 |                         <div class="simi-name">{{item.name}}</div>
 61 |                     </li>
 62 |                     <span v-if="simi.length==0">暂无相似歌手</span>
 63 |                 </ul>                
 64 |             </el-tab-pane>
 65 |         </el-tabs>        
 66 |     </div>
 67 | </template>
 68 | 
 69 | <script>
 70 | import { artistsAPI } from '@/utils/api'
 71 | 
 72 | export default {
 73 |     data(){
 74 |         return {
 75 |             artistId:'',
 76 |             activeName:'album',
 77 |             topInfo:{},
 78 |             albumData:[],
 79 |             mvData:[],
 80 |             briefDescList:[],
 81 |             introduction:[],
 82 |             simi:[],
 83 |             loading:true
 84 |         }
 85 |     },
 86 |     created(){
 87 |         this.artistId = this.$route.query.artistId
 88 | 
 89 |         this.getAlbumData()
 90 |         this.getMVData()
 91 |     },
 92 |     methods:{
 93 |         handleClick(tab) {
 94 |             this.loading = true
 95 |             if(tab.label == "相似歌手")
 96 |                 this.getSimi()
 97 |             else if(tab.label == "歌手详情")
 98 |                 this.getArtistInfo()
 99 |             setTimeout(() => {
100 |                 this.loading = false
101 |             }, 1000);
102 |         },
103 |         getAlbumData(){
104 |             let params = {
105 |                 id:this.artistId,
106 |                 limit:50,
107 |                 offset:0                
108 |             }
109 |             artistsAPI(params,'album').then(res=>{
110 |                 console.log(res)
111 |                 this.topInfo = {
112 |                     albumSize:res.data.artist.albumSize,
113 |                     musicSize:res.data.artist.musicSize,
114 |                     name:res.data.artist.name,
115 |                     picUrl:res.data.artist.picUrl
116 |                 }
117 |                 this.albumData = res.data.hotAlbums             
118 |             }).then(()=>{
119 |                 this.loading = false
120 |             })
121 |         },
122 |         getMVData(){
123 |             let params = {
124 |                 id:this.artistId,
125 |                 limit:50,
126 |                 offset:0               
127 |             }
128 |             artistsAPI(params,'mv').then(res=>{
129 |                 // console.log(res)
130 |                 this.mvData = res.data.mvs
131 |             })
132 |         },
133 |         getArtistInfo(){
134 |             artistsAPI({id:this.artistId},'desc').then(res=>{
135 |                 // console.log(res)
136 |                 let l = res.data.briefDesc.split(/[\n]/)
137 |                 this.briefDescList = l
138 | 
139 |                 this.introduction = res.data.introduction
140 |                 let strList = []
141 |                 for(let item of this.introduction){
142 |                     strList = item.txt.split(/[\n]/)
143 |                     item.strList = strList
144 |                 }
145 |             })                            
146 |         },
147 |         getSimi(){
148 |             artistsAPI({id:this.artistId},'simi').then(res=>{
149 |                 console.log(res)
150 |                 this.simi = res.data.artists
151 |             })
152 |         },
153 |         toMvDetail(id) {
154 |             this.$router.push(`/mvdetail?id=${id}`)
155 |         },
156 |         toArtist(id){
157 |             this.$router.push(`/artist?artistId=${id}`)
158 |         },
159 |         toAlbum(id){
160 |             this.$router.push(`/album?id=${id}`)
161 |         }                                   
162 |     },
163 |     filters:{
164 |         formatDate(now) { 
165 |             now = new Date(now)
166 |             var year=now.getFullYear();  //取得4位数的年份
167 |             var month=(now.getMonth()+1).toString().padStart(2,'0');  //取得日期中的月份，其中0表示1月，11表示12月
168 |             var date=now.getDate().toString().padStart(2,'0');      //返回日期月份中的天数（1到31）
169 |             return year+"-"+month+"-"+date; 
170 |         },
171 |         dealPlayCount(count) {
172 |             return count >= 100000 ? parseInt(count/10000)+'万' : count
173 |         }
174 |     },
175 |     watch:{
176 |         $route(newVal){
177 |             this.artistId = newVal.query.artistId
178 |             this.getAlbumData()
179 |             this.getMVData()
180 | 
181 |             setTimeout(() => {
182 |                 this.activeName = "album"                
183 |                 this.loading = false
184 |             }, 0);            
185 |         }
186 |     }    
187 | }
188 | </script>
189 | 
190 | <style scoped>
191 |     .artist {
192 |       max-width: 1300px;
193 |       margin: 0 auto;
194 |       padding: 20px;        
195 |     }
196 | 
197 |     .artist >>> .el-tabs__item{
198 |         font-size: 14px;
199 |     }
200 | 
201 |     .artist >>> .el-loading-spinner {
202 |       top: 15%;
203 |     }
204 | 
205 |     .artist-info {
206 |         display: flex;
207 |         font-size: 14px;
208 |         margin-bottom: 20px;
209 |     }
210 | 
211 |     .artist-img-wrap {
212 |         width: 200px;
213 |         height: 200px;
214 |         margin-right: 50px;
215 |     }
216 | 
217 |     .artist-img-wrap img {
218 |         width: 100%;
219 |         height: 100%;
220 |     }
221 | 
222 |     .artist-name {
223 |         font-weight: bold;
224 |         font-size: 22px;
225 |     }
226 | 
227 |     .artsit-works {
228 |         margin-top: 20px;
229 |         display: flex;
230 |     }
231 | 
232 |     .artist-works-count:nth-of-type(2) {
233 |         margin: 0 20px;
234 |     }
235 | 
236 |     /* tabs部分 */
237 |     /* 专辑 */
238 |     .albums {
239 |         display: grid;
240 |         grid-template-columns: repeat(4,1fr);
241 |         gap: 20px;
242 |         align-items: center;
243 |     }
244 | 
245 |     .al-item {
246 |         font-size: 14px;
247 |         width: 300px;
248 |     }
249 | 
250 |     .al-img-wrap {
251 |         width: 100%;
252 |         position: relative;
253 |     }
254 | 
255 |     .al-img-wrap img {
256 |         width: 100%;
257 |         border-radius: 10px;
258 |     }
259 | 
260 |     .al-img-wrap .bofang::before {
261 |         position: absolute;
262 |         top: 50%;
263 |         left: 50%;
264 |         transform: translate(-50%,-50%);
265 |         width: 50px;
266 |         height: 50px;
267 |         background-color: rgba(255, 255, 255, .8);
268 |         border-radius: 50%;
269 |         display: flex;
270 |         justify-content: center;
271 |         align-items: center;
272 |         color: #c0392b;
273 |         font-size: 20px;
274 |         cursor: pointer;
275 |         opacity: 0;
276 |         transition: .5s;
277 |     }
278 | 
279 |     .al-img-wrap:hover .bofang::before{
280 |         opacity: 1;
281 |     }
282 | 
283 |     .al-name {
284 |         margin: 5px 0;
285 |         overflow: hidden;
286 |         text-overflow: ellipsis;
287 |         white-space: nowrap;
288 |     }
289 | 
290 |     .al-time {
291 |         color: grey;
292 |     }
293 | 
294 |     /* MV */
295 |     .artist-mv {
296 |         display: grid;
297 |         gap: 20px;
298 |         grid-template-columns: repeat(4,1fr);
299 |     }
300 | 
301 |     .mv-item {
302 |         width: 300px;        
303 |     }
304 | 
305 |     .play-count{
306 |         position: absolute;
307 |         top: 5px;
308 |         right: 5px;
309 |         color: #fff;
310 |         text-shadow: 0 0 2px rgb(0, 0, 0);
311 |     }  
312 |     
313 |     /* 歌手详情 */
314 |     .detail-title {
315 |         font-weight: bold;
316 |         font-size: 20px;
317 |         display: inline-block;
318 |         margin: 10px 0;
319 |     }
320 | 
321 |     .detail-words {
322 |         line-height: 2.5rem;
323 |         text-indent: 2rem;
324 |         margin: 1rem 0;
325 |         /* white-space: pre-line;  */
326 |     }
327 | 
328 |     /* 相似歌手 */
329 |     .simi {
330 |         display: grid;
331 |         grid-template-columns: repeat(5,1fr);
332 |         gap: 20px;
333 |     }
334 | 
335 |     .simi-item {
336 |         width: 80%;
337 |     }
338 | 
339 |     .simi-img-wrap {
340 |         width: 100%;
341 |         height: 0;
342 |         padding-bottom: 100%;
343 |         position: relative;
344 |         cursor: pointer;
345 |     }
346 | 
347 |     .simi-img-wrap img {
348 |         position: absolute;
349 |         width: 100%;
350 |         height: 100%;
351 |         border-radius: 10px;
352 |     }
353 | 
354 |     .simi-name {
355 |         font-size: 14px;
356 |         color: grey;
357 |         text-align: center;
358 |         margin: 10px 0;        
359 |     }
360 | </style>


--------------------------------------------------------------------------------
/src/views/Discover/Discover.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="discover" v-loading="loading">  
  3 |         <div class="Carousel">
  4 |             <el-carousel :interval="3000" type="card" height="250px">
  5 |                 <el-carousel-item v-for="(item,index) in banners" :key="index">
  6 |                     <img class="item-img" :src="item.imageUrl" alt="banner" width="100%" height="100%" >
  7 |                 </el-carousel-item>
  8 |             </el-carousel>            
  9 |         </div>
 10 |         <div class="songs-wrap">
 11 |             <h4>推荐歌单</h4>
 12 |             <div class="list">
 13 |                 <ul>
 14 |                     <li class="iconfont icon-play" v-for="(item,index) in recommendList" :key="index" @click="toPlaylistDetail(item.id)">
 15 |                         <p class="first-p">{{item.copywriter}}</p>
 16 |                         <img v-lazy="item.picUrl" alt="recommend">
 17 |                         <p class="last-p" :title="item.name">{{item.name}}</p>
 18 |                     </li>                                                                                                                    
 19 |                 </ul>
 20 |             </div>
 21 |         </div>
 22 |         <div class="songs-wrap">
 23 |             <h4>最新音乐</h4>
 24 |             <ul class="new-songs">
 25 |                 <li v-for="(item,index) in newSongs" :key="index">
 26 |                     <div class="music-img-wrap">
 27 |                         <img v-lazy="item.picUrl" alt="newSongs">
 28 |                         <p class="iconfont icon-play" @click="playMusic(item)"></p>
 29 |                     </div>
 30 | 
 31 |                     <div class="music-info">
 32 |                         <p class="music-name">{{item.name}}</p>
 33 |                         <p class="music-singer" v-for="(singer,i) in item.song.artists" :key="i" style="display:inline;margin:0 5px">{{singer.name}}</p>
 34 |                     </div>
 35 |                 </li>                                                                                                                       
 36 |             </ul>
 37 |         </div>
 38 |         <!-- <div class="songs-wrap">
 39 |             <h4>推荐MV</h4>
 40 |             <ul class="mv-list">
 41 |                 <li v-for="item in newMvs" :key="item.id" @click="toMvDetail(item.id)">
 42 |                     <div class="mv-img-wrap">
 43 |                         <img v-lazy="item.picUrl" alt="newMvs">
 44 |                         <p class="iconfont icon-play play"></p>
 45 |                         <p class="play-count iconfont icon-play">{{item.playCount}}</p>
 46 |                     </div>
 47 |                     <div class="mv-info">
 48 |                         <p class="title">{{item.name}}</p>
 49 |                         <p class="author">{{item.artistName}}</p>
 50 |                     </div>
 51 |                 </li>                                              
 52 |             </ul>
 53 |         </div> -->
 54 |     </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | import { bannerAPI,recommendSonglistAPI,recommendSongAPI,recommendMVAPI,playMusicAPI } from '@/utils/api'
 59 | 
 60 | export default {
 61 |     data(){
 62 |         return {
 63 |             banners:[],
 64 |             recommendList:[],
 65 |             newSongs:[],
 66 |             newMvs:[],
 67 |             loading:true
 68 |         }
 69 |     },
 70 |     computed:{
 71 |         musicQueue(){
 72 |             return this.$store.state.musicQueue
 73 |         }
 74 |     },
 75 |     created(){
 76 |         // 获取轮播图
 77 |         bannerAPI().then(res=>{
 78 |             this.banners = res.data.banners
 79 |         }).then(()=>{
 80 |             this.loading = false
 81 |         })
 82 | 
 83 |         // 获取推荐歌单
 84 |         recommendSonglistAPI({limit:10}).then(res=>{
 85 |             // console.log(res)
 86 |             this.recommendList = res.data.result
 87 |         })
 88 | 
 89 |         // 获取最新音乐
 90 |         recommendSongAPI().then(res=>{
 91 |             // console.log(res)
 92 |             this.newSongs = res.data.result
 93 |         })
 94 | 
 95 |         //获取推荐MV
 96 |         recommendMVAPI().then(res=>{
 97 |             // console.log(res)
 98 |             this.newMvs = res.data.result
 99 |             for(let i=0;i<this.newMvs.length;i++){
100 |                 if(this.newMvs[i].playCount >= 100000)
101 |                     this.newMvs[i].playCount = parseInt(this.newMvs[i].playCount/10000)+'万'
102 |             }             
103 |         })
104 |     },
105 |     methods:{
106 |         timeFormat(time){
107 |             let min = parseInt(time / 60000).toString().padStart(2,'0')
108 |             let second = parseInt((time-min*60000)/1000).toString().padStart(2,'0')
109 |             return min+":"+second
110 |         },
111 |         playMusic(item){
112 |             console.log(item)
113 |             playMusicAPI({id:item.id}).then(res=>{
114 |                 // console.log(res)
115 |                 if(res.data.data[0].url){
116 |                 this.songUrl = res.data.data[0].url
117 | 
118 |                 let musicInfo = {
119 |                     imgUrl:item.picUrl,
120 |                     // singer:item.song.artists[0].name,
121 |                     artistInfo:item.song.artists,
122 |                     songName:item.name,
123 |                     id:item.id,
124 |                     duration:this.timeFormat(item.song.duration)                    
125 |                 }
126 |                 this.$store.commit("changeMusicUrl",this.songUrl)
127 |                 this.$store.commit("changeMusicInfo",musicInfo)
128 |                 this.$store.commit("changeMusicStatus",false)                
129 |                 this.$store.commit("changeMusicQueue",musicInfo)
130 |                 let ids = []
131 |                 for (const item of this.musicQueue) {
132 |                     ids.push(item.id)
133 |                 }
134 |                 this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))                 
135 | 
136 |                 // this.$parent.$parent.musicUrl = this.songUrl
137 |                 // // 传入歌曲信息
138 |                 // this.$parent.$parent.musicInfo = {
139 |                 //     imgUrl:item.picUrl,
140 |                 //     singer:item.song.artists[0].name,
141 |                 //     songName:item.name
142 |                 // }
143 | 
144 |                 }else{
145 |                     this.$message({
146 |                     showClose: true,
147 |                     message: '对不起，歌曲暂时无法播放。',
148 |                     type: 'error'
149 |                     });
150 |                 }
151 |             })
152 |         },
153 |         toPlaylistDetail(id){
154 |             this.$router.push(`/playlist?id=${id}`)
155 |         },
156 |         toMvDetail(id){
157 |             this.$router.push(`/mvdetail?id=${id}`)
158 |         }        
159 |     }
160 | }
161 | </script>
162 | 
163 | <style scoped>
164 | 
165 |     ul {
166 |         list-style: none;
167 |     }
168 | 
169 |   .Carousel >>> .el-carousel__item:nth-child(2n) {
170 |     background-color: #99a9bf;
171 |   }
172 |   
173 |   .Carousel >>> .el-carousel__item:nth-child(2n+1) {
174 |     background-color: #d3dce6;
175 |   }
176 | 
177 |   .Carousel >>> .el-carousel__button {
178 |       width: 8px;
179 |       height: 8px;
180 |       border-radius: 50%;
181 |   }
182 | 
183 |   .Carousel >>> .el-carousel__indicator.is-active button {
184 |       background-color: rgb(236, 65, 65);
185 |   }
186 | 
187 |   .discover {
188 |       max-width: 1300px;    
189 |       margin: 0 auto;
190 |       padding: 20px;
191 |   }
192 | 
193 |   .discover >>> .el-loading-spinner {
194 |       top: 20%;
195 |   }
196 |   
197 |   .el-carousel__item--card{
198 |       border-radius: 20px;
199 |   }
200 | 
201 |   .songs-wrap {
202 |       margin-bottom: 20px;
203 |   }
204 | 
205 |   .songs-wrap h4 {
206 |       color: #333;
207 |       margin-bottom: 20px;
208 |   }
209 | 
210 |   .songs-wrap .list ul{
211 |       width: 100%;
212 |       display: flex;
213 |       justify-content: space-between;
214 |       flex-wrap: wrap;
215 |   }
216 | 
217 |   .songs-wrap .list li {
218 |       width: 18%;
219 |       margin: 10px 0;
220 |       position: relative;
221 |       overflow-y: hidden;
222 |   }
223 | 
224 |   .list li .first-p {
225 |       position: absolute;
226 |       top: 0;
227 |       left: 0;
228 |       width: 100%;
229 |       background-color: rgba(0, 0, 0, .5);
230 |       color: #fff;
231 |       font-size: 12px;
232 |       padding: 5px;
233 |       box-sizing: border-box;
234 |       /* border-top-left-radius: 10px;
235 |       border-top-right-radius: 10px; */
236 |       transform: translateY(-100%);;
237 |       transition: .5s;
238 |   }
239 | 
240 |   .list li::before {
241 |       content: "\e665"; 
242 |       position: absolute;
243 |       bottom: 25px;
244 |       right: 5px;
245 |       width: 35px;
246 |       height: 35px;
247 |       background-color: rgba(255, 255, 255, .8);
248 |       border-radius: 50%;
249 |       display: flex;
250 |       justify-content: center;
251 |       align-items: center;
252 |       /* font-size: 35px; */
253 |       color: #c0392b;
254 |       opacity: 0;
255 |       transition: .3s;
256 |       cursor: pointer;
257 |   }
258 | 
259 |   .list li:hover .first-p{
260 |       transform: translateY(0);
261 |   }
262 | 
263 |     .list li:hover::before{
264 |         opacity: 1;
265 |   }
266 | 
267 |   .songs-wrap ul img {
268 |       width: 100%;
269 |       border-radius: 5px;
270 |       /* opacity: 1; */
271 |   }
272 | 
273 |   .songs-wrap ul .last-p {
274 |       font-size: 14px;
275 |       overflow: hidden;
276 |       text-overflow: ellipsis;
277 |       white-space: nowrap;
278 |   }
279 | 
280 |     /* 最新音乐  */
281 |   .new-songs {
282 |       width: 100%;
283 |       display: flex;
284 |       flex-wrap: wrap;
285 |       justify-content: space-between;
286 |   }
287 | 
288 |   .new-songs li {
289 |       width: 50%;
290 |       display: flex;
291 |       padding: 10px;
292 |       box-sizing: border-box;
293 |       position: relative;
294 |   }
295 | 
296 |   .new-songs li:hover {
297 |       background-color: #ddd;
298 |   }
299 | 
300 |    .new-songs li:hover::before {
301 |        opacity: 1;
302 |   }
303 | 
304 |     .music-img-wrap {
305 |         position: relative;
306 |         width: 100px;
307 |         cursor: pointer;
308 |     }
309 | 
310 |     .music-img-wrap:hover p::before {
311 |         opacity: 1;
312 |     }
313 | 
314 |   .music-img-wrap p::before {
315 |       content: "\e665"; 
316 |       position: absolute;
317 |       top: 50%;
318 |       left: 50%;
319 |       transform: translate(-50%,-50%);
320 |       width: 35px;
321 |       height: 35px;
322 |       background-color: rgba(255, 255, 255, .8);
323 |       border-radius: 50%;
324 |       display: flex;
325 |       justify-content: center;
326 |       align-items: center;
327 |       color: #c0392b;
328 |       opacity: 0;
329 |       transition: .3s;
330 |       cursor: pointer;
331 |   }
332 | 
333 |   .music-info {
334 |       flex: 1;
335 |       padding: 0 10px;
336 |   }
337 | 
338 |   .new-songs li p:first-child {
339 |       margin-bottom: 20px;
340 |   }
341 | 
342 |   .music-singer {
343 |       color: #a5a1a1;
344 |   }
345 | 
346 | 
347 |     /* 推荐MV  */
348 |   .mv-list {
349 |       display: flex;
350 |       justify-content: space-between;
351 |   }
352 | 
353 |   .mv-list li {
354 |       width: 25%;
355 |       padding: 0 10px;
356 |   }
357 | 
358 |   .mv-img-wrap {
359 |       position: relative;
360 |       cursor: pointer;
361 |   }
362 | 
363 |   .mv-img-wrap:hover .play::before {
364 |       opacity: 1;
365 |   }
366 | 
367 |   .mv-img-wrap .play::before {
368 |       content: "\e665"; 
369 |       position: absolute;
370 |       top: 50%;
371 |       left: 50%;
372 |       transform: translate(-50%,-50%);
373 |       width: 35px;
374 |       height: 35px;
375 |       background-color: rgba(255, 255, 255, .8);
376 |       border-radius: 50%;
377 |       display: flex;
378 |       justify-content: center;
379 |       align-items: center;
380 |       color: #c0392b;
381 |       opacity: 0;
382 |       transition: .3s;
383 |       cursor: pointer;
384 |   }
385 | 
386 |   .play-count{
387 |     position: absolute;
388 |     top: 5px;
389 |     right: 5px;
390 |     color: #fff;
391 |     text-shadow: 0 0 2px rgb(0, 0, 0);      
392 |   }
393 | 
394 |   .play-count::before {
395 |       margin-right: 5px;
396 |   }
397 | 
398 |  .mv-info p{
399 |      margin: 5px 0;
400 |  }
401 | 
402 |   .mv-info .author{
403 |       color: #a5a1a1;
404 |       font-size: 12px;
405 |   }
406 | </style>


--------------------------------------------------------------------------------
/src/views/MVs/MVs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mv" v-loading="loading">
  3 |     <div class="filter-wrap">
  4 | 
  5 |       <div class="section-wrap">
  6 |         <span class="section-name">地区：</span>
  7 |         <ul class="section-tabs">
  8 |           <li><span :class="{'active':region=='全部'}" @click="region='全部'">全部</span></li>
  9 |           <li><span :class="{'active':region=='内地'}" @click="region='内地'">内地</span></li>
 10 |           <li><span :class="{'active':region=='港台'}" @click="region='港台'">港台</span></li>
 11 |           <li><span :class="{'active':region=='欧美'}" @click="region='欧美'">欧美</span></li>
 12 |           <li><span :class="{'active':region=='日本'}" @click="region='日本'">日本</span></li>
 13 |           <li><span :class="{'active':region=='韩国'}" @click="region='韩国'">韩国</span></li>
 14 |         </ul>
 15 |       </div>
 16 | 
 17 |       <div class="section-wrap">
 18 |         <span class="section-name">类型：</span>
 19 |         <ul class="section-tabs">
 20 |           <li><span :class="{'active':type=='全部'}" @click="type='全部'">全部</span></li>
 21 |           <li><span :class="{'active':type=='官方版'}" @click="type='官方版'">官方版</span></li>
 22 |           <li><span :class="{'active':type=='原声'}" @click="type='原声'">原声</span></li>
 23 |           <li><span :class="{'active':type=='现场版'}" @click="type='现场版'">现场版</span></li>
 24 |           <li><span :class="{'active':type=='网易出品'}" @click="type='网易出品'">网易出品</span></li>
 25 |         </ul>
 26 |       </div>
 27 | 
 28 |       <div class="section-wrap">
 29 |         <span class="section-name">排序：</span>
 30 |         <ul class="section-tabs">
 31 |           <li><span :class="{'active':order=='上升最快'}" @click="order='上升最快'">上升最快</span></li>
 32 |           <li><span :class="{'active':order=='最热'}" @click="order='最热'">最热</span></li>
 33 |           <li><span :class="{'active':order=='最新'}" @click="order='最新'">最新</span></li>
 34 |         </ul>
 35 |       </div>
 36 | 
 37 |     </div>
 38 | 
 39 |     <div class="mv-wrap">
 40 |       <ul class="mv-list">
 41 |           <li v-for="(item,index) in mvList" :key="index" @click="toMvDetail(item.id)">
 42 |               <div class="mv-img-wrap">
 43 |                   <img v-lazy="item.cover" alt="newMvs">
 44 |                   <p class="iconfont icon-play play"></p>
 45 |                   <p class="play-count iconfont icon-play">{{item.playCount}}</p>
 46 |               </div>
 47 |               <div class="mv-info">
 48 |                   <p class="title" :title="item.name">{{item.name}}</p>
 49 |                   <p class="author">{{item.artistName}}</p>
 50 |               </div>
 51 |           </li>                                          
 52 |       </ul>
 53 | 
 54 |     <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>
 55 |   </div>
 56 | 
 57 |   </div>
 58 | </template>
 59 | 
 60 | <script >
 61 | import { mvListAPI } from '@/utils/api'
 62 | import Pagination from '@/components/Pagination.vue'
 63 | 
 64 | export default {
 65 |   data(){
 66 |     return {
 67 |       region:'全部',
 68 |       type:'全部',
 69 |       order:'上升最快',
 70 |       total:0,
 71 |       page:1,
 72 |       pageSize:12,
 73 |       mvList:[],
 74 |       loading:true
 75 |     }
 76 |   },
 77 |   components: {
 78 |     Pagination
 79 |   },
 80 |   watch:{
 81 |     region(){
 82 |       // console.log(this.region)
 83 |       this.page = 1
 84 |       this.getMvList()
 85 |     },
 86 |     type(){
 87 |       // console.log(this.type)
 88 |       this.page = 1      
 89 |       this.getMvList()      
 90 |     },
 91 |     order(){
 92 |       // console.log(this.order)
 93 |       this.page = 1      
 94 |       this.getMvList()      
 95 |     }
 96 |   },
 97 |   methods:{
 98 |     toMvDetail(id) {
 99 |       this.$router.push(`/mvdetail?id=${id}`)
100 |     },
101 |     handleCurrentChange(page){
102 |       this.page = page
103 |       this.getMvList(true)
104 |     },
105 |     getMvList(changeTotal=false){
106 |       this.loading = true
107 |       let params = {
108 |           area:this.region,
109 |           type:this.type,
110 |           order:this.order,
111 |           limit:this.pageSize,
112 |           offset:(this.page-1)*this.pageSize
113 |       }
114 |       mvListAPI(params).then(res=>{
115 |         console.log(res)
116 |         if(!changeTotal)
117 |           this.total  = res.data.count
118 |         this.mvList = res.data.data
119 |         for(let i=0;i<this.mvList.length;i++){
120 |           if(this.mvList[i].playCount >= 100000)
121 |             this.mvList[i].playCount = parseInt(this.mvList[i].playCount/10000)+'万'
122 |         }
123 | 
124 |       }).then(()=>{
125 |         this.loading = false
126 |       })
127 |     }
128 |   },
129 |   created(){
130 |     this.getMvList()
131 |   }
132 | }
133 | </script>
134 | 
135 | <style scoped>
136 |   ul {
137 |     list-style: none;
138 |   }
139 | 
140 |   .mv {
141 |     max-width: 1300px;
142 |     margin: 0 auto;
143 |     padding: 20px;
144 |   }
145 | 
146 |   .section-wrap {
147 |     display: flex;
148 |     align-items: center;
149 |     margin-bottom: 30px;
150 |     font-size: 14px;
151 |   }
152 |   
153 |   .section-tabs {
154 |     display: flex;
155 |     color: grey;
156 |   }
157 | 
158 |   .section-tabs li:not(:last-of-type) {
159 |     border-right: 1px solid #f2f2f1;
160 |   }
161 | 
162 |   .section-tabs li span {
163 |     margin: 20px;
164 |     padding: 5px 20px;
165 |     cursor: pointer;
166 |     box-sizing: border-box;
167 |   }
168 | 
169 |   .section-tabs .active {
170 |     color: #dd6d60;
171 |     background-color: #fcf6f5;
172 |     border-radius: 20px;
173 |   }
174 | 
175 |   .mv-list {
176 |       display: flex;
177 |       justify-content: flex-start;
178 |       flex-wrap: wrap;
179 |   }
180 | 
181 |   .mv-list li {
182 |       /* width: 250px;
183 |       margin-right: 25px;
184 |       margin-bottom: 30px; */
185 |       width: 23%;
186 |       margin-bottom: 20px;
187 |       margin-right: 20px;
188 |   }
189 | 
190 |   .mv-img-wrap {
191 |       position: relative;
192 |       cursor: pointer;
193 |   }
194 | 
195 |   .mv-img-wrap img{
196 |     width: 100%;
197 |     height: 165px;
198 |     border-radius: 5px;    
199 |   }
200 | 
201 |   .mv-img-wrap:hover .play::before {
202 |       opacity: 1;
203 |   }
204 | 
205 |   .mv-img-wrap .play::before {
206 |       content: "\e665"; 
207 |       position: absolute;
208 |       top: 50%;
209 |       left: 50%;
210 |       transform: translate(-50%,-50%);
211 |       width: 35px;
212 |       height: 35px;
213 |       background-color: rgba(255, 255, 255, .8);
214 |       border-radius: 50%;
215 |       display: flex;
216 |       justify-content: center;
217 |       align-items: center;
218 |       color: #c0392b;
219 |       opacity: 0;
220 |       transition: .3s;
221 |       cursor: pointer;
222 |   }
223 | 
224 |   .play-count{
225 |       position: absolute;
226 |       top: 5px;
227 |       right: 5px;
228 |       color: #fff;
229 |       text-shadow: 0 0 2px rgb(0, 0, 0);      
230 |   }
231 | 
232 |   .play-count::before {
233 |       margin-right: 5px;
234 |   }
235 | 
236 |  .mv-info p{
237 |      margin: 5px 0;
238 |  }
239 | 
240 |  .mv-info p.title {
241 |    overflow: hidden;
242 |    text-overflow: ellipsis;
243 |    white-space: nowrap;
244 |  }
245 | 
246 |   .mv-info .author{
247 |       color: #a5a1a1;
248 |       font-size: 12px;
249 |   }
250 | </style>


--------------------------------------------------------------------------------
/src/views/MvDetail/MvDetail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="mv-detail" v-loading="loading">
  3 |       <div class="mv-wrap">
  4 |           <h4 class="head">MV详情</h4>
  5 |           <div class="video-wrap">
  6 |               <video :src="mvUrl" controls autoplay></video>
  7 |               <!-- <img src="../imgs/1.jpg" alt=""> -->
  8 |           </div>
  9 |           <div class="mv-info">
 10 |               <div class="mv-info-head">
 11 |                   <img :src="avatarUrl" alt="" class="mv-avatar">
 12 |                   <p class="mv-nickname">{{mvInfo.artistName}}</p>
 13 |               </div>
 14 |               <div class="mv-name">{{mvInfo.name}}</div>
 15 |               <div class="mv-other">
 16 |                   <div class="mv-time">发布：{{mvInfo.publishTime}}</div>
 17 |                   <div class="mv-playcount">播放：{{mvInfo.playCount}}次</div>
 18 |               </div>
 19 |               <p class="mv-desc">{{mvInfo.desc}}</p>
 20 |           </div>
 21 |           
 22 |         <div class="mv-content-wrap" v-if="hotComments.length != 0">
 23 |             <h4 class="head">热门评论({{hotComments.length}})</h4>
 24 |                         <ul>
 25 |                             <li v-for="(item,index) in hotComments" :key="index">
 26 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
 27 |                                 <div class="comment-info">
 28 |                                     <div class="comment">
 29 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
 30 |                                         <span class="comment-content">{{item.content}}</span>
 31 |                                     </div>
 32 |                                     <div class="re-comment" v-if="item.beReplied.length != 0">
 33 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
 34 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
 35 |                                     </div>                                    
 36 |                                     <div class="comment-bottom">
 37 |                                         <p class="comment-time">{{item.time}}</p>
 38 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
 39 |                                     </div>
 40 |                                 </div>
 41 |                             </li>
 42 |                         </ul>
 43 |         </div>
 44 | 
 45 |                 <div class="mv-content-wrap" v-loading="loadingComments">
 46 |             <h4 class="head">最新评论({{this.total}})</h4>
 47 |                         <ul>
 48 |                             <li v-for="(item,index) in comments" :key="index">
 49 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
 50 |                                 <div class="comment-info">
 51 |                                     <div class="comment">
 52 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
 53 |                                         <span class="comment-content">{{item.content}}</span>
 54 |                                     </div>
 55 |                                     <div class="re-comment" v-if="item.beReplied.length != 0">
 56 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
 57 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
 58 |                                     </div>                                    
 59 |                                     <div class="comment-bottom">
 60 |                                         <p class="comment-time">{{item.time}}</p>
 61 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
 62 |                                     </div>
 63 |                                 </div>
 64 |                             </li>
 65 |                         </ul>
 66 |                 <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>
 67 |                         
 68 |         </div>          
 69 |       </div>
 70 |       <div class="mv-recommend-wrap">
 71 |           <h4 class="head">相关推荐</h4>
 72 |             <ul class="mv-list">
 73 |                 <li v-for="(item,index) in recommendMvs" :key="index">
 74 |                     <div class="mv-img-wrap"  @click="toMvDetail(item.id)">
 75 |                         <img :src="item.cover" alt="newMvs">
 76 |                         <p class="iconfont icon-play play"></p>
 77 |                         <p class="play-count iconfont icon-play">{{item.playCount}}</p>
 78 |                         <p class="mv-duration">{{item.duration}}</p>                          
 79 |                     </div>
 80 |                     <div class="mv-info">
 81 |                         <p class="title">{{item.name}}</p>
 82 |                         <p class="author">{{item.artistName}}</p>                             
 83 |                     </div>
 84 |                 </li>                                          
 85 |             </ul>
 86 |       </div>
 87 |   </div>
 88 | </template>
 89 | 
 90 | <script>
 91 | import {formatDateFully} from '@/utils/utils.js'
 92 | import { commentsAPI,playMVAPI,simiMVAPI,mvDetailAPI,artistsAPI } from '@/utils/api'
 93 | import Pagination from '@/components/Pagination.vue'
 94 | 
 95 | export default {
 96 |     data(){
 97 |         return{
 98 |             mvId:"",
 99 |             mvUrl:"",
100 |             recommendMvs:[],
101 |             mvInfo:{},
102 |             avatarUrl:"",
103 |             hotComments:[],
104 |             comments:[],
105 |             total:0,
106 |             pageSize:10,
107 |             page:1,
108 |             loading:true,
109 |             loadingComments:false            
110 |         }
111 |     },
112 |     components: {
113 |         Pagination
114 |     },    
115 |     watch:{
116 |         $route(newVal){
117 |             console.log(newVal)
118 |             this.searchMV(newVal.query.id)
119 |         }
120 |     },
121 |     methods:{
122 |         toMvDetail(id){
123 |             this.$router.push(`/mvdetail?id=${id}`)
124 |         },
125 |         handleCurrentChange(page){
126 |             this.page = page
127 |             this.getComments()
128 |         },
129 |         getComments(){
130 |             this.loadingComments = true
131 |             let params = {
132 |                 id:this.$route.query.id,
133 |                 limit:this.pageSize,
134 |                 offset:(this.page-1)*this.pageSize
135 |             }
136 |             commentsAPI(params,'mv').then(res=>{
137 |                 // console.log(res)
138 |                 if(Object.prototype.hasOwnProperty.call(res.data,'hotComments')){
139 |                     this.hotComments = res.data.hotComments
140 |                     for(let i=0;i<this.hotComments.length;i++){
141 |                         this.hotComments[i].time = formatDateFully(new Date(this.hotComments[i].time))
142 |                     }            
143 |                 }
144 | 
145 |                 this.comments = res.data.comments
146 |                 for(let i=0;i<this.comments.length;i++){
147 |                     this.comments[i].time = formatDateFully(new Date(this.comments[i].time))
148 |                 }               
149 | 
150 |                 this.total = this.mvInfo.commentCount - this.hotComments.length
151 |             }).then(()=>{
152 |                 this.loadingComments = false
153 |             })
154 |         },
155 |         searchMV(id){
156 |             this.loading = true
157 |             // 获取mv播放url
158 |             playMVAPI({id}).then(res=>{
159 |                 // console.log(res)
160 |                 this.mvUrl = res.data.data.url
161 |             })
162 | 
163 |             // 获取相关mv推荐
164 |             simiMVAPI({mvid:id}).then(res=>{
165 |                 // console.log(res)
166 |                 this.recommendMvs = res.data.mvs
167 | 
168 |                 for(let i=0;i<this.recommendMvs.length;i++){
169 |                     if(this.recommendMvs[i].playCount >= 100000)
170 |                         this.recommendMvs[i].playCount = parseInt(this.recommendMvs[i].playCount/10000)+'万'
171 |                     var duration = this.recommendMvs[i].duration
172 |                     var min = parseInt(duration / 60000).toString().padStart(2,'0')
173 |                     var second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
174 |                     this.recommendMvs[i].duration = `${min}:${second}`
175 |                 }            
176 |             })        
177 | 
178 |             // 获取MV信息
179 |             mvDetailAPI({mvid:id}).then(res=>{
180 |                 console.log(res)
181 |                 this.mvInfo = res.data.data
182 |                 if(this.mvInfo.playCount >= 100000)
183 |                     this.mvInfo.playCount = parseInt(this.mvInfo.playCount/10000)+'万'
184 | 
185 |                 artistsAPI({id:this.mvInfo.artistId}).then(res=>{
186 |                     // console.log(res)
187 |                     this.avatarUrl = res.data.artist.img1v1Url
188 |                 })
189 |                 
190 |                 // 获取评论信息
191 |                 this.getComments()      
192 |             }).then(()=>{
193 |                 this.loading = false
194 |             })
195 |         }           
196 |     },
197 |     created(){
198 |         console.log(this.$route.query.id)
199 |         let mvId = this.$route.query.id
200 |         this.mvId = mvId
201 |     
202 |         this.searchMV(mvId)
203 |     }
204 | }
205 | </script>
206 | 
207 | <style scoped>
208 | ul {
209 |     margin: 0;
210 |     padding: 0;
211 | }
212 | 
213 | .mv-detail {
214 |     max-width: 1300px;
215 |     margin: 0 auto;
216 |     padding: 20px;
217 |     display: flex;
218 | }
219 | 
220 | .mv-detail >>> .el-loading-spinner {
221 |       top: 20%;
222 |   }
223 | 
224 | .mv-content-wrap >>> .el-loading-spinner {
225 |     top: 50%;
226 | }
227 | 
228 | .head {
229 |     margin-bottom: 20px;
230 | }
231 | 
232 | .mv-content-wrap .head{
233 |     font-size: 25px;
234 |     font-weight: normal;
235 | }
236 | 
237 | .mv-wrap {
238 |     width: 900px;
239 |     margin-right: 30px;
240 | }
241 | 
242 | .mv-recommend-wrap {
243 |     /* flex: 1; */
244 |     width: 500px;
245 | }
246 | 
247 | .video-wrap {
248 |     width: 100%;
249 |     height: 390px;
250 | }
251 | 
252 | .video-wrap video{
253 |     width: 100%;
254 |     height: 100%;
255 |     outline: none;
256 |     object-fit: fill /* 自动填充父元素 */
257 | }
258 | 
259 | .mv-info-head {
260 |     display: flex;
261 |     align-items: center;
262 |     margin: 20px 0;
263 | }
264 | 
265 | .mv-avatar {
266 |     width: 80px;
267 |     height: 80px;
268 |     border-radius: 50%;
269 |     margin-right: 10px;
270 | }
271 | 
272 | .mv-name {
273 |     font-size: 30px;
274 |     color: #000;
275 |     font-weight: bold;
276 | }
277 | 
278 | .mv-other {
279 |     display: flex;
280 |     align-items: center;
281 |     font-size: 14px;
282 |     color: grey;
283 |     margin: 20px 0;
284 | }
285 | 
286 | .mv-time {
287 |     margin-right: 20px;
288 | }
289 | 
290 | .mv-desc {
291 |     font-size: 14px;
292 |     margin-bottom: 20px;
293 | }
294 | 
295 |   .mv-list li {
296 |       display: flex;
297 |       padding: 10px;
298 |       box-sizing: border-box;
299 |   }
300 | 
301 |   .mv-list li:hover{
302 |       background-color: rgb(240, 239, 239);
303 |   }
304 | 
305 |   .mv-img-wrap {
306 |       position: relative;
307 |       cursor: pointer;
308 |       width: 180px;
309 |       height: 100px;
310 |       margin-right: 20px;
311 |   }
312 | 
313 |   .mv-img-wrap img{
314 |     height: 100%;
315 |     border-radius: 5px;    
316 |   }
317 | 
318 |   .mv-img-wrap:hover .play::before {
319 |       opacity: 1;
320 |   }
321 | 
322 |   .mv-img-wrap .play::before {
323 |       content: "\e665"; 
324 |       position: absolute;
325 |       top: 50%;
326 |       left: 50%;
327 |       transform: translate(-50%,-50%);
328 |       width: 35px;
329 |       height: 35px;
330 |       background-color: rgba(255, 255, 255, .8);
331 |       border-radius: 50%;
332 |       display: flex;
333 |       justify-content: center;
334 |       align-items: center;
335 |       color: #c0392b;
336 |       opacity: 0;
337 |       transition: .3s;
338 |       cursor: pointer;
339 |   }
340 | 
341 |   .play-count{
342 |       position: absolute;
343 |       top: 5px;
344 |       right: 5px;
345 |       color: #fff;
346 |       font-size: 12px;
347 |       text-shadow: 1px 1px #000;
348 |   }
349 | 
350 |   .play-count::before {
351 |       margin-right: 5px;
352 |   }
353 | 
354 |   .mv-info {
355 |       overflow: hidden;
356 |   }
357 | 
358 |  .mv-info p.title {
359 |    overflow: hidden;
360 |    text-overflow: ellipsis;
361 |    white-space: nowrap;
362 |  }
363 | 
364 |   .mv-info .author{
365 |     color: #a5a1a1;
366 |     font-size: 12px;
367 |   }
368 | 
369 |  .mv-content-wrap ul li {
370 |     display: flex;
371 |     margin: 10px 0 30px 0;
372 |   }
373 | 
374 |   .comment-avatar {
375 |     width: 50px;
376 |     height: 50px;
377 |     border-radius: 50%;
378 |   }
379 | 
380 |   .comment-info {
381 |     flex: 1;
382 |     font-size: 14px;
383 |     margin-left: 10px;
384 |   }
385 | 
386 |   .comment {
387 |     margin-bottom: 10px;
388 |   }
389 | 
390 |   .comment-user {
391 |     color: #517eaf;
392 |     margin-right: 10px;
393 |     cursor: pointer;
394 |   }
395 | 
396 |   .comment-content {
397 |     display: inline;
398 |   }
399 | 
400 |   .comment-time {
401 |     color: grey;
402 |     margin-right: 20px;
403 |     margin-top: 5px;
404 |   }
405 | 
406 |   .comment-bottom {
407 |     display: flex;
408 |     align-items: center;
409 |     font-size: 14px!important;
410 |   }
411 | 
412 |   .re-comment {
413 |     background-color: #f3f1f3;
414 |     padding: 5px 10px;
415 |     color: rgba(0,0,0,.6);
416 |     margin-bottom: 5px;
417 |   }
418 | 
419 |   .mv-duration {
420 |       position: absolute;
421 |       bottom: 5px;
422 |       right: 5px;
423 |       color: #fff;
424 |       font-size: 12px;
425 |       text-shadow: 1px 1px #000;
426 |   }  
427 | </style>


--------------------------------------------------------------------------------
/src/views/NewSongs/NewSongs.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="new-songs" v-loading="loading">
  3 |     <div class="songs-table">
  4 |       <el-table
  5 |           :data="tableData"
  6 |           stripe
  7 |           style="width: 100%"
  8 |           @row-dblclick="play">
  9 | 
 10 |           <el-table-column type="index" width="50"></el-table-column>
 11 | 
 12 |           <el-table-column width="100">
 13 |             <template slot-scope="scope">
 14 |               <div class="img-wrap">
 15 |                 <img v-lazy="scope.row.imgUrl" alt="">
 16 |                 <p class="iconfont icon-play"  @click="play(scope.row)"></p>                                
 17 |               </div>                                
 18 |             </template>
 19 | 
 20 |           </el-table-column>     
 21 | 
 22 |           <el-table-column prop="songName" label="音乐标题" width=""></el-table-column>
 23 | 
 24 |                             <el-table-column label="歌手" width="">
 25 |                                 <template slot-scope="scope">
 26 |                                     <div v-for="(x,i) in scope.row.artistInfo" :key="i" style="cursor:pointer;color:#2980b9;display:inline-block" @click="toArtist(x.id)">{{x.name}}<span style="color:#606266;margin:0 5px" v-show="scope.row.artistInfo.length != 1 && i!=scope.row.artistInfo.length-1">/</span></div>                                    
 27 |                                 </template>                                  
 28 |                             </el-table-column>
 29 | 
 30 |           <el-table-column prop="album" label="专辑" width="">
 31 |               <template slot-scope="scope">
 32 |                   <span style="cursor:pointer;color:#2980b9;" @click="toAlbum(scope.row.albumId)">{{scope.row.album}}</span>
 33 |               </template>                                  
 34 |           </el-table-column>          
 35 | 
 36 |           <el-table-column prop="duration" label="时长" width="100"></el-table-column>                            
 37 |       </el-table>   
 38 |                                               
 39 |     </div>    
 40 |   </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import { getNewSongsAPI,playMusicAPI } from '@/utils/api'
 45 | 
 46 | export default {
 47 |   data(){
 48 |     return {
 49 |       tableData :[],
 50 |       songUrl:"",
 51 |       loading:true
 52 |     }
 53 |   },
 54 |   created(){
 55 |     this.onLoad()
 56 |   },
 57 |   computed:{
 58 |     musicQueue(){
 59 |       return this.$store.state.musicQueue
 60 |     }
 61 |   },
 62 |   methods: {
 63 |     onLoad(){
 64 |       let params = {
 65 |         type :0
 66 |       }
 67 |       getNewSongsAPI(params).then(res=>{
 68 |         // console.log(res)
 69 |         let resultList = res.data.data.slice(0,50)
 70 |         let songsList = []
 71 |         for (const item of resultList) {
 72 |             let duration = item.duration
 73 |             let min = parseInt(duration / 60000).toString().padStart(2,'0')
 74 |             let second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
 75 |             duration = `${min}:${second}`
 76 |             let song = {
 77 |                 id:item.id,
 78 |                 songName:item.name,
 79 |                 // singer:item.artists[0].name,
 80 |                 // artistId:item.artists[0].id,
 81 |                 artistInfo:item.artists,
 82 |                 album:item.album.name,
 83 |                 albumId:item.album.id,
 84 |                 imgUrl:item.album.picUrl,
 85 |                 duration,
 86 |                 mp3Url:item.mp3Url
 87 |             }
 88 |             songsList.push(song)
 89 |         }
 90 |         this.tableData = songsList    
 91 |       }).then(()=>{
 92 |         this.loading = false
 93 |       })
 94 |     },
 95 |     toArtist(id){
 96 |         this.$router.push(`/artist?artistId=${id}`)
 97 |     },
 98 |     toAlbum(id){
 99 |         this.$router.push(`/album?id=${id}`)
100 |     },                
101 |     play(row){
102 |       console.log(row)
103 |       let id = row.id
104 | 
105 |       playMusicAPI({id}).then(res=>{
106 |         if(res.data.data[0].url){
107 |           // console.log(res)
108 |           this.songUrl = res.data.data[0].url
109 |           // this.$parent.$parent.musicUrl = this.songUrl
110 |           // // 传入歌曲信息
111 |           // this.$parent.$parent.musicInfo = {
112 |           //   imgUrl:row.imgUrl,
113 |           //   singer:row.singer,
114 |           //   songName:row.songName
115 |           // }
116 | 
117 |           let musicInfo = {
118 |             imgUrl:row.imgUrl,
119 |             artistInfo:row.artistInfo,
120 |             // singer:row.singer,
121 |             songName:row.songName,
122 |             artistId:row.artistId,
123 |             id:row.id,
124 |             duration:row.duration            
125 |           }
126 | 
127 |           this.$store.commit("changeMusicUrl",this.songUrl)
128 |           this.$store.commit("changeMusicInfo",musicInfo)
129 |           this.$store.commit("changeMusicStatus",false)
130 |           this.$store.commit("changeMusicQueue",musicInfo)
131 |           let ids = []
132 |           for (const item of this.musicQueue) {
133 |               ids.push(item.id)
134 |           }
135 |           this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))                    
136 | 
137 |         }else{
138 |             this.$message({
139 |               showClose: true,
140 |               message: '对不起，歌曲暂时无法播放。',
141 |               type: 'error'
142 |             });
143 |         }
144 |       })
145 |     },
146 |   }
147 | }
148 | </script>
149 | 
150 | <style scoped>
151 |   ul {
152 |     list-style: none;
153 |   }
154 | 
155 |   .new-songs {
156 |       max-width: 1300px;
157 |       margin: 0 auto;
158 |       padding: 20px;
159 |   }
160 | 
161 |   .new-songs >>> .el-loading-spinner {
162 |       top: 50%;
163 |   }
164 | 
165 |   .el-table td, .el-table th.is-leaf {
166 |     border-bottom: none;
167 |   }
168 | 
169 |   .el-table::before {
170 |     opacity: 0;
171 |   }
172 | 
173 |   .songs-table {
174 |     width: 100%;
175 |   }
176 | 
177 |   .img-wrap {
178 |     width: 60px;
179 |     height: 60px;
180 |     position: relative;
181 |   }
182 | 
183 |   .img-wrap img {
184 |     width: 100%;
185 |     height: 100%;
186 |     border-radius: 10px;
187 |   }
188 | 
189 |   .img-wrap p::before {
190 |     position: absolute;
191 |     top: 50%;
192 |     left: 50%;
193 |     transform: translate(-50%,-50%);
194 |     width: 30px;
195 |     height: 30px;
196 |     background-color: rgba(255, 255, 255, .8);
197 |     border-radius: 50%;
198 |     display: flex;
199 |     justify-content: center;
200 |     align-items: center;
201 |     color: #c0392b;
202 |     font-size: 14px;
203 |     cursor: pointer;
204 |   }
205 | </style>


--------------------------------------------------------------------------------
/src/views/Playlist/Playlist.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="playlist"  v-loading="loading">
  3 |         <div class="playlist-top-card">
  4 |             <div class="playlist-img-wrap">
  5 |                 <img :src="playlistInfo.coverImgUrl" alt="">
  6 |             </div>
  7 |             <div class="playlist-info">
  8 |                 <div class="playlist-name">
  9 |                     <div class="tag1">歌单</div>{{playlistInfo.name}}
 10 |                 </div>
 11 |                 <div class="playlist-user-info">
 12 |                     <div class="playlist-user-avatar">
 13 |                         <img :src="playlistUserAvatar" alt="">
 14 |                     </div>
 15 |                     <div class="playlist-user-name">{{playlistUserNickname}}</div>
 16 |                     <div class="playlist-create-time">
 17 |                         <span>{{playlistInfo.updateTime}}</span> 创建
 18 |                         <span>共{{trackIds.length}}首</span>
 19 |                     </div>
 20 |                 </div>
 21 |                 <div class="playAllBtn iconfont icon-play" @click="playAll"> 播放全部</div>
 22 |                 <div class="playlist-tags">
 23 |                     <span>标签：</span>
 24 |                     <span v-for="(item,index) in playlistInfo.tags" :key="index" class="tags">{{item}}</span>
 25 |                 </div>
 26 |                 <div class="playlist-desc">
 27 |                     <span>简介：</span>
 28 |                     <span :title="playlistInfo.description">{{playlistInfo.description}}</span>                    
 29 |                 </div>
 30 |             </div>
 31 |         </div>
 32 | 
 33 |         <div class="playlist-tabs-wrap">
 34 |             <el-tabs v-model="activeName">
 35 |                 <el-tab-pane label="歌曲列表" name="first">
 36 |                     <div class="songs-table">
 37 |                         <el-table
 38 |                             :data="tableData"
 39 |                             stripe
 40 |                             @row-dblclick="play"
 41 |                             v-el-table-infinite-scroll="loadMore"
 42 |                             infinite-scroll-delay=500
 43 |                             infinite-scroll-disabled="noMore">
 44 |                             <!-- v-infinite-scroll="loadMore"
 45 |                             infinite-scroll-disabled="noMore"
 46 |                             infinite-scroll-delay=1000> -->
 47 | 
 48 |                             <el-table-column type="index" width="50"></el-table-column>
 49 | 
 50 |                             <el-table-column width="100">
 51 |                                 <template slot-scope="scope">
 52 |                                 <div class="img-wrap">
 53 |                                     <img v-lazy="scope.row.al.picUrl" alt="">
 54 |                                     <p class="iconfont icon-play"  @click="play(scope.row)"></p>                                
 55 |                                 </div>                                
 56 |                                 </template>
 57 |                             </el-table-column>     
 58 | 
 59 |                             <el-table-column prop="name" label="音乐标题" width=""></el-table-column>
 60 | 
 61 |                             <el-table-column prop="artistInfo" label="歌手" width="">
 62 |                                 <template slot-scope="scope">
 63 |                                     <div v-for="(singer,i) in scope.row.ar" :key="i" style="cursor:pointer;color:#2980b9;display:inline-block" @click="toArtist(singer.id)">{{singer.name}}<span style="color:#606266;margin:0 5px" v-show="scope.row.ar.length != 1 && i!=scope.row.ar.length-1">/</span></div>
 64 |                                 </template>                                                                 
 65 |                             </el-table-column>                            
 66 | 
 67 |                             <el-table-column prop="al.name" label="专辑" >
 68 |                                 <template slot-scope="scope">
 69 |                                     <span style="cursor:pointer;color:#2980b9;" @click="toAlbum(scope.row.al.id)">{{scope.row.al.name}}</span>
 70 |                                     <span class="plus" title="添加至歌单" @click="addToQueue(scope.row,$event)" style="top:20px">+</span>
 71 |                                 </template>                                
 72 |                             </el-table-column>
 73 | 
 74 |                             <el-table-column prop="dt" label="时长" width="100"></el-table-column>                            
 75 |                         </el-table>
 76 |                     </div>                    
 77 |                 </el-tab-pane>
 78 |                 <el-tab-pane :label="`评论(${playlistInfo.commentCount})`" name="second">
 79 | 
 80 |                     <div class="comment-wrap" v-if="hotComments.length!=0">
 81 |                         <h4 class="comment-title">最热评论({{hotComments.length}})</h4>
 82 |                         <ul>
 83 |                             <li v-for="(item,index) in hotComments" :key="index">
 84 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
 85 |                                 <div class="comment-info">
 86 |                                     <div class="comment">
 87 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
 88 |                                         <span class="comment-content">{{item.content}}</span>
 89 |                                     </div>
 90 |                                     <div class="re-comment" v-if="item.beReplied.length!=0">
 91 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
 92 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
 93 |                                     </div>
 94 |                                     <div class="comment-bottom">
 95 |                                         <p class="comment-time">{{item.time}}</p>
 96 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
 97 |                                     </div>
 98 |                                 </div>
 99 |                             </li>
100 |                         </ul>
101 |                     </div>
102 | 
103 |                     <div class="comment-wrap">
104 |                         <h4 class="comment-title">最新评论({{playlistInfo.commentCount-hotComments.length}})</h4>
105 |                         <ul>
106 |                             <li v-for="(item,index) in comments" :key="index">
107 |                                 <img v-lazy="item.user.avatarUrl" alt="" class="comment-avatar">
108 |                                 <div class="comment-info">
109 |                                     <div class="comment">
110 |                                         <span class="comment-user">{{item.user.nickname}}:</span>
111 |                                         <span class="comment-content">{{item.content}}</span>
112 |                                     </div>
113 |                                     <div class="re-comment" v-if="item.beReplied.length!=0">
114 |                                         <span class="comment-user">@{{item.beReplied[0].user.nickname}}:</span>
115 |                                         <span class="comment-content">{{item.beReplied[0].content}}</span>
116 |                                     </div>                                    
117 |                                     <div class="comment-bottom">
118 |                                         <p class="comment-time">{{item.time}}</p>
119 |                                         <span class="comment-time iconfont icon-dianzan">{{item.likedCount}}</span>
120 |                                     </div>
121 | 
122 |                                 </div>
123 |                             </li>
124 |                         </ul>
125 |                             <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>                              
126 |                     </div>
127 | 
128 | 
129 |                 </el-tab-pane>
130 |             </el-tabs>     
131 |         </div>
132 |         <div class="add-ball iconfont icon-yinfu" v-show="showAddBall" ref="addBall"></div>     
133 |     </div>
134 | </template>
135 | 
136 | <script>
137 | import {formatDate,formatDateFully} from '../../utils/utils'
138 | import elTableInfiniteScroll from 'el-table-infinite-scroll'
139 | import { playlistDetailAPI,songInfoAPI,playMusicAPI,commentsAPI } from '@/utils/api'
140 | import Pagination from '@/components/Pagination.vue'
141 | 
142 | export default {
143 |     data(){
144 |         return {
145 |             activeName:'first',
146 |             playlistInfo:{},
147 |             playlistUserAvatar:"",
148 |             playlistUserNickname:"",
149 |             trackIds:[],
150 |             tableData:[],
151 |             comments:[],
152 |             hotComments:[],
153 |             total:0,
154 |             pageSize:10,
155 |             page:1,
156 |             playlistId:"",
157 |             loading:true,
158 |             loadBegin:0,
159 |             allData:[],
160 |             showAddBall:false            
161 |         }
162 |     },
163 |     components: {
164 |         Pagination
165 |     },
166 |     directives:{
167 |         'el-table-infinite-scroll':elTableInfiniteScroll
168 |     },
169 |     created(){
170 |         console.log(this.$route.query.id)
171 |         let playlistId = this.$route.query.id
172 |         this.playlistId = playlistId
173 | 
174 |         this.getTableData()
175 |         
176 |         setTimeout(() => {
177 |             this.loadAll()
178 |         }, 1000);
179 |     },
180 |     computed:{
181 |         noMore(){
182 |             return this.tableData.length >= this.trackIds.length
183 |         },
184 |         nowIndex(){
185 |             return this.$store.state.nowIndex
186 |         },
187 |         musicQueue(){
188 |             return this.$store.state.musicQueue
189 |         },
190 |         queuePos(){
191 |             return this.$store.state.queuePos
192 |         }        
193 |     },
194 |     methods:{
195 |         toArtist(id){
196 |             this.$router.push(`/artist?artistId=${id}`)
197 |         },
198 |         toAlbum(id){
199 |             this.$router.push(`/album?id=${id}`)
200 |         },                     
201 |         handleCurrentChange(page){
202 |             this.page = page
203 |             this.getComments()
204 |         },
205 |         loadMore(){
206 |             console.log('滚动加载')
207 |             this.loading = true
208 |             this.loadBegin += 20
209 |             this.getTableData()
210 |         },
211 |         loadAll(){
212 |             console.log('loadAll')
213 |             let ids = []
214 |             for(let item of this.trackIds){
215 |                 ids.push(item.id)
216 |             }
217 |             let idsStr1 = ids.join(",")
218 |             this.getTracks(idsStr1,true)
219 |         },
220 |         addToQueue(row,e){
221 |             // console.log(row)
222 |             let obj = {
223 |                 id:row.id,
224 |                 imgUrl:row.al.picUrl,
225 |                 duration:row.dt,
226 |                 artistInfo:row.ar,
227 |                 // singer:row.ar[0].name,
228 |                 // artistId:row.ar[0].id,
229 |                 songName:row.name
230 |             }
231 | 
232 |             let ids = []
233 |             for (const item of this.musicQueue) {
234 |                 ids.push(item.id)
235 |             }
236 |             if(ids.indexOf(obj.id) == -1){
237 |                 this.beginAnimation(e.x,e.y)
238 | 
239 |                 setTimeout(() => {
240 |                     this.$store.commit('changeQueueStyle','add')      
241 |                     this.$store.commit('changeMusicQueue',obj)  
242 |                 }, 500);
243 |          
244 | 
245 |                 setTimeout(() => {
246 |                     this.$store.commit('changeQueueStyle','normal')                   
247 |                 }, 1000);
248 |             }else{
249 |                 this.$message({
250 |                     type:'warning',
251 |                     message:"已存在播放列表哦",
252 |                     showClose:true
253 |                 })
254 |             }            
255 |         },
256 |         beginAnimation(x,y){
257 |             this.showAddBall = true
258 |             let endX = this.queuePos.left
259 |             let endY = this.queuePos.top
260 |             console.log('起始位置 x:'+x+' y:'+y)
261 |             console.log('终点位置 x:'+endX+' y:'+endY)
262 | 
263 |             let el = document.querySelector(".add-ball")
264 |             el.style.left = x+'px'
265 |             el.style.top = y+'px'
266 |             
267 |             setTimeout(() => {
268 |                 el.style.left = endX+'px'
269 |                 el.style.top = endY+'px'
270 |             }, 0);
271 | 
272 |             setTimeout(() => {
273 |                 this.showAddBall = false
274 |             }, 500);
275 |         },                
276 |         getTableData(){
277 |             playlistDetailAPI({id:this.playlistId}).then(res=>{
278 |                 // console.log(res)
279 |                 this.playlistInfo = res.data.playlist
280 |                 this.playlistUserAvatar = res.data.playlist.creator.avatarUrl
281 |                 this.playlistUserNickname = res.data.playlist.creator.nickname
282 |                 this.trackIds = res.data.playlist.trackIds
283 |                 this.playlistInfo.updateTime = formatDate(new Date(this.playlistInfo.updateTime))
284 | 
285 |                 let idsArray = []
286 |                 for(let item of this.trackIds){
287 |                     idsArray.push(item.id)
288 |                 }
289 |                 if(this.loadBegin+20 >= idsArray.length)
290 |                     idsArray = idsArray.slice(this.loadBegin)
291 |                 else
292 |                     idsArray = idsArray.slice(this.loadBegin,this.loadBegin+20)//歌单歌曲的数量
293 |                 let idsStr = idsArray.join(",")
294 |                 
295 |                 // 这一段bug
296 |                 Promise.all([this.getTracks(idsStr,false),this.getComments(true)]).then(()=>{
297 |                     console.log('1111')
298 |                 })
299 | 
300 |             }).then(()=>{
301 |                 this.loading = false
302 |             })
303 |         },                
304 |         getTracks(trackId,all=false){
305 |             songInfoAPI({ids:trackId}).then(res=>{
306 |                 console.log(res)
307 |                 let pushList = []
308 |                 for(let item of res.data.songs){
309 |                     let duration = item.dt
310 |                     let min = parseInt(duration / 60000).toString().padStart(2,'0')
311 |                     let second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
312 |                     item.dt = `${min}:${second}`
313 | 
314 |                     pushList.push(item)
315 |                 }
316 |                 // console.log(pushList)
317 | 
318 | 
319 |                 if(all){
320 |                     this.allData = this.allData.concat(pushList)
321 |                     console.log('loading all.......')
322 |                 }else{
323 |                     this.tableData = this.tableData.concat(pushList)
324 |                     console.log('loading a little')
325 |                 }
326 | 
327 |             })
328 |         },
329 |         play(row){
330 |             console.log(row)
331 |             let id = row.id
332 |             playMusicAPI({id}).then(res=>{
333 |                 if(res.data.data[0].url){
334 |                 this.songUrl = res.data.data[0].url
335 |                 
336 |                 let musicInfo = {
337 |                     imgUrl:row.al.picUrl,
338 | 
339 |                     artistInfo:row.ar,
340 |                     songName:row.name,
341 |                     id:row.id,
342 |                     duration:row.dt              
343 |                 }
344 | 
345 |                 this.$store.commit("changeMusicUrl",this.songUrl)
346 |                 this.$store.commit("changeMusicInfo",musicInfo)
347 |                 this.$store.commit("changeMusicStatus",false)
348 |                 this.$store.commit("changeMusicQueue",musicInfo)
349 | 
350 |                 let ids = []
351 |                 for (const item of this.musicQueue) {
352 |                     ids.push(item.id)
353 |                 }
354 |                 this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))
355 | 
356 |                 }else{
357 |                     this.$message({
358 |                     showClose: true,
359 |                     message: '对不起，歌曲暂时无法播放。',
360 |                     type: 'error'
361 |                     });
362 |                 }
363 |             })
364 |         },        
365 |         getComments(isFirst=false){
366 |             this.loading = true
367 |             let params = {
368 |                 id:this.playlistId,
369 |                 limit:this.pageSize,
370 |                 offset:(this.page-1)*this.pageSize                
371 |             }
372 |             commentsAPI(params,'playlist').then(res=>{
373 |                 console.log(res)
374 | 
375 |                 for(let item of res.data.comments){
376 |                     item.time = formatDateFully(new Date(item.time))
377 |                 }
378 |                 
379 |                 if(isFirst){
380 |                     // alert('this is first')
381 |                     if(Object.prototype.hasOwnProperty.call(res.data,'hotComments')){
382 |                         for(let item of res.data.hotComments){
383 |                             item.time = formatDateFully(new Date(item.time))
384 |                         }
385 |                         this.hotComments = res.data.hotComments
386 |                     }              
387 |                 }
388 | 
389 |                 this.total = this.playlistInfo.commentCount - this.hotComments.length    
390 |                 this.comments = res.data.comments
391 |             })
392 | 
393 |             setTimeout(() => {
394 |                 this.loading = false
395 |             }, 500);
396 |         },
397 |         playAll(){
398 |             let allSongs = this.allData
399 |             this.$store.commit('clearMusicQueue')
400 |             for (const item of allSongs) {
401 |                 let obj = {
402 |                     duration:item.dt,
403 |                     id:item.id,
404 |                     imgUrl:item.al.picUrl,
405 |                     artistInfo:item.ar,
406 |                     // singer:item.ar[0].name,
407 |                     songName:item.name
408 |                 }
409 |                 this.$store.commit('changeMusicQueue',obj)
410 |             }
411 |             // 若第一首歌无版权无法播放，会出现bug，自动播放也是
412 |             this.$store.commit('changeNowIndex',0)
413 |             this.play(allSongs[0])
414 |         }
415 |     },  
416 | }
417 | </script>
418 | 
419 | <style scoped>
420 |     @import '../../assets/common/tab.css';
421 | 
422 |     .add-ball {
423 |         position: fixed;
424 |         color: rgb(236, 65, 65);
425 |         transition: top .5s ease-in,left .5s linear;
426 |     }
427 | 
428 |     ul {
429 |         list-style: none;
430 |     }
431 | 
432 |     .plus {
433 |         padding: 10px;
434 |         border-radius: 50%;
435 |         margin-left: 10px;
436 |         font-size: 25px;
437 |         position: absolute;
438 |         left: -80px;
439 |         top: 0;
440 |         font-weight: bold;
441 |         cursor: pointer;
442 |         display: none;
443 |     }
444 | 
445 |     .songs-table .el-table__row:hover .plus{
446 |         display: block;
447 |     }
448 | 
449 |     .playlist {
450 |       max-width: 1300px;
451 |       margin: 0 auto;
452 |       padding: 20px;        
453 |     }
454 | 
455 |     .playlist-top-card {
456 |         display: flex;
457 |         /* height: 300px; */
458 |     }
459 | 
460 |     .playlist-img-wrap {
461 |         width: 200px;
462 |         height: 200px;
463 |     }
464 | 
465 |     .playlist-img-wrap img {
466 |         width: 100%;
467 |         height: 100%;
468 |     }
469 | 
470 |     .playlist-info {
471 |         /* font-size: 16px; */
472 |         padding: 0 20px;
473 |         flex: 1;
474 |     }
475 | 
476 |     .playlist-info .tag1 {
477 |         color: rgb(208, 53, 53);
478 |         border: 1px solid rgb(208, 53, 53);
479 |         display: inline-block;
480 |         font-size: 20px;
481 |         margin-right: 10px;
482 |         border-radius: 5px;
483 |         padding: 0px 7px;
484 |         cursor: default;
485 |     }
486 | 
487 |     .playlist-name {
488 |         font-size: 25px;
489 |         font-weight: 600;
490 |         display: flex;
491 |         align-items: center;
492 |     }
493 | 
494 |     .playlist-user-info {
495 |         display: flex;
496 |         align-items: center;
497 |         font-size: 14px;
498 |     }
499 | 
500 |     .playlist-user-info img {
501 |         margin: 10px 0;
502 |     }
503 | 
504 |     .playlist-user-avatar img {
505 |         height: 30px;
506 |         width: 30px;
507 |         border-radius: 50%;
508 |     }
509 | 
510 |     .playlist-user-name {
511 |         margin: 0 10px;
512 |     }
513 | 
514 |     .playAllBtn {
515 |         display: inline-block;
516 |         margin-right: 10px;
517 |         border-radius: 20px;
518 |         background: #d03535;
519 |         padding: 5px 15px;
520 |         color: #fff;
521 |         cursor: pointer;
522 |     }
523 | 
524 |     .playlist-tags {
525 |         margin: 10px 0;
526 |     }
527 | 
528 |     .playlist-desc {
529 |         overflow: hidden;
530 |         text-overflow: ellipsis;
531 |         display: -webkit-box;
532 |         -webkit-box-orient: vertical;
533 |         -webkit-line-clamp: 2;
534 |     }
535 | 
536 |     .playlist-desc span:nth-of-type(2){
537 |         font-size: 14px;
538 |     }
539 | 
540 |     .playlist-tags .tags {
541 |         font-size: 14px;
542 |     }
543 | 
544 |     .playlist-tags .tags:not(:last-of-type)::after {
545 |         content: '/';
546 |         margin: 0 4px;
547 |     }
548 | 
549 |     .playlist-tabs-wrap {
550 |         margin-top: 20px;
551 |     }
552 | 
553 |   .el-table td, .el-table th.is-leaf {
554 |     border-bottom: none;
555 |   }
556 | 
557 |   .el-table::before {
558 |     opacity: 0;
559 |   }
560 | 
561 |   .songs-table {
562 |     width: 100%;
563 |   }
564 | 
565 |     /* 设置滚动条样式 */
566 |     /* 滚动条整体样式 */
567 |     .songs-table>>>::-webkit-scrollbar{
568 |         width: 5px;
569 |         height: 1px;
570 |     }
571 |     /* 滚动条里面的小方块 */
572 |     .songs-table>>>::-webkit-scrollbar-thumb{
573 |         border-radius: 4px;
574 |         box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
575 |         background: #f2f2f2;
576 |     }
577 |     /* 滚动条里面的轨道 选择不显示 */
578 |     .songs-table>>>::-webkit-scrollbar-track{
579 |         box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
580 |         border-radius: 4px;
581 |         background: #fff;
582 |     }
583 | 
584 |   .img-wrap {
585 |     width: 60px;
586 |     height: 60px;
587 |     position: relative;
588 |   }
589 | 
590 |   .img-wrap img {
591 |     width: 100%;
592 |     height: 100%;
593 |     border-radius: 10px;
594 |   }
595 | 
596 |   .img-wrap p::before {
597 |     position: absolute;
598 |     top: 50%;
599 |     left: 50%;
600 |     transform: translate(-50%,-50%);
601 |     width: 30px;
602 |     height: 30px;
603 |     background-color: rgba(255, 255, 255, .8);
604 |     border-radius: 50%;
605 |     display: flex;
606 |     justify-content: center;
607 |     align-items: center;
608 |     color: #c0392b;
609 |     font-size: 14px;
610 |     cursor: pointer;
611 |   }
612 |   
613 |   .comment-title {
614 |     margin-bottom: 20px;
615 |   }
616 | 
617 |   .comment-wrap ul li {
618 |     display: flex;
619 |     margin: 10px 0 30px 0;
620 |   }
621 | 
622 |   .comment-avatar {
623 |     width: 50px;
624 |     height: 50px;
625 |     border-radius: 50%;
626 |   }
627 | 
628 |   .comment-info {
629 |     flex: 1;
630 |     font-size: 14px;
631 |     margin-left: 10px;
632 |   }
633 | 
634 |   .comment {
635 |     margin-bottom: 10px;
636 |   }
637 | 
638 |   .comment-user {
639 |     color: #517eaf;
640 |     margin-right: 10px;
641 |     cursor: pointer;
642 |   }
643 | 
644 |   .comment-content {
645 |     display: inline;
646 |   }
647 | 
648 |   .comment-time {
649 |     color: grey;
650 |     margin-right: 20px;
651 |     margin-top: 5px;
652 |   }
653 | 
654 |   .comment-bottom {
655 |     display: flex;
656 |     align-items: center;
657 |     font-size: 14px!important;
658 |   }
659 | 
660 |   .re-comment {
661 |     background-color: #f3f1f3;
662 |     padding: 5px 10px;
663 |     color: rgba(0,0,0,.6);
664 |     margin-bottom: 5px;
665 |   }
666 | </style>


--------------------------------------------------------------------------------
/src/views/Recommend/Recommend.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="recommend" v-loading="loading">
  3 |     <div class="top-card-wrap">
  4 |       <img :src="highQuality.coverImgUrl" class="bg-blur" alt="bg-blur">
  5 |       <div class="top-card">
  6 |         <div class="img-wrap">
  7 |           <img :src="highQuality.coverImgUrl" alt="img">
  8 |         </div>
  9 |         <div class="card-content">
 10 |           <div class="card-tag">精品歌单</div>
 11 |           <div class="card-title">{{highQuality.name}}</div>
 12 |           <div class="card-info">{{highQuality.description}}</div>
 13 |         </div>
 14 |       </div>
 15 |     </div>
 16 |     <div class="tab-container">
 17 |       <div class="tab-bar">
 18 |         <ul>
 19 |           <li :class="item == tabActive?'tab-item active':'tab-item'" v-for="(item,index) in tabItems" :key="index" @click="changeActive(item)">{{item}}</li>
 20 |         </ul>
 21 |       </div>
 22 |       <div class="tab-content">
 23 |         <div class="songs-wrap">
 24 |             <div class="list">
 25 |                 <ul>
 26 |                     <li class="iconfont icon-play" v-for="(item,index) in songLists" :key="index" @click="toPlaylistDetail(item.id)" >
 27 |                         <p class="first-p">播放量 : {{item.playCount}}</p>
 28 |                         <img v-lazy="item.coverImgUrl" alt="songLists">
 29 |                         <p class="last-p">{{item.name}}</p>
 30 |                     </li>                                                                                                                    
 31 |                 </ul>
 32 |             </div>
 33 |         </div>        
 34 |       </div>
 35 |         <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>
 36 |     </div>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import { highQualityAPI,songListAPI } from '@/utils/api'
 42 | import Pagination from '@/components/Pagination.vue'
 43 | 
 44 | export default {
 45 |   data(){
 46 |     return{
 47 |       highQuality:[],
 48 |       songLists:[],
 49 |       tabActive:'全部',
 50 |       tabItems:['全部','欧美','华语','流行','说唱','摇滚','民谣','电子','轻音乐','影视原声','ACG','怀旧'],
 51 |       total:0,
 52 |       page:1,
 53 |       pageSize: 10,
 54 |       loading:true
 55 |     }
 56 |   },
 57 |   components: {
 58 |     Pagination
 59 |   },
 60 |   methods:{
 61 |     toPlaylistDetail(id){
 62 |         this.$router.push(`/playlist?id=${id}`)
 63 |     },    
 64 |     changeActive(item){
 65 |       this.tabActive = item
 66 |       this.page = 1
 67 |       this.getHighQuality(item)
 68 |       this.getSongLists(item) /* 不调用函数 也可以使用watch监听实现 */
 69 |     },
 70 |     getHighQuality(cat='全部'){
 71 |         // 精品歌单
 72 |         let params = {
 73 |           limit : 1,
 74 |           cat
 75 |         }
 76 |         highQualityAPI(params).then(res=>{
 77 |           // console.log(res)
 78 |           this.highQuality = res.data.playlists[0]
 79 |         })
 80 |     },
 81 |     getSongLists(cat="全部"){
 82 |       this.loading = true
 83 |       // 歌单列表
 84 |       let params = {
 85 |         limit:10,
 86 |         offset:(this.page-1)*10,
 87 |         cat
 88 |       }
 89 |       songListAPI(params).then(res=>{
 90 |         // console.log(res)
 91 |         this.songLists = res.data.playlists
 92 |         this.total = res.data.total /* 改变总页数 */
 93 |         for(let i=0;i<this.songLists.length;i++){
 94 |           if(this.songLists[i].playCount >= 100000)
 95 |             this.songLists[i].playCount = parseInt(this.songLists[i].playCount/10000)+'万'
 96 |         }     
 97 |       }).then(()=>{
 98 |         this.loading = false
 99 |       })
100 |     },
101 |     handleCurrentChange(page){
102 |       // console.log(page)
103 |       this.page = page
104 |       this.getSongLists(this.tabActive)
105 |     }
106 |   },
107 |   created(){
108 |     this.getHighQuality()
109 |     this.getSongLists()      
110 |   }
111 | }
112 | </script>
113 | 
114 | <style scoped>
115 |   ul {
116 |     list-style: none;
117 |   }
118 | 
119 |   .recommend {
120 |       max-width: 1300px;
121 |       margin: 0 auto;
122 |       padding: 20px;
123 |   }
124 | 
125 |   .top-card-wrap {
126 |     height: 250px;
127 |     padding: 20px;
128 |     position: relative;
129 |     z-index: 1;
130 |     box-sizing: border-box;
131 |     border-radius: 10px;
132 |     overflow: hidden;
133 |     display: flex;
134 |     align-items: center;
135 |   }
136 | 
137 |   .bg-blur {
138 |     width: 100%;
139 |     height: 100%;
140 |     position: absolute;
141 |     top: 0;
142 |     left: 0;
143 |     filter: blur(20px);
144 |     z-index: 2;
145 |   }
146 | 
147 |   .top-card {
148 |     display: flex;
149 |     position: absolute;
150 |     z-index: 3;
151 |   }
152 | 
153 |   .img-wrap {
154 |     width: 200px;
155 |     height: 200px;
156 |   }
157 | 
158 |   .img-wrap img {
159 |     width: 100%;
160 |     height: 100%;
161 |   }
162 | 
163 |   .card-content {
164 |     flex: 1;
165 |     padding: 0 20px;
166 |   }
167 | 
168 |   .card-tag {
169 |     padding: 5px;
170 |     width: 100px;
171 |     box-sizing: border-box;
172 |     border: 1px solid #dfac67;
173 |     color: #dfac67;
174 |     text-align: center;
175 |     border-radius: 10px;
176 |     cursor: pointer;
177 |   }
178 | 
179 |   .card-title {
180 |     color: #fff;
181 |     margin: 10px 0;
182 |   }
183 | 
184 |   .card-info {
185 |     font-size: 12px;
186 |     overflow: hidden;
187 |     text-overflow: ellipsis;
188 |     display: -webkit-box;
189 |     -webkit-box-orient: vertical;
190 |     -webkit-line-clamp: 8;
191 |     /* color: #888482; */
192 |     color: #e3e3e3;
193 |   }
194 | 
195 | 
196 |   /* tab导航 */
197 |   .tab-container {
198 |     margin-top: 20px;
199 |   }
200 | 
201 |   .tab-bar ul {
202 |     height: 25px;
203 |     display: flex;
204 |     justify-content: flex-end;
205 |   }
206 | 
207 |   .tab-item {
208 |     margin-left: 20px;
209 |     cursor: pointer;
210 |     font-size: 15px;
211 |     color: grey;
212 |   }
213 | 
214 |   .active {
215 |     color: #dd6d60;
216 |   }
217 | 
218 |   .tab-content {
219 |     margin-top: 20px;
220 |   }
221 | 
222 |   .songs-wrap .list ul{
223 |       width: 100%;
224 |       display: flex;
225 |       justify-content: space-between;
226 |       flex-wrap: wrap;
227 |   }
228 | 
229 |   .songs-wrap .list li {
230 |       width: 18%;
231 |       margin: 10px 0;
232 |       position: relative;
233 |       overflow-y: hidden;
234 |   }
235 | 
236 |   .list li .first-p {
237 |       position: absolute;
238 |       top: 0;
239 |       left: 0;
240 |       width: 100%;
241 |       background-color: rgba(0, 0, 0, .5);
242 |       color: #fff;
243 |       font-size: 12px;
244 |       padding: 5px;
245 |       box-sizing: border-box;
246 |       /* border-top-left-radius: 10px;
247 |       border-top-right-radius: 10px; */
248 |       transform: translateY(-100%);;
249 |       transition: .5s;
250 |   }
251 | 
252 |   .list li::before {
253 |       content: "\e665"; 
254 |       position: absolute;
255 |       bottom: 25px;
256 |       right: 5px;
257 |       width: 35px;
258 |       height: 35px;
259 |       background-color: rgba(255, 255, 255, .8);
260 |       border-radius: 50%;
261 |       display: flex;
262 |       justify-content: center;
263 |       align-items: center;
264 |       color: #c0392b;
265 |       opacity: 0;
266 |       transition: .3s;
267 |       cursor: pointer;
268 |   }
269 | 
270 |   .list li:hover .first-p{
271 |       transform: translateY(0);
272 |   }
273 | 
274 |     .list li:hover::before{
275 |         opacity: 1;
276 |   }
277 | 
278 |   .songs-wrap ul img {
279 |       width: 100%;
280 |       border-radius: 5px;
281 |       /* opacity: 1; */
282 |   }
283 | 
284 |   .songs-wrap ul .last-p {
285 |       font-size: 14px;
286 |       overflow: hidden;
287 |       text-overflow: ellipsis;
288 |       white-space: nowrap;
289 |   } 
290 | </style>


--------------------------------------------------------------------------------
/src/views/Result/Result.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="result" v-loading="loading">
  3 |         <div class="result-top-info">
  4 |             <h2>{{keywords}}</h2>
  5 |             <span>共找到{{total}}个结果</span>
  6 |         </div>
  7 |         <div class="tab-wrap">
  8 |             <el-tabs v-model="activeName" @tab-click="handleClick">
  9 |                 <el-tab-pane label="歌曲" name="first">
 10 |                     <div class="songs-table">
 11 |                         <el-table
 12 |                             :data="songsList"
 13 |                             stripe
 14 |                             style="width: 100%"
 15 |                             @row-dblclick="play">
 16 | 
 17 |                             <el-table-column type="index" width="50"></el-table-column>    
 18 | 
 19 |                             <el-table-column prop="songName" label="音乐标题" width="">
 20 |                                 <template slot-scope="scope">
 21 |                                     <span>{{scope.row.songName}}</span>
 22 |                                     <span v-if="scope.row.alia.length!=0" style="color:grey;fontSize:12px;marginLeft:5px">{{scope.row.alia[0]}}</span>
 23 |                                     <span class="iconfont icon-bofangMV mvIcon" v-if="scope.row.mvId != 0" @click="toMvDetail(scope.row.mvId)"></span>
 24 |                                 </template>
 25 |                             </el-table-column>
 26 | 
 27 |                             <el-table-column prop="artistInfo" label="歌手" width="">
 28 |                                 <template slot-scope="scope">
 29 |                                     <div v-for="(x,i) in scope.row.artistInfo" :key="i" style="cursor:pointer;color:#2980b9;display:inline-block" @click="toArtist(x.id)">{{x.name}}<span style="color:#606266;margin:0 5px" v-show="scope.row.artistInfo.length != 1 && i!=scope.row.artistInfo.length-1">/</span></div>                                    
 30 |                                 </template>                                  
 31 |                             </el-table-column>
 32 | 
 33 |                             <el-table-column prop="album" label="专辑" >
 34 |                                 <template slot-scope="scope" style="">
 35 |                                     <span style="cursor:pointer;color:#2980b9;" @click="toAlbum(scope.row.albumId)">{{scope.row.album}}</span>
 36 |                                     <span class="plus" title="添加至歌单" @click="addToQueue(scope.row,$event)">+</span>
 37 |                                 </template>
 38 |                             </el-table-column>
 39 | 
 40 |                             <el-table-column prop="duration" label="时长" width="100"></el-table-column>                            
 41 |                         </el-table>                        
 42 |                     </div>
 43 |                 </el-tab-pane>
 44 | 
 45 | 
 46 |                 <el-tab-pane label="歌单" name="second">
 47 |                     <div class="songs-wrap">
 48 |                         <div class="list">
 49 |                             <ul>
 50 |                                 <li class="iconfont icon-play" v-for="(item,index) in playList" :key="index" @click="toPlaylistDetail(item.id)">
 51 |                                     <p class="first-p">播放量：{{item.playCount}}</p>
 52 |                                     <img v-lazy="item.coverImgUrl" alt="recommend">
 53 |                                     <p class="last-p" :title="item.name">{{item.name}}</p>
 54 |                                 </li>                                                                                                                    
 55 |                             </ul>
 56 |                         </div>
 57 |                     </div>                    
 58 |                 </el-tab-pane>
 59 | 
 60 | 
 61 | 
 62 |                 <el-tab-pane label="MV" name="third">
 63 |                     <ul class="mv-list1">
 64 |                         <li v-for="(item,index) in mvList" :key="index" @click="toMvDetail(item.id)">
 65 |                             <div class="mv-img-wrap">
 66 |                                 <img v-lazy="item.cover" alt="newMvs">
 67 |                                 <p class="iconfont icon-play play"></p>
 68 |                                 <p class="play-count iconfont icon-play">{{item.playCount}}</p>
 69 |                                 <p class="mv-duration">{{item.duration}}</p>                                
 70 |                             </div>
 71 |                             <div class="mv-info">
 72 |                                 <p class="title" :title="item.name">{{item.name}}</p>
 73 |                                 <p class="author">{{item.artistName}}</p>
 74 |                             </div>
 75 |                         </li>                                          
 76 |                     </ul>                    
 77 |                 </el-tab-pane>
 78 |             </el-tabs>            
 79 |         </div>
 80 |         <Pagination :total="total" :pageSize="pageSize" :nowPage="page" @changePage="handleCurrentChange"/>
 81 |         <div class="add-ball iconfont icon-yinfu" v-show="showAddBall" ref="addBall"></div>  
 82 |     </div>
 83 | </template>
 84 | 
 85 | <script scoped>
 86 | import { playMusicAPI,searchAPI } from '@/utils/api'
 87 | import Pagination from '@/components/Pagination.vue'
 88 | 
 89 | export default {
 90 |     data(){
 91 |         return {
 92 |             keywords:"",
 93 |             activeName: 'first',
 94 |             songsList: [],
 95 |             playList:[],
 96 |             mvList:[],
 97 |             page:1,
 98 |             total:0,
 99 |             pageSize:10,
100 |             type:1,
101 |             loading:true,
102 |             showAddBall:false
103 |         }
104 |     },
105 |     components: {
106 |         Pagination
107 |     },
108 |     computed:{
109 |         musicQueue(){
110 |             return this.$store.state.musicQueue
111 |         },
112 |         queuePos(){
113 |             return this.$store.state.queuePos
114 |         }
115 |     },
116 |     methods:{
117 |         toMvDetail(id){
118 |             this.$router.push(`/mvdetail?id=${id}`)
119 |         },              
120 |         toPlaylistDetail(id){
121 |             this.$router.push(`/playlist?id=${id}`)
122 |         },
123 |         toArtist(id){
124 |             this.$router.push(`/artist?artistId=${id}`)
125 |         },
126 |         toAlbum(id){
127 |             this.$router.push(`/album?id=${id}`)
128 |         },                        
129 |         handleCurrentChange(page){
130 |             this.page = page
131 |             this.getTableData(this.type)
132 |         },
133 |         addToQueue(row,e){
134 |             console.log(row)
135 |             let obj = {
136 |                 id:row.id,
137 |                 imgUrl:row.imgUrl,
138 |                 duration:row.duration,
139 |                 artistInfo:row.artistInfo,
140 |                 // singer:row.artistInfo[0].name,
141 |                 // artistId:row.artistId,
142 |                 songName:row.songName
143 |             }
144 |             
145 |             let ids = []
146 |             for (const item of this.musicQueue) {
147 |                 ids.push(item.id)
148 |             }
149 |             if(ids.indexOf(obj.id) == -1){
150 |                 this.beginAnimation(e.x,e.y)
151 | 
152 |                 setTimeout(() => {
153 |                     this.$store.commit('changeQueueStyle','add')      
154 |                     this.$store.commit('changeMusicQueue',obj)  
155 |                 }, 500);
156 |          
157 | 
158 |                 setTimeout(() => {
159 |                     this.$store.commit('changeQueueStyle','normal')                   
160 |                 }, 1000);
161 |             }else{
162 |                 this.$message({
163 |                     type:'warning',
164 |                     message:"已存在播放列表哦",
165 |                     showClose:true
166 |                 })
167 |             }
168 |         },
169 |         handleClick(tab) {
170 |             let label = tab.label
171 |             switch(label){
172 |                 case '歌曲':
173 |                     this.total = 0
174 |                     this.page = 1
175 |                     this.type = 1
176 |                     this.pageSize = 10                      
177 |                     this.getTableData()
178 |                     break;
179 |                 case '歌单':
180 |                     this.total = 0                    
181 |                     this.page = 1                    
182 |                     this.type = 1000
183 |                     this.pageSize = 10                      
184 |                     this.getTableData(this.type)
185 |                     break;
186 |                 case 'MV':
187 |                     this.total = 0                    
188 |                     this.page = 1                    
189 |                     this.type = 1004
190 |                     this.pageSize = 12                    
191 |                     this.getTableData(this.type)
192 |                     break;
193 |             }
194 |         },
195 |         play(row){
196 |             console.log(row)
197 |             let id = row.id
198 |             playMusicAPI({id}).then(res=>{
199 |                 if(res.data.data[0].url){
200 |                 // console.log(res)
201 |                 this.songUrl = res.data.data[0].url
202 | 
203 |                 let musicInfo = {
204 |                     imgUrl:row.imgUrl,
205 |                     // singer:row.artistInfo[0].name,
206 |                     artistInfo:row.artistInfo,
207 |                     songName:row.songName,
208 |                     id:row.id,
209 |                     duration:row.duration                    
210 |                 }
211 | 
212 |                 this.$store.commit("changeMusicUrl",this.songUrl)
213 |                 this.$store.commit("changeMusicInfo",musicInfo)
214 |                 this.$store.commit('changeMusicStatus',false)
215 |                 this.$store.commit('changeMusicQueue',musicInfo)
216 | 
217 |                 let ids = []
218 |                 for (const item of this.musicQueue) {
219 |                     ids.push(item.id)
220 |                 }
221 |                 this.$store.commit("changeNowIndex",ids.indexOf(musicInfo.id))
222 | 
223 | 
224 |                 }else{
225 |                     this.$message({
226 |                     showClose: true,
227 |                     message: '对不起，歌曲暂时无法播放。',
228 |                     type: 'error'
229 |                     });
230 |                 }
231 |             })
232 |         },
233 |         getTableData(type=1){
234 |             this.loading = true
235 |             let params = {
236 |                 keywords:this.keywords,
237 |                 limit:this.pageSize,
238 |                 offset:(this.page-1)*this.pageSize,
239 |                 type //1歌曲 1000歌单 1004MV                
240 |             }
241 |             searchAPI(params).then(res=>{
242 |                 console.log(res)
243 |                 let resultList = []
244 | 
245 |                 switch(type){
246 |                     case 1:
247 |                         resultList = res.data.result.songs
248 |                         // 点击最后几页返回的songCount为10会出现bug
249 |                         if(this.total == 0)
250 |                             this.total = res.data.result.songCount
251 |                         var songsList = []
252 | 
253 |                         for (const item of resultList) {
254 |                             var duration = item.dt
255 |                             var min = parseInt(duration / 60000).toString().padStart(2,'0')
256 |                             var second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
257 |                             duration = `${min}:${second}`
258 |                             var song = {
259 |                                 id:item.id,
260 |                                 songName:item.name,
261 | 
262 |                                 // singer:item.ar[0].name,
263 |                                 // artistId:item.ar[0].id,
264 |                                 artistInfo:item.ar,
265 | 
266 |                                 album:item.al.name,
267 |                                 albumId:item.al.id,
268 |                                 mvId:item.mv,
269 |                                 imgUrl:item.al.picUrl,
270 |                                 alia:item.alia,
271 |                                 copyright:item.copyright,
272 |                                 duration
273 |                             }
274 |                             songsList.push(song)
275 |                         }
276 |                         this.songsList = songsList                                                
277 |                         break
278 |                     case 1000:
279 |                         resultList = res.data.result.playlists
280 |                         // 点击最后几页返回的songCount为10会出现bug
281 |                         if(this.total == 0)
282 |                             this.total = res.data.result.playlistCount
283 |                         this.playList = resultList                         
284 |                         break
285 |                     case 1004:
286 |                         resultList = res.data.result.mvs
287 |                         // 点击最后几页返回的songCount为10会出现bug
288 |                         if(this.total == 0)
289 |                             this.total = res.data.result.mvCount
290 |                         this.mvList = resultList
291 |                         for(let i=0;i<this.mvList.length;i++){
292 |                             if(this.mvList[i].playCount >= 100000)
293 |                                 this.mvList[i].playCount = parseInt(this.mvList[i].playCount/10000)+'万'
294 |                                 let duration = this.mvList[i].duration
295 |                                 let min = parseInt(duration / 60000).toString().padStart(2,'0')
296 |                                 let second = parseInt((duration-min*60000)/1000).toString().padStart(2,'0')
297 |                                 this.mvList[i].duration = `${min}:${second}`  
298 |                             }
299 |                      
300 |                         break         
301 |                 }
302 |             }).then(()=>{
303 |                 this.loading = false
304 |             })  
305 |         },
306 |         beginAnimation(x,y){
307 |             this.showAddBall = true
308 |             let endX = this.queuePos.left
309 |             let endY = this.queuePos.top
310 |             console.log('起始位置 x:'+x+' y:'+y)
311 |             console.log('终点位置 x:'+endX+' y:'+endY)
312 | 
313 |             let el = document.querySelector(".add-ball")
314 |             el.style.left = x+'px'
315 |             el.style.top = y+'px'
316 |             
317 |             setTimeout(() => {
318 |                 el.style.left = endX+'px'
319 |                 el.style.top = endY+'px'
320 |             }, 0);
321 | 
322 |             setTimeout(() => {
323 |                 this.showAddBall = false
324 |             }, 500);
325 |         },                
326 |     },
327 |     created(){
328 |         this.keywords = this.$route.query.keywords        
329 |         this.getTableData()
330 |     },
331 |     watch:{
332 |         $route(newVal){
333 |             this.keywords = newVal.query.keywords
334 |             this.total = 0
335 |             this.page = 1                
336 |             this.getTableData(this.type)
337 |         }
338 |     }
339 | }
340 | </script>
341 | 
342 | <style>
343 |     @import '../../assets/common/tab.css';
344 | 
345 |     .add-ball {
346 |         position: fixed;
347 |         color: rgb(236, 65, 65);
348 |         transition: top .5s ease-in,left .5s linear;
349 |         z-index: 9999;
350 |     }
351 | 
352 |     ul {
353 |         list-style: none;
354 |     }
355 | 
356 |     .result {
357 |         max-width: 1300px;
358 |         margin: 0 auto;
359 |         padding: 20px;
360 |     }
361 | 
362 |     .result-top-info {
363 |         margin-bottom: 20px;
364 |         display: flex;
365 |         align-items: flex-end;
366 |     }
367 | 
368 |     .result-top-info span {
369 |         margin-left: 10px;
370 |         font-size: 12px;
371 |         color: grey;
372 |     }
373 |     
374 |     .el-tabs__item {
375 |         font-size: 18px;
376 |     }
377 | 
378 |     .plus {
379 |         padding: 10px;
380 |         border-radius: 50%;
381 |         margin-left: 10px;
382 |         font-size: 25px;
383 |         position: absolute;
384 |         left: -80px;
385 |         top: 0;
386 |         font-weight: bold;
387 |         cursor: pointer;
388 |         display: none;
389 |     }
390 | 
391 |     .songs-table .el-table__row:hover .plus{
392 |         display: block;
393 |     }
394 | 
395 |     .mvIcon {
396 |         color: rgb(236, 65, 65);
397 |         margin-left: 5px;
398 |         cursor: pointer;
399 |     }
400 | 
401 | 
402 |     /* 歌单Tab */
403 |   .songs-wrap .list ul{
404 |       width: 100%;
405 |       display: flex;
406 |       justify-content: space-between;
407 |       flex-wrap: wrap;
408 |   }
409 | 
410 |   .songs-wrap .list li {
411 |       width: 18%;
412 |       margin: 10px 0;
413 |       position: relative;
414 |       overflow-y: hidden;
415 |   }
416 | 
417 |   .list li .first-p {
418 |       position: absolute;
419 |       top: 0;
420 |       left: 0;
421 |       width: 100%;
422 |       background-color: rgba(0, 0, 0, .5);
423 |       color: #fff;
424 |       font-size: 12px;
425 |       padding: 5px;
426 |       box-sizing: border-box;
427 |       /* border-top-left-radius: 10px;
428 |       border-top-right-radius: 10px; */
429 |       transform: translateY(-100%);;
430 |       transition: .5s;
431 |   }
432 | 
433 |   .list li::before {
434 |       content: "\e665"; 
435 |       position: absolute;
436 |       bottom: 25px;
437 |       right: 5px;
438 |       width: 35px;
439 |       height: 35px;
440 |       background-color: rgba(255, 255, 255, .8);
441 |       border-radius: 50%;
442 |       display: flex;
443 |       justify-content: center;
444 |       align-items: center;
445 |       /* font-size: 35px; */
446 |       color: #c0392b;
447 |       opacity: 0;
448 |       transition: .3s;
449 |       cursor: pointer;
450 |   }
451 | 
452 |   .list li:hover .first-p{
453 |       transform: translateY(0);
454 |   }
455 | 
456 |     .list li:hover::before{
457 |         opacity: 1;
458 |   }
459 | 
460 |   .songs-wrap ul img {
461 |       width: 100%;
462 |       border-radius: 5px;
463 |       /* opacity: 1; */
464 |   }
465 | 
466 |   .songs-wrap ul .last-p {
467 |       font-size: 14px;
468 |       overflow: hidden;
469 |       text-overflow: ellipsis;
470 |       white-space: nowrap;
471 |   }
472 | 
473 | 
474 | /* MVTabs */
475 |   .mv-list1 {
476 |       display: flex;
477 |       justify-content: flex-start;
478 |       flex-wrap: wrap;
479 |   }
480 | 
481 |   .mv-list1 li {
482 |       width: 23%;
483 |       margin-bottom: 20px;
484 |       margin-right: 20px;
485 |   }
486 | 
487 |   .mv-img-wrap {
488 |       position: relative;
489 |       cursor: pointer;
490 |   }
491 | 
492 |   .mv-img-wrap img{
493 |     width: 100%;
494 |     height: 165px;
495 |     border-radius: 5px;    
496 |   }
497 | 
498 |   .mv-img-wrap:hover .play::before {
499 |       opacity: 1;
500 |   }
501 | 
502 |   .mv-img-wrap .play::before {
503 |       content: "\e665"; 
504 |       position: absolute;
505 |       top: 50%;
506 |       left: 50%;
507 |       transform: translate(-50%,-50%);
508 |       width: 35px;
509 |       height: 35px;
510 |       background-color: rgba(255, 255, 255, .8);
511 |       border-radius: 50%;
512 |       display: flex;
513 |       justify-content: center;
514 |       align-items: center;
515 |       color: #c0392b;
516 |       opacity: 0;
517 |       transition: .3s;
518 |       cursor: pointer;
519 |   }
520 | 
521 |   .play-count{
522 |       position: absolute;
523 |       top: 5px;
524 |       right: 5px;
525 |       color: #fff;
526 |       font-size: 12px;
527 |   }
528 | 
529 |   .play-count::before {
530 |       margin-right: 5px;
531 |   }
532 | 
533 |   .mv-duration {
534 |       position: absolute;
535 |       bottom: 10px;
536 |       right: 5px;
537 |       color: #fff;
538 |       font-size: 12px;
539 |   }
540 | 
541 |  .mv-info p{
542 |      margin: 5px 0;
543 |  }
544 | 
545 |  .mv-info p.title {
546 |    overflow: hidden;
547 |    text-overflow: ellipsis;
548 |    white-space: nowrap;
549 |  }
550 | 
551 |   .mv-info .author{
552 |       color: #a5a1a1;
553 |       font-size: 12px;
554 |   }
555 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: './',
3 |   productionSourceMap: false
4 | }
5 | 


--------------------------------------------------------------------------------