{{item.songname}}
16 |{{item.singername+'·'+item.albumname}}
17 |歌手其他专辑
34 |-
35 |
-
36 | 37 |39 |
38 |
40 |43 |{{item.title}}
41 |{{item.pubDate}}
42 |
44 |
48 |
51 |
3 |
4 |
6 |
8 |
11 |
12 |
13 |
26 |
27 |
28 |
43 |
--------------------------------------------------------------------------------
/src/api/getAlbumData.js:
--------------------------------------------------------------------------------
1 | import jsonp from '@/assets/js/jsonp.js'
2 |
3 | export default function getAlbumData(mid){
4 | const url='https://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg'
5 |
6 | let data={
7 | albummid:mid,
8 | uin: 0,
9 | format: 'json',
10 | inCharset: 'utf-8',
11 | outCharset: 'utf-8',
12 | notice: 0,
13 | platform: 'h5',
14 | needNewCode: 1,
15 | }
16 | return jsonp(url,data,{param:'jsonpCallback'})
17 | }
--------------------------------------------------------------------------------
/src/api/getHotKey.js:
--------------------------------------------------------------------------------
1 | import jsonp from '@/assets/js/jsonp'
2 |
3 | export function getHotKey(){
4 | const url = 'https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg'
5 | const data = {
6 | uin: 0,
7 | format: 'jsonp',
8 | inCharset: 'utf-8',
9 | outCharset: 'utf-8',
10 | notice: 0,
11 | platform: 'h5',
12 | needNewCode: 1,
13 | }
14 | return jsonp(url,data,{param:'jsonpCallback'})
15 | }
16 |
17 | export function getSuggestion(value,page){
18 | const url = `https://c.y.qq.com/soso/fcgi-bin/client_search_cp?aggr=1&cr=1&flag_qc=0&p=1&n=30&w=${value}`
19 | const data = {
20 | uin: 0,
21 | format: 'jsonp',
22 | inCharset: 'utf-8',
23 | outCharset: 'utf-8',
24 | notice: 0,
25 | platform: 'h5',
26 | needNewCode: 1,
27 | w: value,
28 | zhidaqu: 1,
29 | catZhida: 1,
30 | t: 0,
31 | flag: 1,
32 | ie: 'utf-8',
33 | sem: 1,
34 | aggr: 0,
35 | perpage: 20,
36 | n: 20,
37 | p: page,
38 | remoteplace: 'txt.mqq.all',
39 | }
40 | return jsonp(url,data,{param:'jsonpCallback'})
41 | }
--------------------------------------------------------------------------------
/src/api/getRecommendData.js:
--------------------------------------------------------------------------------
1 | import jsonp from '@/assets/js/jsonp.js'
2 |
3 | export function getRecommendData(){
4 | const url="https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg";
5 | let data={
6 | format: "json",
7 | inCharset: "utf-8",
8 | outCharset: "utf-8",
9 | notice: 0,
10 | platform: "h5",
11 | needNewCode: 1,
12 | }
13 | return jsonp(url,data,{param:"jsonpCallback"})
14 | }
15 |
16 | export function getHotSongSheet(id){
17 | const url = "https://ustbhuangyi.com/music/api/getCdInfo"
18 | let data = {
19 | g_tk: 1928093487,
20 | inCharset: 'utf-8',
21 | outCharset: 'utf-8',
22 | notice: 0,
23 | format: 'json',
24 | disstid: 4024171742,
25 | type: 1,
26 | json: 1,
27 | utf8: 1,
28 | onlysong: 0,
29 | platform: 'yqq',
30 | hostUin: 0,
31 | needNewCode: 0,
32 | }
33 | return jsonp(url,data,{
34 | param:"jsonpCallback",
35 | prefix: "playlistinfoCallback"
36 | })
37 | }
--------------------------------------------------------------------------------
/src/api/getSingerlistData.js:
--------------------------------------------------------------------------------
1 | import jsonp from '@/assets/js/jsonp.js'
2 |
3 | export default function getSingerlistData(){
4 | const url="https://szc.y.qq.com/v8/fcg-bin/v8.fcg";
5 | let data={
6 | channel:"singer",
7 | page:"list",
8 | key: "all_all_all", //获取所以排行歌手信息，all_all_A获取A字母开头的歌手信息
9 | pagesize: 100, //获取100条数据
10 | pagenum: 1,
11 | // g_tk: 5381,
12 | loginUin: 0,
13 | hostUin: 0,
14 | format: "jsonp",
15 | inCharset: "utf8",
16 | outCharset: "utf-8",
17 | notice: 0,
18 | platform: "yqq",
19 | needNewCode: 0,
20 | }
21 | return jsonp(url,data,{param:"jsonpCallback"})
22 | }
23 |
24 | export function getSingerData(id){
25 | const url="https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg"
26 |
27 | let data={
28 | singermid: id,
29 | format: "jsonp",
30 | inCharset: "utf-8",
31 | outCharset: "utf-8",
32 | notice: 0,
33 | platform: "h5page",
34 | needNewCode: 1,
35 | order: "listen",
36 | from: "h5",
37 | num: 30, //获取歌曲数量
38 | begin: 0
39 | }
40 | return jsonp(url,data,{param:"jsonpCallback"});
41 | }
--------------------------------------------------------------------------------
/src/api/getToplistsData.js:
--------------------------------------------------------------------------------
1 | import jsonp from '@/assets/js/jsonp.js'
2 |
3 | export default function getToplistsData(){
4 | const url="https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg"
5 |
6 | let data={
7 | format: "jsonp",
8 | inCharset: "utf-8",
9 | outCharset: "utf-8",
10 | notice: 0,
11 | platform: "h5",
12 | needNewCode: 1,
13 | }
14 | return jsonp(url,data,{param:"jsonpCallback"});
15 | }
16 |
17 | export function getToplist(id){
18 | const url="https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg"
19 |
20 | let data={
21 | uin: 0,
22 | format: 'jsonp',
23 | inCharset: 'utf-8',
24 | outCharset: 'utf-8',
25 | notice: 0,
26 | platform: 'h5',
27 | needNewCode: 1,
28 | tpl: 3,
29 | page: 'detail',
30 | type: 'top',
31 | topid: id,
32 | }
33 | return jsonp(url,data,{param:"jsonpCallback"});
34 | }
--------------------------------------------------------------------------------
/src/assets/css/my-mint.css:
--------------------------------------------------------------------------------
1 | .mint-tab-item-label{
2 | font-size: 14px;
3 | }
4 | .mint-tab-item{
5 | border-bottom: 3px solid #fff;
6 | }
7 | .mint-navbar .mint-tab-item.is-selected {
8 | border-bottom: 3px solid #31c27c;
9 | color: #31c27c;
10 | margin-bottom: -3px;
11 | }
12 | .mint-msgbox{
13 | width: 296px;
14 | }
15 | .mint-msgbox-confirm{
16 | color: #777;
17 | }
--------------------------------------------------------------------------------
/src/assets/css/reset.css:
--------------------------------------------------------------------------------
1 | *{
2 | box-sizing:border-box;
3 | }
4 |
5 | html,body{
6 | width: 100%;
7 | min-height: 100%;
8 | touch-action: manipulation; /* IE11+ 禁止双击缩放，关于移动端300ms延迟：https://github.com/ftlabs/fastclick */
9 | -ms-touch-action: manipulation /* IE10+ 禁止双击缩放 */
10 | }
11 | body{
12 | font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
13 | overflow-y: initial !important; /* music-ui的自带样式会导致body出现滚动条，然后导致scrollBehavior无法获取window的滚动位置 */
14 | }
15 | img{vertical-align: top;border: 0;}
16 | ul, li, ol{
17 | list-style-type: none;
18 | }
19 | a, blockquote, body, button, code, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html,iframe, img, input, label, li, object, ol, p, q, small, span, strong, table, tbody, td, th, tr, ul {
20 | margin: 0;
21 | padding: 0;
22 | border: 0;
23 | }
24 | h1, h2, h3, h4, h5, h6{
25 | font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
26 | }
27 |
28 | button, input, select, textarea { font-size: 100%; line-height:normal; }
29 | button, input, select, label{vertical-align:middle;}
30 | table{ border-collapse: collapse; border-spacing: 0; }
31 | input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}
32 | a{color: #333; outline: none; text-decoration: none;}
33 | a:focus{outline: none;}
34 | .clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
35 | .clearfix {zoom:1; }
36 | em{
37 | font-style: normal;
38 | }
--------------------------------------------------------------------------------
/src/assets/font/demo.css:
--------------------------------------------------------------------------------
1 | *{margin: 0;padding: 0;list-style: none;}
2 | /*
3 | KISSY CSS Reset
4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
8 | 维护：玉伯
3 |
16 |
17 |
22 |
--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
9 |
15 |
3 | 
4 |
6 |
7 |
17 |
--------------------------------------------------------------------------------
/src/components/PageHeader.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | {{title}}
5 |
3 |
4 |
5 |
6 |
7 |
31 |
--------------------------------------------------------------------------------
/src/components/PlayList.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
28 |
5 |
27 |
6 |
10 |
13 |
14 |
15 |
25 | -
16 |
-
17 |
18 | 19 | 20 | × 21 |22 |
23 |
关闭
26 |
3 |
4 |
6 |
7 |
38 |
--------------------------------------------------------------------------------
/src/components/SongList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
22 |
23 |
83 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 |
6 | //引入mint-ui
7 | import MintUI from 'mint-ui'
8 | import 'mint-ui/lib/style.css'
9 | import './assets/css/my-mint.css'
10 |
11 | Vue.use(MintUI)
12 |
13 | Vue.config.productionTip = false
14 |
15 | new Vue({
16 | router,
17 | store,
18 | render: h => h(App)
19 | }).$mount('#app')
20 |
--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 |
4 | Vue.use(Router)
5 |
6 | export default new Router({
7 | routes: [
8 | {
9 | path: '/',
10 | redirect:'/index'
11 | },
12 | {
13 | path: '/index',
14 | name: 'index',
15 | component: () => import('./views/Home.vue'),
16 | children:[
17 | {
18 | path:"/index/songsheet",
19 | component: () => import('./views/HotSongSheet.vue')
20 | }
21 | ]
22 | },
23 | {
24 | path:'/singerlist',
25 | name:'singerlist',
26 | component: () => import('./views/Singerlist.vue'),
27 | children:[
28 | {
29 | path:'/singerlist/singer/:id',
30 | name:'singer',
31 | component:() => import('./views/Singer.vue')
32 | }
33 | ]
34 | },
35 | {
36 | path:'/toplists',
37 | name:'toplists',
38 | component:() => import('./views/Toplists.vue'),
39 | children:[
40 | {
41 | path:'/toplists/toplist/:id',
42 | name:'toplist',
43 | component:() => import('./views/Toplist.vue')
44 | }
45 | ]
46 | },
47 | {
48 | path:'/search',
49 | name:'search',
50 | component:() => import('./views/Search.vue')
51 | },
52 | {
53 | path:'/album/:id',
54 | name:'album',
55 | component:() => import('./views/Album.vue')
56 | },
57 | {
58 | path:'/user',
59 | name:'user',
60 | component:() => import('./views/User.vue')
61 | }
62 | ]
63 | })
64 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import {shuffle} from '@/assets/js/util'
4 |
5 | Vue.use(Vuex)
6 |
7 | let playMode = { //播放模式，
8 | sequence: 0,
9 | loop: 1,
10 | random: 2
11 | }
12 |
13 | export default new Vuex.Store({
14 | state: {
15 | playing: false, //播放状态
16 | mode: playMode.sequence, //播放模式，这种写法更语义化
17 | playlist: [], //播放列表
18 | sequencelist: [], //顺序播放列表
19 | currentIndex: -1, //当前播放索引
20 | fullScreen: false, //播放页面是否折叠
21 | other: {}, //其他选项,
22 | mylikeSongs: localStorage['mylikeSongs'] ? JSON.parse(localStorage['mylikeSongs']) : [],
23 | playHistory: localStorage['playHistory'] ? JSON.parse(localStorage['playHistory']) : [],
24 | searchHistory: localStorage['searchHistory'] ? JSON.parse(localStorage['searchHistory']) : [],
25 | },
26 | getters: {
27 | currentSong(state) {
28 | let Song = {
29 | ...state.playlist[state.currentIndex]
30 | } || {}
31 | if (Song.mid) {
32 |
33 | Song.url = `https://v1.itooi.cn/tencent/url?id=${Song.mid}&quality=128`
34 | }
35 | return Song || {}
36 | }
37 | },
38 |
39 |
40 | mutations: {
41 | //播放状态
42 | setPlayingState(state, flag) {
43 | state.playing = flag
44 | },
45 | //播放器全屏
46 | setFullScreenState(state, flag) {
47 | state.fullScreen = flag
48 | },
49 | //播放列表
50 | setPlaylist(state, list) {
51 | //当setPlaylist和setSequencelist引用同一个list时，改变其中一个会影响另一个
52 | state.playlist = list
53 | },
54 | //播放队列
55 | setSequencelist(state, list) {
56 | state.sequencelist = list
57 | },
58 | //播放状态
59 | setModeState(state, mode) {
60 | state.mode = mode
61 | },
62 | //当前播放的歌曲index
63 | setCurrentIndex(state, index) {
64 | state.currentIndex = index
65 | },
66 | //其他设置
67 | setOther(state, option) {
68 | state.other = Object.assign(state.other, option)
69 | },
70 | //加入添加播放记录和缓存
71 | addItem(state, payload) {
72 | //载荷传入key和song
73 | state[payload.key].push(payload.song)
74 | localStorage.setItem(payload.key, JSON.stringify(state[payload.key]))
75 | },
76 | //加入缓存
77 | addItemPosition(state, payload) {
78 | state[payload.key].splice(payload.index, 0, payload.song)
79 | localStorage.setItem(payload.key, JSON.stringify(state[payload.key]))
80 | },
81 | //删除缓存
82 | removeItem(state, payload) {
83 | //载荷传入key和index
84 | state[payload.key].splice(payload.index, 1)
85 | localStorage.setItem(payload.key, JSON.stringify(state[payload.key]))
86 | },
87 | //清除列表
88 | clearList(state, key) {
89 | state[key] = []
90 | localStorage.setItem(key, JSON.stringify(state[key]))
91 | }
92 | },
93 |
94 | //Action 一般做异步处理，或将多个mutation封装
95 | actions: {
96 | selectPlay({
97 | commit,
98 | state
99 | }, {
100 | list,
101 | index
102 | }) {
103 | commit('setSequencelist', list)
104 | if (state.mode === playMode.random) {
105 | let randomList = shuffle(list)
106 | commit('setPlaylist', randomList)
107 | //打乱数组后index也会变化
108 | let oindex = index
109 | index = randomList.findIndex((item) => {
110 | return item.id === list[oindex].id
111 | })
112 | } else {
113 | commit('setPlaylist', list)
114 | }
115 | commit('setCurrentIndex', index)
116 | commit('setPlayingState', true)
117 | }
118 | }
119 | })
--------------------------------------------------------------------------------
/src/views/Album.vue:
--------------------------------------------------------------------------------
1 |
2 | -
4 |
-
11 | 12 | {{index+1}} 13 |14 |15 |18 |
19 |
5 |
7 | 播放全部
9 |
4 |
55 |
5 | ![]()
22 |
23 |
29 |
6 |
21 |
8 |
20 |
9 | ![]()
10 |
11 |
12 |
19 | {{albuminfo.name}}
13 |
14 | ![]()
15 | {{albuminfo.singername}}
16 |
17 | 发行时间：{{albuminfo.publishData}}
18 |
30 |
31 |
32 |
46 |
47 |
52 |
53 |
54 |
3 |
44 |
45 |
107 |
--------------------------------------------------------------------------------
/src/views/HotSongSheet.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 | ![]()
8 |
9 |
10 |
11 |
12 |
13 |
26 | 电台
14 |-
15 |
-
16 | 17 |20 |
18 | 19 |
21 |23 |{{item.Ftitle}}
22 |
24 |
27 |
42 | 热门歌单
28 |-
29 |
-
30 |
31 | 39 |32 |35 |33 | 34 |
36 |38 |{{item.topTitle}}
37 |
40 |
4 |
51 |
5 | ![]()
22 |
23 |
29 |
6 |
21 |
8 |
20 |
9 | ![]()
10 |
11 |
12 |
19 | {{info.title}}
13 |
14 | ![]()
15 | {{info.nickname}}
16 |
17 | 播放量：{{info.visitnum}}
18 |
30 |
31 |
32 |
42 |
43 |
48 |
49 |
50 | -
33 |
-
37 |
{{item.songname}}
38 |{{item.singername+'·'+item.albumname}}
39 |
40 |
34 |
36 |
44 |
47 | 歌单简介
45 | 46 |
3 |
22 |
23 |
98 |
--------------------------------------------------------------------------------
/src/views/Search.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
8 |
9 |
10 |
15 |
16 |
17 |
18 |
5 |
7 |
11 | ![]()
12 | {{singer.singername}}
13 |
14 |
19 |
21 |
3 |
11 |
55 |
56 |
242 |
--------------------------------------------------------------------------------
/src/views/Singer.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
19 | 热门搜索
13 |-
14 |
- 15 | {{item.k}} 16 | 17 |
20 |
54 |
21 |
33 | -
22 |
- 23 | 24 | {{item}} 25 | × 26 | 27 |
- 28 | 29 | 清空搜索记录 30 | 31 |
34 |
39 |
52 |
53 | -
40 |
-
41 |
44 | 45 | 46 | 47 |48 |
49 |
- 已加载全部 50 |
4 |
52 |
15 |
16 |
17 |
19 |
20 |
35 |
36 |
49 |
50 |
51 | -
21 |
-
25 | 26 |28 |
27 |
29 |32 |{{item.name}}
30 |{{item.publish}}
31 |
33 |
22 |
24 | 最新MV
37 |-
38 |
-
39 | 40 |42 |
41 |
43 |46 |{{item.title}}
44 |{{item.pubdate}}
45 |
47 |
4 |
43 |
5 | ![]()
19 |
20 |
26 |
6 |
18 |
8 |
17 |
9 | ![]()
10 |
11 |
12 |
16 | {{toplistInfo.title}}
13 |{{time}}
14 | {{toplistInfo.updateTime}} 更新
15 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
3 |
21 |
22 |
50 |
107 |
--------------------------------------------------------------------------------
/src/views/User.vue:
--------------------------------------------------------------------------------
1 |
2 | -
4 |
-
8 | 9 |10 |16 | 17 |
11 | {{index+1}} 12 | {{song.songname}} 13 | -{{song.singername}} 14 |
15 |
18 |
5 |
7 |
4 |
56 |
5 |
13 |
6 |
7 |
8 |
9 |
12 | 我喜欢的
10 | 最近听的
11 |
14 |
34 |
15 |
16 |
19 | 没有收藏的歌曲
17 |你可以挑一些喜欢的单曲添加到这里
18 |
20 |
21 | 随机播放全部
22 |
23 | -
24 |
- 25 | 26 | 27 | × 28 | 29 |
31 | 清空列表
32 |
33 |
35 |
55 |
36 |
37 |
40 | 没有播放记录
38 |这里会自动记录您最近听过的200首歌曲
39 |
41 |
42 | 随机播放全部
43 |
44 | -
45 |
- 46 | 47 | 48 | × 49 | 50 |
52 | 清空列表
53 |
54 |