Skip to content

Commit 49b98b6

Browse files
uncleLianuncleLian
committed
v3.2.0
修改： 1、SET_AUDIO_DATA增加切换音乐是否跳转页面逻辑 2、SET_AUDIO_DATA增加添加音频是否添加到播放列表逻辑 修复： 1、index页面滚动条锁定bug（变量名错误） 2、request.js 修复表单格式传参，数据嵌套bug 3、detail页进度条结束时导致宽度溢出bug 4、切换播放模式，图标不变bug
1 parent 58af6e7 commit 49b98b6

File tree

10 files changed

+94
-73
lines changed

10 files changed

+94
-73
lines changed

‎README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
![image](https://img.shields.io/badge/mint--ui-2.2.13-blue.svg)
77
![image](https://img.shields.io/badge/vue--cli-3.x-green.svg)
88

9-
> master分支是基于vue-cli-3.x
10-
119
##### 其他分支：
12-
- [vue-cli-2.x](https://github.com/uncleLian/vue2-echo/tree/v2.0)
1310
- [TypeScript版本](https://github.com/uncleLian/vue2-echo/tree/typescript)
11+
- [vue-cli-2.x](https://github.com/uncleLian/vue2-echo/tree/v2.0)
12+
13+
##### react版本
14+
- [react-echo](https://unclelian.github.io/react-echo/)
1415

1516
## 前言
1617
这是一个Vue学习系列，难度：容易 -> 中等 -> 困难， 3个复杂度和不同类型的项目，一步步地带领大家熟悉和深入Vue。这些系列项目将会涉及Vue的大部分知识，如果都能熟悉和掌握，那么就可以随心所欲地使用Vue去写单页面应用了。
@@ -46,7 +47,7 @@ Vue学习系列
4647

4748
[在线链接](http://echo.liansixin.win)（请使用手机模式预览）
4849

49-
<img src="https://github.com/uncleLian/vue2-echo/raw/gh-pages/screenshots/echo_QRcode.png" width="250" height="250"/>
50+
<img src="https://unclelian.github.io/vue2-echo/screenshots/echo_QRcode.png" width="250" height="250"/>
5051

5152
## 功能
5253

@@ -57,9 +58,11 @@ Vue学习系列
5758

5859
## 项目截图
5960

60-
![image](https://github.com/uncleLian/vue2-echo/raw/gh-pages/screenshots/echo_index.png)
61+
![image](https://unclelian.github.io/vue2-echo/screenshots/echo_index.png)
62+
63+
![image](https://unclelian.github.io/vue2-echo/screenshots/echo_detail.png)
6164

62-
![image](https://github.com/uncleLian/vue2-echo/raw/gh-pages/screenshots/echo_detail.png)
65+
![image](https://unclelian.github.io/vue2-echo/screenshots/echo_mode.png)
6366

6467
## 目录结构
6568

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue2-echo",
3-
"version": "3.1.0",
3+
"version": "3.2.0",
44
"private": true,
55
"scripts": {
66
"dev": "vue-cli-service serve",

‎src/assets/img/vip.png‎

1.65 KB
Loading

‎src/components/MusicBar/index.vue‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<!-- 播放/暂停 -->
2121
<div class="control-icon control-icon-mid" :class="audio_play ? 'my-icon-pause' : 'my-icon-arrow'" @click="SET_AUDIO_PLAY(!audio_play)"></div>
2222
<!-- 下一首 -->
23-
<div class="my-icon-next control-icon" @click="listRepeatMode"></div>
23+
<div class="my-icon-next control-icon" @click="handleNextAudio"></div>
2424
</div>
2525
</div>
2626
<!-- 进度条 -->
@@ -43,14 +43,12 @@ export default {
4343
}
4444
},
4545
computed: {
46-
...mapState([
47-
'playMode',
48-
'playList'
49-
]),
5046
...mapState({
5147
audio_ele: state => state.audio.ele,
5248
audio_data: state => state.audio.data,
53-
audio_play: state => state.audio.play
49+
audio_play: state => state.audio.play,
50+
playList: state => state.playList,
51+
playMode: state => state.playMode
5452
}),
5553
...mapGetters([
5654
'audio_progress'
@@ -61,7 +59,6 @@ export default {
6159
// 当前audio数据改变了，等dom更新完，初始化audio
6260
if (val) {
6361
this.$nextTick(() => {
64-
this.isAddToPlayList(val)
6562
this.audioInit()
6663
})
6764
}
@@ -157,16 +154,8 @@ export default {
157154
console.warn('正常逻辑不会到这里啊')
158155
}
159156
},
160-
// 添加播放列表
161-
isAddToPlayList(item) {
162-
let ishas = false
163-
if (this.playList.find((n) => n.sound.id === item.sound.id)) {
164-
ishas = true
165-
}
166-
if (!ishas) {
167-
this.playList.unshift(item)
168-
this.SET_PLAY_LIST(this.playList)
169-
}
157+
handleNextAudio() {
158+
this.listRepeatMode()
170159
}
171160
}
172161
}

‎src/components/Popup/index.vue‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,29 @@
22
<div class="popup" :class="{'playMode': playModeVisible}">
33
<!-- 播放列表 -->
44
<mt-popup class="playListSheet" v-model="playListVisible" position="bottom">
5-
<div class="playList-header">
6-
<div class="playList-mode-btn left" @click="clearablePlayList">清空</div>
7-
<div class="playList-title">播放列表<span class="playList-count">（{{playList.length}}首）</span>
5+
<div class="playList-container">
6+
<div class="playList-header">
7+
<div class="playList-mode-btn left" @click="clearablePlayList">清空</div>
8+
<div class="playList-title">播放列表<span class="playList-count">（{{playList.length}}首）</span>
9+
</div>
10+
<div class="playList-mode-btn right" :class="handleModeIcon()" @click="playModeVisible = true"></div>
811
</div>
9-
<div class="playList-mode-btn right my-icon-more" @click="playModeVisible = true"></div>
10-
</div>
11-
<ul class="playList" v-if="playList && playList.length > 0">
12-
<li class="playList-item" v-for="(item, index) in playList" :key="item.sound.id" :class="{'playing': audio.data.sound.id === item.sound.id}" @click="muiscChange(item)">
13-
<div class="item-name">
14-
<!-- icon -->
15-
<div class="name-icon-container">
16-
<div class="name-icon" :class="audio.data.sound.id === item.sound.id ? 'my-icon-circle-play': 'smallCircle' "></div>
12+
<ul class="playList" v-if="playList && playList.length > 0">
13+
<li class="playList-item" v-for="(item, index) in playList" :key="item.sound.id" :class="{'playing': audio.data.sound.id === item.sound.id}" @click="muiscChange(item)">
14+
<div class="item-name">
15+
<!-- icon -->
16+
<div class="name-icon-container">
17+
<div class="name-icon" :class="audio.data.sound.id === item.sound.id ? 'my-icon-circle-play': 'smallCircle' "></div>
18+
</div>
19+
<!-- 名字 -->
20+
<div class="name-value" :class="audio.data.sound.id === item.sound.id ? 'onPlay': '' ">{{item.sound.name}}</div>
1721
</div>
18-
<!-- 名字 -->
19-
<div class="name-value" :class="audio.data.sound.id === item.sound.id ? 'onPlay': '' ">{{item.sound.name}}</div>
20-
</div>
21-
<!-- 删除按钮 -->
22-
<div class="item-close my-icon-close" @click.stop="deletePlayListItem(item, index)"></div>
23-
</li>
24-
</ul>
25-
<div class="playList-nothing" v-else>什么都没有了T T~</div>
22+
<!-- 删除按钮 -->
23+
<div class="item-close my-icon-close" @click.stop="deletePlayListItem(item, index)"></div>
24+
</li>
25+
</ul>
26+
<div class="playList-nothing" v-else>什么都没有了T T~</div>
27+
</div>
2628
</mt-popup>
2729

2830
<!-- 播放模式 -->
@@ -37,7 +39,7 @@
3739
</template>
3840
<script>
3941
import { mapState, mapMutations } from 'vuex'
40-
import { ArrayOptions } from '@/utils/playMode'
42+
import { ArrayOptions, findActiveMode } from '@/utils/playMode'
4143
export default {
4244
data() {
4345
return {
@@ -94,7 +96,11 @@ export default {
9496
this.playList.splice(index, 1)
9597
this.SET_PLAY_LIST(this.playList)
9698
},
97-
// 切换显示
99+
handleModeIcon() {
100+
const item = findActiveMode(this.playMode)
101+
return item.icon
102+
},
103+
// 切换显示（供父组件调用）
98104
toggleVisible() {
99105
this.playListVisible = !this.playListVisible
100106
}
@@ -114,9 +120,10 @@ export default {
114120
}
115121
.playListSheet {
116122
width: 100%;
117-
max-height: toRem(188);
118123
border-top: 1px solid $borderColor;
119-
margin-bottom: $musicBarHeight;
124+
.playList-container {
125+
margin-bottom: $musicBarHeight;
126+
}
120127
.playList-header {
121128
position: relative;
122129
flex-center();

‎src/pages/detail/detail.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="user-left">
77
<div class="user-img-container">
88
<img class="user-img" :src="audio.data.sound.user.avatar_50">
9-
<img v-if="audio.data.sound.user.famous_type" class='user-vip' src="https://ws-qn-echo-image-cdn.app-echo.com/Foz1CX1MdKHnTiDV26btgAmDJ3Y-?imageMogr2/auto-orient/quality/100%7CimageMogr2/thumbnail/!100x100r/gravity/Center/crop/100x100/dx/0/dy/0">
9+
<img v-if="audio.data.sound.user.famous_type" class='user-vip' src="~@/assets/img/vip.png">
1010
</div>
1111
<div class="user-name">{{audio.data.sound.user.name}}</div>
1212
</div>
@@ -242,10 +242,12 @@ $danmuHeight = $coverHeight - $controlHeight - $progressBarHeight;
242242
bottom: $controlHeight;
243243
left: 0;
244244
right: 0;
245+
width: 100%;
245246
height: $progressBarHeight;
246247
color: #fff;
247248
font-size: toRem(12);
248249
background: rgba(0, 0, 0, 0.2);
250+
overflow: hidden;
249251
.progress-time {
250252
display: flex;
251253
align-items: center;

‎src/pages/index/index.vue‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id='index' v-infinite-scroll="getListDataMore" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="false" infinite-scroll-distance="0">
2+
<div id='index' v-infinite-scroll="getListDataMore" infinite-scroll-disabled="lock" infinite-scroll-immediate-check="false" infinite-scroll-distance="0">
33
<!-- banner -->
44
<music-banner :json='bannerJson'></music-banner>
55
<!-- 推荐 -->
@@ -23,8 +23,6 @@ import { getBanner, getList } from '@/api'
2323
import MusicBanner from '@/components/MusicBanner'
2424
import MusicList from '@/components/MusicList'
2525
import BottomLoading from '@/components/BottomLoading'
26-
import playMode from '@/utils/playMode'
27-
2826
export default {
2927
name: 'index',
3028
components: { MusicBanner, MusicList, BottomLoading },
@@ -47,7 +45,9 @@ export default {
4745
this.getListData()
4846
},
4947
activated() {
50-
this.lock = false
48+
if (!this.loading) {
49+
this.lock = false
50+
}
5151
},
5252
beforeRouteLeave(to, from, next) {
5353
this.lock = true
@@ -61,22 +61,16 @@ export default {
6161
]),
6262
getBannerData() {
6363
getBanner().then(res => {
64-
if (res.data && res.data.length > 0) {
65-
this.bannerJson = res.data
66-
}
64+
this.bannerJson = res.data
6765
})
6866
},
6967
getListData() {
7068
this.$indicator.open()
7169
this.page = 1
7270
getList(this.page).then(res => {
7371
// console.log(res)
74-
if (res.data && res.data.length > 0) {
75-
this.listJson = res.data
76-
this.page = 2
77-
}
78-
this.$indicator.close()
79-
}).catch(_ => {
72+
this.listJson = res.data
73+
this.page = 2
8074
this.$indicator.close()
8175
})
8276
},
@@ -89,7 +83,7 @@ export default {
8983
if (res.data && res.data.length > 0) {
9084
this.listJson.push(...res.data)
9185
this.page++
92-
this.loading = ''
86+
this.loading = false
9387
this.lock = false
9488
} else {
9589
this.loading = 'nothing'
@@ -103,8 +97,7 @@ export default {
10397
playAll() {
10498
// 设置播放列表
10599
this.SET_PLAY_LIST(this.listJson)
106-
// 设置播放模式：列表循环
107-
this.SET_PLAY_MODE(playMode.listRepeat.value)
100+
this.$toast('已添加到播放列表')
108101
// 当前音乐是否等于即将要播放的音乐？重新加载播放 ： 播放即将的音乐
109102
if (this.audio.data && this.listJson[0].sound.id === this.audio.data.sound.id) {
110103
this.audio.ele.load()

‎src/store/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Vue from 'vue'
22
import Vuex from 'vuex'
33
import cache from '@/utils/cache'
44
import playMode from '@/utils/playMode'
5+
import router from '@/router'
56

67
Vue.use(Vuex)
78

@@ -30,6 +31,15 @@ const mutations = {
3031
},
3132
SET_AUDIO_DATA(state, val) {
3233
state.audio.data = val
34+
// 判断是否添加到播放列表
35+
const isHas = state.playList.find((n) => n.sound.id === val.sound.id)
36+
if (!isHas) {
37+
state.playList.unshift(val)
38+
}
39+
// 判断是否跳更新详情页（当前是详情页则进行replace）
40+
if (router.history.current.name === 'detail') {
41+
router.replace({ name: 'detail', query: { 'id': val.sound.id } })
42+
}
3343
},
3444
SET_AUDIO_PLAY(state, val) {
3545
state.audio.play = val

‎src/utils/playMode.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ const Options = {
2222
}
2323
}
2424

25+
// 查找当前value的item
26+
export function findActiveMode(value) {
27+
const activeOption = ArrayOptions.find(item => item.value === value)
28+
return activeOption
29+
}
30+
31+
// 数组形式
2532
export let ArrayOptions = []
2633
Object.keys(Options).forEach(key => {
2734
ArrayOptions.push(Options[key])

‎src/utils/request.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,31 @@ instance.interceptors.response.use(response => {
3434
export const request = async (url = '', type = 'GET', data = {}, isForm = false) => {
3535
let result
3636
type = type.toUpperCase()
37+
let requestOptions = {
38+
method: type,
39+
url: url
40+
}
3741
if (isForm) {
3842
let form = new FormData()
3943
Object.keys(data).forEach(key => {
40-
form.append(key, data[key])
44+
let value = data[key]
45+
if (Array.isArray(value)) {
46+
value.forEach(item => {
47+
form.append(key, item)
48+
})
49+
} else {
50+
form.append(key, data[key])
51+
}
4152
})
4253
data = form
4354
}
44-
let requestOptions = {
45-
method: type,
46-
url: url,
47-
headers: {
48-
'Content-type': isForm ? 'multipart/form-data' : 'application/json'
49-
},
50-
params: type === 'GET' ? data : '',
51-
data: type !== 'GET' ? data : ''
55+
requestOptions['headers'] = {
56+
'Content-type': isForm ? 'multipart/form-data' : 'application/json'
57+
}
58+
if (type === 'GET') {
59+
requestOptions['params'] = data
60+
} else {
61+
requestOptions['data'] = data
5262
}
5363
await instance(requestOptions).then(res => {
5464
result = res

0 commit comments

Comments
 (0)