Skip to content

Commit ea66a5f

Browse files
hzzlyhzzly
committed
✨ 重新改版
1 parent adbcca5 commit ea66a5f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2476
-2239
lines changed

‎README.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ $ npm start
4242
> * [移动端屏幕适配的解决 (flexible+rem)](https://hzzly.github.io/2017/03/15/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B1%8F%E5%B9%95%E9%80%82%E9%85%8D%E7%9A%84%E8%A7%A3%E5%86%B3/)
4343
> * [本地存储(sessionStorage、localStorage)](https://hzzly.github.io/2017/04/26/%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8sessionStorage%E4%B8%8ElocalStorage/)
4444
> * [图片懒加载](https://github.com/hilongjw/vue-lazyload?from=gold)
45+
> * [Vue插件](http://hjingren.cn/2017/08/25/Vue%E6%8F%92%E4%BB%B6%E7%9A%84%E5%BC%80%E5%8F%91-%E4%B8%80/)
4546
4647
👉坐好，出发
4748
### 实现的功能
@@ -81,14 +82,18 @@ $ npm start
8182
> - [x] 播放全部
8283
8384
#### 6、音乐搜索
84-
输入搜索关键词，点击`放大镜`图标
85+
输入搜索关键词
8586
> - [x] 单曲(单击或点击歌曲操作(...)添加至音乐播放列表，部分音乐会存在版权问题无法播放)
8687
> - [x] 歌手
8788
> - [x] 专辑
8889
> - [x] 歌单
8990
> - [x] 用户
9091
91-
#### 侧边栏
92+
#### 7.个人中心
93+
> - [x] 我喜欢的
94+
> - [x] 最近听的
95+
96+
#### 8.侧边栏
9297
> - [x] 头像
9398
> - [x] 菜单
9499
> - [x] 个人中心

‎index.html

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
</head>
2525
<body>
2626
<div id="app"></div>
27+
<script>
28+
document.addEventListener('touchmove', (e) => { e.preventDefault() }, { passive: false })
29+
</script>
2730
<!-- built files will be auto injected -->
2831
<!-- <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
2932
<script>

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"dependencies": {
1313
"axios": "^0.16.1",
1414
"better-scroll": "^1.13.2",
15+
"create-keyframe-animation": "^0.1.0",
1516
"fastclick": "^1.0.6",
17+
"lyric-parser": "^1.0.1",
1618
"node-sass": "^4.5.2",
1719
"qs": "^6.4.0",
1820
"sass-loader": "^6.0.3",

‎src/App.vue

+19-70
Original file line numberDiff line numberDiff line change
@@ -3,74 +3,34 @@
33
<v-header @left="showSidebar">
44
<i slot="left-icon" class="icon">&#xe692;</i>
55
<span slot="content">Magic Music</span>
6-
<router-link slot="right-icon" to="/search">
7-
<i class="icon">&#xe638;</i>
6+
<router-link slot="right-icon" to="/user">
7+
<i class="icon">&#xe63c;</i>
88
</router-link>
99
</v-header>
1010
<v-tab></v-tab>
1111
<keep-alive>
1212
<router-view></router-view>
1313
</keep-alive>
14-
<v-playbar></v-playbar>
14+
<v-play></v-play>
1515

1616
<!--公用组件-->
1717
<v-sidebar></v-sidebar>
18-
<v-toast v-show="showToast"></v-toast>
19-
<!-- <v-loading v-show="showPlayLoading" class="play-loading"></v-loading> -->
20-
<transition name="fold">
21-
<v-play v-show="showPlay"></v-play>
22-
</transition>
2318
</div>
2419
</template>
2520

2621
<script>
2722
import header from '@/components/header'
2823
import tab from '@/components/tab'
29-
import playbar from '@/components/playbar'
3024
import play from '@/components/play'
3125
import sidebar from '@/components/sidebar'
32-
import toast from '@/components/toast'
33-
import loading from '@/components/loading'
34-
35-
import { mapGetters } from 'vuex'
36-
37-
import api from './api'
3826
3927
export default {
4028
name: 'app',
4129
components: {
4230
'v-header': header,
4331
'v-tab': tab,
44-
'v-playbar': playbar,
4532
'v-play': play,
4633
'v-sidebar': sidebar,
47-
'v-toast': toast,
48-
'v-loading': loading
49-
},
50-
created() {
51-
// if (!this.audioUrl) {
52-
// api.MusicUrl(this.audio[0].id)
53-
// .then(res => {
54-
// this.$store.dispatch('setAudioUrl', res.data[0].url)
55-
// })
56-
// }
57-
// this.$store.dispatch('getMusicInfo', this.audio[0].id)
58-
},
59-
data() {
60-
return {
61-
}
62-
},
63-
computed: {
64-
header() {
65-
return this.$route.path.split('/')[1] == 'search' || this.$route.path.split('/')[1] == 'rank' ? false : true
66-
},
67-
...mapGetters([
68-
'showToast',
69-
'showPlay',
70-
'audio',
71-
'audioUrl',
72-
'showPlayLoading'
73-
]),
7434
},
7535
methods: {
7636
showSidebar() {
@@ -114,35 +74,24 @@ body {
11474
color: #fff;
11575
}
11676
117-
#app {
118-
font-family: "Avenir", Helvetica, Arial, sans-serif;
119-
-webkit-font-smoothing: antialiased;
120-
-moz-osx-font-smoothing: grayscale;
121-
display: flex;
122-
flex-direction: column;
123-
.play-loading {
124-
top: 8rem;
125-
z-index: 99;
126-
}
127-
.container {
128-
flex: 1;
129-
overflow: auto;
130-
overflow-x: hidden;
131-
}
132-
.slide-left-enter-active {
133-
animation: slideLeft 0.3s;
77+
.vue-toast {
78+
position: fixed;
79+
left: 50%;
80+
transform: translate(-50%, -50%);
81+
padding: px2rem(26px) px2rem(40px);
82+
border-radius: px2rem(50px);
83+
color: rgba(255, 255, 255, .7);
84+
background: rgba(0, 0, 0, 0.7);
85+
font-size: 14px;
86+
z-index: 1000;
87+
&.toast-center {
88+
top: 50%;
13489
}
135-
.slide-right-enter-active {
136-
animation: slideRight 0.3s;
137-
}
138-
139-
.fold-enter-active,
140-
.fold-leave-active {
141-
transition: transform 0.3s ease-in;
90+
&.toast-bottom {
91+
bottom: 10%;
14292
}
143-
.fold-enter,
144-
.fold-leave-active {
145-
transform: translate3d(0, 100%, 0);
93+
&.toast-top {
94+
top: 20%;
14695
}
14796
}
14897
</style>

‎src/api/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@ export default {
129129
* music歌词
130130
*/
131131
MusicLyric(id) {
132-
return fetchGet('/lyric', id)
132+
return fetchGet('/lyric', {
133+
id
134+
})
133135
},
134136

135137
/**

‎src/common/js/mixin.js

+74-71
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ import {mapGetters, mapMutations, mapActions} from 'vuex'
55
export const playlistMixin = {
66
computed: {
77
...mapGetters([
8-
'listenLists'
8+
'playList'
99
])
1010
},
1111
mounted() {
12-
this.handlePlaylist(this.listenLists)
12+
this.handlePlaylist(this.playList)
1313
},
1414
activated() {
15-
this.handlePlaylist(this.listenLists)
15+
this.handlePlaylist(this.playList)
1616
},
1717
watch: {
18-
listenLists(newVal) {
18+
playList(newVal) {
1919
this.handlePlaylist(newVal)
2020
}
2121
},
@@ -26,72 +26,73 @@ export const playlistMixin = {
2626
}
2727
}
2828

29-
// export const playerMixin = {
30-
// computed: {
31-
// iconMode() {
32-
// return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
33-
// },
34-
// ...mapGetters([
35-
// 'sequenceList',
36-
// 'playlist',
37-
// 'currentSong',
38-
// 'mode',
39-
// 'favoriteList'
40-
// ]),
41-
// favoriteIcon() {
42-
// return this.getFavoriteIcon(this.currentSong)
43-
// }
44-
// },
45-
// methods: {
46-
// changeMode() {
47-
// const mode = (this.mode + 1) % 3
48-
// this.setPlayMode(mode)
49-
// let list = null
50-
// if (mode === playMode.random) {
51-
// list = shuffle(this.sequenceList)
52-
// } else {
53-
// list = this.sequenceList
54-
// }
55-
// this.resetCurrentIndex(list)
56-
// this.setPlaylist(list)
57-
// },
58-
// resetCurrentIndex(list) {
59-
// let index = list.findIndex((item) => {
60-
// return item.id === this.currentSong.id
61-
// })
62-
// this.setCurrentIndex(index)
63-
// },
64-
// toggleFavorite(song) {
65-
// if (this.isFavorite(song)) {
66-
// this.deleteFavoriteList(song)
67-
// } else {
68-
// this.saveFavoriteList(song)
69-
// }
70-
// },
71-
// getFavoriteIcon(song) {
72-
// if (this.isFavorite(song)) {
73-
// return 'icon-favorite'
74-
// }
75-
// return 'icon-not-favorite'
76-
// },
77-
// isFavorite(song) {
78-
// const index = this.favoriteList.findIndex((item) => {
79-
// return item.id === song.id
80-
// })
81-
// return index > -1
82-
// },
83-
// ...mapMutations({
84-
// setPlayMode: 'SET_PLAY_MODE',
85-
// setPlaylist: 'SET_PLAYLIST',
86-
// setCurrentIndex: 'SET_CURRENT_INDEX',
87-
// setPlayingState: 'SET_PLAYING_STATE'
88-
// }),
89-
// ...mapActions([
90-
// 'saveFavoriteList',
91-
// 'deleteFavoriteList'
92-
// ])
93-
// }
94-
// }
29+
export const playerMixin = {
30+
computed: {
31+
// iconMode() {
32+
// return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
33+
// },
34+
...mapGetters([
35+
// 'sequenceList',
36+
'playList',
37+
'currentSong',
38+
'currentIndex',
39+
// 'mode',
40+
'favoriteList'
41+
]),
42+
favoriteIcon() {
43+
return this.getFavoriteIcon(this.currentSong)
44+
}
45+
},
46+
methods: {
47+
changeMode() {
48+
// const mode = (this.mode + 1) % 3
49+
// this.setPlayMode(mode)
50+
// let list = null
51+
// if (mode === playMode.random) {
52+
// list = shuffle(this.sequenceList)
53+
// } else {
54+
// list = this.sequenceList
55+
// }
56+
// this.resetCurrentIndex(list)
57+
// this.setPlaylist(list)
58+
},
59+
// resetCurrentIndex(list) {
60+
// let index = list.findIndex((item) => {
61+
// return item.id === this.currentSong.id
62+
// })
63+
// this.setCurrentIndex(index)
64+
// },
65+
toggleFavorite(song) {
66+
if (this.isFavorite(song)) {
67+
this.deleteFavoriteList(song)
68+
} else {
69+
this.saveFavoriteList(song)
70+
}
71+
},
72+
getFavoriteIcon(song) {
73+
if (this.isFavorite(song)) {
74+
return 'icon-favorite'
75+
}
76+
return 'icon-not-favorite'
77+
},
78+
isFavorite(song) {
79+
const index = this.favoriteList.findIndex((item) => {
80+
return item.id === song.id
81+
})
82+
return index > -1
83+
},
84+
...mapMutations({
85+
// setPlayMode: 'SET_PLAY_MODE',
86+
setPlaylist: 'SET_PLAYLIST',
87+
setCurrentIndex: 'SET_CURRENT_INDEX',
88+
setPlaying: 'SET_PLAYING'
89+
}),
90+
...mapActions([
91+
'saveFavoriteList',
92+
'deleteFavoriteList'
93+
])
94+
}
95+
}
9596

9697
export const searchMixin = {
9798
data() {
@@ -116,10 +117,12 @@ export const searchMixin = {
116117
addQuery(query) {
117118
this.$refs.searchBox.setQuery(query)
118119
},
119-
saveSearch() {
120+
saveSearch(song) {
121+
this.selectPlaySong(song)
120122
this.saveSearchHistory(this.query)
121123
},
122124
...mapActions([
125+
'selectPlaySong',
123126
'saveSearchHistory',
124127
'deleteSearchHistory'
125128
])

0 commit comments

Comments
 (0)