111
This commit is contained in:
@@ -2,52 +2,56 @@
|
||||
<view>
|
||||
<view :class="['fuchuang',showBig?'bigMode':'miniMode']" v-show="userInfo.playVisible">
|
||||
<view>
|
||||
<view class="audo-video" >
|
||||
<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 @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> -->
|
||||
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 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>
|
||||
|
||||
<!-- 暂时去掉关闭按钮 -->
|
||||
|
||||
<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>
|
||||
@@ -58,32 +62,35 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,mapMutations
|
||||
mapState,
|
||||
mapMutations
|
||||
} from 'vuex';
|
||||
export default {
|
||||
name:"music",
|
||||
props:{
|
||||
playData:{
|
||||
type:Object,
|
||||
default:()=>({})
|
||||
},
|
||||
name: "music",
|
||||
props: {
|
||||
playData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showBig:false, // 显示详细模式
|
||||
muteBgMusic:true,
|
||||
fengImg:'',
|
||||
libLIst:[], // 播放目录
|
||||
playIndex: 0,// 播放器index
|
||||
|
||||
showBig: false, // 显示详细模式
|
||||
muteBgMusic: true,
|
||||
fengImg: '',
|
||||
libLIst: [], // 播放目录
|
||||
playIndex: 0, // 播放器index
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
this.$music.playBgm({mute:false})
|
||||
|
||||
|
||||
|
||||
this.$music.playBgm({
|
||||
mute: false
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
// this.fengImg = this.$music.getCoverImg()
|
||||
@@ -91,72 +98,80 @@
|
||||
this.libLIst = this.userInfo.myList
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods:{
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations(['setUserInfo']),
|
||||
|
||||
closePlayer(){
|
||||
|
||||
closePlayer() {
|
||||
// 关闭播放器
|
||||
// console.log('点击了关闭按钮')
|
||||
this.$music.setCloseBgm() // 关闭音频
|
||||
this.$music.setCloseBgm() // 关闭音频
|
||||
uni.setStorage({
|
||||
key: 'playVisible',
|
||||
data: false,
|
||||
success: function () {
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
this.setUserInfo({'playVisible':false})
|
||||
},
|
||||
changeShow(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/listen/bigListen'
|
||||
});
|
||||
this.setUserInfo({
|
||||
'playVisible': false
|
||||
})
|
||||
// this.showBig = !this.showBig
|
||||
},
|
||||
changeShow() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/listen/bigListen'
|
||||
})
|
||||
// this.showBig = !this.showBig
|
||||
},
|
||||
// 上一首
|
||||
prevMusic(){
|
||||
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
|
||||
this.$music.playBgm({mute:false})
|
||||
prevMusic() {
|
||||
if (this.$bgm._options.src == '') { // 如果直接点下一首，没点播放
|
||||
this.$music.playBgm({
|
||||
mute: false
|
||||
})
|
||||
this.$music.setPlayIndex('next')
|
||||
}else{
|
||||
this.$music.setPlayIndex('prev')
|
||||
} else {
|
||||
this.$music.setPlayIndex('prev')
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
nextMusic(){ // 下一首
|
||||
if(this.$bgm._options.src == ''){ // 如果直接点下一首，没点播放
|
||||
this.$music.playBgm({mute:false})
|
||||
|
||||
nextMusic() { // 下一首
|
||||
if (this.$bgm._options.src == '') { // 如果直接点下一首，没点播放
|
||||
this.$music.playBgm({
|
||||
mute: false
|
||||
})
|
||||
this.$music.setPlayIndex('next')
|
||||
}else{
|
||||
} else {
|
||||
this.$music.setPlayIndex('next')
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
//关闭或开启 音乐
|
||||
plays() {
|
||||
this.muteBgMusic = !this.muteBgMusic
|
||||
console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');
|
||||
|
||||
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.$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:{
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
timer() {
|
||||
return calcTimer(this.userInfo.currentTime)
|
||||
@@ -164,47 +179,51 @@
|
||||
overTimer() {
|
||||
return calcTimer(this.userInfo.duration)
|
||||
},
|
||||
playStatus(){
|
||||
playStatus() {
|
||||
var playFlag = false
|
||||
this.userInfo.playFlag !== undefined ? playFlag = this.userInfo.playFlag : ''
|
||||
console.log(playFlag,'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')
|
||||
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 () {
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
// 系统暂存
|
||||
this.setUserInfo({'myList':newVal.myList})
|
||||
|
||||
|
||||
this.setUserInfo({
|
||||
'myList': newVal.myList
|
||||
})
|
||||
|
||||
|
||||
this.libLIst = newVal.myList
|
||||
// console.log(newVal.myList,'newVal.myList')
|
||||
uni.showToast({
|
||||
title:'添加列表成功',
|
||||
icon:'success',
|
||||
duration:2000
|
||||
title: '添加列表成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:'添加列表失败',
|
||||
icon:'error',
|
||||
duration:2000
|
||||
})
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '添加列表失败',
|
||||
icon: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,54 +245,125 @@
|
||||
</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);
|
||||
}
|
||||
.fengImg {
|
||||
border-radius: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotation {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
.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{
|
||||
|
||||
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;
|
||||
-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');
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -291,7 +381,8 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 27rpx;
|
||||
color: #999; margin: 0 auto;
|
||||
color: #999;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -330,7 +421,8 @@
|
||||
align-items: center;
|
||||
width: 750rpx;
|
||||
position: relative;
|
||||
z-index: 9; margin: 0 auto;
|
||||
z-index: 9;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.beishu {
|
||||
@@ -358,5 +450,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user