453 lines
9.2 KiB
Vue
453 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_logo.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> |