🐞 fix: 修复电台未加载全部节目

README.md

@@ -6,6 +6,10 @@
 </div>
 <br /> -->
 
+# SPlayer
+
+> 一个简约的音乐播放器
+
 ![main](/screenshots/SPlayer.jpg)
 
 ## 说明

src/components/List/SongList.vue

@@ -32,7 +32,7 @@
           alignItems: 'center',
           justifyContent: 'space-between',
         }"
-        :class="music.getPlaySongData?.id === item?.id ? 'songs play' : 'songs'"
+        :class="Number(music.getPlaySongData?.id) === Number(item?.id) ? 'songs play' : 'songs'"
         hoverable
         @click="checkCanClick(data, item, songsIndex + index)"
         @dblclick.stop="playSong(data, item, songsIndex + index)"
@@ -190,7 +190,7 @@
         </div>
         <!-- 更新日期 -->
         <n-text v-if="type === 'dj' && item.updateTime" class="update hidden" depth="3">
-          {{ getTimestampTime(item.updateTime, false) }}
+          {{ djFormatDate(item.updateTime) }}
         </n-text>
         <!-- 播放量 -->
         <n-text v-if="type === 'dj' && item.playCount" class="count hidden" depth="3">
@@ -273,7 +273,7 @@ import { setCloudDel } from "@/api/cloud";
 import { addSongToPlayList } from "@/api/playlist";
 import { siteData, siteSettings, musicData, siteStatus } from "@/stores";
 import { initPlayer, fadePlayOrPause, addSongToNext } from "@/utils/Player";
-import { getTimestampTime } from "@/utils/timeTools";
+import { djFormatDate } from "@/utils/timeTools";
 
 const router = useRouter();
 const music = musicData();

src/utils/Player.js

@@ -42,8 +42,6 @@ export const initPlayer = async (playNow = false) => {
     const { playList } = music;
     // 当前播放歌曲数据
     const playSongData = music.getPlaySongData;
-    // 若为电台则更改 id
-    playSongData.id = playMode === "dj" ? playSongData.mainTrackId : playSongData.id;
     // 是否为本地歌曲
     const isLocalSong = playSongData?.path ? true : false;
     console.log("当前为本地歌曲");

src/utils/formatData.js

@@ -112,8 +112,7 @@ const formatData = (data, type = "playlist", noTracks = false) => {
       // dj
       case "dj":
         return {
-          id: v.id || v.vid,
-          mainTrackId: v.mainTrackId,
+          id: v.mainTrackId || v.id || v.vid,
           name: v.name,
           creator: v.dj,
           count: v.programCount,

src/utils/timeTools.js

@@ -106,3 +106,31 @@ export const getCommentTime = (t) => {
     }月${userDate.getDate()}日 ${UH}:${Um}`;
   }
 };
+
+/**
+ * 电台时间戳格式化
+ * @param {number} timestamp - 要格式化的时间戳（毫秒）
+ * @returns {string} - 格式化后的日期描述
+ */
+export const djFormatDate = (timestamp) => {
+  const now = new Date();
+  const targetDate = new Date(timestamp);
+  const timeDiff = now - targetDate;
+  const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+  const daysDiff = Math.floor(timeDiff / oneDay);
+  // 数字补零
+  const formatNumber = (num) => {
+    return num < 10 ? `0${num}` : num;
+  };
+  if (daysDiff === 0) {
+    return "今日";
+  } else if (daysDiff === 1) {
+    return "昨日";
+  } else if (daysDiff <= 7) {
+    return `${daysDiff}天前`;
+  } else if (targetDate.getFullYear() === now.getFullYear() - 1) {
+    return `${targetDate.getFullYear()}-${formatNumber(targetDate.getMonth() + 1)}`;
+  } else {
+    return `${formatNumber(targetDate.getMonth() + 1)}-${formatNumber(targetDate.getDate())}`;
+  }
+};

src/views/List/dj.vue

@@ -171,13 +171,6 @@
         <Transition name="fade" mode="out-in">
           <div v-if="!searchValue" class="song-list">
             <SongList :data="djData" type="dj" />
-            <!-- 分页 -->
-            <Pagination
-              v-if="djData?.length"
-              :totalCount="totalCount"
-              :pageNumber="pageNumber"
-              @pageNumberChange="pageNumberChange"
-            />
           </div>
           <SongList v-else-if="searchData?.length" :data="searchData" type="dj" />
           <n-empty
@@ -209,7 +202,7 @@
 import { NIcon } from "naive-ui";
 import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
-import { siteData, siteSettings } from "@/stores";
+import { siteData } from "@/stores";
 import { getDjDetail, getDjProgram, likeDj } from "@/api/dj";
 import { fuzzySearch } from "@/utils/helper";
 import { isLogin } from "@/utils/auth";
@@ -221,20 +214,17 @@ import SvgIcon from "@/components/Global/SvgIcon";
 
 const router = useRouter();
 const data = siteData();
-const settings = siteSettings();
 const { userLikeData } = storeToRefs(data);
-const { loadSize } = storeToRefs(settings);
 
 //  电台数据
 const djId = ref(router.currentRoute.value.query.id);
-const pageNumber = ref(Number(router.currentRoute.value.query?.page) || 1);
 const djDetail = ref(null);
 const djData = ref(null);
 
 // 模糊搜索数据
+const loadingMsg = ref(null);
 const searchValue = ref(null);
 const searchData = ref([]);
-const totalCount = ref(0);
 
 // 图标渲染
 const renderIcon = (icon) => {
@@ -267,23 +257,36 @@ const getDjDetailData = async (id) => {
     const detail = await getDjDetail(id);
     // 基础信息
     djDetail.value = formatData(detail.data, "dj")[0];
+    // 获取节目
+    await getDjProgramData(djId.value, djDetail.value?.count);
   } catch (error) {
     console.error("获取电台信息出错：", error);
     $message.error("获取电台信息出现错误");
   }
 };
 
 // 获取电台全部节目
-const getDjProgramData = async (id, limit = loadSize.value, offset = 0) => {
+const getDjProgramData = async (id, count) => {
   try {
+    if (count === 0) return (djData.value = "empty");
+    // 是否为超大歌单
+    if (count >= 500) {
+      loadingMsg.value = $message.loading("该电台节目数量过多，请稍等", {
+        duration: 0,
+      });
+    }
+    // 循环获取
+    let offset = 0;
     djData.value = [];
-    const result = await getDjProgram(id, limit, offset);
-    console.log(result);
-    // 数据总数
-    totalCount.value = result.count;
-    if (totalCount.value === 0) return (djData.value = "empty");
-    // 处理数据
-    djData.value = formatData(result.programs, "dj");
+    while (count === null || offset < count) {
+      const result = await getDjProgram(id, 500, offset);
+      const djDetail = formatData(result.programs, "dj");
+      djData.value = djData.value.concat(djDetail);
+      offset += 500;
+    }
+    // 关闭加载提示
+    loadingMsg.value?.destroy();
+    loadingMsg.value = null;
   } catch (error) {
     console.error("获取电台节目错误：", error);
     $message.error("获取电台节目出现错误");
@@ -330,36 +333,8 @@ const likeOrDislike = debounce(async (id) => {
   }
 }, 300);
 
-// 页数变化
-const pageNumberChange = (page) => {
-  router.push({
-    path: "/dj",
-    query: { id: djId.value, page },
-  });
-};
-
-// 监听路由变化
-watch(
-  () => router.currentRoute.value,
-  async (val) => {
-    if (val.name === "dj") {
-      // 更改参数
-      pageNumber.value = Number(val.query?.page) || 1;
-      djId.value = val.query?.id;
-      // 调用接口
-      await getDjDetailData(djId.value);
-      await getDjProgramData(
-        djId.value,
-        loadSize.value,
-        (pageNumber.value - 1) * settings.loadSize,
-      );
-    }
-  },
-);
-
 onMounted(async () => {
   await getDjDetailData(djId.value);
-  await getDjProgramData(djId.value, loadSize.value, (pageNumber.value - 1) * settings.loadSize);
 });
 </script>