AlgerMusicPlayer/src/renderer/components/RecommendSonglist.vue

<template>
  <div class="recommend-music">
    <div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
    <div
      v-show="recommendMusic?.result"
      v-loading="loading"
      class="recommend-music-list"
      :class="setAnimationClass('animate__bounceInUp')"
    >
      <!-- 推荐音乐列表 -->
      <template v-for="(item, index) in recommendMusic?.result" :key="item.id">
        <div
          :class="setAnimationClass('animate__bounceInUp')"
          :style="setAnimationDelay(index, 100)"
        >
          <song-item :item="item" @play="handlePlay" />
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex';

import { getRecommendMusic } from '@/api/home';
import type { IRecommendMusic } from '@/type/music';
import { setAnimationClass, setAnimationDelay } from '@/utils';

import SongItem from './common/SongItem.vue';

const store = useStore();
// 推荐歌曲
const recommendMusic = ref<IRecommendMusic>();
const loading = ref(false);

// 加载推荐歌曲
const loadRecommendMusic = async () => {
  loading.value = true;
  const { data } = await getRecommendMusic({ limit: 10 });
  recommendMusic.value = data;
  loading.value = false;
};

// 页面初始化
onMounted(() => {
  loadRecommendMusic();
});

const handlePlay = () => {
  store.commit('setPlayList', recommendMusic.value?.result);
};
</script>

<style lang="scss" scoped>
.title {
  @apply text-lg font-bold mb-4 text-gray-900 dark:text-white;
}
.recommend-music {
  @apply flex-auto;
  .text-ellipsis {
    width: 100%;
  }
  &-list {
    @apply rounded-3xl p-2 w-full border border-gray-200 dark:border-gray-700 bg-light dark:bg-black;
  }
}
</style>