mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-01 08:56:32 +08:00
feat: add new playlist function
This commit is contained in:
qier222
parent
0680d258ae
commit
b137ee2f72
|
|
@ -102,6 +102,7 @@ export function playlistCatlist() {
|
|||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 所有榜单
|
||||
* 说明 : 调用此接口,可获取所有榜单 接口地址 : /toplist
|
||||
|
|
@ -112,6 +113,7 @@ export function toplists() {
|
|||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏/取消收藏歌单
|
||||
* 说明 : 调用此接口, 传入类型和歌单 id 可收藏歌单或者取消收藏歌单
|
||||
|
|
@ -128,3 +130,36 @@ export function subscribePlaylist(params) {
|
|||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除歌单
|
||||
* 说明 : 调用此接口 , 传入歌单id可删除歌单
|
||||
* - id : 歌单id,可多个,用逗号隔开
|
||||
* * @param {number} id
|
||||
*/
|
||||
export function deletePlaylist(id) {
|
||||
return request({
|
||||
url: "/playlist/delete",
|
||||
method: "post",
|
||||
params: { id },
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 新建歌单
|
||||
* 说明 : 调用此接口 , 传入歌单名字可新建歌单
|
||||
* - name : 歌单名
|
||||
* - privacy : 是否设置为隐私歌单，默认否，传'10'则设置成隐私歌单
|
||||
* - type : 歌单类型,默认'NORMAL',传 'VIDEO'则为视频歌单
|
||||
* @param {Object} params
|
||||
* @param {string} params.name
|
||||
* @param {number} params.privacy
|
||||
* @param {string} params.type
|
||||
*/
|
||||
export function createPlaylist(params) {
|
||||
return request({
|
||||
url: "/playlist/create",
|
||||
method: "post",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="shade" @click="close" v-show="show">
|
||||
<div class="description-full" @click.stop>
|
||||
<span>{{ text }}</span>
|
||||
<span class="close" @click="close">
|
||||
{{ $t("modal.close") }}
|
||||
</span>
|
||||
<div class="shade" @click="clickOutside" v-show="show">
|
||||
<div class="modal" @click.stop :style="modalStyles">
|
||||
<div class="header">
|
||||
<div class="title">{{ title }}</div>
|
||||
<button class="close" @click="close"
|
||||
><svg-icon icon-class="x"
|
||||
/></button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="footer" v-if="showFooter">
|
||||
<!-- <button>取消</button>
|
||||
<button class="primary">确定</button> -->
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -17,14 +25,43 @@ export default {
|
|||
props: {
|
||||
show: Boolean,
|
||||
close: Function,
|
||||
text: String,
|
||||
title: {
|
||||
type: String,
|
||||
default: "Title",
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "50vw",
|
||||
},
|
||||
clickOutsideHide: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
modalStyles() {
|
||||
return {
|
||||
width: this.width,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickOutside() {
|
||||
if (this.clickOutsideHide) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.shade {
|
||||
background: rgba(255, 255, 255, 0.38);
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -33,27 +70,82 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.description-full {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(12px) opacity(1);
|
||||
padding: 32px;
|
||||
border-radius: 12px;
|
||||
width: 50vw;
|
||||
margin: auto 0;
|
||||
font-size: 14px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.close {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
.modal {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(12px) opacity(1);
|
||||
padding: 20px 24px 24px 24px;
|
||||
border-radius: 12px;
|
||||
width: 50vw;
|
||||
margin: auto 0;
|
||||
font-size: 14px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
button {
|
||||
color: var(--color-text);
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0.68;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
}
|
||||
}
|
||||
.svg-icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.18);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: -8px;
|
||||
button {
|
||||
color: var(--color-text);
|
||||
background: var(--color-secondary-bg-for-transparent);
|
||||
border-radius: 8px;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
transition: 0.2s;
|
||||
&:active {
|
||||
transform: scale(0.94);
|
||||
}
|
||||
}
|
||||
button.primary {
|
||||
color: var(--color-primary-bg);
|
||||
background: var(--color-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
button.block {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,10 +154,11 @@ export default {
|
|||
.shade {
|
||||
background: rgba(0, 0, 0, 0.38);
|
||||
color: var(--color-text);
|
||||
.description-full {
|
||||
background: rgba(46, 46, 46, 0.68);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: rgba(46, 46, 46, 0.68);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,35 +41,44 @@
|
|||
</div>
|
||||
|
||||
<div class="section-two" id="liked">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'playlists' }"
|
||||
@click="updateCurrentTab('playlists')"
|
||||
>
|
||||
Playlists
|
||||
<div class="tabs-row">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'playlists' }"
|
||||
@click="updateCurrentTab('playlists')"
|
||||
>
|
||||
Playlists
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'albums' }"
|
||||
@click="updateCurrentTab('albums')"
|
||||
>
|
||||
Albums
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'artists' }"
|
||||
@click="updateCurrentTab('artists')"
|
||||
>
|
||||
Artists
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'mvs' }"
|
||||
@click="updateCurrentTab('mvs')"
|
||||
>
|
||||
MVs
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'albums' }"
|
||||
@click="updateCurrentTab('albums')"
|
||||
<button
|
||||
class="add-playlist"
|
||||
icon="plus"
|
||||
v-show="currentTab === 'playlists'"
|
||||
@click="showAddPlaylistModal = true"
|
||||
><svg-icon icon-class="plus" />新建歌单</button
|
||||
>
|
||||
Albums
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'artists' }"
|
||||
@click="updateCurrentTab('artists')"
|
||||
>
|
||||
Artists
|
||||
</div>
|
||||
<div
|
||||
class="tab"
|
||||
:class="{ active: currentTab === 'mvs' }"
|
||||
@click="updateCurrentTab('mvs')"
|
||||
>
|
||||
MVs
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="currentTab === 'playlists'">
|
||||
|
|
@ -100,11 +109,39 @@
|
|||
<MvRow :mvs="mvs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
class="add-playlist-modal"
|
||||
:show="showAddPlaylistModal"
|
||||
:close="closeAddPlaylistModal"
|
||||
title="新建歌单"
|
||||
width="25vw"
|
||||
>
|
||||
<template slot="default">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="歌单标题"
|
||||
maxlength="40"
|
||||
v-model="newPlaylist.title"
|
||||
/>
|
||||
<div class="checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="checkbox-private"
|
||||
v-model="newPlaylist.private"
|
||||
/>
|
||||
<label for="checkbox-private">设置为隐私歌单</label>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<button class="primary block" @click="createPlaylist">创建</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import { mapActions, mapState } from "vuex";
|
||||
import { getTrackDetail, getLyric } from "@/api/track";
|
||||
import {
|
||||
userDetail,
|
||||
|
|
@ -114,18 +151,19 @@ import {
|
|||
likedMVs,
|
||||
} from "@/api/user";
|
||||
import { randomNum, dailyTask } from "@/utils/common";
|
||||
import { getPlaylistDetail } from "@/api/playlist";
|
||||
import { getPlaylistDetail, createPlaylist } from "@/api/playlist";
|
||||
import { playPlaylistByID } from "@/utils/play";
|
||||
import NProgress from "nprogress";
|
||||
|
||||
import TrackList from "@/components/TrackList.vue";
|
||||
import CoverRow from "@/components/CoverRow.vue";
|
||||
import MvRow from "@/components/MvRow.vue";
|
||||
import SvgIcon from "@/components/SvgIcon.vue";
|
||||
import MvRow from "@/components/MvRow.vue";
|
||||
import Modal from "@/components/Modal.vue";
|
||||
|
||||
export default {
|
||||
name: "Library",
|
||||
components: { SvgIcon, CoverRow, TrackList, MvRow },
|
||||
components: { SvgIcon, CoverRow, TrackList, MvRow, Modal },
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
|
|
@ -142,6 +180,11 @@ export default {
|
|||
albums: [],
|
||||
artists: [],
|
||||
mvs: [],
|
||||
showAddPlaylistModal: false,
|
||||
newPlaylist: {
|
||||
title: "",
|
||||
private: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -180,6 +223,7 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["showToast"]),
|
||||
playLikedSongs() {
|
||||
playPlaylistByID(this.playlists[0].id, "first", true);
|
||||
},
|
||||
|
|
@ -267,6 +311,25 @@ export default {
|
|||
NProgress.done();
|
||||
});
|
||||
},
|
||||
createPlaylist() {
|
||||
let params = { name: this.newPlaylist.title };
|
||||
if (this.newPlaylist.private) params.type = 10;
|
||||
createPlaylist(params).then((data) => {
|
||||
if (data.code === 200) {
|
||||
this.closeAddPlaylistModal();
|
||||
this.showToast("成功创建歌单");
|
||||
this.playlists = [];
|
||||
this.getUserPlaylists(true);
|
||||
}
|
||||
});
|
||||
},
|
||||
closeAddPlaylistModal() {
|
||||
this.showAddPlaylistModal = false;
|
||||
this.newPlaylist = {
|
||||
title: "",
|
||||
private: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
likedSongsInState() {
|
||||
|
|
@ -381,16 +444,21 @@ h1 {
|
|||
min-height: calc(100vh - 182px);
|
||||
}
|
||||
|
||||
.tabs-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 18px;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 6px;
|
||||
.tab {
|
||||
font-weight: 600;
|
||||
padding: 8px 14px;
|
||||
margin: 10px 14px 6px 0;
|
||||
margin-right: 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
|
@ -406,4 +474,68 @@ h1 {
|
|||
background-color: var(--color-secondary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
button.add-playlist {
|
||||
color: var(--color-text);
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.2s;
|
||||
opacity: 0.68;
|
||||
font-weight: 500;
|
||||
.svg-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--color-secondary-bg);
|
||||
}
|
||||
&:active {
|
||||
opacity: 1;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
.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"] {
|
||||
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
Block a user