初始化
This commit is contained in:
ZilongYang
410
src/views/discover/Recommend.vue
Normal file
410
src/views/discover/Recommend.vue
Normal file
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<div class="lmt-width">
|
||||
<n-carousel
|
||||
show-arrow
|
||||
trigger="hover"
|
||||
:autoplay="true"
|
||||
style="margin: 0 auto; max-width: 800px"
|
||||
>
|
||||
<div
|
||||
class="wp-carousel"
|
||||
v-for="(b, idx) in banners"
|
||||
:key="idx"
|
||||
>
|
||||
<img class="carousel-img" :src="b.imageUrl" />
|
||||
<span class="title">{{ b.typeTitle }}</span>
|
||||
</div>
|
||||
</n-carousel>
|
||||
<!-- 最新音乐 -->
|
||||
<div>
|
||||
<n-button
|
||||
text
|
||||
icon-placement="right"
|
||||
size="large"
|
||||
type="primary"
|
||||
style="font-size: 1.3em; margin-top: 6px"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ChevronForward />
|
||||
</n-icon>
|
||||
</template>
|
||||
最新音乐
|
||||
</n-button>
|
||||
<n-grid
|
||||
:x-gap="18"
|
||||
:y-gap="8"
|
||||
:cols="2"
|
||||
style="margin: 6px 0"
|
||||
>
|
||||
<n-grid-item
|
||||
v-for="(song, idx) in topSongs"
|
||||
key="idx"
|
||||
>
|
||||
<div class="c2-list">
|
||||
<div class="play-btn">
|
||||
<img :src="song.album.blurPicUrl" />
|
||||
<n-button
|
||||
text
|
||||
class="start-play-bg"
|
||||
type="info"
|
||||
>
|
||||
<n-icon>
|
||||
<PlayCircle @click="play(song.id)" />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-button
|
||||
text
|
||||
class="start-play"
|
||||
type="primary"
|
||||
>
|
||||
<n-icon>
|
||||
<Play @click="play(song.id)"/>
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="name">
|
||||
{{ song.name }}
|
||||
<span class="alias">{{
|
||||
songAlias(song.alias)
|
||||
}}</span>
|
||||
</span>
|
||||
<span class="artist">{{
|
||||
songArtists(song.artists)
|
||||
}}</span>
|
||||
</div>
|
||||
<span class="icon"></span>
|
||||
</div>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
<!-- 推荐MV -->
|
||||
<div>
|
||||
<!-- 标题 -->
|
||||
<n-button
|
||||
text
|
||||
icon-placement="right"
|
||||
size="large"
|
||||
type="primary"
|
||||
style="font-size: 1.3em; margin-top: 6px"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ChevronForward />
|
||||
</n-icon>
|
||||
</template>
|
||||
推荐MV
|
||||
</n-button>
|
||||
<!-- 列表 -->
|
||||
<n-grid
|
||||
:x-gap="18"
|
||||
:y-gap="8"
|
||||
:cols="4"
|
||||
style="margin: 6px 0"
|
||||
>
|
||||
<n-grid-item
|
||||
v-for="(mv, idx) in personalizedMV"
|
||||
key="idx"
|
||||
>
|
||||
<div class="mv-c2-list">
|
||||
<div class="play-mv">
|
||||
<div>
|
||||
<img :src="mv.picUrl" />
|
||||
</div>
|
||||
<n-button
|
||||
text
|
||||
class="start-play-bg"
|
||||
type="info"
|
||||
>
|
||||
<n-icon>
|
||||
<PlayCircle />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
<n-button
|
||||
text
|
||||
class="start-play"
|
||||
type="primary"
|
||||
>
|
||||
<n-icon>
|
||||
<Play />
|
||||
</n-icon>
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="name">
|
||||
{{ mv.name }}
|
||||
</span>
|
||||
<span class="artist">{{
|
||||
mv.artistName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
<!-- 推荐歌单 -->
|
||||
<div>
|
||||
<n-button
|
||||
text
|
||||
icon-placement="right"
|
||||
size="large"
|
||||
type="primary"
|
||||
style="font-size: 1.3em; margin-top: 6px"
|
||||
>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<ChevronForward />
|
||||
</n-icon>
|
||||
</template>
|
||||
推荐歌单
|
||||
</n-button>
|
||||
<n-grid
|
||||
:x-gap="18"
|
||||
:y-gap="8"
|
||||
:cols="4"
|
||||
style="margin: 6px 0"
|
||||
>
|
||||
<n-grid-item v-for="p in personalized">
|
||||
<n-card
|
||||
title
|
||||
hoverable
|
||||
content-style="padding: 2px 6px;"
|
||||
>
|
||||
<template #cover>
|
||||
<img :src="p.picUrl" />
|
||||
</template>
|
||||
<span class="card-span">{{ p.name }}</span>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
NCarousel,
|
||||
NScrollbar,
|
||||
NGrid,
|
||||
NGridItem,
|
||||
NCard,
|
||||
NButton,
|
||||
NIcon,
|
||||
NImage,
|
||||
} from "naive-ui";
|
||||
// import {
|
||||
// ChevronForward,
|
||||
// PlayCircle,
|
||||
// Play,
|
||||
// } from "@vicons/ionicons5";
|
||||
import PlayCircle from "@/assets/svgs/PlayCircle.svg";
|
||||
import Play from "@/assets/svgs/Play_.svg";
|
||||
import ChevronForward from "@/assets/svgs/ChevronForward.svg";
|
||||
import {
|
||||
getBanner,
|
||||
getPersonalized,
|
||||
getTopSong,
|
||||
getPersonalizedMV,
|
||||
} from "@/network/discover";
|
||||
import pubsub from 'pubsub-js'
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const play=(id)=>{
|
||||
pubsub.publish('zp.play', {id, im: true})
|
||||
}
|
||||
|
||||
//#region 初始载入数据
|
||||
//轮播图片
|
||||
let banners = ref([]);
|
||||
getBanner(0)
|
||||
.then((res) => {
|
||||
banners.value = res.data.banners;
|
||||
// console.log(banners.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("getBanner err", err);
|
||||
});
|
||||
//最新音乐
|
||||
let topSongs = ref([]);
|
||||
getTopSong()
|
||||
.then((res) => {
|
||||
topSongs.value = res.data.data.filter((item, index) => {
|
||||
return index < 10;
|
||||
});
|
||||
// console.log(topSongs.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("getTopSong err", err);
|
||||
});
|
||||
function songAlias(alias) {
|
||||
if (alias.length > 0) return "[" + alias.join(",") + "]";
|
||||
}
|
||||
function songArtists(artists) {
|
||||
if (artists.length > 0) {
|
||||
return artists
|
||||
.map((a) => {
|
||||
return a.name;
|
||||
})
|
||||
.join(" ");
|
||||
}
|
||||
}
|
||||
//推荐歌单
|
||||
let personalized = ref([]);
|
||||
getPersonalized(8)
|
||||
.then((res) => {
|
||||
personalized.value = res.data.result;
|
||||
// console.log(personalized.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("getPersonalized err", err);
|
||||
});
|
||||
//推荐MV
|
||||
let personalizedMV = ref([]);
|
||||
getPersonalizedMV()
|
||||
.then((res) => {
|
||||
personalizedMV.value = res.data.result;
|
||||
// console.log(personalized.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("getPersonalizedMV err", err);
|
||||
});
|
||||
//#endregion
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/common.less";
|
||||
.wp-carousel {
|
||||
position: relative;
|
||||
// width: 20em;
|
||||
// font-size: 1vw;
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
background-color: #5c18a0ff;
|
||||
bottom: 0px;
|
||||
right: 0;
|
||||
padding: 2px 6px;
|
||||
font-size: 0.9em;
|
||||
border-top-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-span {
|
||||
.text-el-line2();
|
||||
}
|
||||
|
||||
.mv-c2-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
|
||||
.play-mv {
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
button{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.start-play-bg{
|
||||
font-size: 38px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 42px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.start-play{
|
||||
font-size: 25px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
button{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 3px;
|
||||
.name {
|
||||
.text-el-line();
|
||||
.alias {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.artist {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
.text-el-line();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c2-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eee;
|
||||
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.start-play-bg{
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 17px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.start-play{
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
.text-el-line();
|
||||
.alias {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.artist {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
.text-el-line();
|
||||
}
|
||||
}
|
||||
// .icon {
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user