vue综合运用-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.js"></script>
		<title>悦听player</title>
		<!-- 样式 -->
	</head>
	<body>
		<div class="wrap">
			<!-- 播放器主体区域 -->
			<div class="play_wrap" id="player">
				<div class="search_bar">
					<!-- 搜索歌曲 -->
					<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
					<button type="button" @click="searchMusic" class="btn btn-primary">搜索</button>
				</div>
				<div class="center_con">
					<!-- 搜索歌曲列表 -->
					<div class='song_wrapper'>
					
							<li v-for="item in musicList">
								<a href="javascript:;" @click="playMusic(item.id)"></a>
								<a href="javascript:;" @click="playMV(item.id)"></a>
								<b>{{item.name}}</b>
								<span v-if="item.mvid!=0" @click="playMV(item.mvid)">
									<button @click="playMV(item.id)">MV</button></span>
									<button @click="playMusic(item.id)" class="btn btn-success">播放</button>
								

							</li>
					
						<img src="./2.png" class="switch_btn" alt="">
					</div>
					<!-- 歌曲信息容器 -->
					<div class="player_con" :class="{playing:isPlaying}">
						<img src="./3.png" class="play_bar">
						<!-- 黑胶碟片 -->
						<img src="./5.png" class="disc autoRotate">
						<img :src="musicCover" class="cover autoRtate">
					</div>
					<!-- 评论容器 -->
					<div class="comment_wrapper">
						<h5 class="title">热门留言</h5>
						<div class='comment_list'>
							<dl v-for="item in hotComments">
								<dt><img :src="item.user.avatarUrl"></dt>
								<dd class="name">{{item.nick}}</dd>
								<dd>{{item.content}}</dd>
							</dl>
						</div>
					</div>
				</div>
				<div class="audio_con">
					<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop
						class="myaudio"></audio>
				</div>
				<video :src="mvUrl" class="video_con" v-show="isShow" style="display:none;" controls="controls">
					<div class="mask" @click="hide"></div>
				</video>
			</div>
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!--官网提供的axios在线地址-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!--开发环境版本中，包含了有帮助的命令行警告-->
		<script src="main.js"></script>

	</body>
</html>


var app = new Vue({
  el: "#player",
  data:{
	  //查询关键字
	  query:"",
	  //歌曲数组
	  musicList:[],
	  musicUrl:"",
	  musicCover:"",
	  //歌曲评论
	  hotComments:[],
	  //动画播放状态
	  isPlaying:false,
	  mvUrl:"",
	  //遮盖层的显示状态
	  isShow:false,
  },
  methods:{
	  //歌曲搜索
	  searchMusic:function(){
		  var that=this;
		  axios.get("https://autumnfish.cn/search?keywords="+this.query)
	     .then(function(response){
		  //console.log(response);
		  that.musicList=response.data.result.songs;
		  console.log(response.data.result.songs)
		  },
		  function(err){ }
		  );
		  },
	  playMusic:function(musicid){
			  //console.log(musicId);
			  var that=this;
			  axios.get("https://autumnfish.cn/song/url?id="+musicid)
			  .then(function(response){
							  //console.log( response.data.data[0].url);
			 that.musicUrl = response.data.data[0].url;
			},function(err){})
			//歌曲详情获取
			 axios.get("https://autumnfish.cn/song/detail?ids="+musicid)
							   .then(function(response){
												//console.log(response.data.songs[0].al.picUrl);
												that.musicpic=response.data.songs[0].al.picUrl;
											},function(err){})
											//歌曲评论获取
											 axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicid)
															.then(function(response){
																that.hotComments = response.data.hotComments;
															},function(err){})
		  },
	  play:function(){
			//console.log("play");
			this.isPlaying=true;
	  },
	   pause:function(){
			//console.log("pause");
			this.isPlaying=false;
	  },
		//播放mv
		  playMV:function(mvid){
		                    var that = this;
		                    axios.get("https://autumnfish.cn/mv/url?id="+mvid)
		                    .then(function(response){
		                        //console.log(response)
		                        console.log(response.data.data.url);
								that.isShow=true;
		                        that.mvUrl=response.data.data.url;
		                    },
							function(err){}
							);
		},
		//隐藏
		hide:function(){
			this.isShow=false;
		}
		}
  });