Skip to content
This repository was archived by the owner on May 11, 2021. It is now read-only.

Commit cdffb4e

Browse files
lbwalbwa
committed
构建 - 添加歌曲到列表
1 parent c07977f commit cdffb4e

File tree

5 files changed

+206
-15
lines changed

5 files changed

+206
-15
lines changed

‎src/base/base-switches/base-switches.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<ul class="switches">
3+
<li
4+
:class="['switch-item', {active: currentSwitchIndex === index}]"
5+
v-for="(item, index) of switchOptions" :key="index"
6+
@click="selectedSwitch(index)"
7+
>{{ item.name }}</li>
8+
</ul>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: {
14+
switchOptions: {
15+
type: Array,
16+
default () {
17+
return []
18+
}
19+
},
20+
21+
currentSwitchIndex: {
22+
type: Number,
23+
default: 0
24+
}
25+
},
26+
27+
methods: {
28+
selectedSwitch (index) {
29+
this.$emit('selectSwitch', index)
30+
}
31+
}
32+
}
33+
</script>
34+
35+
<style lang="scss" scoped>
36+
@import '~scss/variables';
37+
38+
.switches {
39+
display: flex;
40+
align-items: center;
41+
margin: 0 auto;
42+
width: 240px;
43+
border: 1px solid $color-highlight-background;
44+
border-radius: 5px;
45+
text-align: center;
46+
.switch-item {
47+
flex: 1;
48+
padding: 8px;
49+
font-size: $font-size-medium;
50+
color: $color-text-d;
51+
&.active {
52+
background-color: $color-highlight-background;
53+
color: $color-text;
54+
}
55+
}
56+
}
57+
</style>

‎src/components/parts-add-to-list/parts-add-to-list.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<transition name="slide">
3+
<div class="add-to-list" v-show="hasShowComponent">
4+
5+
<div class="header">
6+
<h1 class="title">添加歌曲到列表</h1>
7+
<div class="close-btn" @click="hideComponent">
8+
<i class="icon-close"></i>
9+
</div>
10+
</div>
11+
12+
<div class="search-box-wrapper">
13+
<BaseSearchBox placeholder="搜索歌曲、歌手" @queryChange="getQueryKey"/>
14+
</div>
15+
16+
<div class="shortcut" v-show="!queryKey">
17+
<BaseSwitches
18+
:switchOptions="switchOptions" :currentSwitchIndex="switchIndex"
19+
@selectSwitch="toggleSwitchIndex"
20+
/>
21+
22+
<div class="list-wrapper"></div>
23+
</div>
24+
25+
<div class="search-result-wrapper" v-show="queryKey">
26+
<PartsResult :query="queryKey" :showArtist="false"/>
27+
</div>
28+
29+
</div>
30+
</transition>
31+
</template>
32+
33+
<script>
34+
import BaseSearchBox from 'base/base-search-box'
35+
import BaseSwitches from 'base/base-switches/base-switches'
36+
import PartsResult from 'components/parts-search-result/parts-search-result'
37+
38+
export default {
39+
data () {
40+
return {
41+
hasShowComponent: false,
42+
switchOptions: [{ name: '最近播放' }, { name: '搜索历史' }],
43+
switchIndex: 0,
44+
queryKey: ''
45+
}
46+
},
47+
48+
methods: {
49+
toggleSwitchIndex (index) {
50+
this.switchIndex = (index++) % 2
51+
},
52+
53+
getQueryKey (query) {
54+
this.queryKey = query
55+
},
56+
57+
showComponent () {
58+
this.hasShowComponent = true
59+
},
60+
61+
hideComponent () {
62+
this.hasShowComponent = false
63+
}
64+
},
65+
66+
components: {
67+
BaseSearchBox,
68+
BaseSwitches,
69+
PartsResult
70+
}
71+
}
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
@import '~scss/variables';
76+
77+
.add-to-list {
78+
position: fixed;
79+
top: 0;
80+
bottom: 0;
81+
width: 100%;
82+
background-color: $color-background;
83+
z-index: 1000; // TODO: 隐藏 playlist ?
84+
&.slide-enter, &.slide-leave-to {
85+
transform: translateX(100%)
86+
}
87+
&.slide-enter-active, &.slide-leave-active {
88+
transition: all .3s;
89+
}
90+
.header {
91+
position: relative;
92+
height: 44px;
93+
text-align: center;
94+
.title {
95+
line-height: 44px;
96+
font-size: $font-size-large;
97+
color: $color-text;
98+
}
99+
.close-btn {
100+
position: absolute;
101+
top: 0;
102+
right: 8px;
103+
.icon-close {
104+
display: block;
105+
padding: 12px;
106+
font-size: 20px;
107+
color: $color-theme;
108+
}
109+
}
110+
}
111+
.search-box-wrapper {
112+
margin: 20px;
113+
}
114+
.search-result-wrapper {
115+
position: fixed;
116+
top: 124px;
117+
bottom: 0;
118+
width: 100%;
119+
}
120+
}
121+
122+
</style>

‎src/components/parts-playlist/parts-playlist.vue‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
</BaseScroll>
3737

3838
<div class="list-operate">
39-
<div class="add-song">
39+
<div class="add-song" @click="showAddToList">
4040
<i class="icon-add"></i>
4141
<span class="text">添加歌曲到队列</span>
4242
</div>
@@ -54,13 +54,16 @@
5454
/>
5555

5656
</div>
57+
58+
<PartsAddToList ref="addToList"/>
5759
</div>
5860
</transition>
5961
</template>
6062

6163
<script>
6264
import BaseScroll from 'base/base-scroll'
6365
import BaseConfirm from 'base/base-confirm'
66+
import PartsAddToList from 'components/parts-add-to-list/parts-add-to-list'
6467
import { mapActions } from 'vuex'
6568
import { playMode } from 'common/js/config'
6669
import { playerMixin } from 'common/js/mixin'
@@ -74,6 +77,10 @@ export default {
7477
},
7578
7679
methods: {
80+
showAddToList () {
81+
this.$refs.addToList.showComponent()
82+
},
83+
7784
deleteAllSongs () {
7885
this.deleteAllSongsFromList()
7986
this.closePlaylist()
@@ -155,7 +162,8 @@ export default {
155162
156163
components: {
157164
BaseScroll,
158-
BaseConfirm
165+
BaseConfirm,
166+
PartsAddToList
159167
}
160168
}
161169
</script>

‎src/components/parts-search-result/parts-search-result.vue‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<BaseScroll
3-
class="search-result-wrapper"
3+
class="search-result"
44
ref="scroll"
55
:data="searchResult" :pullUp="pullUp" :beforeScroll="beforeScroll"
66
@scrollToEnd="searchMore"
@@ -205,11 +205,7 @@ export default {
205205
@import '~scss/variables';
206206
@import '~scss/mixin';
207207
208-
.search-result-wrapper {
209-
position: fixed;
210-
top: 178px;
211-
bottom: 0;
212-
width: 100%;
208+
.search-result {
213209
overflow: hidden;
214210
font-size: 0;
215211
.result-list {

‎src/components/the-search/search.vue‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,15 @@
4040
</BaseScroll>
4141
</div>
4242

43-
<PartsResult
44-
@listScrolling="blurInputBox"
45-
@selectQuery="saveSearchItem"
46-
ref="resultList"
47-
:query="queryKey"
48-
v-show="queryKey"
49-
/>
43+
<div class="search-result-wrapper">
44+
<PartsResult
45+
@listScrolling="blurInputBox"
46+
@selectQuery="saveSearchItem"
47+
ref="resultList"
48+
:query="queryKey"
49+
v-show="queryKey"
50+
/>
51+
</div>
5052

5153
<BaseConfirm
5254
ref="confirm"
@@ -228,5 +230,11 @@ export default {
228230
}
229231
}
230232
}
233+
.search-result-wrapper {
234+
position: fixed;
235+
top: 178px;
236+
bottom: 0;
237+
width: 100%;
238+
}
231239
}
232240
</style>

0 commit comments

Comments
 (0)