├── src
    ├── api
    │   └── index.js
    ├── assets
    │   ├── info.png
    │   ├── logo.png
    │   ├── about_01.jpg
    │   ├── clock_ic.png
    │   ├── default_pic.jpg
    │   ├── list_sprite.png
    │   ├── logo_footer.png
    │   └── search_sprite.png
    ├── utils.js
    ├── main.js
    ├── components
    │   ├── header
    │   │   ├── readme.md
    │   │   └── index.vue
    │   ├── lyc-item.vue
    │   ├── song-list.vue
    │   ├── search-list.vue
    │   └── play-progress.vue
    ├── App.vue
    ├── vuex
    │   └── store.js
    ├── localStorage.js
    ├── router
    │   └── index.js
    ├── base64.js
    └── views
    │   ├── rank
    │       ├── index.vue
    │       └── detail.vue
    │   ├── recommend
    │       └── index.vue
    │   ├── singer-page.vue
    │   ├── search
    │       └── index.vue
    │   └── playing.vue
├── static
    └── .gitkeep
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── music.gif
├── .gitignore
├── playing.png
├── .editorconfig
├── .babelrc
├── index.html
├── README.md
└── package.json


/src/api/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/music.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/music.gif


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | .idea/
6 | 


--------------------------------------------------------------------------------
/playing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/playing.png


--------------------------------------------------------------------------------
/src/assets/info.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/info.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/about_01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/about_01.jpg


--------------------------------------------------------------------------------
/src/assets/clock_ic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/clock_ic.png


--------------------------------------------------------------------------------
/src/assets/default_pic.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/default_pic.jpg


--------------------------------------------------------------------------------
/src/assets/list_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/list_sprite.png


--------------------------------------------------------------------------------
/src/assets/logo_footer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/logo_footer.png


--------------------------------------------------------------------------------
/src/assets/search_sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chengjun2014/qq_music/HEAD/src/assets/search_sprite.png


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function fillWith(num, symbol) {
 3 | 	var fill = symbol ? symbol : '0';
 4 | 	return (symbol + num).slice(-2);
 5 | }
 6 | 
 7 | export default {
 8 | 	sec2time: function(sec) {
 9 | 		return fillWith(sec/60) + ':' + fillWith(sec%60);
10 | 	},
11 | }


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["es2015", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "plugins": [ "istanbul" ]
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import router from './router'
 4 | import vueResource from 'vue-resource'
 5 | import store from './vuex/store'
 6 | //import axios from 'axios'
 7 | 
 8 | Vue.use(vueResource);
 9 | 
10 | new Vue({
11 | 	el: '#app',
12 | 	store,
13 | 	router,
14 | 	template: '<App/>',
15 | 	components: { App }
16 | })
17 | 


--------------------------------------------------------------------------------
/src/components/header/readme.md:
--------------------------------------------------------------------------------
 1 | # 头部组件
 2 | 
 3 | -----------
 4 | 
 5 | ## 应用示例
 6 | 
 7 | <head-comp :show-logo=true :show-back=false back-text='返回' title="产品详情"  :show-name=false></head-comp>
 8 | 
 9 | ## 参数说明
10 | 
11 | > 左侧信息
12 | show-logo: 显示顶部logo，默认值`false`(仅首页需要显示)
13 | show-back: 显示左侧返回箭头，默认值`true`
14 | back-text: 左侧返回箭头后紧跟的文字，默认值`'返回'`
15 | 
16 | > 中间信息
17 | title: 顶部居中标题
18 | 
19 | > 右侧信息(显示依赖全局的login信息)
20 | show-name: 显示右侧用户名，默认值`false`
21 | show-home-icon: 显示右侧主页icon，默认值`false`
22 | show-img: 显示右侧用户头像，默认值`true`
23 | show-register: 显示注册入口，默认值`false`
24 | show-login: 显示登陆入口，默认值`false`
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <router-view></router-view>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 
13 | <style lang="less">
14 | html{
15 |     font-size: 20px;
16 | }
17 | body, h1, h2, h3, p {
18 |     margin: 0;
19 |     padding: 0;
20 | }
21 | a {
22 |     text-decoration: none;
23 | }
24 | li {
25 |     list-style: none;
26 | }
27 | .f-fl {
28 |     float: left;
29 | }
30 | .f-fr {
31 |     float: right;
32 | }
33 | .f-cb {
34 |     display: block;
35 |     zoom: 1;
36 |     &:after {
37 |         content: "";
38 |         display: block;
39 |         font-size: 0;
40 |         height: 0;
41 |         clear: both;
42 |         visibility: hidden;
43 |     }
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 |     <title>vue-qq-music</title>
 6 |     <link rel="shortcut icon" href="https://y.qq.com/favicon.ico?max_age=2592000">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8 |     <meta name="format-detection" content="telephone=no, email=no">
 9 |     <meta name="apple-mobile-web-app-capable" content="yes">
10 |     <meta name="apple-mobile-web-app-status-bar-style" content="black">
11 |     <meta http-equiv="Cache-Control" content="no-transform">
12 |     <meta http-equiv="Cache-Control" content="no-siteapp">
13 |   </head>
14 |   <body>
15 |     <div id="app"></div>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/vuex/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | export default new Vuex.Store({
 6 | 	state: {
 7 | 		curTab: 0,
 8 | 		curSong: '',
 9 | 		songIndex: 0,
10 | 		songList: [],
11 | 	},
12 | 	mutations: {
13 | 		changeTab (state, n) {
14 | 			state.curTab = n;
15 | 		},
16 | 		changeSong (state, song) {
17 | 			state.curSong = song;
18 | 		},
19 | 		changeSongIndex (state, index) {
20 | 			state.songIndex = index;
21 | 		},
22 | 		changeSongList (state, songList) {
23 | 			state.songList = songList;
24 | 		}
25 | 	},
26 | 	getters: {
27 | 		getTab (state, getters) {
28 | 			return state.curTab;
29 | 		},
30 | 		getSong (state, getters) {
31 | 			return state.curSong;
32 | 		},
33 | 		getSongIndex (state, getters) {
34 | 			return state.songIndex;
35 | 		},
36 | 		getSongByIndex (state, getters) {
37 | 			return state.songList[state.songIndex];
38 | 		}
39 | 	}
40 | })


--------------------------------------------------------------------------------
/src/localStorage.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 | 	set: function(key, val) {
 3 | 		localStorage.setItem(key, val);
 4 | 	},
 5 | 	get: function(key) {
 6 | 		return localStorage.getItem(key);
 7 | 	},
 8 | 	clear: function() {
 9 | 		localStorage.clear();
10 | 	},
11 | 	pushArray: function(arr, val) {
12 | 		let curArr = this.getArray(arr);
13 | 
14 | 		if (curArr.length == 0) {
15 | 			this.set(arr, val);
16 | 		} else {
17 | 			let index = curArr.indexOf(val);
18 | 			if (index >= 0) {
19 | 				curArr.splice(index, 1);
20 | 			}
21 | 			curArr.unshift(val);
22 | 			this.set(arr, curArr.join(','))
23 | 		}
24 | 	},
25 | 	getArray: function (arr, n) { // 获取最后 n 个元素，不足则全部返还，默认 n = 10
26 | 		var keys = this.get(arr),
27 | 			boundary = n || 10,
28 | 			result = keys ? keys.split(',') : [];
29 | 
30 | 		if (result.length > boundary) {
31 | 			result = result.slice(0, boundary);
32 | 			this.set(arr, result.join(',')); // 防止占用太多本地存储空间，并且过多数据处理起来性能更低
33 | 		}
34 | 		return result;
35 | 	}
36 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Recommend from 'views/recommend/index'
 4 | import Rank from 'views/rank/index'
 5 | import ListDetail from 'views/rank/detail'
 6 | import Search from 'views/search/index'
 7 | import Playing from 'views/playing'
 8 | import Singer from 'views/singer-page'
 9 | 
10 | Vue.use(Router);
11 | 
12 | var route = new Router({
13 |   routes: [
14 |     {
15 |       path: '/',
16 |       name: 'Home',
17 |       component: Recommend
18 |     },
19 |     {
20 |       path: '/recommend',
21 |       component: Recommend
22 |     },
23 |     {
24 |       path: '/rank',
25 |       component: Rank
26 |     },
27 |     {
28 |       path: '/search',
29 |       name: 'Search',
30 |       component: Search
31 |     },
32 |     {
33 |       name: 'ListDetail',
34 |       path: '/listDetail/:id',
35 |       component: ListDetail
36 |     },
37 |     {
38 |       name: 'Playing',
39 |       path: '/playing/:songid',
40 |       component: Playing
41 |     },
42 |     {
43 |       name: 'Singer',
44 |       path: '/singer/:singerid',
45 |       component: Singer
46 |     }
47 |   ]
48 | })
49 | 
50 | 
51 | export default route;
52 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: './', // 原来是 '/' 为了build后在本地能打开故改成'./' by chengjun
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/header/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="head f-cb">
 3 | 		<router-link to="/recommend" :class="{'active' :curTab == 0}"><span @click="changeChannel(0)">推荐</span></router-link>
 4 | 		<router-link to="/rank" :class="{'active' :curTab == 1}"><span @click="changeChannel(1)">排行榜</span></router-link>
 5 | 		<router-link :to="{name: 'Search'}" :class="{'active' :curTab == 2}"><span @click="changeChannel(2)">搜索</span></router-link>
 6 | 	</div>
 7 | </template>
 8 | 
 9 | <script>
10 | 	import router from '../../router'
11 | 	import store from '../../vuex/store'
12 | 
13 | 	export default {
14 | 		data: function() {
15 | 			return {
16 | 				curTab: store.getters.getTab
17 | 			}
18 | 		},
19 | 		methods: {
20 | 			changeChannel (arg) {
21 | 				store.commit('changeTab', arg);
22 | 			}
23 | 		}
24 | 	}
25 | </script>
26 | 
27 | <style lang="less">
28 | 	.head {
29 | 		background-color: #fff;
30 | 		height: 2.25rem;
31 | 		line-height: 2.25rem;
32 | 		font-size: 0.8rem;
33 | 		color: #fff;
34 | 		text-align: center;
35 | 		position: relative;
36 | 		display: -webkit-box;
37 | 		display: -webkit-flex;
38 | 		display: flex;
39 | 		.active {
40 | 			position: relative;
41 | 			color: #31c27c;
42 | 			&:after {
43 | 				content: '';
44 | 				position: absolute;
45 | 				bottom: 0;
46 | 				left: 0;
47 | 				width: 100%;
48 | 				height: 2px;
49 | 				background-color: #31c27c;
50 | 			}
51 | 		}
52 | 		a {
53 | 			-webkit-box-flex: 1;
54 | 			-webkit-flex: 1;
55 | 			flex: 1;
56 | 			width: 0;
57 | 			color: rgba(0,0,0,.6);
58 | 			span {
59 | 				display: block;
60 | 			}
61 | 		}
62 | 		
63 | 	}
64 | </style>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 一个假的qq音乐Vue SPA qq_music
 2 | 
 3 | > 我可能做了一个假的qq音乐demo， 本demo参考`https://y.qq.com`开发的，难怪跟网上其他人的案例界面不一样。。。Orz
 4 | 
 5 | ## QQ音乐小程序版本
 6 | 
 7 | **项目地址：**[查看](https://github.com/chengjun2014/wx_QQmusic)
 8 | 
 9 | ## Build Setup
10 | 
11 | ``` bash
12 | # 安装依赖
13 | npm install
14 | 
15 | # serve with hot reload at localhost:8080 启动服务
16 | npm run dev （会自动启动浏览器运行项目）
17 | 
18 | # build for production with minification
19 | npm run build （对这里已经优化了配置文件使 build 生成的文件可以在本地查看，或作为静态页面线上预览）
20 | 
21 | # build for production and view the bundle analyzer report
22 | npm run build --report
23 | 
24 | ```
25 | ## 功能实现
26 | 
27 | 首页：banner滚动效果实现，电台下级页面未接入（配的活动页或列表页，情况太复杂没有固定的借口）
28 | 
29 | 排行榜：完成榜单列表和榜单歌曲list，并可播放榜单歌曲，榜单页播放按钮可播放当前专辑第一首歌曲
30 | 
31 | 搜索页：搜索功能完成，并完成歌手的个人页面，添加搜索框回车提交；热词点击即触发搜索
32 | 
33 | 播放页：歌曲正常播放，歌词同步高亮／滚动；播单显示正常；未做播放控制／收藏功能，播发完自动切换到停止状态
34 | 
35 | 搜索结果页：搜索结果正常显示／跳转到对应播放页面
36 | 
37 | 搜索历史去重／排序
38 | 
39 | 自定义 `localstorage` 方法，添加／删除／清空数据；
40 | 
41 | 优化 `localstorage` 可存／取数组类型（通过序列化和反序列化）
42 | 
43 | 父子模块间数据通信、交互事件相应（播放页面点击列表切换播放页当前播放歌曲，子组件事件传递给父组件）
44 | 
45 | 
46 | > 个人闲暇时间里做的————持续更新／优化
47 | 
48 | ## 目前存在的问题
49 | 
50 | 组件划分还不够精细，这个需要更多经验和对产品的理解
51 | 
52 | 代码优化还有待加强
53 | 
54 | 数据请求可以用api.js统一管理，组件只关心参数和返回值即可
55 | 
56 | action管理可以通过dispatch 或commit触发获取数据
57 | 
58 | ## 优点
59 | 
60 | 用到了比较新且全面的 `Vue` 相关的技术栈，
61 | 
62 | 1. "vue": "^2.1.10",
63 | 2. "vue-awesome-swiper": "^2.3.2",
64 | 3. "vue-resource": "^1.2.0",
65 | 4. "vue-router": "^2.2.0",
66 | 5. "vuex": "^2.1.2"
67 | 
68 | 代码格式比较整齐（换过一次IDE，可能个别文件缩紧不统一，见到时候会调整回来）
69 | 
70 | 
71 | ## 案例截图
72 | 
73 | 截图是早期版本，最终完成效果以代码运行为准，建议clone代码到本地运行查看效果或源码
74 | 
75 | 
76 | ### 切换到手机模式在浏览器里打开[点击预览](http://dabaipm.cn/qq_music/index.html)
77 | 
78 | 
79 | 
80 | 
81 | ![image](https://github.com/chengjun2014/qq_music/blob/master/playing.png)
82 | 
83 | 
84 | 
85 | ![image](https://github.com/chengjun2014/qq_music/blob/master/music.gif)
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 


--------------------------------------------------------------------------------
/src/components/lyc-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="lyc">
 3 |       <div class="lyc-wrap-inner" ref="lycList" :style="{top: top}">
 4 |             <template v-for='(item, index) in lycArr'>
 5 |                 <p :class='{"lyc-active": index == curIndex}'>{{item.lyc}}</p>
 6 |             </template>
 7 |       </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |     data() {
14 |         return {
15 |             curIndex: 0,
16 |             top: 0
17 |         }
18 |     },
19 |     props: {
20 |         lycArr: Array,
21 |         currentTime: Number
22 |     },
23 |     methods: {
24 | 
25 |     },
26 |     watch: {
27 |         currentTime: function(newNum, oldNum) {
28 |             if (!this.lycArr[this.curIndex]) {
29 |                 return;
30 |             }
31 | 
32 |             if(this.lycArr[this.curIndex + 1] && newNum >= this.lycArr[this.curIndex + 1]['time']) {
33 |                 this.curIndex++;
34 |             }
35 | 
36 |             if (this.curIndex > 3 && this.curIndex < this.lycArr.length - 5) {
37 |                 this.top = (3 - this.curIndex) * 2 + 'rem';
38 |             }
39 |         },
40 |         lycArr: function(lyc, oldlyc) {
41 |             this.top = 0;
42 |             this.curIndex = 0;
43 |         }
44 |     }
45 | }
46 | </script>
47 | 
48 | <style lang='less'>
49 | .lyc {
50 |     height: 18rem;
51 |     width: 100%;
52 |     overflow: hidden;
53 |     position: relative;
54 | 
55 |     .lyc-wrap-inner {
56 |         position: absolute;
57 |         top: 0;
58 |         left: 0;
59 |         width: 100%;
60 |         transition: top 350ms;
61 |         p {
62 |             padding: 0 1rem;
63 |             box-sizing: border-box;
64 |             white-space: nowrap;
65 |             overflow: hidden;
66 |             text-overflow: ellipsis;
67 |         }
68 |     }
69 | }
70 | 
71 | .lyc-active {
72 |     color: #31c27c;
73 | }
74 | 
75 | </style>
76 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lima_spa",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "程军 <bjchengjun@corp.netease.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "build": "node build/build.js"
10 |   },
11 |   "dependencies": {
12 |     "less": "^2.7.2",
13 |     "vue": "^2.1.10",
14 |     "vue-awesome-swiper": "^2.3.2",
15 |     "vue-resource": "^1.2.0",
16 |     "vue-router": "^2.2.0",
17 |     "vuex": "^2.1.2"
18 |   },
19 |   "devDependencies": {
20 |     "ansi-html": "^0.0.7",
21 |     "ansi-regex": "^2.1.1",
22 |     "autoprefixer": "^6.7.2",
23 |     "babel-core": "^6.22.1",
24 |     "babel-loader": "^6.2.10",
25 |     "babel-plugin-transform-runtime": "^6.22.0",
26 |     "babel-preset-es2015": "^6.22.0",
27 |     "babel-preset-stage-2": "^6.22.0",
28 |     "babel-register": "^6.22.0",
29 |     "chalk": "^1.1.3",
30 |     "connect-history-api-fallback": "^1.3.0",
31 |     "copy-webpack-plugin": "^4.0.1",
32 |     "css-loader": "^0.26.1",
33 |     "eventsource-polyfill": "^0.9.6",
34 |     "express": "^4.14.1",
35 |     "extract-text-webpack-plugin": "^2.0.0-rc.3",
36 |     "file-loader": "^0.10.0",
37 |     "friendly-errors-webpack-plugin": "^1.1.3",
38 |     "function-bind": "^1.1.0",
39 |     "html-entities": "^1.2.0",
40 |     "html-webpack-plugin": "^2.28.0",
41 |     "http-proxy-middleware": "^0.17.3",
42 |     "less-loader": "^2.2.3",
43 |     "opn": "^4.0.2",
44 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
45 |     "ora": "^1.1.0",
46 |     "rimraf": "^2.6.0",
47 |     "semver": "^5.3.0",
48 |     "strip-ansi": "^3.0.1",
49 |     "swiper": "^3.4.1",
50 |     "url-loader": "^0.5.7",
51 |     "vue-loader": "^11.0.0",
52 |     "vue-style-loader": "^2.0.0",
53 |     "vue-template-compiler": "^2.1.10",
54 |     "webpack": "^2.2.1",
55 |     "webpack-bundle-analyzer": "^2.2.1",
56 |     "webpack-dev-middleware": "^1.10.0",
57 |     "webpack-hot-middleware": "^2.16.1",
58 |     "webpack-merge": "^2.6.1"
59 |   },
60 |   "engines": {
61 |     "node": ">= 4.0.0",
62 |     "npm": ">= 3.0.0"
63 |   }
64 | }


--------------------------------------------------------------------------------
/src/components/song-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<li class="song-list">
  3 | 		<h3 class="song-list-no">{{listindex + 1}}</h3>
  4 | 		<router-link :to="{name: 'Playing', params: {songid: listdata.songid}}" class="song-list-cont">
  5 | 			<div @click='toPlay(listdata)'>
  6 | 				<p class="song-name nowrap">{{listdata.songname}}</p>
  7 | 				
  8 | 				<p class="song-info nowrap">
  9 | 					<template v-for='(item, index) in listdata.singer'>
 10 | 						<span v-if='index > 0'>&nbsp;/&nbsp;</span>{{item.name}}
 11 | 					</template>
 12 | 					<span class="icon icon-point"></span>
 13 | 					{{listdata.albumname}}
 14 | 					<template v-if='listdata.albumdesc'>
 15 | 						<span class="icon icon-point"></span>
 16 | 						{{listdata.albumdesc}}
 17 | 					</template>
 18 | 				</p>
 19 | 			</div>
 20 | 		</router-link>
 21 | 	</li>
 22 | </template>
 23 | 
 24 | <script>
 25 | 	import store from '../vuex/store'
 26 | 
 27 | 	export default {
 28 | 		props: {
 29 | 			listdata: {
 30 | 				type: Object,
 31 | 				default: {}
 32 | 			},
 33 | 			listindex: {
 34 | 				type: Number,
 35 | 				default: 1
 36 | 			}
 37 | 		},
 38 | 		methods: {
 39 | 			toPlay: function(songInfo) {
 40 | 				store.commit('changeSong', songInfo);
 41 | 				store.commit('changeSongIndex', this.listindex);
 42 | 			}
 43 | 		}
 44 | 	}
 45 | </script>
 46 | 
 47 | <style lang='less'>
 48 | 	.nowrap {
 49 | 		white-space: nowrap;
 50 | 		overflow: hidden; 
 51 | 		text-overflow: ellipsis;
 52 | 	}
 53 | 	.song-list {
 54 | 		display: -webkit-box;
 55 | 		display: -webkit-flex;
 56 | 		display: flex;
 57 | 		-webkit-box-align: center;
 58 | 	    -webkit-align-items: center;
 59 | 	    align-items: center;
 60 | 		font-size: 0.9rem;
 61 | 		height: 3rem;
 62 | 		color: #fff;
 63 | 		position: relative;
 64 | 		.song-list-no {
 65 | 			flex: none;
 66 | 			width: 1.5rem;
 67 | 			margin-right: 0.5rem;
 68 | 			margin-top: -0.5rem;
 69 | 			text-align: center;
 70 | 			font-weight: normal;
 71 | 			box-sizing: border-box;
 72 | 			font-size: 0.85rem;
 73 | 		}
 74 | 		&:after {
 75 | 			content: '';
 76 | 			position: absolute;
 77 | 			left: 0;
 78 | 			bottom: 0;
 79 | 			right: 0;
 80 | 			height: 1px;
 81 | 			margin-left:2rem;
 82 | 			background-color: rgba(255,255,255,.15);
 83 | 			-webkit-transform: scaleY(.5);
 84 | 		}
 85 | 
 86 | 		.song-list-cont {
 87 | 		    -webkit-box-flex: 1;
 88 | 	        -webkit-flex: 1;
 89 | 			flex: 1;
 90 | 			width: 0;
 91 | 			color: #fff;
 92 | 			display: block;
 93 | 		}
 94 | 		.song-info {
 95 | 			font-size: 0.7rem;
 96 | 			vertical-align: middle;
 97 | 			color: rgba(255,255,255,.6);
 98 | 			.icon-point {
 99 | 				display: inline-block;
100 | 				width: 2px;
101 | 				height: 2px;
102 | 				border-radius: 50%;
103 | 				background-color: #fff;
104 | 				margin: 0 4px;
105 | 				vertical-align: middle;
106 | 			}
107 | 		}
108 | 	}
109 | </style>


--------------------------------------------------------------------------------
/src/base64.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by sioxa on 2016/12/30 0030.
  3 |  */
  4 | 
  5 | // //1.加密
  6 | // var str = '124中文内容';
  7 | // var base = new Base64();
  8 | // var result = base.encode(str);
  9 | // //document.write(result);
 10 | //
 11 | // //2.解密
 12 | // var result2 = base.decode(result);
 13 | // document.write(result2);
 14 | const _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
 15 | 
 16 | // private method for UTF-8 encoding
 17 | function _utf8_encode(string) {
 18 |   string = string.replace(/\r\n/g, "\n");
 19 |   var utftext = "";
 20 |   for (var n = 0; n < string.length; n++) {
 21 |     var c = string.charCodeAt(n);
 22 |     if (c < 128) {
 23 |       utftext += String.fromCharCode(c);
 24 |     } else if ((c > 127) && (c < 2048)) {
 25 |       utftext += String.fromCharCode((c >> 6) | 192);
 26 |       utftext += String.fromCharCode((c & 63) | 128);
 27 |     } else {
 28 |       utftext += String.fromCharCode((c >> 12) | 224);
 29 |       utftext += String.fromCharCode(((c >> 6) & 63) | 128);
 30 |       utftext += String.fromCharCode((c & 63) | 128);
 31 |     }
 32 | 
 33 |   }
 34 |   return utftext;
 35 | }
 36 | 
 37 | function _utf8_decode(utftext) {
 38 |   var string = "";
 39 |   var i = 0;
 40 |   var c = 0;
 41 |   var c3 = 0;
 42 |   var c2 = 0;
 43 |   while (i < utftext.length) {
 44 |     c = utftext.charCodeAt(i);
 45 |     if (c < 128) {
 46 |       string += String.fromCharCode(c);
 47 |       i++;
 48 |     } else if ((c > 191) && (c < 224)) {
 49 |       c2 = utftext.charCodeAt(i + 1);
 50 |       string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
 51 |       i += 2;
 52 |     } else {
 53 |       c2 = utftext.charCodeAt(i + 1);
 54 |       c3 = utftext.charCodeAt(i + 2);
 55 |       string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
 56 |       i += 3;
 57 |     }
 58 |   }
 59 |   return string;
 60 | }
 61 | 
 62 | export default {
 63 |   // public method for encoding
 64 |   encode: function (input) {
 65 |     var output = "";
 66 |     var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
 67 |     var i = 0;
 68 |     input = _utf8_encode(input);
 69 |     while (i < input.length) {
 70 |       chr1 = input.charCodeAt(i++);
 71 |       chr2 = input.charCodeAt(i++);
 72 |       chr3 = input.charCodeAt(i++);
 73 |       enc1 = chr1 >> 2;
 74 |       enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
 75 |       enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
 76 |       enc4 = chr3 & 63;
 77 |       if (isNaN(chr2)) {
 78 |         enc3 = enc4 = 64;
 79 |       } else if (isNaN(chr3)) {
 80 |         enc4 = 64;
 81 |       }
 82 |       output = output +
 83 |         _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
 84 |         _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
 85 |     }
 86 |     return output;
 87 |   },
 88 | 
 89 |   // public method for decoding
 90 |   decode: function (input) {
 91 |     var output = "";
 92 |     var chr1, chr2, chr3;
 93 |     var enc1, enc2, enc3, enc4;
 94 |     var i = 0;
 95 |     input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 96 |     while (i < input.length) {
 97 |       enc1 = _keyStr.indexOf(input.charAt(i++));
 98 |       enc2 = _keyStr.indexOf(input.charAt(i++));
 99 |       enc3 = _keyStr.indexOf(input.charAt(i++));
100 |       enc4 = _keyStr.indexOf(input.charAt(i++));
101 |       chr1 = (enc1 << 2) | (enc2 >> 4);
102 |       chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
103 |       chr3 = ((enc3 & 3) << 6) | enc4;
104 |       output = output + String.fromCharCode(chr1);
105 |       if (enc3 != 64) {
106 |         output = output + String.fromCharCode(chr2);
107 |       }
108 |       if (enc4 != 64) {
109 |         output = output + String.fromCharCode(chr3);
110 |       }
111 |     }
112 |     output = _utf8_decode(output);
113 |     return output;
114 |   }
115 | }


--------------------------------------------------------------------------------
/src/views/rank/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<head-comp></head-comp>
  4 | 		<div class="rank-wrap">
  5 | 		<template v-for="list in topList">
  6 | 			<router-link :to="{name: 'ListDetail', params: {id: list.id}}" class="">
  7 | 				<div class="top-img-wrap rel">
  8 | 					<img :src="list.picUrl" alt="" class="top-img">
  9 | 					<p class="nowrap">{{list.listenCount | smaller}}</p>
 10 | 				</div>
 11 | 				<div class="top-summary rel">
 12 | 					<h3>{{list.topTitle}}</h3>
 13 | 					<template v-for='(item, index) in list.songList'>
 14 | 						<p><span>{{index + 1}}</span>&nbsp; {{item.songname}}&nbsp;<span>-&nbsp;{{item.singername}}</span></p>
 15 | 					</template>
 16 | 					<i class="icon icon-arrow"></i>
 17 | 				</div>
 18 | 			</router-link>
 19 | 		</template>
 20 | 		</div>
 21 | 		<a href="" class="link2client">去客户端发现更多好音乐&gt;</a>
 22 | 	</div>
 23 | </template>
 24 | 
 25 | <script>
 26 | 	import HeadComp from '../../components/header/index'
 27 | 
 28 | 	export default {
 29 | 		data () {
 30 | 			return {
 31 | 				topList: []
 32 | 			}
 33 | 	    },
 34 | 		components: {
 35 | 			HeadComp
 36 | 		},
 37 | 		filters: {
 38 | 			smaller: function (num) {
 39 | 				if (num) {
 40 | 					return (num/10000).toFixed(1) + '万'
 41 | 				}
 42 | 			}
 43 | 		},
 44 | 		beforeMount () {
 45 | 			this.$http.jsonp('https://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg', {
 46 | 			    params: {
 47 | 					g_tk: 5381,
 48 | 					uin: 0,
 49 | 					format: 'jsonp',
 50 | 					inCharset: 'utf-8',
 51 | 					outCharset: 'utf-8',
 52 | 					notice: 0,
 53 | 					platform: 'h5',
 54 | 					needNewCode: 1,
 55 | 					_: new Date().getTime()
 56 | 			    },
 57 | 			    jsonp: 'jsonpCallback'
 58 | 			}).then(function (response) {
 59 | 			  	this.topList = response.body.data.topList;
 60 | 			})
 61 | 		}
 62 | 	}
 63 | </script>
 64 | 
 65 | <style lang='less'>
 66 | 	.rel {
 67 | 		position: relative;
 68 | 	}
 69 | 	.top-img-wrap {
 70 | 		flex: none;
 71 | 
 72 | 		.top-img {
 73 | 			width: 5rem;
 74 | 			height: 5rem;
 75 | 			margin-right: 0.5rem;
 76 | 			display: block;
 77 | 		}
 78 | 		p {
 79 | 			position: absolute;
 80 | 			left: 0.5rem;
 81 | 			bottom: 0;
 82 | 			font-size: 0.6rem;
 83 | 			color: #fff;
 84 | 		}
 85 | 	}
 86 | 	.rank-wrap {
 87 | 		padding: 0.5rem;
 88 | 		background-color: #f4f4f4;
 89 | 
 90 | 		a {
 91 | 			margin-bottom: 0.5rem;
 92 | 			background-color: #fff;
 93 | 			display: -webkit-box;
 94 | 		    display: -webkit-flex;
 95 | 		    display: flex;
 96 | 		    font-size: 0.7rem;
 97 | 		    line-height: 1.5em;
 98 | 		    color: #000;
 99 | 		    &:last-child {
100 | 		    	margin: 0;
101 | 		    }
102 | 		    .top-img-wrap {
103 | 		    	p {
104 | 		    		opacity: 0.6;
105 | 		    	}
106 | 		    }
107 | 		    .top-summary {
108 | 			    h3 {
109 | 			    	font-size: 0.8rem;
110 | 			    	white-space: nowrap;
111 | 			    	overflow: hidden;
112 | 			    	text-overflow: ellipsis;
113 | 			    	line-height: 1.8em;
114 | 			    	margin-bottom: 0.3rem;
115 | 			    }
116 | 			    p {
117 | 			    	white-space: nowrap;
118 | 			    	overflow: hidden;
119 | 			    	text-overflow: ellipsis;
120 | 			    	span {
121 | 			    		color: rgba(0, 0, 0, .5);
122 | 			    	}
123 | 			    }
124 | 			    .icon-arrow {
125 | 			    	position: absolute;
126 | 		    	    right: 10px;
127 | 		    	    top: 50%;
128 | 		    	    margin-top: -4px;
129 | 		    	    width: 6px;
130 | 		    	    height: 6px;
131 | 		    	    border-right: 1px solid #b2b2b2;
132 | 		    	    border-bottom: 1px solid #b2b2b2;
133 | 		    	    -webkit-transform: rotate(-45deg);
134 | 			    }
135 | 		    }
136 | 		}
137 | 
138 | 		.top-summary {
139 | 			flex: 1;
140 | 			width: 0;
141 | 			padding-right: 0.6rem;
142 | 		}
143 | 	}
144 | 
145 | 	.link2client {
146 | 		display: block;
147 | 		height: 1.8rem;
148 | 		line-height: 1.8rem;
149 | 		color: rgba(0,0,0,.6);
150 | 		font-size: 0.7rem;
151 | 		text-align: center;
152 | 		background-color: #f4f4f4;
153 | 		margin-bottom: 0;
154 | 	}
155 | </style>
156 | 
157 | 


--------------------------------------------------------------------------------
/src/components/search-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <ul class="search-content">
  3 |         <template v-if='dataList.zhida.type == 2'>
  4 |             <li>
  5 |                 <router-link class="flex-box" :to="{name: 'Singer', params: {singerid: dataList.zhida.singermid}}">
  6 |                     <div class="flex-icon">
  7 |                         <img :src="src" alt="">
  8 |                     </div>
  9 |                     <div class="music-info">
 10 |                         <h3>{{dataList.zhida.singername}}</h3>
 11 |                         <p>
 12 |                             单曲：{{dataList.zhida.songnum}}
 13 |                             专辑：{{dataList.zhida.albumnum}}
 14 |                         </p>
 15 |                     </div>
 16 |                 </router-link>
 17 |             </li>
 18 |         </template>
 19 |         <template v-for='item in dataList.song.list'>
 20 |             <li>
 21 |                 <router-link :to="{name: 'Playing', params: {songid: item.songid}}">
 22 |                     <div class="flex-box" @click='toPlay(item)'>
 23 |                         <div class="flex-icon">
 24 |                             <i class="icon-music"></i>
 25 |                         </div>
 26 |                         <div class="music-info">
 27 |                             <h3>{{item.songname}}</h3>
 28 |                             <p>
 29 |                                 <template v-for='(singer, index) in item.singer'>
 30 |                                     <span v-if='index'>&nbsp;/&nbsp;</span>
 31 |                                     {{singer.name}}
 32 |                                 </template>
 33 |                             </p>
 34 |                         </div>
 35 |                     </div>
 36 |                 </router-link>
 37 |             </li>
 38 |         </template>
 39 |     </ul>
 40 | </template>
 41 | 
 42 | <script>
 43 | import store from '../vuex/store'
 44 | export default {
 45 |     data () {
 46 |         return {
 47 |             
 48 |         }
 49 |     },
 50 |     props: {
 51 |         dataList: {
 52 |             type: Object,
 53 |             default: {}
 54 |         }
 55 |     },
 56 |     render () {
 57 |         
 58 |     },
 59 |     methods: {
 60 |         toPlay: function(songInfo) {
 61 |             store.commit('changeSong', songInfo);
 62 |         }
 63 |     },
 64 |     computed: {
 65 |         src: function() {
 66 |             return "http://y.gtimg.cn/music/photo_new/T001R68x68M000" + this.dataList.zhida.singermid + ".jpg"
 67 |         }
 68 |     }
 69 | }
 70 | </script>
 71 | 
 72 | <style lang='less'>
 73 |     .search-content {
 74 |         font-size: 0.6rem;
 75 |         background-color: #fff;
 76 |         li {
 77 |             border-bottom: 1px solid #e5e5e5;
 78 |             padding: 0.4rem;
 79 |             a {
 80 |                 color: #808080;
 81 |             }
 82 |         }
 83 |         .flex-box {
 84 |             display: -webkit-box;
 85 |             display: -webkit-flex;
 86 |             display: flex;
 87 |         }
 88 |         .flex-icon {
 89 |             width: 2rem;
 90 |             height: 2rem;
 91 |             margin-right: 0.6rem;
 92 |             border-radius: 50%;
 93 |             overflow: hidden;
 94 |             img {
 95 |                 width: 100%;
 96 |             }
 97 |         }
 98 |         .icon-music {
 99 |             background: url(../assets/search_sprite.png) left top no-repeat;
100 |             background-size: cover;
101 |             width: 1.1rem;
102 |             height: 1rem;
103 |             display: block;
104 |             margin: 0.5rem 0 0 0.5rem;
105 |         }
106 |         .music-info {
107 |             -webkit-box-flex: 1;
108 |             -webkit-flex: 1;
109 |             flex: 1;
110 |             border-radius: 0;
111 |         }
112 |         h3 {
113 |             font-size: 0.8rem;
114 |             color: #000;
115 |             font-weight: normal;
116 |         }
117 |     }
118 | 
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/views/rank/detail.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<div class="header rel">
  4 | 			<img :src="topinfo.pic_album" :alt="topinfo.ListName" class="header-bg">
  5 | 			
  6 | 			<div class="album-mask" :style="{color: transferColor}"></div>
  7 | 			<div class="album-info">
  8 | 				<div class="album-title">
  9 | 					<h1 class="nowrap">{{topinfo.ListName}}</h1>
 10 | 					<p class="nowrap">{{update_time}}&nbsp;更新</p>
 11 | 				</div>
 12 | 				<div class="album-play" @click="toPlay"></div>
 13 | 			</div>
 14 | 		</div>
 15 | 
 16 | 		<ul class="list" :style="{backgroundColor: transferColor}">
 17 | 			<template v-for="(list, index) in songlist">
 18 | 				<song-list :listdata="list.data" :listindex="index"></song-list>
 19 | 			</template>
 20 | 		</ul>
 21 | 	</div>
 22 | </template>
 23 | 
 24 | <script>
 25 | 	import SongList from '../../components/song-list'
 26 | 	import router from '../../router'
 27 | 	import store from '../../vuex/store'
 28 | 
 29 | 	export default {
 30 | 		data () {
 31 | 	      return {
 32 | 	        songlist: [],
 33 | 	        topinfo: [],
 34 | 	        id: this.$route.params.id,
 35 | 	        color: 0,
 36 | 	        update_time: ''
 37 | 	      }
 38 | 	    },
 39 | 	    methods: {
 40 | 	    	toPlay: function() {
 41 | 	    		let _song = this.songlist[0].data;
 42 |             	store.commit('changeSong', _song);
 43 | 
 44 | 	    		router.push({
 45 | 	    			name: 'Playing',
 46 | 	    			params: {
 47 | 	    				songid: _song.songid
 48 | 	    			}
 49 | 	    		});
 50 | 	    	}
 51 | 	    },
 52 | 		computed: {
 53 | 			transferColor: function() {
 54 | 				var t = this.color, computedColor;
 55 | 				function n(t) {
 56 | 					return t > 16 ? t.toString(16) : "0" + t.toString(16);
 57 | 				}
 58 | 				if (t) {
 59 | 					var o = (16711680 & t) >> 16, a = (65280 & t) >> 8, i = 255 & t;
 60 | 
 61 | 					var s = n(o) + n(a) + n(i);
 62 | 					computedColor = '#' + s;
 63 | 				} else {
 64 | 					computedColor = '#000';
 65 | 				}
 66 | 				return computedColor;
 67 | 			}
 68 | 		},
 69 | 		components: {
 70 | 			SongList
 71 | 		},
 72 | 		beforeMount () {
 73 | 			this.$http.jsonp('https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg', {
 74 | 			    params: {
 75 | 					g_tk: 5381,
 76 | 					uin: 0,
 77 | 					format: 'jsonp',
 78 | 					inCharset: 'utf-8',
 79 | 					outCharset: 'utf-8',
 80 | 					notice: 0,
 81 | 					platform: 'h5',
 82 | 					needNewCode: 1,
 83 | 					page: 'detail',
 84 | 					type: 'top',
 85 | 					topid: this.id,
 86 | 					_: new Date().getTime()
 87 | 			    },
 88 | 			    jsonp: 'jsonpCallback'
 89 | 			}).then(function (response) {
 90 | 			  	this.songlist = response.body.songlist;
 91 | 			  	this.topinfo = response.body.topinfo;
 92 | 			  	this.color = response.body.color;
 93 | 			  	this.update_time = response.body.update_time;
 94 | 				store.commit('changeSongList', this.songlist.slice(0, 50));
 95 | 			})
 96 | 		}
 97 | 	}
 98 | </script>
 99 | 
100 | <style lang='less'>
101 | 	.header {
102 | 		.header-bg {
103 | 			width: 100%;
104 | 			display: block;
105 | 		}
106 | 
107 | 		.album-mask {
108 | 			position: absolute;
109 | 			bottom: 0;
110 | 			left: 0;
111 | 			right: 0;
112 | 			padding-top: 60%;
113 | 			height: 0;
114 | 			z-index: 2;
115 | 			background-image: -webkit-linear-gradient(top,transparent,currentColor 80%);
116 | 		}
117 | 
118 | 		.album-info {
119 | 			position: absolute;
120 | 			bottom: 0;
121 | 			left: 0;
122 | 			right: 0;
123 | 			z-index: 3;
124 | 			display: -webkit-box;
125 | 			display: flex;
126 | 			-webkit-box-align: center;
127 | 		    -webkit-align-items: center;
128 | 		    align-items: center;
129 | 			margin: 0 15px 25px;
130 | 			color: #fff;
131 | 
132 | 			.album-title {
133 | 				-webkit-box-flex: 1;
134 | 				-webklit-flex: 1;
135 | 				flex: 1;
136 | 				width: 0;
137 | 				line-height: 1.5em;
138 | 				h1 {
139 | 					font-weight: normal;
140 | 					font-size: 1.2rem;
141 | 				}
142 | 				p {
143 | 					font-size: 0.7rem;
144 | 				}
145 | 			}
146 | 
147 | 			.album-play {
148 | 				margin-left: 0.6rem;
149 | 				width: 2rem;
150 | 				height: 2rem;
151 | 				background: url(../../assets/list_sprite.png);
152 | 				background-size: cover;
153 | 				cursor: pointer;
154 | 			}
155 | 		}
156 | 	}
157 | 
158 | 	.list {
159 | 		padding: 0 0.5rem;
160 | 		margin: 0;
161 | 	}
162 | </style>
163 | 


--------------------------------------------------------------------------------
/src/views/recommend/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 | 	<head-comp></head-comp>
  4 | 	<div id="main">
  5 | 		<swiper class="my-swipe" :options="swiperOption">
  6 | 		  <swiper-slide class="silde" v-for="item in sliderData" :key="item.alt">
  7 | 		    <a :href="item.href">
  8 | 		      <img :src="item.src ":alt="item.alt" />
  9 | 		    </a>
 10 | 		  </swiper-slide>
 11 | 		  <div class="swiper-pagination" slot="pagination"></div>
 12 | 		</swiper>
 13 | 	</div>
 14 | 
 15 | 	<div class="radio-wrap section-wrap">
 16 | 		<h3 class="sub-title">电台</h3>
 17 | 		<ul class="radio-list">
 18 | 			<li v-for="radio in radioList">
 19 | 				<div>
 20 | 					<div class="radio-img-wrap rel">
 21 | 						<img :src="radio.picUrl" class="cover-img" alt="" onerror="javascript:this.src='https://y.gtimg.cn/mediastyle/mobile/yqq_v5/img/default_pic.jpg';" />
 22 | 						<span class="icon-play"></span>
 23 | 					</div>
 24 | 					<p class="radio-name">{{radio.Ftitle}}</p>
 25 | 				</div>
 26 | 			</li>
 27 | 		</ul>
 28 | 	</div>
 29 | 
 30 | 	<div class="section-wrap">
 31 | 		<h3 class="sub-title">热门歌单</h3>
 32 | 	</div>
 33 | 	<div class="more-info">
 34 | 		<a href="" class="go2app">去客户端发现更多好音乐&gt;</a>
 35 | 		<a href="" class="go2pc">查看电脑版网页</a>
 36 | 		<img class="logo" src="https://y.gtimg.cn/mediastyle/mobile/yqq_v5/img/logo_footer.png?max_age=19830212&d=20151105145423" alt="">
 37 | 		<p class="copy-right">Copyright © 1998 - 2017 Tencent. All Rights Reserved.</p>
 38 | 	</div>
 39 | </div>
 40 | </template>
 41 | 
 42 | <script>
 43 | 	import HeadComp from '../../components/header/index'
 44 | 	import { swiper, swiperSlide } from 'vue-awesome-swiper'
 45 | 
 46 | 	export default {
 47 | 		data () {
 48 | 	      return {
 49 | 	        sliderData: [],
 50 | 	        radioList: [],
 51 | 	        swiperOption: {
 52 | 				autoplay: 3500,
 53 | 				setWrapperSize :true,
 54 | 				pagination : '.swiper-pagination',
 55 | 				paginationClickable :true,
 56 | 				mousewheelControl : true,
 57 | 				observeParents:true,
 58 | 			}
 59 | 	      }
 60 | 	    },
 61 | 		components: {
 62 | 			HeadComp,
 63 | 			swiper,
 64 | 			swiperSlide
 65 | 		},
 66 | 		beforeMount () {
 67 | 			this.$http.jsonp('https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg', {
 68 | 			    params: {
 69 | 					g_tk: 5381,
 70 | 					uin: 0,
 71 | 					format: 'jsonp',
 72 | 					inCharset: 'utf-8',
 73 | 					outCharset: 'utf-8',
 74 | 					notice: 0,
 75 | 					platform: 'h5',
 76 | 					needNewCode: 1,
 77 | 					_: new Date().getTime()
 78 | 			    },
 79 | 			    jsonp: 'jsonpCallback'
 80 | 			}).then(function (response) {
 81 | 			  	let slider = response.data.data.slider;
 82 | 			    for (let i = 0; i < slider.length; i++) {
 83 | 		        	this.sliderData.push({src: slider[i].picUrl, alt: slider[i].id, href: slider[i].linkUrl})
 84 | 			    }
 85 | 
 86 | 			    this.radioList = response.data.data.radioList;
 87 | 			})
 88 | 		},
 89 | 
 90 | 		mounted () {
 91 | 
 92 | 		}
 93 | 	}
 94 | </script>
 95 | 
 96 | <style lang="less">
 97 | 	#app {
 98 | 		background-color: #f4f4f4;
 99 | 		height: 100%;
100 | 	}
101 | 	ul {
102 | 		margin: 0;
103 | 		padding: 0;
104 | 	}
105 | 	#main {
106 | 		.swiper-pagination {
107 | 			bottom: 0;
108 | 		}
109 | 		.swiper-wrapper {
110 | 			img {
111 | 				width: 100%;
112 | 				display: block;
113 | 			}
114 | 		}
115 | 		.swiper-pagination-bullet-active {
116 | 			background-color: #fff;
117 | 		}
118 | 		.product {
119 | 			margin-top: 15px;
120 | 			background-color: #fff;
121 | 			.product-title {
122 | 				border-bottom: 1px solid #eee;
123 | 				height: 1.8rem;
124 | 				line-height: 1.8rem;
125 | 				font-size: 0.8rem;
126 | 				padding-left: 0.8rem;
127 | 				font-weight: normal;
128 | 			}
129 | 		}
130 | 	}
131 | 
132 | 	.section-wrap {
133 | 		padding: 0.7rem 0 0 0.5rem;
134 | 		.sub-title {
135 | 			font-size: 0.8rem;
136 | 			margin-bottom: 0.5rem;
137 | 			font-weight: normal;
138 | 		}
139 | 	}
140 | 
141 | 	.radio-wrap {
142 | 		.radio-list {
143 | 			overflow: hidden;
144 | 			list-style: none;
145 | 			li {
146 | 				width: 50%;
147 | 				box-sizing: border-box;
148 | 				padding-right: 0.4rem;
149 | 				float: left;
150 | 
151 | 				.icon-play {
152 | 					position: absolute;
153 | 					right: 0.5rem;
154 | 					bottom: 0.5rem;
155 | 					width: 1.2rem;
156 | 					height: 1.2rem;
157 | 					background: url(../../assets/list_sprite.png) no-repeat;
158 | 					background-size: cover;
159 | 				}
160 | 				.cover-img {
161 | 					width: 100%;
162 | 					display: block;
163 | 				}
164 | 				&:last-child {
165 | 					margin: 0;
166 | 				}
167 | 
168 | 				.radio-name {
169 | 					font-size: 0.7rem;
170 | 					background-color: #fff;
171 | 					height: 1.6rem;
172 | 					padding: 0.2rem 0.4rem;
173 | 				}
174 | 			}
175 | 		}
176 | 	}
177 | 
178 | 	.more-info {
179 | 		text-align: center;
180 | 		font-size: 0.7rem;
181 | 		color: rgba(0,0,0,.6);
182 | 		a {
183 | 			display: block;
184 | 			color: rgba(0,0,0,.6);
185 | 			line-height: 2rem;
186 | 		}
187 | 		.go2pc {
188 | 			color: #000;
189 | 		}
190 | 
191 | 		.logo {
192 | 			width: 4rem;
193 | 			margin-top: 0.6rem;
194 | 		}
195 | 
196 | 		.copy-right {
197 | 			line-height: 3rem;
198 | 			font-size: 0.6rem;
199 | 		}
200 | 	}
201 | </style>
202 | 


--------------------------------------------------------------------------------
/src/views/singer-page.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div :style="{backgroundColor: color}">
  3 | 		<div class="header rel">
  4 | 			<img :src="src" alt="" class="header-bg">
  5 | 			
  6 | 			<div class="album-mask" :style="{color: color}"></div>
  7 | 			<div class="album-info">
  8 | 				<div class="album-title">
  9 | 					<h1 class="nowrap">{{topinfo.name}}</h1>
 10 | 					<p class="nowrap">粉丝&nbsp;{{fans}}&nbsp;万人</p>
 11 | 				</div>
 12 | 				<div class="album-play"></div>
 13 | 			</div>
 14 | 		</div>
 15 | 
 16 | 		<ul class="songlist">
 17 | 			<template v-for="list in songlist">
 18 | 				<li class="flex-box">
 19 | 					<div class="flex-body">
 20 | 						<h3 class="nowrap">{{list.musicData.songname}}</h3>
 21 | 						<p class="song-info nowrap">
 22 | 							<template v-for='(item, index) in list.musicData.singer'>
 23 | 								<span v-if='index > 0'>&nbsp;/&nbsp;</span>{{item.name}}
 24 | 							</template>
 25 | 							<span class="icon icon-point"></span>
 26 | 							{{list.musicData.albumname}}
 27 | 						</p>
 28 | 					</div>
 29 | 				</li>
 30 | 			</template>
 31 | 		</ul>
 32 | 		<h3 class="title">最新专辑</h3>
 33 | 		<ul class="albumList">
 34 | 			<template v-for="item in albumList">
 35 | 				<li>
 36 | 					<img :src="item.pic" alt="">
 37 | 					<div class="albumInfo">
 38 | 						<h3 class="nowrap">{{item.name}}</h3>
 39 | 						<p>{{item.publish_date}}</p>
 40 | 					</div>
 41 | 				</li>
 42 | 			</template>
 43 | 		</ul>
 44 | 		<h3 class="title">简介</h3>
 45 | 		<p class="intro">{{intro}}</p>
 46 | 	</div>
 47 | </template>
 48 | 
 49 | <script>
 50 | 
 51 | 	export default {
 52 | 		data () {
 53 | 	      return {
 54 | 	        songlist: [],
 55 | 	        topinfo: [],
 56 | 	        mid: this.$route.params.singerid,
 57 | 	        color: "rgb(224, 224, 224)",
 58 | 	        fans: '',
 59 | 	        albumList: [],
 60 | 	        intro: ''
 61 | 	      }
 62 | 	    },
 63 | 		computed: {
 64 | 			src: function () {
 65 | 				return "https://y.gtimg.cn/music/photo_new/T001R300x300M000"+this.mid+".jpg"
 66 | 			},
 67 | 
 68 | 			transferColor: function() {
 69 | 				var t = this.color;
 70 | 				function n(t) {
 71 | 					return t > 16 ? t.toString(16) : "0" + t.toString(16);
 72 | 				}
 73 | 				if (t) {
 74 | 					var o = (16711680 & t) >> 16, a = (65280 & t) >> 8, i = 255 & t;
 75 | 
 76 | 					var s = n(o) + n(a) + n(i);
 77 | 					this.color = '#' + s;
 78 | 				} else {
 79 | 					this.color = '#000';
 80 | 				}
 81 | 				console.log(this.color, 'color')
 82 | 				return this.color;
 83 | 			}
 84 | 		},
 85 | 		components: {
 86 | 		},
 87 | 		beforeMount () {
 88 | 			this.$http.jsonp('https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg', {
 89 | 			    params: {
 90 | 			    	order:'listen',
 91 | 			    	begin:0,
 92 | 					num:8,
 93 | 					singermid: this.mid,
 94 | 					g_tk:5381,
 95 | 					uin:0,
 96 | 					format: 'jsonp',
 97 | 					inCharset: 'utf-8',
 98 | 					outCharset: 'utf-8',
 99 | 					notice:0,
100 | 					platform:'h5page',
101 | 					needNewCode:1,
102 | 					from:'h5',
103 | 					_: new Date().getTime()
104 | 			    },
105 | 			    jsonp: 'jsonpCallback'
106 | 			}).then(function (response) {
107 | 				var _data = response.body.data;
108 | 			  	this.color = _data.color;
109 | 			  	this.topinfo.name = _data.singer_name;
110 | 			  	this.fans = (_data.fans/10000).toFixed(1);
111 | 			  	this.songlist = _data.list;
112 | 			  	this.intro = _data.SingerDesc;
113 | 			  	this.albumList = _data.albumlist;
114 | 			})
115 | 		}
116 | 	}
117 | </script>
118 | 
119 | <style lang='less'>
120 | 	.flex-box {
121 | 		display: -webkit-box;
122 | 		display: -webklit-flex;
123 | 		display: flex;
124 | 		-webkit-box-align: center;
125 | 		-webkit-align-items: center;
126 | 		align-items: center;
127 | 	}
128 | 
129 | 	.flex-body {
130 | 		-webkit-box-flex: 1;
131 | 	    -webkit-flex: 1;
132 | 	    flex: 1;
133 | 	    -webkit-box-orient: vertical;
134 | 	    -webkit-box-pack: center;
135 | 	}
136 | 
137 | 	.title {
138 | 		font-size: 0.9rem;
139 | 		padding: 1.25rem 0;
140 | 		line-height: 1.2rem;
141 | 		text-align: center;
142 | 	}
143 | 	.intro {
144 | 		padding: 0 0.75rem 3rem;
145 | 		font-size: 0.7rem;
146 | 		line-height: 1.1rem;
147 | 		text-align: justify;
148 | 	}
149 | 
150 | 	.header {
151 | 		.header-bg {
152 | 			width: 100%;
153 | 			display: block;
154 | 		}
155 | 
156 | 		.album-mask {
157 | 			position: absolute;
158 | 			bottom: 0;
159 | 			left: 0;
160 | 			right: 0;
161 | 			padding-top: 60%;
162 | 			height: 0;
163 | 			z-index: 2;
164 | 			background-image: -webkit-linear-gradient(top,transparent,currentColor 80%);
165 | 		}
166 | 
167 | 		.album-info {
168 | 			position: absolute;
169 | 			bottom: 0;
170 | 			left: 0;
171 | 			right: 0;
172 | 			z-index: 3;
173 | 			display: -webkit-box;
174 | 			display: flex;
175 | 			-webkit-box-align: center;
176 | 		    -webkit-align-items: center;
177 | 		    align-items: center;
178 | 			margin: 0 15px 25px;
179 | 			color: #fff;
180 | 
181 | 			.album-title {
182 | 				-webkit-box-flex: 1;
183 | 				-webklit-flex: 1;
184 | 				flex: 1;
185 | 				width: 0;
186 | 				line-height: 1.5em;
187 | 				h1 {
188 | 					font-weight: normal;
189 | 					font-size: 1.2rem;
190 | 				}
191 | 				p {
192 | 					font-size: 0.7rem;
193 | 				}
194 | 			}
195 | 
196 | 			.album-play {
197 | 				margin-left: 0.6rem;
198 | 				width: 2rem;
199 | 				height: 2rem;
200 | 				background: url(../assets/list_sprite.png);
201 | 				background-size: cover;
202 | 			}
203 | 		}
204 | 	}
205 | 
206 | 	.songlist {
207 | 		border-top: 1px solid rgba(0,0,0,.15);
208 | 		padding: 0 0 0 0.5rem;
209 | 		margin: 0;
210 | 		li {
211 | 			font-size: 0.9rem;
212 | 			height: 3rem;
213 | 			box-sizing: border-box;
214 | 			border-bottom: 1px solid rgba(0,0,0,.15);
215 | 			h3 {
216 | 				font-size: 0.9rem;
217 | 				font-weight: normal;
218 | 				display: -webkit-box;
219 | 				font-weight: normal;
220 | 			}
221 | 			p {
222 | 				font-size: 0.7rem;
223 | 				display: -webkit-box;
224 | 			}
225 | 		}
226 | 	}
227 | 
228 | 	.albumList {
229 | 		overflow: hidden;
230 | 		li {
231 | 			width: 32%;
232 | 			margin-right: 2%;
233 | 			font-size: 0;
234 | 			float: left;
235 | 			&:last-child {
236 | 				margin-right: 0;
237 | 			}
238 | 			img {
239 | 				width: 100%;
240 | 			}
241 | 			.albumInfo {
242 | 				font-size: 0.6rem;
243 | 				padding: 0.4rem 0.3rem 0;
244 | 				p {
245 | 					color: gray;
246 | 				}
247 | 			}
248 | 		}
249 | 	}
250 | 
251 | 	.icon-point {
252 | 		display: inline-block;
253 | 		width: 2px;
254 | 		height: 2px;
255 | 		border-radius: 50%;
256 | 		background-color: gray;
257 | 		margin: 0 4px;
258 | 		vertical-align: middle;
259 | 	}
260 | </style>
261 | 


--------------------------------------------------------------------------------
/src/components/play-progress.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div class="controller-wrap">
  4 |         <div class="row" v-if="showController">
  5 |             <i class="icon icon-list" @click="toggleFlag"></i>
  6 |             <i class="icon icon-prev"></i>
  7 |             <i class="icon icon-next"></i>
  8 |             <i class="icon icon-fav"></i>
  9 |         </div>
 10 |         <div class="songList" v-else>
 11 |             <p>播放列表 <span>({{list.length}}首)</span><i class="icon-back" @click="toggleFlag"></i></p>
 12 |             <ul>
 13 |                 <template v-for="(item, index) in list">
 14 |                     <li :class='{"active": index == _index}' @click='changeSong' :songIndex="index">{{item.data.songname}}
 15 |                         <b v-if="index == _index"><i></i><i></i><i></i><i></i></b>
 16 |                     </li>
 17 |                 </template>
 18 |             </ul>
 19 |         </div>
 20 |     </div>
 21 |     
 22 |     <div class="progress-wrap" v-if="showController">
 23 |         <div class="time">{{currentTime | sec2Time}}</div>
 24 |         <div class="play-progress">
 25 |             <div class="bar-bg" :style="{width: width + '%'}"></div>
 26 |         </div>
 27 |         <div class="time">{{totalTime | sec2Time}}</div>
 28 |     </div>
 29 | </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import store from '../vuex/store'
 34 | export default {
 35 |     data() {
 36 |         return {
 37 |             width: 0,
 38 |             list: store.state.songList,
 39 |             showController: true,
 40 |             _index: 0
 41 |         }
 42 |     },
 43 |     props: {
 44 |         currentTime: Number,
 45 |         totalTime: Number
 46 |     },
 47 |     filters: {
 48 |         sec2Time: function(sec) {
 49 |             var sec = parseInt(sec);
 50 |             return ('0'+Math.floor(sec/60)).slice(-2) + ':' + ('0' + sec%60).slice(-2);
 51 |         }
 52 |     },
 53 |     mounted: function() {
 54 |         // this._index = store.state.songIndex;
 55 |     },
 56 |     methods: {
 57 |         toggleFlag: function() {
 58 |             this.showController = !this.showController;
 59 |             this._index = store.state.songIndex;
 60 |         },
 61 |         changeSong: function(e) {
 62 |             var _node = e.target;
 63 |             if (_node.getAttribute('class') != 'active') {
 64 |                 var index = _node.getAttribute("songIndex") - 0;
 65 |                 this._index = index;
 66 |                 this.$emit('switchSong', index);
 67 |                 this.showController = true;
 68 |             }
 69 |         }
 70 |     },
 71 |     watch: {
 72 |         currentTime: function(newNum, oldNum) {
 73 |             this.width = newNum *100 / this.totalTime;
 74 |         }
 75 |     }
 76 | }
 77 | </script>
 78 | 
 79 | <style lang='less'>
 80 | 
 81 | .progress-wrap {
 82 |     display: -webkit-box;
 83 |     display: -webkit-flex;
 84 |     display: flex;
 85 |     color: #808080;
 86 |     font-size: 0.7rem;
 87 |     margin-bottom: 1.2rem;
 88 |     .time {
 89 |         text-align: center;
 90 |         width: 18%;
 91 |     }
 92 | }
 93 | .play-progress {
 94 |     height: 2px;
 95 |     width: 0;
 96 |     position: relative;
 97 |     top: 0.5rem;
 98 |     background-color: rgba(255,255,255,.2);
 99 |     -webkit-box-flex: 1;
100 |     -webkit-flex: 1;
101 |     flex: 1;
102 |     .bar-bg {
103 |         background-color: #31c27c;
104 |         position: absolute;
105 |         left: 0;
106 |         top: 0;
107 |         height: 2px;
108 |         transition: width 50ms; /* 如何动画更平滑 */
109 |         &:after {
110 |             content: '';
111 |             position: absolute;
112 |             right: -2px;
113 |             top: -2px;
114 |             height: 6px;
115 |             width: 6px;
116 |             border-radius: 50%;
117 |             background-color: #31c27c;
118 |             box-shadow: 0 0 4px #31c27c;
119 |         }
120 |     }
121 | }
122 | 
123 | .active b {
124 |     position: absolute;
125 |     right: 0.75rem;
126 |     top: 0.5rem;
127 |     width: 0.5rem;
128 |     height: 0.6rem;
129 |     overflow: hidden;
130 | }
131 | 
132 | .active i {
133 |     float:left;
134 |     width: 1px;
135 |     height: 0.6rem;
136 |     margin-right: 0.1rem;
137 |     background-color: #31c27c;
138 |     animation: upAndDown 4s infinite linear;
139 | }
140 | 
141 | .active i:nth-of-type(1) {
142 |     -webkit-animation-duration:800ms;
143 | }
144 | 
145 | .active i:nth-of-type(2) {
146 |     -webkit-animation-duration:1200ms;
147 | }
148 | 
149 | .active i:nth-of-type(3) {
150 |     -webkit-animation-duration:1400ms;
151 | }
152 | 
153 | .active i:nth-of-type(4) {
154 |     margin-right:0;
155 |     -webkit-animation-duration:1000ms;
156 | }
157 | 
158 | @keyframes upAndDown{
159 |     0% {transform: translateY(0);}
160 |     15% {transform: translateY(0.2rem);}
161 |     35% {transform: translateY(0.4rem);}
162 |     50% {transform: translateY(0.6rem);}
163 |     65% {transform: translateY(0.4rem);}
164 |     85% {transform: translateY(0.2rem);}
165 |     100% {transform: translateY(0);}
166 | }
167 | 
168 | 
169 | .controller-wrap {
170 |     .row {
171 |         display: -webkit-box;
172 |         display: -webkit-flex;
173 |         display: flex;
174 | 
175 |         .icon {
176 |             width: 1.5rem;
177 |             height: 1.5rem;
178 |             display: inline-block;
179 |             margin: 0.75rem 1rem;
180 |             background-image: url(https://y.gtimg.cn/mediastyle/mobile/app/share/img/sprite_play.png);
181 |             background-size: 160%;
182 |         }
183 |         .icon-prev, .icon-next {
184 |             flex: 1;
185 |             width: 0;
186 |             background-image: none;
187 |         }
188 |         .icon-list {
189 |             background-position: 0 -14.1rem;
190 |         }
191 |         .icon-fav {
192 |             background-position: 0 0.2rem;
193 |             
194 |         }
195 |     }
196 | 
197 |     .songList {
198 |         color: #fff;
199 |         font-size: 0.7rem;
200 |         max-height: 13.8rem;
201 |         padding: 0.5rem 0.75rem 0.75rem;
202 |         background-color: rgba(0, 0, 0, 0.55);
203 |         p {
204 |             line-height: 2rem;
205 |             font-size: 0.9rem;
206 |             position: relative;
207 |             text-align: center;
208 |             border-bottom: 1px solid rgba(255,255,255,.3);
209 |             span {
210 |                 color: rgba(255, 255, 255, 0.6);
211 |                 font-size: 0.75rem;
212 |             }
213 |         }
214 |         .icon-back {
215 |             position: absolute;
216 |             right: 0rem;
217 |             top: 0.4rem;
218 |             width: 1rem;
219 |             height: 1rem;
220 |             &:before, &:after {
221 |                 position: absolute;
222 |                 content: '';
223 |                 right: 0;
224 |                 top: 50%;
225 |                 width: 100%;
226 |                 height: 1px;
227 |                 background-color: #fff;
228 |                 transform: rotate(45deg);
229 |             }
230 |             &:after {
231 |                 transform: rotate(-45deg);
232 |             }
233 |         }
234 |         li {
235 |             line-height: 2rem;
236 |             border-bottom: 1px solid rgba(255,255,255,.15);
237 |         }
238 |         .active {
239 |             color: #31c27c;
240 |             position: relative;
241 |         }
242 |     }
243 | }
244 | </style>
245 | 


--------------------------------------------------------------------------------
/src/views/search/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div>
  3 | 		<head-comp></head-comp>
  4 | 		<div class="search-wrap">
  5 | 			<form>
  6 | 				<span class="icon icon-search"></span>
  7 | 				<input class="key-word" type="text" @focus='inputFocus' 
  8 | 					@keyup='checkKeyword' placeholder="搜索歌曲、歌单、专辑" v-model.trim="keyword" @keyup.enter='search'>
  9 | 				<span class="icon icon-del" @click="clearKeyword" v-show='showDel'></span>
 10 | 			</form>
 11 | 			<div class="search-btn" @click="search" v-show="focusFlag">搜索</div>
 12 | 		</div>
 13 | 
 14 | 	    <div class="search-main">
 15 | 			<div class="hot-keys" v-if="focusFlag == false">
 16 | 				<h3 class="hot-title">热门搜索</h3>
 17 | 				<div class="hot-wrap">
 18 | 					<span @click="emitKeyword" class="highlight" v-if="special_key">{{special_key}}</span>
 19 | 					<template v-for="(item, index) in hotkeys">
 20 | 						<span @click="emitKeyword" v-if="item.k.length > 4">{{item.k}}</span>
 21 | 					</template>
 22 | 				</div>
 23 | 			</div>
 24 | 
 25 | 			<div v-else>
 26 | 				<div v-if='searchFlag'>
 27 | 					<search-list :data-list='searchResult'></search-list>
 28 | 				</div>
 29 | 				<template v-else-if="historyKeys.length">
 30 | 				<ul class="searchHis">
 31 | 					<template  v-for="(key, index) in historyKeys">
 32 | 						<li @click="emitKeyword">{{historyKeys[index]}} <i></i></li>
 33 | 					</template>
 34 | 					<li class="clearHis" @click='clearHis'>清除搜索记录</li>
 35 | 				</ul>
 36 | 				</template>
 37 | 			</div>
 38 | 	    </div>
 39 | 	</div>
 40 | </template>
 41 | 
 42 | <script>
 43 | 	import HeadComp from '../../components/header/index'
 44 | 	import SearchList from '../../components/search-list'
 45 | 	import LocalStorage from '../../localStorage'
 46 | 
 47 | 	export default {
 48 | 		data () {
 49 | 			return {
 50 | 				hotkeys: [], // 接口返回的热搜词列表
 51 | 				focusFlag: false, // 输入框获取标志位，默认false
 52 | 				searchFlag: false, // 显示搜索内容
 53 | 				historyKeys: [], // 历史搜索纪录
 54 | 				special_key: '',
 55 | 				keyword: '', // 用户输入的搜索词
 56 | 				searchResult: {}, // 搜索结果列表
 57 | 				showDel: false
 58 | 			}
 59 | 	    },
 60 | 		components: {
 61 | 			HeadComp,
 62 | 			SearchList
 63 | 		},
 64 | 		methods: {
 65 | 			inputFocus: function() {
 66 | 				this.focusFlag = true;
 67 | 				this.historyKeys = LocalStorage.getArray("keywords");
 68 | 			},
 69 |       		search: function () {
 70 | 			    let _this = this;
 71 | 
 72 | 			    if (_this.keyword == '') {
 73 | 			        return ;
 74 |           		}
 75 | 
 76 |           		LocalStorage.pushArray("keywords", _this.keyword);
 77 |           		
 78 | 		        this.$http.jsonp('https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp', {
 79 | 		          	params: {
 80 | 			            g_tk: 5381,
 81 | 			            uin: 0,
 82 | 			            format: 'jsonp',
 83 | 			            inCharset: 'utf-8',
 84 | 			            outCharset: 'utf-8',
 85 | 			            notice: 0,
 86 | 			            platform: 'h5',
 87 | 			            needNewCode: 1,
 88 | 			            w: _this.keyword,
 89 | 			            zhidaqu: 1,
 90 | 			            catZhida: 1,
 91 | 			            t: 0,
 92 | 			            flag: 1,
 93 | 			            ie: 'utf-8',
 94 | 			            sem: 1,
 95 | 			            aggr: 0,
 96 | 			            perpage: 20,
 97 | 			            n: 20,
 98 | 			            p: 1,
 99 | 			            remoteplace: 'txt.mqq.all',
100 | 			            _: 1489396018874
101 | 					},
102 | 					jsonp: 'jsonpCallback'
103 | 		        }).then(function (response) {
104 | 					_this.searchResult = response.body.data;
105 |           			_this.searchFlag = true;
106 | 		        })
107 | 			},
108 | 			checkKeyword: function () {
109 | 				this.showDel = (this.keyword != '') ? true : false;
110 | 			},
111 | 			clearKeyword: function () {
112 | 				this.keyword = '';
113 | 				this.showDel = this.focusFlag = false;
114 | 			},
115 | 			clearHis: function() {
116 | 				LocalStorage.clear();
117 | 				this.historyKeys = '';
118 | 				this.searchFlag = false;
119 | 			},
120 | 		    emitKeyword: function (event) {
121 | 		    	this.keyword = event.target.innerText;
122 | 		    	this.showDel = this.focusFlag =true;
123 | 		    	this.search();
124 | 		    }
125 | 		},
126 | 		beforeMount () {
127 | 			this.$http.jsonp('https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg', {
128 | 			    params: {
129 | 		            g_tk: 5381,
130 | 		            uin: 0,
131 | 		            format: 'jsonp',
132 | 		            inCharset: 'utf-8',
133 | 		            outCharset: 'utf-8',
134 | 		            notice: 0,
135 | 		            platform: 'h5',
136 | 		            needNewCode: 1,
137 | 		            _: new Date().getTime()
138 | 			    },
139 | 			    jsonp: 'jsonpCallback'
140 | 			}).then(function (response) {
141 | 			  	this.hotkeys = response.body.data.hotkey;
142 | 			  	this.special_key = response.body.data.special_key;
143 | 			})
144 | 		}
145 | 	}
146 | </script>
147 | 
148 | <style lang='less'>
149 | 	.search-wrap {
150 | 		background-color: #f4f4f4;
151 | 		display: -webkit-box;
152 | 	    display: -webkit-flex;
153 | 	    display: flex;
154 | 	    padding: 0.5rem;
155 | 		form {
156 | 			background-color: #fff;
157 | 			position: relative;
158 | 			padding-left: 1rem;
159 | 			display: -webkit-box;
160 | 		    display: -webkit-flex;
161 | 		    display: flex;
162 | 		    -webkit-box-align: center;
163 | 	        -webkit-align-items: center;
164 | 	        align-items: center;
165 | 			flex: 1;
166 | 			padding: 8px 12px 8px 35px;
167 | 			transition: all 200ms;
168 | 		}
169 | 		.key-word {
170 | 			border: 0 none;
171 | 			height: 1rem;
172 | 			line-height: 1rem;
173 | 			padding: 0;
174 | 			flex: 1;
175 | 			outline: none;
176 | 			height: 1rem;
177 | 			line-height: 1rem;
178 | 		}
179 | 		.icon-search {
180 | 			position: absolute;
181 | 			top: 8px;
182 | 			left: 8px;
183 | 			width: 1rem;
184 | 			height: 1rem;
185 | 			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJlSURBVFhH7ZfRShRRHMb3Jkqzm7wJSrqIIDBxX6C0a62H6C7oqq4ixYreQMmMHkXbjLQeIYgyQuqiyIuotKDt923fyLCszv/MzF5EDnzs2T3/7zffOXNm5myjcXDUOAOtVquJ7qOn6AP6ZamtQ33NGk/ZG8VJJtEaagf1XJ7agwEdRI9zIT7RnkdT6Iz7VaO2flPf51z9I9oDtQQDNIxeGv6Nz9voaBFcNa79bu8LsYp8+/Z75FmYN3w/nwqUB204lFiDqYzd+txlek37RFkQ3pNIjDZaKsXBeMkATfloKUjOBGMMifUbXUzmYVp3oFvJ5j0M8GbNXEtiYtJzRtOru6lwAUfhsIZQdveNR30NTPccaD5sChbCXTD7btDSUCAdmqGpsClYCHPa7CdBSyeQXgEKNBI2BQthnjX7Y9DSCfTTpkNhU7AQ7jGzd4KWvgc67EDbKYH6eclOO9BmSqBsUU+HTcFCwJcdaCVo6Vyy7LZfCJuChbAfONCdoKUTKHsw6iE2FDYWFIqFthxoLImLSZsr3fqzScZ9isUyczWZiXEC6UWoF2LaaHqcDcY4+mHmheRAMmBe8oje8nmqFOQvZwS9N2uxLEcgbUuzDdpGmZnyzLxzGG3yqm1lARxH2VZEUz6DChc6NXoia83I087pRukZyozAjqCHvv6Cf0GL6Ao655MrgNr6TX1bDqF1qO/Xcv7qobymJoA+6xpxfvTd7VVqdxcw7au1h3IwbUfn0DJ6hb6ibbSJVtzX8w9B30JVWQf/QqibVQZYm7drpg5C7TmzuZnSI6JZ2yWoAnKo61UY/5f3Dy7dC4CdAEhQAAAAAElFTkSuQmCC) no-repeat;
186 | 			background-size: 100%;
187 | 		}
188 |     .icon-del {
189 | 		position: absolute;
190 | 		top: 8px;
191 | 		right: 0.5rem;
192 | 		width: 1rem;
193 | 		height: 1rem;
194 | 		border-radius: 50%;
195 | 		background-color: #b1b1b1;
196 | 
197 | 		&::before, &:after {
198 | 			content: '';
199 | 			position: absolute;
200 | 			top: 50%;
201 | 			left: 15%;
202 | 			width: 70%;
203 | 			height: 1px;
204 | 			background-color: #fff;
205 | 		}
206 | 		&:before {
207 | 			transform: rotate(-45deg);
208 | 		}
209 | 		&:after {
210 | 			transform: rotate(45deg);
211 | 		}
212 |     }
213 | 		.search-btn {
214 | 			font-size: 0.7rem;
215 | 			line-height: 36px;
216 | 			padding: 0 10px;
217 | 			color: #555;
218 | 		}
219 | 	}
220 | 	.hot-keys {
221 | 		background: #fff;
222 | 	    padding: 15px 15px 10px 15px;
223 | 		font-size: 0.65rem;
224 | 		.hot-title {
225 | 			line-height: 1.2em;
226 | 			margin-bottom: 0.5rem;
227 | 			color: rgba(0, 0, 0, 0.6);
228 | 		}
229 | 		span {
230 | 			color: #000;
231 | 			display: inline-block;
232 | 			height: 1.5rem;
233 | 			line-height: 1.5rem;
234 | 			border: 1px solid rgba(0, 0, 0, 0.6);
235 | 		    border-radius: 0.75rem;
236 | 		    word-break: keep-all;
237 | 		    padding: 0 10px;
238 | 		    margin: 0 0.65rem 0.5rem 0;
239 | 		    &.highlight {
240 | 		    	border-color: #fc4524;
241 | 		    	color: #fc4524;
242 | 		    }
243 | 		}
244 | 	}
245 | 	.searchHis {
246 | 		color: #000;
247 | 		font-size: 0.7rem;
248 | 		li {
249 | 			background-color: #fff;
250 | 			height: 2.2rem;
251 | 			line-height: 2.2rem;
252 | 			padding: 0 0.8rem;
253 | 			border-bottom: 1px solid #e3e3e3;
254 | 			&:last-child {
255 | 				border: none;
256 | 				margin-top: -1px;
257 | 			}
258 | 		}
259 | 		.clearHis {
260 | 			text-align: center;
261 | 			color: #47c88a;
262 | 			font-size: 0.6rem;
263 | 		}
264 | 	}
265 | </style>
266 | 


--------------------------------------------------------------------------------
/src/views/playing.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="song-wrap">
  3 | 		<div class="song-bg" :style="bodyStyle"></div>
  4 | 		<div class="song-mask"></div>
  5 | 		<audio :src='songUrl' autoplay="autoplay" ref="audio"></audio>
  6 | 		<div class="song_info">
  7 | 			<div class="album-cover-wrap">
  8 | 				<img :src="pic" alt="" class="album-cover" :class="[isPlaying ? 'rotateAnim' : '']" ref="album">
  9 | 			</div>
 10 | 			<div class="info">
 11 | 				<h1 class="nowrap">{{playingsong.songname}}</h1>
 12 | 				<p>
 13 | 				<template v-for="item in playingsong.singer">{{item.name}}&nbsp;</template>
 14 | 				</p>
 15 | 			</div>
 16 | 			<span class="icon" :class="[isPlaying ? 'play-icon' : 'pause-icon']" @click="palyOrPause"></span>
 17 | 		</div>
 18 | 
 19 | 	    <div class="lyc-wrap">
 20 | 	    	<transition name="fade" mode="out-in">
 21 | 	      		<lyc-item :lycArr="lycArr" :currentTime="currentTime"></lyc-item>
 22 | 	      	</transition>
 23 | 	    </div>
 24 | 
 25 | 	    <div class="controller">
 26 | 			<play-progress :currentTime="currentTime" :totalTime="totalTime" v-on:switchSong='changePlayingSong'></play-progress>
 27 | 	    </div>
 28 | 	</div>
 29 | </template>
 30 | 
 31 | <script>
 32 | 	import Base64 from '../base64'
 33 | 	import store from '../vuex/store'
 34 | 	import router from '../router'
 35 |   	import LycItem from '../components/lyc-item'
 36 |   	import PlayProgress from '../components/play-progress'
 37 | 
 38 | 	export default {
 39 | 		data () {
 40 |       		let song = store.getters.getSong;
 41 |       		
 42 | 			return {
 43 | 				playingsong: song,
 44 | 				isPlaying: true,
 45 | 		        lycArr: [],
 46 | 		        currentTime: 0,
 47 | 		        timer: null,
 48 | 		        playList: null
 49 | 			}
 50 | 		},
 51 | 		components:{
 52 | 			Base64,
 53 |       		LycItem,
 54 |       		PlayProgress
 55 | 		},
 56 | 		computed: {
 57 | 			pic: function() {
 58 | 			 	return 'http://y.gtimg.cn/music/photo_new/T002R300x300M000' + this.playingsong.albummid +'.jpg';
 59 | 			},
 60 | 			songUrl: function() {
 61 | 				return 'http://dl.stream.qqmusic.qq.com/C400' + this.playingsong.songmid + '.m4a?guid=2313974775&vkey=4089D067F5ABDCE1F6242A8E97EFF9F23BDF84E7CBF09F7BBC79C06025869C3405ED038D62BD842B27E4DDD8CBC994F0009B4818FAA5016A&uin=&fromtag=999';
 62 | 			},
 63 | 			bodyStyle: function() {
 64 | 				return {
 65 | 					backgroundImage: "url(http://y.gtimg.cn/music/photo_new/T002R300x300M000" + this.playingsong.albummid + ".jpg)"
 66 | 				};
 67 | 			},
 68 | 			totalTime: function() {
 69 | 				return this.playingsong.interval;
 70 | 			}
 71 | 		},
 72 | 		watch: {
 73 | 			playingsong: function(newsong, old) {
 74 | 				
 75 | 			}
 76 | 		},
 77 | 		methods: {
 78 | 			changePlayingSong: function(num) {
 79 | 				var index = num;
 80 | 
 81 | 				if (index >= store.state.songList.length) {
 82 | 					index = 0;
 83 | 				}
 84 | 
 85 | 				var playingsong = store.state.songList[index].data;
 86 | 				this.playingsong = playingsong;
 87 | 				
 88 | 				store.commit('changeSong', playingsong);
 89 | 				store.commit('changeSongIndex', index);
 90 | 
 91 | 				router.replace({
 92 | 					name: 'Playing',
 93 | 					params: {
 94 | 						songid: playingsong.songid
 95 | 					}
 96 | 				});
 97 | 				this.renderLyc();
 98 | 				this.currentTime = 0;
 99 | 				this.scrollLyc();
100 | 			},
101 | 			palyOrPause: function() {
102 | 			    let _this = this,
103 | 			    	refs = _this.$refs,
104 | 			    	audio = refs.audio;
105 | 
106 | 				if (this.isPlaying) {
107 |           			audio.pause();
108 |           			clearInterval(this.timer);
109 | 				} else {
110 |           			audio.play();
111 |           			this.timer = setInterval(function(audio) {
112 | 						return function() {
113 | 							_this.currentTime = refs.audio.currentTime;
114 | 							
115 | 							if (_this.currentTime >= _this.totalTime) {
116 | 								_this.changePlayingSong(store.getters.getSongIndex + 1);
117 | 							}
118 | 						}
119 | 					}(audio), 500);
120 | 				}
121 | 				this.isPlaying = !this.isPlaying;
122 | 			},
123 | 			renderLyc: function() {
124 | 				let getTime = function (time) {
125 | 				    let secArr = time.split('.'),
126 | 	              		secArr2 = secArr[0].split(':'),
127 | 	              		sec = +secArr2[0] * 60 + secArr2[1] * 1;
128 | 
129 | 	          		return sec + '.' + secArr[1];
130 | 	      		}
131 | 
132 | 	      		let _this = this;
133 | 
134 | 				this.lycArr = [];
135 | 				this.currentTime = 0;
136 | 
137 | 				this.$http.jsonp('https://api.darlin.me/music/lyric/' + this.playingsong.songid , {
138 | 				  	jsonp: 'callback'
139 | 				}).then(function(response) {
140 | 	          		Base64.decode(response.data.lyric)
141 | 	              		.split('[')
142 | 	              		.slice(7)
143 | 	              		.map(function(str) {
144 | 			                var t = str.split(']');
145 | 			                if (t[1].length > 2) {
146 | 			                    _this.lycArr.push({
147 | 			                        time: getTime(t[0]),
148 | 			                        lyc: t[1]
149 | 			                    });
150 | 			                }
151 | 	              		});
152 | 				});
153 | 			},
154 | 			scrollLyc: function() {
155 | 			    var _this = this,
156 | 			    	refs = _this.$refs,
157 | 			    	_store = store,
158 | 			    	_router = router;
159 | 
160 | 				this.timer = setInterval(function(refs) {
161 | 					return function() {
162 | 						_this.currentTime = refs.audio.currentTime;
163 | 						
164 | 						if (_this.currentTime >= _this.totalTime) {
165 | 							_this.changePlayingSong(store.getters.getSongIndex + 1);
166 | 						}
167 | 					}
168 | 				}(refs), 500);
169 | 			}
170 | 		},
171 | 		beforeMount () {
172 | 			this.playingsong = store.getters.getSong;
173 | 			this.renderLyc();
174 | 		},
175 | 		mounted () {
176 | 			this.playList = store.state.songList;
177 | 			this.scrollLyc();
178 | 		},
179 | 		beforeDestroy () {
180 | 			clearInterval(this.timer);
181 | 		}
182 | 	}
183 | </script>
184 | 
185 | <style lang='less'>
186 | 	html, body {
187 | 		height: 100%;
188 | 	}
189 | 	.song-bg {
190 | 		position: fixed;
191 | 		top: 0;
192 | 		bottom: 0;
193 | 		width: 100%;
194 | 		background-position: bottom center;
195 | 		background-size: cover;
196 | 		background-repeat: no-repeat;
197 | 		z-index: 1;
198 | 		-webkit-filter: blur(15px);
199 | 		-webkit-transform: scale(1.15);
200 | 	}
201 | 	.song-mask {
202 | 		position: fixed;
203 | 	    top: 0;
204 | 	    bottom: 0;
205 | 	    left: 0;
206 | 	    z-index: 2;
207 | 	    width: 100%;
208 | 	    background-color: #000;
209 | 	    opacity: 0.6;
210 | 	}
211 | 	.song_info {
212 | 		position: fixed;
213 | 	    width: 100%;
214 | 	    box-sizing: border-box;
215 | 		z-index: 3;
216 | 		color: #fff;
217 | 		padding: 0.75rem;
218 | 		display: -webkit-box;
219 | 		display: -webkit-flex;
220 | 		display: flex;
221 | 		-webkit-box-align: center;
222 | 	    -webkit-align-items: center;
223 | 	    align-items: center;
224 | 	    background-color: rgba(0,0,0,.1);
225 | 
226 | 		.album-cover-wrap {
227 | 			width: 4rem;
228 | 			height: 4rem;
229 | 			margin-right: 0.75rem;
230 | 		}
231 | 
232 | 		.album-cover {
233 | 			width: 4rem;
234 | 			height: 4rem;
235 |       		border-radius: 50%;
236 |       		transform:rotate(0deg);
237 |       		transition: transform 200ms;
238 | 		}
239 | 		.info {
240 | 			-webkit-box-flex: 1;
241 | 			-webkit-flex: 1;
242 | 			flex: 1;
243 | 			width: 0;
244 | 			font-size: 0.7rem;
245 |       		line-height: 1.35rem;
246 | 			h1 {
247 | 				font-size: 0.9rem;
248 | 				font-weight: normal;
249 | 			}
250 | 		}
251 | 		.icon {
252 | 			display: block;
253 | 			width: 2.1rem;
254 | 			height: 2.1rem;
255 | 			margin-left: 0.5rem;
256 | 			background: url(../assets/list_sprite.png) no-repeat;
257 | 			background-size: 100%;
258 | 			flex: none;
259 | 		}
260 | 
261 | 		.play-icon {
262 | 			background-position: 0 -2.2rem;
263 | 		}
264 | 		.pause-icon {
265 | 			background-position: 0 0;
266 | 		}
267 | 	}
268 | 
269 | 	.lyc-wrap {
270 | 		position: fixed;
271 | 		top: 5.5rem;
272 | 		bottom: 8rem;
273 | 		width: 100%;
274 | 		z-index: 10;
275 | 		color: rgba(255,255,255,.6);
276 | 		text-align: center;
277 | 		line-height: 2rem;
278 | 		font-size: 0.8rem;
279 | 		-webkit-box-flex: 1;
280 | 		overflow: hidden;
281 | 		display: flex;
282 | 		display: -webkit-box;
283 | 		-webkit-box-align: center;
284 | 	}
285 | 
286 | 	.rotateAnim {
287 | 		animation: imgRorate 4s infinite linear;
288 | 	}
289 | 
290 | 	.controller {
291 | 		position: fixed;
292 | 		bottom: 0;
293 | 		z-index: 11;
294 | 		width: 100%;
295 | 		box-sizing: border-box;
296 | 		background: rgba(0,0,0,0.4);
297 | 	}
298 | 
299 | @keyframes imgRorate{
300 | 	0% {transform: rotate(0deg);}
301 | 	50% {transform: rotate(180deg);}
302 | 	100% {transform: rotate(360deg);}
303 | }
304 | </style>
305 | 


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