19.音乐查询l练习

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: Scroll;
            overflow-y: hidden
        }
        
        li {
            list-style: none;
        }
        
        #mask {
            display: flex;
            flex-direction: column;
            width: 800px;
            height: 500px;
            margin: 20px auto;
        }
        
        .bj {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -99;
        }
        
        .bj img {
            width: 100%;
            height: 100%;
            background-size: cover;
            filter: blur(100px);
        }
        
        .nav {
            width: 100%;
            height: 50px;
            background: -webkit-linear-gradient(left, #11a2de, #10a2de);
        }
        
        .nav_l {
            float: left;
            width: 44px;
            height: 22px;
            margin: 15px 0 0 20px;
        }
        
        .nav_r {
            float: right;
            width: 300px;
            height: 35px;
            background-color: #7ccbed;
            margin: 8px 20px 0 0;
            border-radius: 18px;
        }
        
        .nav_r input {
            width: 250px;
            height: 30px;
            margin: 2px 0 0 15px;
            outline: none;
            border: 0;
            background-color: #7ccbed;
        }
        
        .nav_r img {
            position: relative;
            top: 7px;
            right: 0;
        }
        
        .content {
            flex: 1;
        }
        
        footer {
            width: 100%;
            height: 40px;
            background-color: #f1f3f4;
        }
        
        .content {
            background: rgba(255, 255, 255, .3);
            font-size: 0;
            /* 父盒子里面的三个子盒子都设为 行内块 会有盒子掉下去 不在一行i显示
            解决方法：父元素设置font-size: 0px; ，自身也设置font-size属性，否则font-size会被继承
             */
        }
        
        .content .left {
            float: left;
            width: 25%;
            height: 100%;
            font-size: 14px;
        }
        
        .Scroll_box {
            overflow: hidden;
            height: 400px;
        }
        
        .scroll {
            height: 100%;
            overflow-y: auto;
            width: calc(100% + 20px);
            margin: 5px;
        }
        
        .scroll .song {
            display: inline-block;
            width: 100px;
            height: 100%;
        }
        
        .left li:nth-child(2n) {
            background: transparent;
        }
        
        .scroll .mv {
            display: block;
            width: 23px;
            height: 17px;
            background-color: #fff;
        }
        
        .left li {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            height: 40px;
            background-color: rgba(255, 255, 255, .5);
            line-height: 40px;
            font-size: 14px;
        }
        
        .left li .bofang {
            width: 17px;
            margin: 0 5px;
        }
        
        .left li .song {
            font-size: 12px;
            display: inline-block;
            width: 122px;
            overflow: hidden;
        }
        
        .left li .mv i {
            display: block;
            width: 23px;
            height: 17px;
            cursor: pointer;
            background: url(image/table.png) left -48px no-repeat;
        }
        
        .content .right {
            float: right;
            width: 25%;
            height: 100%;
            font-size: 14px;
            padding-left: 5px;
        }
        
        .right h4 {
            font-size: 14px;
            margin: 10px 0;
        }
        
        .r_box {
            height: 400px;
            overflow: hidden;
        }
        
        .r_box ul {
            height: 100%;
            overflow-y: auto;
            width: calc(100% + 20px);
        }
        
        .r_box ul li {
            margin-top: 10px;
        }
        
        .right p {
            display: inline-block;
            width: 120px;
            margin: -14px 0 0 47px;
            font-size: 12px;
        }
        
        .right .user {
            vertical-align: top;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        
        h6 {
            display: inline-block;
            font-size: 12px;
            margin-left: 2px;
        }
        
        .content .center {
            display: inline-block;
            width: 50%;
            height: 100%;
            font-size: 14px;
            overflow: hidden;
        }
        
        .bjdie {
            position: relative;
            width: 100%;
            height: 300px;
        }
        
        .bjdie .bjy {
            position: relative;
            top: 60px;
            left: 66px;
            width: 267px;
            height: 260px;
        }
        
        .cover {
            position: absolute;
            top: 55px;
            left: 55px;
            width: 55%;
        }
        
        .disc {
            position: absolute;
        }
        
        .player_bar {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: rotate(-25deg);
            transform-origin: 12px 12px;
            transition: 1s;
        }
        /* 播放音乐   添加playing这个类 播放杆放到碟片上面 */
        
        .playing .player_bar {
            transform: rotate(0);
        }
        
        .biank_l {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .biank_r {
            position: absolute;
            top: 0;
            right: 0;
        }
        
        .audio {
            width: 100%;
            height: 100%;
            outline: none;
        }
        /* 光碟动画 */
        
        @keyframes xuanz {
            0% {
                transform: rotateZ(0);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
        /* 旋转碟片动画的类名 */
        
        .autoRotate {
            animation-name: xuanz;
            animation-timing-function: linear;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: infinite;
        }
        /* 播放音乐   添加playing这个类 碟片旋转 */
        
        .playing .bjy {
            animation-play-state: running;
        }
        /* mv播放界面 */
        
        .video_con video {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 500px;
            outline: none;
            border: 0;
            z-index: 990;
        }
        
        .zhezhaoc {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .8);
            z-index: 980;
        }
    </style>

<body>
    <div id="mask">
        <nav class="nav">
            <div class="nav_l"> <img src="image/player_title.png" alt=""> </div>
            <div class="nav_r">
                <input type="text" v-model="query" @keyup.enter="searchMusic">
                <img src="image/zoom.png" alt="" @click="xuanRan(query)">
            </div>
        </nav>
        <div class="content">
            <div class="left">
                <div class="Scroll_box">
                    <ul class="scroll">
                        <li v-for="i in musicList">
                            <img src="image/play.png" alt="" @click="musicSrc(i.id)" class="bofang">
                            <span class="song"> {{ i.name }} </span>
                            <span class="mv" v-if="i.mvid!=0" @click="musicMv(i.mvid)"><i></i></span>
                            <!-- v-if="i.mvid!=0" 如果这个数组里面的mvid不等于0 就显示图标 -->
                        </li>

                    </ul>
                </div>
            </div>
            <div class="center">
                <div class="bjdie" :class="{playing:isplaying}">
                    <!-- :class="{playing:isplaying}"  通过对象的方式设置类名 类名是否生效 取决于后面值的真假 -->
                    <div class="bjy autoRotate ">
                        <img :src="coverUrl" alt="" class="cover">
                        <img src="image/disc.png" alt="" class="disc">

                    </div>
                    <img src="image/player_bar.png" alt="" class="player_bar">
                    <img src="image/line02.png" alt="" class="biank_l">
                    <img src="image/line01.png" alt="" class="biank_r">
                </div>

            </div>
            <div class="right">
                <div class="r_box">
                    <h4>热门留言</h4>
                    <ul>
                        <li v-for="i in hotComments">
                            <img :src="i.user.avatarUrl" alt="" class="user">

                            <h6 class="user_name"> {{ i.user.nickname}} </h6>
                            <p> {{ i.content }} </p>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <footer>

            <audio @play='play' @pause="pause" :src="musicUrl" autoplay controls loop class="audio"></audio>

        </footer>
        <div class="video_con" v-show="isShow">
            <video :src="musicMvUrl" controls="controls" autoplay></video>
            <div class="zhezhaoc" @click="hide"></div>
        </div>
    </div>
    <div class="bj">
        <img src="image/wyt.jfif" alt="">
    </div>
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="19.main.js"></script>
</body>

var mask = new Vue({
    el: "#mask",
    data: {
        query: '',
        musicList: [],
        musicUrl: "",
        coverUrl: "",
        hotComments: [],
        isplaying: false, // 播放状态
        musicMvUrl: "",
        isShow: false
    },
    methods: {
        searchMusic: function() {
            var that = this;

            axios.get("https://autumnfish.cn/search?keywords=" + that.query)
                .then(function(response) {
                    console.log(response.data.result.songs); // 拿到搜索的歌曲信息
                    var list = response.data.result.songs;
                    that.musicList = list;
                }, function(error) {
                    console.log(error);
                })
        },
        xuanRan: function(query) {
            this.query = query;
            this.searchMusic();
        },
        musicSrc: function(musicId) {
            var that = this;
            axios.get("https://autumnfish.cn/song/url?id=" + musicId).
            then(function(response) {
                // console.log(response.data.data[0].url); //拿到音乐的scr
                that.musicUrl = response.data.data[0].url;
            }, function(err) {
                console.log(err);
            })
            axios.get('https://autumnfish.cn/song/detail?ids=' + musicId).
            then(function(response) {
                // console.log(response.data.songs[0].al.picUrl); //拿到封面的scr
                that.coverUrl = response.data.songs[0].al.picUrl;
            }, function(err) {
                console.log(err);
            })
            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId)
                .then(function(response) {
                    // console.log(response.data.hotComments); // 拿到留言
                    that.hotComments = response.data.hotComments;
                }, function(err) {
                    console.log(err);
                })
        },
        play: function() {
            this.isplaying = true
        },
        pause: function() {
            this.isplaying = false
        },
        musicMv: function(mvid) {
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id=" + mvid)
                .then(function(response) {
                    // console.log(response.data.data.url);
                    that.isShow = true;
                    that.musicMvUrl = response.data.data.url;
                }, function(err) {
                    console.log(err);
                })
        },
        hide: function() {
            this.isShow = false;
        }


    }
})