cansnow
219 lines
6.3 KiB
Vue
219 lines
6.3 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :is-back="true" :title="navbarTitle" :background="{ background: '#ffffff' }"
|
|
:title-bold="true" title-size="34"
|
|
:border-bottom="true" z-index="1001">
|
|
</u-navbar>
|
|
<view>
|
|
<view class="u-p-30 u-flex u-row-between u-col-center">
|
|
<view style="font-size: 36rpx;font-weight: bold;">
|
|
<text>列表</text>
|
|
<text>({{songList.length}})</text>
|
|
</view>
|
|
<view class="u-flex u-row-left u-col-center">
|
|
<view class="u-m-r-30">
|
|
<u-icon name="play-circle-fill" size="42" color="#2979ff" @click="playAll()"
|
|
label="播放全部" label-size="32"></u-icon>
|
|
</view>
|
|
<view class="u-m-l-30">
|
|
<u-icon name="heart-fill" size="42" color="#fa3534" @click="addToLocal()"
|
|
label="添加本地" label-size="32"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view :scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight-50)+'px'" @scrolltolower="loadMore">
|
|
<view class="u-flex u-row-between u-col-center u-p-30 u-border-bottom"
|
|
v-for="(song,index) in songList" :key="index">
|
|
<view class="u-flex u-row-left u-col-center">
|
|
<view class="u-m-r-30">
|
|
<u-image :src="song.pic" width="100rpx" height="100rpx" border-radius="12rpx"></u-image>
|
|
</view>
|
|
<view>
|
|
<view class="u-font-34 u-m-b-10 u-line-1" style="color: #000000;width: 400rpx;">{{escape2Html(song.name)}}</view>
|
|
<view class="u-font-28 u-m-t-10 u-flex u-row-left u-col-center u-line-3" style="color: #808288;width: 400rpx;">
|
|
{{escape2Html(song.artist)}}-{{escape2Html(song.album)}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-around u-col-center">
|
|
<view>
|
|
<u-icon v-if="currentPlaySong&¤tPlaySong.id==song.rid&¤tPlayer.playState" name="pause-circle" size="50" color="#797979"></u-icon>
|
|
<u-icon v-else @click="toPlaySong(song)" name="play-circle" size="50" color="#797979"></u-icon>
|
|
</view>
|
|
<view class="u-m-l-30">
|
|
<u-icon @click="download(song)" name="download" size="50" color="#797979"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view>
|
|
<play-bar @changePlayStatus="changePlayStatus" @showPlayView='bindOnPlayBarChange' @showPlayList='bindOnShowPlayListPopup'></play-bar>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import playBar from './components/play-bar.vue';
|
|
import playerUtil from '@/util/music/music-player.js';
|
|
export default {
|
|
components:{
|
|
playBar
|
|
},
|
|
data() {
|
|
return {
|
|
navbarTitle:"歌曲列表",
|
|
pageHeight:0,
|
|
pageNum:1,
|
|
pageSize:30,
|
|
searchWord:"",
|
|
total:0,
|
|
songList:[],
|
|
loadMoreFlag:false
|
|
};
|
|
},
|
|
watch:{
|
|
currentPlaySong:function(newSong){
|
|
let that=this;
|
|
console.log("====监听到播放歌曲发生变化======");
|
|
if(newSong!=null&&newSong.id){
|
|
playerUtil.initPlayer(that);
|
|
}
|
|
}
|
|
},
|
|
created:function(){
|
|
let pageHeight= this.$u.sys().windowHeight*0.79;
|
|
this.pageHeight=pageHeight;
|
|
},
|
|
onLoad:function(option){
|
|
let that=this;
|
|
console.log("搜索词",option);
|
|
let keyWords= option.keyWords;
|
|
if(keyWords){
|
|
this.navbarTitle=keyWords;
|
|
this.searchWord=keyWords;
|
|
};
|
|
this.getSongList();
|
|
that.$u.vuex("currentPlayer.canPlay",false);
|
|
//当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
|
|
if(playerUtil.bgAudioManager.paused==true){
|
|
playerUtil.initPlayer(that);
|
|
}
|
|
},
|
|
methods:{
|
|
getSongList:function(){
|
|
let that=this;
|
|
let param={
|
|
pageNum:that.pageNum,
|
|
pageSize:that.pageSize,
|
|
keyWords:encodeURI(this.searchWord)
|
|
};
|
|
console.log("搜索歌曲列表",param);
|
|
this.$u.api.music.searchMusicList(param).then(res => {
|
|
//console.log("获取歌曲列表结果",res);
|
|
if(res.code==200){
|
|
let result= res.data;
|
|
if(result!=null&&result!=undefined){
|
|
let reqData= result.data;
|
|
this.total= reqData.total;
|
|
let list=reqData.list;
|
|
if(that.loadMoreFlag==true){
|
|
this.songList=this.songList.concat(list);
|
|
return;
|
|
}else{
|
|
this.songList=list;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
loadMore:function(){
|
|
let that=this;
|
|
if(that.songList.length>=that.total){
|
|
that.globalUtil.utilAlert("暂无更多");
|
|
that.loadMoreFlag=false;
|
|
return;
|
|
}
|
|
that.pageNum++;
|
|
that.loadMoreFlag=true;
|
|
console.log("加载更多");
|
|
that.getSongList();
|
|
},
|
|
|
|
toPlaySong:function(song){
|
|
//console.log("当前选中播放歌曲",song);
|
|
//this.$u.vuex("currentPlaySong",song);
|
|
let param={
|
|
musicId:song.rid
|
|
};
|
|
this.$u.api.music.getSongInfoAndLrc(param).then(res => {
|
|
if(res.code==200){
|
|
let baseInfoResult= res.data;
|
|
let lrclist= baseInfoResult.data.lrclist;
|
|
let songInfo= baseInfoResult.data.songinfo;
|
|
songInfo.lrclist=lrclist;
|
|
this.$u.api.music.getSongSrc(param).then(res => {
|
|
if(res.code==200){
|
|
let songSrcResult= res.data;
|
|
let songSrc=songSrcResult.data.url;
|
|
songInfo.playSrc=songSrc;
|
|
console.log("获取歌曲详细信息结果",songInfo);
|
|
this.$u.vuex("currentPlaySong",songInfo);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
//this.$forceUpdate();
|
|
},
|
|
|
|
changePlayStatus:function(){
|
|
let that=this;
|
|
console.log("改变状态")
|
|
playerUtil.bindOnControllerPlay(that);
|
|
},
|
|
|
|
bindOnPlayBarChange(){
|
|
//this.$refs.playViewPopup.show();
|
|
},
|
|
bindOnShowPlayListPopup(){
|
|
//this.$refs.playListPopup.show();
|
|
},
|
|
playAll:function(){
|
|
|
|
},
|
|
addToLocal:function(){
|
|
let that=this;
|
|
},
|
|
download:function(song){
|
|
let that=this;
|
|
let param={
|
|
musicId:song.rid,
|
|
songName:that.escape2Html(song.name),
|
|
saveDir:that.escape2Html(song.artist),
|
|
};
|
|
console.log("下载参数",param);
|
|
this.$u.api.music.downLoadSong(param).then(res => {
|
|
console.log("下载结果",res);
|
|
if(res.code==200){
|
|
that.globalUtil.utilAlert("下载成功");
|
|
let playSrc= res.data.url;
|
|
}else{
|
|
that.globalUtil.utilAlert("下载失败");
|
|
}
|
|
})
|
|
},
|
|
escape2Html:function(str) {
|
|
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"','$':','};
|
|
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){
|
|
return arrEntities[t];
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|