qier222
4 years ago
parent
44df6f5531
commit
d1a080eb8f
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<Modal
|
||||
class="add-track-to-playlist-modal"
|
||||
:show="show"
|
||||
:close="close"
|
||||
:showFooter="false"
|
||||
title="添加到歌单"
|
||||
width="25vw"
|
||||
>
|
||||
<template slot="default">
|
||||
<div class="new-playlist-button" @click="newPlaylist"
|
||||
><svg-icon icon-class="plus" />新建歌单</div
|
||||
>
|
||||
<div
|
||||
class="playlist"
|
||||
v-for="playlist in ownPlaylists"
|
||||
:key="playlist.id"
|
||||
@click="addTrackToPlaylist(playlist.id)"
|
||||
>
|
||||
<img :src="playlist.coverImgUrl | resizeImage(224)" />
|
||||
<div class="info">
|
||||
<div class="title">{{ playlist.name }}</div>
|
||||
<div class="track-count">{{ playlist.trackCount }} 首</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from "vuex";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { userPlaylist } from "@/api/user";
|
||||
import { addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
|
||||
export default {
|
||||
name: "ModalAddTrackToPlaylist",
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playlists: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals", "data"]),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.addTrackToPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "addTrackToPlaylistModal",
|
||||
key: "show",
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
ownPlaylists() {
|
||||
return this.playlists.filter(
|
||||
(p) =>
|
||||
p.creator.userId === this.data.user.userId &&
|
||||
p.id !== this.data.likedSongPlaylistID
|
||||
);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getUserPlaylists();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
...mapActions(["showToast"]),
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
getUserPlaylists() {
|
||||
userPlaylist({
|
||||
timestamp: new Date().getTime(),
|
||||
limit: 1000,
|
||||
uid: this.data.user.userId,
|
||||
}).then((data) => {
|
||||
this.playlists = data.playlist;
|
||||
});
|
||||
},
|
||||
addTrackToPlaylist(playlistID) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
pid: playlistID,
|
||||
tracks: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
}).then((data) => {
|
||||
if (data.body.code === 200) {
|
||||
this.show = false;
|
||||
this.showToast("已添加到歌单");
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
newPlaylist() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "afterCreateAddTrackID",
|
||||
value: this.modals.addTrackToPlaylistModal.selectedTrackID,
|
||||
});
|
||||
this.close();
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
value: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.new-playlist-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 6px;
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-bg-for-transparent);
|
||||
}
|
||||
}
|
||||
.playlist {
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
}
|
||||
img {
|
||||
border-radius: 8px;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
margin-right: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
padding-right: 16px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
.track-count {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
opacity: 0.68;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<Modal
|
||||
class="add-playlist-modal"
|
||||
:show="show"
|
||||
:close="close"
|
||||
title="新建歌单"
|
||||
width="25vw"
|
||||
>
|
||||
<template slot="default">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="歌单标题"
|
||||
maxlength="40"
|
||||
v-model="title"
|
||||
/>
|
||||
<div class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox-private"
|
||||
v-model="privatePlaylist"
|
||||
/>
|
||||
<label for="checkbox-private">设置为隐私歌单</label>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<button class="primary block" @click="createPlaylist">创建</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/components/Modal.vue";
|
||||
import { mapMutations, mapState } from "vuex";
|
||||
import { createPlaylist, addOrRemoveTrackFromPlaylist } from "@/api/playlist";
|
||||
|
||||
export default {
|
||||
name: "ModalNewPlaylist",
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: "",
|
||||
privatePlaylist: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["modals"]),
|
||||
show: {
|
||||
get() {
|
||||
return this.modals.newPlaylistModal.show;
|
||||
},
|
||||
set(value) {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "show",
|
||||
value,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["updateModal"]),
|
||||
close() {
|
||||
this.show = false;
|
||||
this.title = "";
|
||||
this.privatePlaylist = false;
|
||||
this.resetAfterCreateAddTrackID();
|
||||
},
|
||||
createPlaylist() {
|
||||
let params = { name: this.title };
|
||||
if (this.private) params.type = 10;
|
||||
createPlaylist(params).then((data) => {
|
||||
if (data.code === 200) {
|
||||
if (this.modals.newPlaylistModal.afterCreateAddTrackID !== 0) {
|
||||
addOrRemoveTrackFromPlaylist({
|
||||
op: "add",
|
||||
pid: data.id,
|
||||
tracks: this.modals.newPlaylistModal.afterCreateAddTrackID,
|
||||
}).then((data) => {
|
||||
if (data.body.code === 200) {
|
||||
this.showToast("已添加到歌单");
|
||||
} else {
|
||||
this.showToast(data.body.message);
|
||||
}
|
||||
this.resetAfterCreateAddTrackID();
|
||||
});
|
||||
}
|
||||
this.close();
|
||||
this.showToast("成功创建歌单");
|
||||
}
|
||||
});
|
||||
},
|
||||
resetAfterCreateAddTrackID() {
|
||||
this.updateModal({
|
||||
modalName: "newPlaylistModal",
|
||||
key: "AfterCreateAddTrackID",
|
||||
value: 0,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-playlist-modal {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
input {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: calc(100% - 24px);
|
||||
flex: 1;
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
margin-top: -1px;
|
||||
color: var(--color-text);
|
||||
&:focus {
|
||||
background: var(--color-primary-bg-for-transparent);
|
||||
opacity: 1;
|
||||
}
|
||||
[data-theme="light"] &:focus {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
.checkbox {
|
||||
input[type="checkbox" i] {
|
||||
margin: 3px 3px 3px 4px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue