363 lines
9.2 KiB
Vue
363 lines
9.2 KiB
Vue
<template>
|
||
<view>
|
||
<view :class="['fuchuang',showBig?'bigMode':'miniMode']" v-show="userInfo.playVisible">
|
||
<view>
|
||
<view class="audo-video" >
|
||
<!--音频播放按钮处-->
|
||
<view class="audo-top">
|
||
|
||
<!-- 播放封面 -->
|
||
<image @click="changeShow" style="width: 120rpx; height: 120rpx; margin-top: 0;" :class="['fengImg','fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :src="userInfo.fengImg" mode="aspectFill"></image>
|
||
<!-- <image v-else @click="changeShow" style="width: 120rpx; height: 120rpx; margin-top: 0;" :class="['fengImg','fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" src="@/static/icon/fengziIcon.jpg" mode="aspectFill"></image> -->
|
||
|
||
<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-else @click="changeShow"></u-icon> -->
|
||
<!--上一首切换按钮-->
|
||
|
||
<!-- <image class="prevMusic" @click="prevMusic" src="/static/xys.png"
|
||
mode="aspectFill"></image> -->
|
||
<!-- <image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image> -->
|
||
<!--上一首切换按钮-->
|
||
|
||
<!--快退按钮-->
|
||
<!-- <image src="/static/kt.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kt()"></image> -->
|
||
<!--快退按钮-->
|
||
|
||
<!--播放按钮-->
|
||
<image class="plays" :src="userInfo.playFlag ?'/static/zantigBtn.png':'/static/bofangBtn.png'" mode="aspectFill"
|
||
style="" @click.stop="plays()"></image>
|
||
<!--播放按钮-->
|
||
|
||
<!--快进按钮-->
|
||
<!-- <image src="/static/kj.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="kj()"></image> -->
|
||
<!--快进按钮-->
|
||
|
||
<!--下一首切换按钮-->
|
||
<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
|
||
mode="aspectFill"> </image> -->
|
||
<!-- <image class="nextMusic" style="" src="/static/xys.png" @click="nextMusic" mode="aspectFill"></image> -->
|
||
<!-- <u-icon name="arrow-right" color="#61e781" size="28" v-if="!showBig" @click="changeShow"></u-icon> -->
|
||
|
||
|
||
<!-- 暂时去掉关闭按钮 -->
|
||
<u-icon name="close" color="#61e781" size="20" style="background-color: #fff;border-radius: 100%;" v-if="!showBig" @click="closePlayer"></u-icon>
|
||
|
||
<!-- 暂时去掉关闭按钮 -->
|
||
|
||
<!-- 播放目录 -->
|
||
<!-- <image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill"></image> -->
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="h-100"></view>
|
||
<!--占位-->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
name:"music",
|
||
props:{
|
||
playData:{
|
||
type:Object,
|
||
default:()=>({})
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
showBig:false, // 显示详细模式
|
||
muteBgMusic:true,
|
||
fengImg:'',
|
||
libLIst:[], // 播放目录
|
||
playIndex: 0,// 播放器index
|
||
|
||
};
|
||
},
|
||
onLoad() {
|
||
|
||
this.$music.playBgm({mute:false})
|
||
|
||
|
||
|
||
},
|
||
created() {
|
||
// this.fengImg = this.$music.getCoverImg()
|
||
this.fengImg = this.userInfo.fengImg
|
||
this.libLIst = this.userInfo.myList
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
|
||
methods:{
|
||
...mapMutations(['setUserInfo']),
|
||
|
||
closePlayer(){
|
||
// 关闭播放器
|
||
// console.log('点击了关闭按钮')
|
||
this.$music.setCloseBgm() // 关闭音频
|
||
uni.setStorage({
|
||
key: 'playVisible',
|
||
data: false,
|
||
success: function () {
|
||
console.log('success');
|
||
}
|
||
});
|
||
this.setUserInfo({'playVisible':false})
|
||
},
|
||
changeShow(){
|
||
uni.navigateTo({
|
||
url:'/pages/listen/bigListen'
|
||
})
|
||
// this.showBig = !this.showBig
|
||
},
|
||
// 上一首
|
||
prevMusic(){
|
||
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
|
||
this.$music.playBgm({mute:false})
|
||
this.$music.setPlayIndex('next')
|
||
}else{
|
||
this.$music.setPlayIndex('prev')
|
||
}
|
||
|
||
},
|
||
|
||
nextMusic(){ // 下一首
|
||
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
|
||
this.$music.playBgm({mute:false})
|
||
this.$music.setPlayIndex('next')
|
||
}else{
|
||
this.$music.setPlayIndex('next')
|
||
}
|
||
},
|
||
|
||
//关闭或开启 音乐
|
||
plays() {
|
||
this.muteBgMusic = !this.muteBgMusic
|
||
console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');
|
||
|
||
if (this.userInfo.playFlag) {
|
||
// 暂停
|
||
// this.$music.playBgm({mute:true})
|
||
this.$bgm.pause()
|
||
} else {
|
||
// 播放
|
||
// this.$music.playBgm({mute:false})
|
||
if(this.$bgm._options.src == ''){
|
||
this.$music.playBgm({mute:false})
|
||
}else{
|
||
this.$bgm.play()
|
||
}
|
||
}
|
||
},
|
||
},
|
||
computed:{
|
||
...mapState(['userInfo']),
|
||
timer() {
|
||
return calcTimer(this.userInfo.currentTime)
|
||
},
|
||
overTimer() {
|
||
return calcTimer(this.userInfo.duration)
|
||
},
|
||
playStatus(){
|
||
var playFlag = false
|
||
this.userInfo.playFlag !== undefined ? playFlag = this.userInfo.playFlag : ''
|
||
console.log(playFlag,'playFlag')
|
||
return playFlag
|
||
}
|
||
},
|
||
watch:{
|
||
playData(newVal, oldVal){
|
||
console.log(newVal,'组件获取到新值')
|
||
if(newVal.myList.length > 0){
|
||
this.setUserInfo({'playIndex': 0})
|
||
this.$music.setList(newVal.myList,'autoPlay')
|
||
// this.fengImg = newVal.fengImg
|
||
|
||
// 本地存储播放列表
|
||
uni.setStorage({
|
||
key: 'playData',
|
||
data: newVal,
|
||
success: function () {
|
||
console.log('success');
|
||
}
|
||
});
|
||
// 系统暂存
|
||
this.setUserInfo({'myList':newVal.myList})
|
||
|
||
|
||
this.libLIst = newVal.myList
|
||
// console.log(newVal.myList,'newVal.myList')
|
||
uni.showToast({
|
||
title:'添加列表成功',
|
||
icon:'success',
|
||
duration:2000
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:'添加列表失败',
|
||
icon:'error',
|
||
duration:2000
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//时间换算
|
||
function calcTimer(timer) {
|
||
if (timer === 0 || typeof timer !== 'number') {
|
||
return '00:00'
|
||
}
|
||
let mm = Math.floor(timer / 60)
|
||
let ss = Math.floor(timer % 60)
|
||
if (mm < 10) {
|
||
mm = '0' + mm
|
||
}
|
||
if (ss < 10) {
|
||
ss = '0' + ss
|
||
}
|
||
return mm + ':' + ss
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.fengImg{ border-radius: 100%; background-size: cover; }
|
||
@-webkit-keyframes rotation {
|
||
from {
|
||
-webkit-transform: rotate(0deg);
|
||
}
|
||
to {
|
||
-webkit-transform: rotate(360deg);
|
||
}
|
||
}
|
||
.leveOne{padding: 0 20rpx; }
|
||
.playList{ width: calc(100% - 250rpx); height: 300rpx; overflow-y: scroll;}
|
||
.playList .item{line-height:80rpx; white-space: nowrap;
|
||
overflow-x: hidden; font-size: 38rpx;
|
||
text-overflow: ellipsis;}
|
||
.playNow{color: #27b386;}
|
||
.flexbox{display: flex; }
|
||
.miniMode{width:160px; padding-left: -20px; border-radius: 100rpx 0 0 100rpx; padding-top: 0rpx;
|
||
height: 140rpx;
|
||
border: 1px solid #eee;
|
||
.closeBtn{border: 1px solid #666; display: inline-block; padding: 3px;}
|
||
.leveOne{display: none;}
|
||
.prevMusic{ display: none;
|
||
width:30rpx;height:30rpx;transform:rotate(180deg)
|
||
}
|
||
.plays{width:50rpx;height:50rpx; margin-left: 0 !important;}
|
||
.nextMusic{width:50rpx;height:50rpx; display: none;}
|
||
}
|
||
|
||
.fuchuang{position: fixed; padding-right: 10px; padding-left: 0; bottom:180rpx; right:0; z-index: 888; background-color:rgba(255, 255, 255, 1); }
|
||
.playAnimate{
|
||
-webkit-transform: rotate(360deg);
|
||
animation: rotation 6s linear infinite;
|
||
-moz-animation: rotation 6s linear infinite;
|
||
-webkit-animation: rotation 6s linear infinite;
|
||
-o-animation: rotation 6s linear infinite;
|
||
}
|
||
.playNow{color: #27b386;}
|
||
.fengmianBox{text-align: center; margin-top:50rpx;
|
||
.times{ }
|
||
}
|
||
|
||
.fengmianBox .defaultBg{ width: 100%; margin: 0 auto;border-radius: 200rpx; margin: 0 auto;
|
||
margin-bottom: 20rpx; background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-image: url('@/static/icon/home_icon_0.png');
|
||
}
|
||
|
||
page {
|
||
background-color: #F6F6F8;
|
||
}
|
||
|
||
/* #video {
|
||
width: 100%;
|
||
} */
|
||
.audo-video {
|
||
padding-bottom: 20rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.slider-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 27rpx;
|
||
color: #999; margin: 0 auto;
|
||
}
|
||
|
||
button {
|
||
display: inline-block;
|
||
width: 100rpx;
|
||
background-color: #fff;
|
||
font-size: 24rpx;
|
||
color: #000;
|
||
padding: 0;
|
||
}
|
||
|
||
.hidden {
|
||
position: fixed;
|
||
top: 0;
|
||
left: -10rpx;
|
||
z-index: -1;
|
||
width: 1rpx;
|
||
height: 1rpx;
|
||
}
|
||
|
||
.audo-top {
|
||
padding: 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
}
|
||
|
||
.audo-a {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 750rpx;
|
||
position: relative;
|
||
z-index: 9; margin: 0 auto;
|
||
}
|
||
|
||
.beishu {
|
||
position: relative;
|
||
width: 100rpx;
|
||
padding-top: 5rpx;
|
||
padding-bottom: 5rpx;
|
||
text-align: center;
|
||
border-radius: 25rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.absolute {
|
||
position: absolute;
|
||
|
||
.beishu-a {
|
||
width: 200rpx;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
background: #fff;
|
||
|
||
.title {
|
||
pdding-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|