zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化（包含登录模块）

Browse Source
This commit is contained in:
始于初见
2024-03-29 17:37:48 +08:00
commit 1bcb13ce7a
1306 changed files with 152772 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
components/music.vue Normal file
View File

@@ -0,0 +1,362 @@
<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>