Skip to content
Snippets Groups Projects
Commit abfc69b6 authored by 杭 羽凡's avatar 杭 羽凡
Browse files

1.修改homepage上的一个bug（setMidComponents方法） 

2.episode页面的补充，在MusicAlbumView设置了到专辑页面的跳转

TODO: ，music页面的完成，main-view到以上两个页面的跳转
parent 993b7540
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/ArtistView.vue
+ 1
− 1
View file @ abfc69b6
...@@ -585,7 +585,7 @@ p { ...@@ -585,7 +585,7 @@ p {
.fixed-play-area { .fixed-play-area {
top: 0; top: 0;
z-index: 11; z-index: 2;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
......
src/components/EpisodeView.vue
+ 200
− 39
View file @ abfc69b6
...@@ -7,6 +7,8 @@ import {ElMessage, ElPopover} from "element-plus"; ...@@ -7,6 +7,8 @@ import {ElMessage, ElPopover} from "element-plus";
import {backgroundColor, updateBackground} from "../utils/getBackgroundColor"; import {backgroundColor, updateBackground} from "../utils/getBackgroundColor";
import pauseButton from "../icon/pauseButton.vue"; import pauseButton from "../icon/pauseButton.vue";
import {removePlaylist, removeSongFromPlaylist} from "../api/playlist"; import {removePlaylist, removeSongFromPlaylist} from "../api/playlist";
import {formatTime} from "@/utils/formatTime";
const emit = defineEmits(); const emit = defineEmits();
const props = defineProps({ const props = defineProps({
...@@ -21,8 +23,18 @@ const props = defineProps({ ...@@ -21,8 +23,18 @@ const props = defineProps({
playFromLeftBar: null, playFromLeftBar: null,
currentSongId: Number currentSongId: Number
}); });
const relatedEpisode = ref([{
const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`) id:1,
title:"相关歌单1",
picPath:"",
createTime : ""
},{
id:2,
title:"相关歌单2",
picPath:"",
createTime : ""
}]);
let musicHoveredIndex = ref(null); let musicHoveredIndex = ref(null);
let musicClickedIndex = ref(null); let musicClickedIndex = ref(null);
...@@ -30,7 +42,13 @@ let musicPlayIndex = ref(null); ...@@ -30,7 +42,13 @@ let musicPlayIndex = ref(null);
let musicPauseIndex = ref(null); let musicPauseIndex = ref(null);
const resizeObserver = ref(null) const resizeObserver = ref(null)
const gradientColor = computed(() => `linear-gradient(to bottom, ${backgroundColor.value} , #1F1F1F 50%)`)
//获取歌曲时长
const songDurations = ref(new Map());
watch(() => props.musicList, (newSongs) => {
loadSongDurations(newSongs, songDurations);
}, { immediate: true });
// 放缩时的组件处理 // 放缩时的组件处理
const handleResize = () => { const handleResize = () => {
...@@ -140,27 +158,6 @@ const handelScroll = (event) => { ...@@ -140,27 +158,6 @@ const handelScroll = (event) => {
} }
} }
window.onscroll = () => {
const playArea = document.querySelector(".play-area");
const fixedPlayArea = document.querySelector(".fixed-play-area");
const tipArea = document.querySelector(".tips");
const fixedTipArea = document.querySelector(".fixed-tips");
const stickyPlayY = playArea.offsetTop;
const stickyTipY = tipArea.offsetTop;
if (window.scrollY >= stickyPlayY) {
fixedPlayArea.style.opacity = "1";
} else {
fixedPlayArea.style.opacity = "0";
}
if (window.scrollY + fixedPlayArea.scrollHeight >= stickyTipY) {
fixedTipArea.style.display = "flex";
fixedTipArea.style.top = fixedPlayArea.scrollHeight + 'px';
} else {
fixedTipArea.style.display = "none";
}
}
watch(props.playFromLeftBar, () => { watch(props.playFromLeftBar, () => {
playFromId(props.playFromLeftBar) playFromId(props.playFromLeftBar)
}) })
...@@ -178,7 +175,64 @@ const closePopover = (e) => { ...@@ -178,7 +175,64 @@ const closePopover = (e) => {
}) })
} }
let timer = ref(null)
const limit = 250;
function leftSlide(event){
// 保存滚动盒子左侧已滚动的距离
const target = event.currentTarget.nextElementSibling;
let left=target.scrollLeft
console.log(target);
let num=1
clearInterval(timer)
timer=setInterval(()=>{
let distanceNextTime =(limit/2 - Math.abs( limit/2 - num))/3;
// !left:已经滚动到最左侧
// 一次性滚动距离（可调节）
if(left<=0||num>=limit){
// 停止滚动
clearInterval(timer)
return
}
left-=distanceNextTime
// 给滚动盒子元素赋值向左滚动距离
target.scrollLeft=left < 0 ? 0 : left
// 保存向左滚动距离（方便判断一次性滚动多少距离）
num+=distanceNextTime
},18)
// 20：速度（可调节）
}
function rightSlide(event){
const target = event.currentTarget.previousElementSibling;
// 保存滚动盒子左侧已滚动的距离
let left=target.scrollLeft
// 保存元素的整体宽度
let scrollWidth=target.scrollWidth
// 保存元素的可见宽度
let clientWidth=target.clientWidth
let num=1
clearInterval(timer)
timer = setInterval(()=>{
let distanceNextTime =(limit/2 - Math.abs( limit/2 - num))/3;
// 已经滚动距离+可见宽度
// left+clientWidth>=scrollWidth：滚动到最右侧
// num>=300一次性滚动距离
if(left+clientWidth>=scrollWidth||num>=limit){
clearInterval(timer.value)
return
}
// 给滚动盒子元素赋值向左滚动距离
left+=distanceNextTime
target.scrollLeft= left +clientWidth > scrollWidth? scrollWidth - clientWidth : left;
// 保存向左滚动距离（方便判断一次性滚动多少距离）
num+=distanceNextTime
},18)
// 20：速度（可调节）
}
function openEpisodeView(id){
}
//TODO: //TODO:
const enterArtistSpace = () => { const enterArtistSpace = () => {
} }
...@@ -198,7 +252,7 @@ const playFromId = (musicId) => { ...@@ -198,7 +252,7 @@ const playFromId = (musicId) => {
} else { } else {
musicPlayIndex.value = musicId; musicPlayIndex.value = musicId;
} }
emit('switchSongs', props.albumInfo, musicPlayIndex.value); emit('switchSongs', props.albumInfo, musicPlayIndex.value);
musicPauseIndex = null; musicPauseIndex = null;
} }
...@@ -212,7 +266,7 @@ const removeMusicFromAlbum = (albumId, songId) => { ...@@ -212,7 +266,7 @@ const removeMusicFromAlbum = (albumId, songId) => {
} }
const enterMusicDescription = (musicId) => { const enterMusicDescription = (musicId) => {
} }
const enterAuthorDescription = (authorName) => { const enterArtistDescription = (authorName) => {
} }
const pauseMusic = (musicId) => { const pauseMusic = (musicId) => {
...@@ -240,7 +294,7 @@ const addRecommendMusic = (musicId) => { ...@@ -240,7 +294,7 @@ const addRecommendMusic = (musicId) => {
<div class="header"> <div class="header">
<img :src="episodeInfo.picPath" alt="" class="album-image" @load="updateBackground(episodeInfo.picPath)"/> <img :src="episodeInfo.picPath" alt="" class="album-image" @load="updateBackground(episodeInfo.picPath)"/>
<div class="header-content"> <div class="header-content">
<p style="text-align: left;margin:20px 0 0 15px">专辑</p> <p style="text-align: left;margin:20px 0 0 15px">专辑EP</p>
<p class="header-album-name" style="font-weight: bolder;font-size:80px;margin:10px 0 35px 10px;"> <p class="header-album-name" style="font-weight: bolder;font-size:80px;margin:10px 0 35px 10px;">
{{ episodeInfo.title }}</p> {{ episodeInfo.title }}</p>
<div class="header-content-detail"> <div class="header-content-detail">
...@@ -253,7 +307,7 @@ const addRecommendMusic = (musicId) => { ...@@ -253,7 +307,7 @@ const addRecommendMusic = (musicId) => {
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="play-area"> <div class="play-area">
<div class="play-button"> <div class="play-button">
...@@ -346,9 +400,9 @@ const addRecommendMusic = (musicId) => { ...@@ -346,9 +400,9 @@ const addRecommendMusic = (musicId) => {
:style="{color : musicPlayIndex ===music.id? '#1ED660':''}" :style="{color : musicPlayIndex ===music.id? '#1ED660':''}"
:class="[musicPlayIndex === music.id ? 'music-after-click' : '']" :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
>{{ music.title }}</p> >{{ music.title }}</p>
<p @click="enterAuthorDescription(music.artist)" class="music-author" <p @click="enterArtistDescription(music.artist)" class="music-author"
:style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"> :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
{{ music.artist }}</p> {{ music.artist }}</p>
</div> </div>
</div> </div>
...@@ -372,13 +426,11 @@ const addRecommendMusic = (musicId) => { ...@@ -372,13 +426,11 @@ const addRecommendMusic = (musicId) => {
<li @click="addToFavorite(music.id)"></li> <li @click="addToFavorite(music.id)"></li>
</ul> </ul>
</el-popover> </el-popover>
<div style="margin-left: auto;margin-right: 15px; color: #b2b2b2"
<div style="margin-left: auto;margin-right: 15px; color: #b2b2b2" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"
:style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">{{ v-show="songDurations.get(music.id) !== undefined">
music.upload_time {{ formatTime(songDurations.get(music.id)) }}
}} </div>
<!--TODO: 解决播放时间问题-->
</div>
<el-popover <el-popover
:ref="getPopoverIndex" :ref="getPopoverIndex"
class="music-dropdown-options" class="music-dropdown-options"
...@@ -391,12 +443,32 @@ const addRecommendMusic = (musicId) => { ...@@ -391,12 +443,32 @@ const addRecommendMusic = (musicId) => {
<dots class="music-more-info"/> <dots class="music-more-info"/>
</template> </template>
<ul @click="closePopover"> <ul @click="closePopover">
<li @click="removeMusicFromAlbum(music.id)">删除歌曲</li>
</ul> </ul>
</el-popover> </el-popover>
</div> </div>
</div> </div>
</div> </div>
<div class="related-episodes">
<h1>推荐专辑</h1><!--这里暂时写歌单 最好改为专辑-->
<div id="click-scroll-X" >
<div class="left_btn" @click="leftSlide"> <p style="margin-bottom: 2px"><</p> </div>
<div class="scroll_wrapper" >
<div class="scroll_list">
<div v-for="ep in relatedEpisode"
:key="ep.id"
class="scroll-entry"
@click="openEpisodeView(ep.id)">
<img class="big-img" :src="ep.picPath" alt="">
<div class="entry-text bolder-white-theme">{{ ep.title }}</div>
<div class="entry-text">{{ ep.createTime.substring(0,4) }}</div>
</div>
</div>
</div>
<div class="right_btn" @click="rightSlide"> <p style="margin-bottom: 2px">></p> </div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -406,7 +478,7 @@ li { ...@@ -406,7 +478,7 @@ li {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
li:hover { li:hover {
...@@ -688,4 +760,93 @@ li:hover { ...@@ -688,4 +760,93 @@ li:hover {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
} }
#click-scroll-X {
position: relative;
display: flex;
align-items: center;
.left_btn,.right_btn {
font-size: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
color: #fff;
background-color: #1f1f1f;
position: absolute;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s ease-in-out;
bottom: 140px;
}
.right_btn{
right: -10px;
}
.left_btn{
left: -10px;
}
.scroll_wrapper {
width: 100%;
overflow-x: scroll;
padding: 20px 0;
.scroll_list {
display: flex;
align-items: center;
justify-content: space-between;
gap:2px;
}
}
}
.scroll-entry {
padding:9px;
align-items: center;
box-shadow: 0 4px 15px rgb(17, 17, 17); /* 悬浮效果的阴影 */
width: 180px;
height: 210px;
display: flex;
flex-direction: column;
gap:5px;
&:hover{
cursor: pointer;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.1);
}
&.large-scroll-entry{
height: 230px;
}
}
.big-img {
border-radius: 6px;
width: 160px;
height: 160px;
}
.entry-text{
width: 160px;
margin-left: 4px;
text-align: left;
color: #a6a6a6;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bolder-white-theme{
font-size: 18px;
font-weight: bolder;
color: rgb(241, 241, 241);
}
h1 {
font-size: 24px;
margin-bottom: 15px;
margin-left: 10px;
color: #fff;
text-align: left;
}
</style> </style>
src/components/MainView.vue
+ 10
− 4
View file @ abfc69b6
...@@ -37,6 +37,7 @@ const newSongsRecommend = ref({ ...@@ -37,6 +37,7 @@ const newSongsRecommend = ref({
id:6, id:6,
picPath:"https://i.scdn.co/image/ab67616d000048511b822a1e27037ac21e4eaa6d" picPath:"https://i.scdn.co/image/ab67616d000048511b822a1e27037ac21e4eaa6d"
}) })
/*先固定就这两位*/ /*先固定就这两位*/
const artistRecommend = ref([{ id:1,picPath:"",name:"Marcus Warner"},{id:1,picPath:"",name: "朴树"}]) const artistRecommend = ref([{ id:1,picPath:"",name:"Marcus Warner"},{id:1,picPath:"",name: "朴树"}])
const episodeRecommend = ref([{id:1,picPath:"",title:"热门专辑1"},{id:1,picPath:"",title:"热门专辑2"}]) const episodeRecommend = ref([{id:1,picPath:"",title:"热门专辑1"},{id:1,picPath:"",title:"热门专辑2"}])
...@@ -54,7 +55,7 @@ const albums = ref([]); ...@@ -54,7 +55,7 @@ const albums = ref([]);
const currentTab = ref('all') const currentTab = ref('all')
let timer = ref(null) let timer = ref(null)
const limit = 230; const limit = 250;
function leftSlide(event){ function leftSlide(event){
// 保存滚动盒子左侧已滚动的距离 // 保存滚动盒子左侧已滚动的距离
...@@ -90,7 +91,6 @@ function rightSlide(event){ ...@@ -90,7 +91,6 @@ function rightSlide(event){
let scrollWidth=target.scrollWidth let scrollWidth=target.scrollWidth
// 保存元素的可见宽度 // 保存元素的可见宽度
let clientWidth=target.clientWidth let clientWidth=target.clientWidth
let num=1 let num=1
clearInterval(timer) clearInterval(timer)
timer = setInterval(()=>{ timer = setInterval(()=>{
...@@ -145,10 +145,15 @@ onMounted(()=>{ ...@@ -145,10 +145,15 @@ onMounted(()=>{
getSongsByPlaylist({ getSongsByPlaylist({
playlist_id: 3, playlist_id: 3,
}).then((res) => { }).then((res) => {
songs.value = res.data.result.slice(0, 4); songs.value = res.data.result.slice(0, 6);
}).catch(e => {
console.log("MainView Failed to get songs!");
}); });
albumIds.forEach((id)=>{ albumIds.forEach((id)=>{
getPlaylistById({playlist_id:id}).then((res) => { console.log("MainView");
getPlaylistById({playlist_id: id
}).then((res) => {
albums.value.push(res.data.result); albums.value.push(res.data.result);
}).catch((err)=>{console.log(err)}) }).catch((err)=>{console.log(err)})
...@@ -336,6 +341,7 @@ p{ ...@@ -336,6 +341,7 @@ p{
font-size: 16px; font-size: 16px;
white-space: normal; white-space: normal;
} }
.main-view { .main-view {
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
......
src/components/MusicAlbumView.vue
+ 13
− 11
View file @ abfc69b6
...@@ -24,7 +24,7 @@ const props = defineProps({ ...@@ -24,7 +24,7 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
}, },
playList: { playList: { //指当前收藏的歌单列表
type: Array, type: Array,
required: true, required: true,
}, },
...@@ -218,9 +218,9 @@ const removeAlbum = (albumId) => { ...@@ -218,9 +218,9 @@ const removeAlbum = (albumId) => {
const playFromId = (musicId) => { const playFromId = (musicId) => {
if (musicId === null) { if (musicId === null) {
// 从头开始播放 // 从头开始播放
musicPlayIndex = props.musicList[0].id; musicPlayIndex.value = props.musicList[0].id;
} else { } else {
musicPlayIndex = musicId; musicPlayIndex.value = musicId;
} }
emit('switchSongs', props.albumInfo, musicPlayIndex); emit('switchSongs', props.albumInfo, musicPlayIndex);
musicPauseIndex = null; musicPauseIndex = null;
...@@ -258,7 +258,7 @@ const removeMusicFromAlbum = (albumId, songId) => { ...@@ -258,7 +258,7 @@ const removeMusicFromAlbum = (albumId, songId) => {
} }
const enterMusicDescription = (musicId) => { const enterMusicDescription = (musicId) => {
} }
const enterAuthorDescription = (artistName) => { const enterArtistDescription = (artistName) => {
emit('switchToArtist', artistName); emit('switchToArtist', artistName);
} }
...@@ -282,7 +282,6 @@ const confirmEdit = (albumId) => { ...@@ -282,7 +282,6 @@ const confirmEdit = (albumId) => {
}) })
} }
const quitEdit = () => { const quitEdit = () => {
const editDesc = document.querySelector(".edit-desc"); const editDesc = document.querySelector(".edit-desc");
editDesc.style.visibility = "hidden"; editDesc.style.visibility = "hidden";
...@@ -299,7 +298,9 @@ const addRecommendMusic = (musicId) => { ...@@ -299,7 +298,9 @@ const addRecommendMusic = (musicId) => {
duration: 4000, duration: 4000,
}) })
} }
const enterMusicEpisode = (episode) => {
}
watch(() => props.currentSongId, (newId) => { watch(() => props.currentSongId, (newId) => {
if (newId) { if (newId) {
musicPlayIndex = newId; musicPlayIndex = newId;
...@@ -343,6 +344,7 @@ const isCurrentSongInList = computed(() => { ...@@ -343,6 +344,7 @@ const isCurrentSongInList = computed(() => {
<div class="content"> <div class="content">
<div class="play-area"> <div class="play-area">
<div class="play-button"> <div class="play-button">
<!-- musicPlayIndex改为了musicPlayIndex-->
<play-button v-if="!isCurrentSongInList||musicPauseIndex!==null" <play-button v-if="!isCurrentSongInList||musicPauseIndex!==null"
@click="playFromId(musicPauseIndex)" @click="playFromId(musicPauseIndex)"
style="position: absolute; top:20%;left:24%;color: #000000"/> style="position: absolute; top:20%;left:24%;color: #000000"/>
...@@ -455,8 +457,7 @@ const isCurrentSongInList = computed(() => { ...@@ -455,8 +457,7 @@ const isCurrentSongInList = computed(() => {
<span class="edit-desc-button-1-1">收藏</span> <span class="edit-desc-button-1-1">收藏</span>
</button> </button>
</div> </div>
<p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">继续下一步，则表示你已同意 <p class="encore-text encore-text-marginal-bold final-tip" data-encore-id="text">继续下一步，则表示你已同意获取你选择上传的图像。</p>
Spotify 获取你选择上传的图像。请确保你有上传此图像的权利。</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -508,13 +509,13 @@ const isCurrentSongInList = computed(() => { ...@@ -508,13 +509,13 @@ const isCurrentSongInList = computed(() => {
:class="[musicPlayIndex === music.id ? 'music-after-click' : '']" :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
>{{ music.title }}</p> >{{ music.title }}</p>
<p @click="enterAuthorDescription(music.artist)" class="music-author" <p @click="enterArtistDescription(music.artist)" class="music-author"
:style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"> :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
{{ music.artist }}</p> {{ music.artist }}</p>
</div> </div>
</div> </div>
<div class="music-album-info" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"> <div class="music-album-info" @click="enterMusicEpisode()" :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
{{ music.album }} {{ music.album }}
</div> </div>
<div class="music-right-info"> <div class="music-right-info">
...@@ -639,8 +640,8 @@ const isCurrentSongInList = computed(() => { ...@@ -639,8 +640,8 @@ const isCurrentSongInList = computed(() => {
:class="[musicPlayIndex === music.id ? 'music-after-click' : '']" :class="[musicPlayIndex === music.id ? 'music-after-click' : '']"
>{{ music.title }}</p> >{{ music.title }}</p>
<p @click="enterAuthorDescription(music.artist)" class="music-author" <p @click="enterArtistDescription(music.artist)" class="music-author"
:style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}"> :style="{color:musicHoveredIndex === music.id? 'white' : '#b2b2b2'}">
{{ music.artist }}</p> {{ music.artist }}</p>
</div> </div>
</div> </div>
...@@ -1323,6 +1324,7 @@ li:hover { ...@@ -1323,6 +1324,7 @@ li:hover {
} }
.back-button { .back-button {
z-index: 3;
position: relative; position: relative;
margin: 24px 0 0 24px; margin: 24px 0 0 24px;
width: 32px; width: 32px;
......
src/components/musicView.vue 0 → 100644
+ 0
− 0
View file @ abfc69b6
src/views/HomePage.vue
+ 18
− 39
View file @ abfc69b6
...@@ -440,34 +440,7 @@ const switchToPlaylist = (playlist, songId) => { ...@@ -440,34 +440,7 @@ const switchToPlaylist = (playlist, songId) => {
}); });
} }
const switchToEpisode = (episode, songId) => {
console.log(episode, songId)
currentEpisode.value = episode;
displayingEpisode.value = episode;
currentEpisodeId.value = episode.id;
theme.change(currentEpisode.value.picPath);
getSongsByEpisode({
episode_id: currentEpisodeId.value,
}).then((res) => {
songs.value = res.data.result;
displayingSongs.value = res.data.result;
currentSongId.value = songId;
for (let i = 0; i < songs.value.length; i++) {
if (songs.value[i].id === songId) {
switchToSong(i, true);
parseLrc(songs.value[i].lyricsPath).then(res => {
lyrics.value = res;
});
break;
}
}
}).catch(e => {
console.log("Error while switching episodes!");
});
}
/* /*
PLAYLISTS PLAYLISTS
*/ */
...@@ -550,6 +523,8 @@ const midComponents = ref(0); ...@@ -550,6 +523,8 @@ const midComponents = ref(0);
const currentArtist = ref(null); const currentArtist = ref(null);
const backStack = ref([]); const backStack = ref([]);
const setMidComponents = (val, prop = null, isBack = false) => { const setMidComponents = (val, prop = null, isBack = false) => {
console.log("from" + midComponents.value + " to " + val) console.log("from" + midComponents.value + " to " + val)
if (val !== midComponents.value && !isBack) { if (val !== midComponents.value && !isBack) {
...@@ -557,18 +532,22 @@ const setMidComponents = (val, prop = null, isBack = false) => { ...@@ -557,18 +532,22 @@ const setMidComponents = (val, prop = null, isBack = false) => {
} }
midComponents.value = val; midComponents.value = val;
// if(val === 1) { // if(val === 1)
// getPlaylistById({playlist_id:prop}).then((res) => { // {
// displayingPlaylist.value = res.data.result; // console.log("MainView");
// getSongsByPlaylist({ // if(prop != null) {
// playlist_id: displayingPlaylist.value.id, // getPlaylistById({playlist_id: prop}).then((res) => {
// }).then((res) => { // displayingPlaylist.value = res.data.result;
// displayingSongs.value = res.data.result; // getSongsByPlaylist({
// }).catch(e => { // playlist_id: displayingPlaylist.value.id,
// console.log("Failed to get songs!"); // }).then((res) => {
// }); // displayingSongs.value = res.data.result;
// }) // }).catch(e => {
// console.log("Failed to get songs!");
// });
// })
// }
// } // }
if (val === 5) { if (val === 5) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment