feat: add more categories to explore page

4 years ago · 2e0b18d217
parent f17d61c268
commit 2e0b18d217
8 changed files with 546 additions and 4502 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "YesPlayMusic",
-  "version": "0.2.0",
+  "version": "0.2.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/src/store/initLocalStorage.js
+++ b/src/store/initLocalStorage.js
@ -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,
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@ -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;
+      }
+    );
+  },
 };
--- a/src/utils/staticData.js
+++ b/src/utils/staticData.js
@ -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: "主题",
+  },
+];
--- a/src/utils/staticPlaylist.js
+++ b/src/utils/staticPlaylist.js
--- a/src/utils/updateApp.js
+++ b/src/utils/updateApp.js
@ -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();
+    }
  }
 }
--- a/src/views/explore.vue
+++ b/src/views/explore.vue
@ -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;
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -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";