im/pages/find/music/song_list.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&&currentPlaySong.id==song.rid&&currentPlayer.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>