mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-23 15:47:23 +08:00
✨ feat(Play): 完成播放可以根据列表播放 上一首 下一首
This commit is contained in:
algerkc@qq.com
@@ -1,58 +1,68 @@
|
||||
<template>
|
||||
<div class="recommend-music">
|
||||
<div class="title" :class="setAnimationClass('animate__fadeInLeft')">本周最热音乐</div>
|
||||
<div
|
||||
class="recommend-music-list"
|
||||
:class="setAnimationClass('animate__bounceInUp')"
|
||||
v-show="recommendMusic?.result"
|
||||
>
|
||||
<!-- 推荐音乐列表 -->
|
||||
<template v-for="(item, index) in recommendMusic?.result" :key="item.id">
|
||||
<div
|
||||
:class="setAnimationClass('animate__bounceInUp')"
|
||||
:style="setAnimationDelay(index, 100)"
|
||||
>
|
||||
<song-item :item="item" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="recommend-music">
|
||||
<div class="title" :class="setAnimationClass('animate__fadeInLeft')">
|
||||
本周最热音乐
|
||||
</div>
|
||||
<div
|
||||
class="recommend-music-list"
|
||||
:class="setAnimationClass('animate__bounceInUp')"
|
||||
v-show="recommendMusic?.result"
|
||||
>
|
||||
<!-- 推荐音乐列表 -->
|
||||
<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 { onMounted, ref } from "vue";
|
||||
import { getRecommendMusic } from "@/api/home";
|
||||
import type { IRecommendMusic } from "@/type/music";
|
||||
import { setAnimationClass, setAnimationDelay } from "@/utils";
|
||||
import SongItem from "./common/SongItem.vue";
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { getRecommendMusic } from '@/api/home'
|
||||
import type { IRecommendMusic } from '@/type/music'
|
||||
import { setAnimationClass, setAnimationDelay } from '@/utils'
|
||||
import SongItem from './common/SongItem.vue'
|
||||
import { useStore } from 'vuex'
|
||||
|
||||
const store = useStore();
|
||||
// 推荐歌曲
|
||||
const recommendMusic = ref<IRecommendMusic>();
|
||||
const recommendMusic = ref<IRecommendMusic>()
|
||||
|
||||
// 加载推荐歌曲
|
||||
const loadRecommendMusic = async () => {
|
||||
const { data } = await getRecommendMusic({ limit: 10 });
|
||||
recommendMusic.value = data;
|
||||
};
|
||||
const { data } = await getRecommendMusic({ limit: 10 })
|
||||
recommendMusic.value = data
|
||||
}
|
||||
|
||||
// 页面初始化
|
||||
onMounted(() => {
|
||||
loadRecommendMusic();
|
||||
});
|
||||
loadRecommendMusic()
|
||||
})
|
||||
|
||||
const handlePlay = (item: any) => {
|
||||
const musicIndex = (recommendMusic.value?.result.findIndex((music: any) => music.id == item.id) || 0) + 1
|
||||
store.commit('setPlayList', recommendMusic.value?.result.slice(musicIndex))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
@apply text-lg font-bold mb-4;
|
||||
@apply text-lg font-bold mb-4;
|
||||
}
|
||||
.recommend-music {
|
||||
@apply flex-auto;
|
||||
// width: 530px;
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
}
|
||||
&-list {
|
||||
@apply rounded-3xl p-2 w-full border border-gray-700;
|
||||
background-color: #0d0d0d;
|
||||
}
|
||||
@apply flex-auto;
|
||||
// width: 530px;
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
}
|
||||
&-list {
|
||||
@apply rounded-3xl p-2 w-full border border-gray-700;
|
||||
background-color: #0d0d0d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,102 +1,113 @@
|
||||
<template>
|
||||
<div class="recommend-music-list-item">
|
||||
<img :src="item.picUrl + '?param=200y200'" class="recommend-music-list-item-img" />
|
||||
<div class="recommend-music-list-item-content">
|
||||
<div class="recommend-music-list-item-content-title">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">{{ item.song.name }}</n-ellipsis>
|
||||
</div>
|
||||
<div class="recommend-music-list-item-content-name">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
<span
|
||||
v-for="(artists,artistsindex) in item.song.artists"
|
||||
:key="artistsindex"
|
||||
>{{ artists.name }}{{ artistsindex < item.song.artists.length - 1 ? ' / ' : '' }}</span>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend-music-list-item-operating">
|
||||
<div class="recommend-music-list-item-operating-like">
|
||||
<i class="iconfont icon-likefill"></i>
|
||||
</div>
|
||||
<div
|
||||
class="recommend-music-list-item-operating-play bg-black"
|
||||
:class="isPlaying ? 'bg-green-600' : ''"
|
||||
@click="playMusicEvent(item)"
|
||||
>
|
||||
<i class="iconfont icon-playfill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend-music-list-item">
|
||||
<img
|
||||
:src="item.picUrl + '?param=200y200'"
|
||||
class="recommend-music-list-item-img"
|
||||
/>
|
||||
<div class="recommend-music-list-item-content">
|
||||
<div class="recommend-music-list-item-content-title">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">{{
|
||||
item.name
|
||||
}}</n-ellipsis>
|
||||
</div>
|
||||
<div class="recommend-music-list-item-content-name">
|
||||
<n-ellipsis class="text-ellipsis" line-clamp="1">
|
||||
<span
|
||||
v-for="(artists, artistsindex) in item.song.artists"
|
||||
:key="artistsindex"
|
||||
>{{ artists.name
|
||||
}}{{
|
||||
artistsindex < item.song.artists.length - 1 ? ' / ' : ''
|
||||
}}</span
|
||||
>
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend-music-list-item-operating">
|
||||
<div class="recommend-music-list-item-operating-like">
|
||||
<i class="iconfont icon-likefill"></i>
|
||||
</div>
|
||||
<div
|
||||
class="recommend-music-list-item-operating-play bg-black"
|
||||
:class="isPlaying ? 'bg-green-600' : ''"
|
||||
@click="playMusicEvent(item)"
|
||||
>
|
||||
<i v-if="isPlaying && play" class="iconfont icon-stop"></i>
|
||||
<i v-else class="iconfont icon-playfill"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useStore } from "vuex";
|
||||
import type { SongResult } from "@/type/music";
|
||||
import { computed, } from "vue";
|
||||
|
||||
import { useStore } from 'vuex'
|
||||
import type { SongResult } from '@/type/music'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const store = useStore()
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const playMusic = computed(() => store.state.playMusic);
|
||||
const play = computed(() => store.state.play as boolean)
|
||||
|
||||
const playMusic = computed(() => store.state.playMusic)
|
||||
|
||||
// 判断是否为正在播放的音乐
|
||||
const isPlaying = computed(() => {
|
||||
return playMusic.value.id == props.item.id;
|
||||
return playMusic.value.id == props.item.id
|
||||
})
|
||||
|
||||
const emits = defineEmits(['play'])
|
||||
|
||||
// 播放音乐 设置音乐详情 打开音乐底栏
|
||||
const playMusicEvent = (item: any) => {
|
||||
store.commit("setPlay", item);
|
||||
store.commit("setIsPlay", true);
|
||||
};
|
||||
|
||||
|
||||
store.commit('setPlay', item)
|
||||
store.commit('setIsPlay', true)
|
||||
store.state.playListIndex = 0
|
||||
emits('play', item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.text-ellipsis {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.recommend-music-list-item {
|
||||
@apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
|
||||
&-img {
|
||||
@apply w-12 h-12 rounded-2xl mr-4;
|
||||
@apply rounded-3xl p-3 flex items-center hover:bg-gray-800 transition;
|
||||
&-img {
|
||||
@apply w-12 h-12 rounded-2xl mr-4;
|
||||
}
|
||||
&-content {
|
||||
@apply flex-1;
|
||||
&-title {
|
||||
@apply text-base text-white;
|
||||
}
|
||||
&-content {
|
||||
@apply flex-1;
|
||||
&-title {
|
||||
@apply text-base text-white;
|
||||
}
|
||||
&-name {
|
||||
@apply text-xs;
|
||||
@apply text-gray-400;
|
||||
}
|
||||
&-name {
|
||||
@apply text-xs;
|
||||
@apply text-gray-400;
|
||||
}
|
||||
&-operating {
|
||||
@apply flex items-center pl-4 rounded-full border border-gray-700;
|
||||
background-color: #0d0d0d;
|
||||
.iconfont {
|
||||
@apply text-xl;
|
||||
}
|
||||
.icon-likefill {
|
||||
color: #868686;
|
||||
@apply text-xl hover:text-red-600 transition;
|
||||
}
|
||||
&-like {
|
||||
@apply mr-2 cursor-pointer;
|
||||
}
|
||||
&-play {
|
||||
@apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
|
||||
}
|
||||
}
|
||||
&-operating {
|
||||
@apply flex items-center pl-4 rounded-full border border-gray-700;
|
||||
background-color: #0d0d0d;
|
||||
.iconfont {
|
||||
@apply text-xl;
|
||||
}
|
||||
.icon-likefill {
|
||||
color: #868686;
|
||||
@apply text-xl hover:text-red-600 transition;
|
||||
}
|
||||
&-like {
|
||||
@apply mr-2 cursor-pointer;
|
||||
}
|
||||
&-play {
|
||||
@apply cursor-pointer border border-gray-500 rounded-full w-10 h-10 flex justify-center items-center hover:bg-green-600 transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user