github-mirror/YesPlayMusic
2
0
Fork 0
mirror of https://github.com/qier222/YesPlayMusic.git synced 2024-11-25 17:56:39 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: add more categories to explore page

Browse Source
This commit is contained in:
qier222 2020-11-02 12:32:22 +08:00
parent f17d61c268
commit 2e0b18d217
No known key found for this signature in database
GPG Key ID: 9C85007ED905F14D
8 changed files with 546 additions and 4502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "YesPlayMusic",
"version": "0.2.0",
"version": "0.2.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

45
src/store/initLocalStorage.js
View File

@ -1,3 +1,5 @@
import { playlistCategories } from "@/utils/staticData";
export default {
player: {
enable: false,
@ -31,48 +33,7 @@ export default {
},
},
settings: {
playlistCategories: [
{
name: "全部",
enable: true,
},
{
name: "推荐歌单",
enable: true,
},
{
name: "精品歌单",
enable: true,
},
{
name: "官方",
enable: true,
},
{
name: "流行",
enable: true,
},
{
name: "电子",
enable: true,
},
{
name: "摇滚",
enable: true,
},
{
name: "ACG",
enable: true,
},
// {
// name: "最新专辑",
// enable: true,
// },
{
name: "排行榜",
enable: true,
},
],
playlistCategories,
lang: null,
appearance: "auto",
musicQuality: 320000,

12
src/store/mutations.js
View File

@ -106,4 +106,16 @@ export default {
updateData(state, { key, value }) {
state.data[key] = value;
},
togglePlaylistCategory(state, name) {
let cat = state.settings.playlistCategories.find((c) => c.name === name);
cat.enable = !cat.enable;
state.settings.playlistCategories = state.settings.playlistCategories.map(
(c) => {
if (c.name === name) {
return cat;
}
return c;
}
);
},
};

416
src/utils/staticData.js Normal file
View File

@ -0,0 +1,416 @@
export const byAppleMusic = [
{
coverImgUrl:
"http://p2.music.126.net/GvYQoflE99eoeGi9jG4Bsw==/109951165375336156.jpg",
name: "Happy Hits",
id: 5278068783,
},
{
coverImgUrl:
"http://p2.music.126.net/5CJeYN35LnzRDsv5Lcs0-Q==/109951165374966765.jpg",
name: "\u4e2d\u563b\u5408\u74a7",
id: 5277771961,
},
{
coverImgUrl:
"http://p1.music.126.net/cPaBXr1wZSg86ddl47AK7Q==/109951165375130918.jpg",
name: "Heartbreak Pop",
id: 5277965913,
},
{
coverImgUrl:
"http://p2.music.126.net/FDtX55P2NjccDna-LBj9PA==/109951165375065973.jpg",
name: "Festival Bangers",
id: 5277969451,
},
{
coverImgUrl:
"http://p2.music.126.net/hC0q2dGbOWHVfg4nkhIXPg==/109951165374881177.jpg",
name: "Bedtime Beats",
id: 5277778542,
},
];
export const playlistCategories = [
{
name: "全部",
enable: true,
bigCat: "static",
},
{
name: "推荐歌单",
enable: true,
bigCat: "static",
},
// {
// name: "最新专辑",
// enable: false,
// bigCat: "static",
// },
{
name: "精品歌单",
enable: true,
bigCat: "static",
},
{
name: "官方",
enable: true,
bigCat: "static",
},
{
name: "排行榜",
enable: true,
bigCat: "static",
},
{
name: "华语",
enable: false,
bigCat: "语种",
},
{
name: "欧美",
enable: true,
bigCat: "语种",
},
{
name: "日语",
enable: false,
bigCat: "语种",
},
{
name: "韩语",
enable: false,
bigCat: "语种",
},
{
name: "粤语",
enable: false,
bigCat: "语种",
},
{
name: "流行",
enable: true,
bigCat: "风格",
},
{
name: "摇滚",
enable: true,
bigCat: "风格",
},
{
name: "民谣",
enable: false,
bigCat: "风格",
},
{
name: "电子",
enable: true,
bigCat: "风格",
},
{
name: "舞曲",
enable: false,
bigCat: "风格",
},
{
name: "说唱",
enable: true,
bigCat: "风格",
},
{
name: "轻音乐",
enable: false,
bigCat: "风格",
},
{
name: "爵士",
enable: false,
bigCat: "风格",
},
{
name: "乡村",
enable: false,
bigCat: "风格",
},
{
name: "R&B/Soul",
enable: false,
bigCat: "风格",
},
{
name: "古典",
enable: false,
bigCat: "风格",
},
{
name: "民族",
enable: false,
bigCat: "风格",
},
{
name: "英伦",
enable: false,
bigCat: "风格",
},
{
name: "金属",
enable: false,
bigCat: "风格",
},
{
name: "朋克",
enable: false,
bigCat: "风格",
},
{
name: "蓝调",
enable: false,
bigCat: "风格",
},
{
name: "雷鬼",
enable: false,
bigCat: "风格",
},
{
name: "世界音乐",
enable: false,
bigCat: "风格",
},
{
name: "拉丁",
enable: false,
bigCat: "风格",
},
{
name: "New Age",
enable: false,
bigCat: "风格",
},
{
name: "古风",
enable: false,
bigCat: "风格",
},
{
name: "后摇",
enable: false,
bigCat: "风格",
},
{
name: "Bossa Nova",
enable: false,
bigCat: "风格",
},
{
name: "清晨",
enable: false,
bigCat: "场景",
},
{
name: "夜晚",
enable: false,
bigCat: "场景",
},
{
name: "学习",
enable: false,
bigCat: "场景",
},
{
name: "工作",
enable: false,
bigCat: "场景",
},
{
name: "午休",
enable: false,
bigCat: "场景",
},
{
name: "下午茶",
enable: false,
bigCat: "场景",
},
{
name: "地铁",
enable: false,
bigCat: "场景",
},
{
name: "驾车",
enable: false,
bigCat: "场景",
},
{
name: "运动",
enable: false,
bigCat: "场景",
},
{
name: "旅行",
enable: false,
bigCat: "场景",
},
{
name: "散步",
enable: false,
bigCat: "场景",
},
{
name: "酒吧",
enable: false,
bigCat: "场景",
},
{
name: "怀旧",
enable: false,
bigCat: "情感",
},
{
name: "清新",
enable: false,
bigCat: "情感",
},
{
name: "浪漫",
enable: false,
bigCat: "情感",
},
{
name: "伤感",
enable: false,
bigCat: "情感",
},
{
name: "治愈",
enable: false,
bigCat: "情感",
},
{
name: "放松",
enable: false,
bigCat: "情感",
},
{
name: "孤独",
enable: false,
bigCat: "情感",
},
{
name: "感动",
enable: false,
bigCat: "情感",
},
{
name: "兴奋",
enable: false,
bigCat: "情感",
},
{
name: "快乐",
enable: false,
bigCat: "情感",
},
{
name: "安静",
enable: false,
bigCat: "情感",
},
{
name: "思念",
enable: false,
bigCat: "情感",
},
{
name: "综艺",
enable: false,
bigCat: "主题",
},
{
name: "影视原声",
enable: false,
bigCat: "主题",
},
{
name: "ACG",
enable: true,
bigCat: "主题",
},
{
name: "儿童",
enable: false,
bigCat: "主题",
},
{
name: "校园",
enable: false,
bigCat: "主题",
},
{
name: "游戏",
enable: false,
bigCat: "主题",
},
{
name: "70后",
enable: false,
bigCat: "主题",
},
{
name: "80后",
enable: false,
bigCat: "主题",
},
{
name: "90后",
enable: false,
bigCat: "主题",
},
{
name: "网络歌曲",
enable: false,
bigCat: "主题",
},
{
name: "KTV",
enable: false,
bigCat: "主题",
},
{
name: "经典",
enable: false,
bigCat: "主题",
},
{
name: "翻唱",
enable: false,
bigCat: "主题",
},
{
name: "吉他",
enable: false,
bigCat: "主题",
},
{
name: "钢琴",
enable: false,
bigCat: "主题",
},
{
name: "器乐",
enable: false,
bigCat: "主题",
},
{
name: "榜单",
enable: false,
bigCat: "主题",
},
{
name: "00后",
enable: false,
bigCat: "主题",
},
];

4454
src/utils/staticPlaylist.js
View File

File diff suppressed because it is too large Load Diff

22
src/utils/updateApp.js
View File

@ -1,4 +1,12 @@
import pack from "../../package.json";
import initLocalStorage from "@/store/initLocalStorage.js";
// function exampleFunction() {
// console.log("update to vx.x.x");
// // 0.2.0 to 0.2.1
// localStorage.setItem("appVersion", "x.x.x");
// window.location.reload();
// }
function updateTo_0_2_0() {
// 0.1 to 0.2.0
@ -18,11 +26,25 @@ function updateTo_0_2_0() {
window.location.reload();
}
function updateTo_0_2_1() {
console.log("update to v0.2.1");
// 0.2.0 to 0.2.1
// 初始化 playlistCategories
let settings = JSON.parse(localStorage.getItem("settings"));
settings.playlistCategories = initLocalStorage.settings.playlistCategories;
localStorage.setItem("settings", JSON.stringify(settings));
localStorage.setItem("appVersion", "0.2.1");
window.location.reload();
}
export default function () {
while (localStorage.getItem("appVersion") !== pack.version) {
let currentVersion = localStorage.getItem("appVersion");
if (currentVersion === "0.1") {
updateTo_0_2_0();
}
if (currentVersion === "0.2.0") {
updateTo_0_2_1();
}
}
}

95
src/views/explore.vue
View File

@ -4,18 +4,38 @@
<div class="buttons">
<div
class="button"
v-for="cat in settings.playlistCategories"
v-for="cat in settings.playlistCategories.filter((p) => p.enable)"
:key="cat.name"
:class="{ active: cat.name === activeCategory }"
:class="{ active: cat.name === activeCategory && !showCatOptions }"
@click="goToCategory(cat.name)"
>
{{ cat.name }}
</div>
<div class="button more">
<div
class="button more"
:class="{ active: showCatOptions }"
@click="showCatOptions = !showCatOptions"
>
<svg-icon icon-class="more"></svg-icon>
</div>
</div>
<div class="panel" v-show="showCatOptions">
<div class="big-cat" v-for="bigCat in allBigCats" :key="bigCat">
<div class="name">{{ bigCat }}</div>
<div class="cats">
<div
class="cat"
:class="{ active: cat.enable }"
v-for="cat in getCatsByBigCat(bigCat)"
:key="cat.name"
@click="toggleCat(cat.name)"
><span>{{ cat.name }}</span></div
>
</div>
</div>
</div>
<div class="playlists">
<CoverRow
type="playlist"
@ -42,7 +62,7 @@
</template>
<script>
import { mapState } from "vuex";
import { mapState, mapMutations } from "vuex";
import NProgress from "nprogress";
import {
topPlaylist,
@ -70,6 +90,8 @@ export default {
loadingMore: false,
showLoadMoreButton: false,
hasMore: true,
allBigCats: ["语种", "风格", "场景", "情感", "主题"],
showCatOptions: false,
};
},
computed: {
@ -81,6 +103,7 @@ export default {
},
},
methods: {
...mapMutations(["togglePlaylistCategory"]),
loadData() {
if (!this.show) NProgress.start();
this.activeCategory =
@ -90,6 +113,7 @@ export default {
this.getPlaylist();
},
goToCategory(Category) {
if (this.showCatOptions) return;
this.$router.push({ path: "/explore?category=" + Category });
},
updatePlaylist(playlists) {
@ -142,6 +166,12 @@ export default {
this.hasMore = data.more;
});
},
getCatsByBigCat(name) {
return this.settings.playlistCategories.filter((c) => c.bigCat === name);
},
toggleCat(name) {
this.togglePlaylistCategory(name);
},
},
activated() {
this.loadData();
@ -192,6 +222,63 @@ h1 {
background-color: var(--color-primary-bg);
color: var(--color-primary);
}
.panel {
margin-top: 10px;
background: var(--color-secondary-bg);
border-radius: 10px;
padding: 8px;
color: var(--color-text);
.big-cat {
display: flex;
margin-bottom: 32px;
}
.name {
font-size: 24px;
font-weight: 700;
opacity: 0.68;
margin-left: 24px;
min-width: 54px;
height: 26px;
margin-top: 8px;
}
.cats {
margin-left: 24px;
display: flex;
flex-wrap: wrap;
}
.cat {
user-select: none;
margin: 4px 0px 0 0;
display: flex;
// justify-content: center;
align-items: center;
font-weight: 500;
font-size: 16px;
transition: 0.2s;
min-width: 98px;
span {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
padding: 6px 12px;
height: 26px;
border-radius: 10px;
opacity: 0.88;
&:hover {
opacity: 1;
background-color: var(--color-primary-bg);
color: var(--color-primary);
}
}
}
.cat.active {
color: var(--color-primary);
}
}
.playlists {
margin-top: 24px;

2
src/views/home.vue
View File

@ -63,7 +63,7 @@
<script>
import { toplists, recommendPlaylist } from "@/api/playlist";
import { toplistOfArtists } from "@/api/artist";
import { byAppleMusic } from "@/utils/staticPlaylist";
import { byAppleMusic } from "@/utils/staticData";
import { newAlbums } from "@/api/album";
import NProgress from "nprogress";
import { mapState } from "vuex";