播放

<template>
    <div class="player" v-if="playList">
        <!-- 全屏幕播放器 -->
        <div class="normal-player" v-show="isall">
            <div class="top">
                <van-icon  @click="changetype" name="arrow-down" size="20"/>
                <div class="nametop">
                    <div class="div1">{{playList[playList.length-1].name}}</div>
                    <div class="div2">{{playList[playList.length-1].song.artists[0].name}}</div>
                </div>
            </div>
            <div class="middle">
                <div class="middle-l">
                    <img src="" alt="">
                </div>
                <div class="middle-2"></div>
            </div>
            <div class="bottom">
                <div class="jindutiao">进度条</div>
                <div style="text-align:center;">
                    <van-icon size="40" name="play-circle-o" />
                    <!-- <van-icon size="40" name="stop-circle-o" /> -->
                </div>
            </div>
        </div>

        <!-- 底部播放器 -->
        <div class="bottomSing" v-show="!isall" >
            <div class="one">
                <!-- <img :src="playList[playList.length-1].picUrl" alt=""> -->
                <img src="../assets/logo.png" alt="" @click="showall">
            </div>
            <div class="two">
                <p>{{playList[playList.length-1].name}}</p>
                <p style="font-size:11px;">{{playList[playList.length-1].song.artists[0].name}}</p>
            </div>
            <div class="three">
                <van-icon size="34" name="stop-circle-o" />
            </div>
            <div class="four" @click="showmore">
               <van-icon size="34" name="notes-o" />
            </div>
        </div> 
        <van-popup v-model="show" position="bottom" >
            <div class="listHeader">
                
            </div>
        </van-popup>

        <audio src=""></audio>
    </div>
</template>
<script>
 import { mapState, mapActions } from "vuex";
export default {
    data(){
        return{
            isall:true,
            show:false,
        }
    },
    computed: {
        ...mapState({
            playList:state=>state.playList
        }),
    },
    methods:{
        //全屏播放器和底部播放器的切换
        changetype(){
            this.isall = !this.isall
        },
        showall(){
            this.isall = !this.isall
        },
        //查看全部歌单
        showmore(){
            this.show = true
        }
    }
};
</script>
<style>
    .player{

    }
    .normal-player {
        color: #fff;
        z-index: 400;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(88, 86, 86);
    }
    .top{
        display: flex;
        padding-top: 10px;
        padding-left: 20px;
    }
    .nametop{
        position: absolute;
        left: 37%;
        text-align: center;
    }
    .nametop .div1{
        font-weight: bold;
        margin: 0 auto;
        line-height: 20px;
        color: #f1f1f1;
    }
    .nametop .div2{
        margin-top: 3px;;
        font-size: 12px;
    }
    .middle{
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        position: fixed;
        width: 100%;
        top: 80px;
        bottom: 170px;
        white-space: nowrap;
        font-size: 0;
    }
    .middle .middle-l img{
        height: 100%;
        width: 100%;
    }
    .bottom{
        position: absolute;
        bottom: 50px;
        width: 100%;
    }
    .bottom .jindutiao{
        text-align:center;
        margin-bottom:20px;
    }
    .bottomSing{
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 180;
        width: 100%;
        height: 60px;
        background:#fff;
        
    }
    .one{
        width: 40px;
        height: 40px;
        padding: 0 10px 0 20px;
    }
    .one img{
        width: 40px;
        height: 40px;
    }
    .two{
        margin-bottom: 2px;
        line-height: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        color: #2e3030;
            display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    }
    .four{
        flex: 0 0 30px;
        width: 30px;
        padding: 0 10px;
    }
    .three{
        flex: 0 0 30px;
        width: 30px;
        padding: 0 10px;
    }
</style>



import Vue from "vue"
import Vuex from "vuex"


Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        playList:[],
    },
    getters:{
       
    },
    mutations:{
        setplayList(state,list){
            state.playList.push(list)
        }
    }
})
export default store;


    //添加到歌单
    addplayList(data){
      this.$store.commit('setplayList',data)
    },




































展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值