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

第一次提交

Browse Source
This commit is contained in:
@fawn-nine
2024-05-22 13:42:15 +08:00
commit bb53af8bde
2133 changed files with 129959 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

682
components/cx-audio-play/cx-audio-play - 副本.vue Normal file
View File

@@ -0,0 +1,682 @@
<template>
<!--音频组件-->
<view>
<view class="bgfff">
<view>
<view class="audo-video">
<!-- 播放封面 -->
<view :class="['fengmianBox','defaultBg', succes ? 'playAnimate' : '']" :style="{ backgroundImage: `url(${fengImg})` }"></view>
<!--音频播放按钮处-->
<view class="audo-top">
<!-- 顺序播放 -->
<image v-if="orderPlayBtn" style="width:50rpx;height:50rpx;" src="/static/orderPlaya.png" mode="aspectFill" @click="orderPlay(false)"></image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/orderPlay.png" mode="aspectFill" @click="orderPlay(true)"></image>
<!--上一首切换按钮-->
<image v-if="jian" @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
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 :src="succes?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
style="width:180rpx;height:180rpx;" @click="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 v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image>
<!-- 播放目录 -->
<image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="showLib()"></image>
</view>
<!--音频播放按钮处-->
<!--音频api处[视频代替音频-实现倍数功能]-->
<video id="myVideo" ref="myVideo" :src="recorPath" class="hidden" @timeupdate="timeupdate"
:autoplay="autoplays" @loadedmetadata="loadedmetadata" @ended="next" controls
style="width: 10rpx;height:10rpx;">
</video>
<!--音频api处[视频代替音频-实现倍数功能]-->
<view class="audo-a" style="margin:0 auto;">
<!--进度条-->
<view class="slider-box">
<text class="mm">{{timer}}</text>
<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
activeColor="#2fc348" @touchstart="lock= true" @touchend="lock = false" />
<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
<text class="ss" v-else>00.00</text>
</view>
<!--进度条-->
</view>
</view>
</view>
</view>
<view class="h-100"></view>
<!--占位-->
</view>
<!--音频组件 Author:chenxin-->
</template>
<script>
/*
list -- 音频文件传入 不传无法播放/数组形式
Faskms -- 快进秒数 number 默认15秒
Slowms -- 快退秒数 number 默认15秒
autoNext -- 是否自动播放下一首
autoplays -- 进入页面是否自动播放 - 默认false
slideYes -- 滑动进度条时是否开启播放 - 默认false
switAud -- 切换上下音频是否开启播放 - 默认false
BsNav -- 倍数数据传入/数组形式
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
目前只测试 微信小程序和H5和APP -- 其他平台未知
Author:chenxin 交流vx:cxalq8-24
*/
import {
mapState,mapMutations
} from 'vuex';
export default {
name: "cx-audio-play",
props: {
list: { //音频数据
Type: Array,
default:[]
},
fengImg:{
// 封面img
type:String,
default:''
},
Faskms: { //快进秒数
Type: Number,
default: 15,
},
jia:{
Type: Boolean,
default: false,
},
// orderPlayBtn:{
// // 按顺序播放
// Type: Boolean,
// default: false
// },
Slowms: { //快退秒数
Type: Number,
default: 15,
},
autoNext: {
Type: Boolean,
default: false,
},
autoplays: { //是否开启自动播放
Type: Boolean,
default: true,
},
slideYes: { //滑动进度条 - 是否开启播放
Type: Boolean,
default: false,
},
switAud: {
Type: Boolean, //切换上下音频 - 是否开启播放
default: false,
},
jian: { //减-切换图标
type:Boolean,
default:false
},
cctime:{ // 初始化播放位置（秒）
type:Object,
default:{}
},
BsNav: { //倍数-传入 0.5/0.8/1.0/1.25/1.5/2.0
Type: Array,
default: () => [{
id: 0.5,
bs: '0.5',
}, {
id: 0.8,
bs: '0.8'
}, {
id: 1.0,
bs: '1.0'
},{
id: 1.25,
bs: '1.25'
},{
id: 1.5,
bs: '1.5'
},{
id: 2.0,
bs: '2.0'
}
],
},
},
data() {
return {
orderPlayBtn:false,
shows: false, //倍数弹框
show: true, //倍数弹框动画默认开启
// jia: true, //加-切换图标
succes: true, //播放按钮
bsid: '', //倍数默认显示第一个
bsindex: 2, //倍数默认显示第一个
num: 0,
current: 0, //当前选中的索引
recorPath: '', //音频播放地址
lock: false, // 锁
currentTime: 0, //当前进度
duration: 1, // 总进度
videoContext: null,
loading: true, //锁 加载
audioMannager:null ,// 背景音乐
saveInterVal:null,
}
},
onReady() {},
onShow() {
},
onBackPress() {
},
mounted() {
// console.log(this.cctime,'cctime') // 默认播放的位置（秒），第一次加载
this.videoContext = uni.getBackgroundAudioManager()
// this.videoContext = uni.createVideoContext('myVideo', this)
//默认播放第一个 -- 按钮展示
if (this.list.length != 0) {
this.loading = true
this.videoContext.title = '暂无'
this.videoContext.singer = '暂无'
this.videoContext.coverImgUrl = this.fengImg
this.videoContext.src = this.list[0].recorPath
this.playloading()
// if (this.list.length > 1) { //音频文件大于1 -- 下一个切换默认显示
// // this.jia = false
// if (this.autoplays) {
// this.succes = true
// }
// }
}
this.videoContext.onEnded(() => {
this.next()
//this.setUserInfo({playFlag:false});
//console.log(this.userInfo.playFlag,'playFlag')
}) // 播放结束加载下一首
this.videoContext.onError((err) => {
console.log(err)
this.setUserInfo({playFlag:true});
this.next()
}) // 播放错误加载下一首
this.videoContext.onCanplay(() =>{
// this.setUserInfo({playFlag:true});
// console.log(this.userInfo.playFlag,'playFlag')
this.duration = this.videoContext.duration
// this.loading = false
uni.hideLoading()
this.succes = true
if(this.cctime.flag == 'init'){
// 页面初始化时
this.currentTime = this.cctime.time
// 跳转到指定的秒数上
this.videoContext.seek(this.currentTime)
console.log('获取到初始值，进行时间跳转')
}
})
this.videoContext.onPlay(() => {
this.playSeconds = Math.ceil(this.currentTime) // 秒数取整
})
this.videoContext.onTimeUpdate((res) => {
//console.log(this.videoContext.currentTime,'onTimeUpdate');
this.currentTime = Math.max(0, this.videoContext.currentTime)
// console.log(this.currentTime,'当前秒数');
// var ss = Math.floor(this.playSeconds / 60)
// console.log(ss, this.playSeconds)
// if(ss > this.playSeconds){
// this.playSeconds = ss
// console.log(ss)
// }
})
},
updated() {
},
onLoad() {
},
onHide() { //监听页面离开 - 销毁音频
// this.videoContext.stop();
console.log('onHide')
},
onUnload() { //监听页面卸载 - 销毁音频
// this.videoContext.stop();
console.log('onUnload')
},
destroyed() {
// if(this.videoContext){
// this.videoContext.stop();
// }
console.log('destroyed')
},
computed: {
...mapState(['userInfo']),
timer() {
return calcTimer(this.currentTime)
},
overTimer() {
return calcTimer(this.duration)
}
},
watch: {
},
methods: {
...mapMutations(['setUserInfo']),
// 存储听书进度
saveListenRate(){
console.log('存储听书进度')
this.$emit('saveRate',this.currentTime)
},
// 顺序播放
orderPlay(val){
// console.log(val)
if(val){
uni.showToast({
title:'开启顺序播放',
icon:'none'
})
this.orderPlayBtn = true
}else{
uni.showToast({
title:'关闭顺序播放',
icon:'none'
})
this.orderPlayBtn = false
}
},
// 显示播放列表
showLib(){
this.$emit('showLib',true)
},
plays() { //播放暂停
if (!this.list || this.list.length == 0) {
uni.showToast({
title: '暂无音频数据~',
icon: "none"
})
// console.log('暂无音频数据.~')
return;
}
// this.playloading()
this.succes = !this.succes
/// console.log('修改后',this.succes)
if (this.succes) {
console.log('去播放',this.succes)
// this.setUserInfo({playFlag:true});
this.videoContext.play()
} else {
// this.succes = false
console.log('去暂停',this.succes )
// this.setUserInfo({playFlag:false});
uni.hideLoading()
//#ifdef H5
this.videoContext.pause()
this.saveListenRate()
//#endif
//#ifndef H5
this.videoContext.pause()
this.saveListenRate()
//#endif
}
},
// beishu() { //倍速弹框
// this.shows = !this.shows
// },
// 倍速
// setRate(index, item) {
// this.bsid = item.id
// this.bsindex = index
// this.shows = false
// //#ifdef H5
// this.videoContext.playbackRate(2)
// //#endif
// //#ifndef H5
// this.videoContext.playbackRate(2)
// //#endif
// },
// 更新进度条
timeupdate(event) {
if (this.lock) return; // 锁
var currentTime, duration;
if (event.detail.detail) {
currentTime = event.detail.detail.currentTime
duration = event.detail.detail.duration
} else {
currentTime = event.detail.currentTime
duration = event.detail.duration
}
this.currentTime = currentTime
this.duration = duration
},
// 拖动进度条
sliderChange(data) {
//此处滑动进度条--开始播放
if (this.slideYes && !this.succes) {
//#ifdef H5
this.videoContext.play()
//#endif
//#ifndef H5
this.videoContext.play()
//#endif
this.succes = true
}
//#ifdef H5
this.videoContext.seek(data.detail.value) //获取秒数
//#endif
//#ifndef H5
this.videoContext.seek(data.detail.value) //获取秒数
//#endif
},
//拖动中
sliderChanging(data) {
if (data.detail.value == 0) {
this.succes = false
//#ifdef H5
this.videoContext.pause()
//#endif
//#ifndef H5
this.videoContext.pause()
//#endif
}
this.currentTime = data.detail.value
},
// 视频加载完成
loadedmetadata(data) {
this.duration = data.detail.duration
},
sig() { //上一首
this.$emit('playPrev',true)
// if (!this.list || this.list.length == 0) {
// console.log('暂无音频数据~')
// return;
// }
// this.num -= 1
// console.log(this.num,'this.num')
// if (this.num < this.list.length) {
// this.loading = true
// this.playloading() //加载框
// }
// if (this.num + 1 < this.list.length && this.num + 1 != 1) { //点击上一首小于音频数据总长度
// // this.jia = false // 下按钮-亮且可点击
// // this.jian = false // 上按钮-亮且可点击
// } else {
// // this.jian = true // 上按钮-灰且阻止
// // this.jia = false // 下按钮-亮且可点击
// }
// this.recorPath = this.list[this.num].recorPath
// if (this.switAud) { //切换时是否默认开启播放
// this.succes = true
// setTimeout(() => {
// //#ifdef H5
// this.$refs.myVideo.play()
// //#endif
// //#ifndef H5
// this.videoContext.play()
// //#endif
// }, 100)
// } else {
// this.succes = false
// }
},
xig() { //下一首
this.$emit("xiayishou");
// if (!this.list || this.list.length == 0) {
// console.log('暂无音频数据~')
// return;
// }
// this.num += 1
// if (this.num < this.list.length) {
// this.loading = true
// this.playloading() //加载框
// }
// if (this.num + 1 < this.list.length) { //点击下一首小于音频数据总长度
// this.jia = false // 下按钮-亮且可点击
// this.jian = false // 上按钮-亮且可点击
// } else { //大于总长度
// this.jia = true //下按钮 - 灰且阻止
// this.jian = false //上按钮 - 亮可点击
// }
// this.recorPath = this.list[this.num].recorPath
// if (this.switAud) { //切换时是否默认开启播放
// this.succes = true
// setTimeout(() => {
// //#ifdef H5
// this.$refs.myVideo.play()
// //#endif
// //#ifndef H5
// this.videoContext.play()
// //#endif
// }, 100)
// } else {
// this.succes = false
// }
},
nosig() {
uni.showToast({
title: '到头了~',
icon: "none"
})
},
noxig() {
uni.showToast({
title: '没有更多了~',
icon: "none"
})
},
next(data) { //监听音频结束
// console.log('开始播放下一首')
this.succes = false
/*音频结束--是否自动播放下一首*/
//if(this.orderPlayBtn){
setTimeout(()=>{
this.$emit("xiayishou");
},100)
// }else{
// console.log('音频结束-------')
// return
// }
// if (!this.autoNext) {
// return
// }
// if (this.num + 1 < this.list.length) {
// this.succes = true
// this.num += 1
// this.recorPath = this.list[this.num].recorPath
// setTimeout(() => {
// //#ifdef H5
// this.$refs.myVideo.play()
// //#endif
// //#ifndef H5
// this.videoContext.play()
// //#endif
// }, 100)
// } else {
// //this.jia = true //下按钮 - 灰且阻止
// //this.jian = false //上按钮 - 亮可点击
// }
},
playloading() { //加载框--封
if (this.loading) {
uni.showLoading({
title: "音频缓存中..."
})
this.loading = false
}
this.succes = false
// setTimeout(() => {
// uni.hideLoading()
// }, 1600)
},
},
watch: {}
}
//时间换算
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>
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.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;
}
.fengmianBox{text-align: center; width: 400rpx; height: 400rpx; position: relative; border-radius: 400rpx; margin: 0 auto; margin-bottom: 140rpx; background-size: contain;}
.fengmianBox:after{
content: ''; display: inline-block; left:0; top:0; z-index: 0;width: 400rpx; height: 400rpx; position: absolute; border-radius: 400rpx; box-shadow: rgba(177, 235, 202, 0.8) 0px 0px 29px 0px;
}
.fengmianBox.defaultBg{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: 20rpx 40rpx;
display: flex;
justify-content: space-around;
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>

360
components/cx-audio-play/cx-audio-play.vue Normal file
View File

@@ -0,0 +1,360 @@
<template>
<!--音频组件-->
<view>
<view class="bgfff">
<view>
<view class="audo-video">
<!-- 播放封面 -->
<view :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" :style="{ backgroundImage: `url(${fengImg})` }"></view>
<!-- <view v-else :class="['fengmianBox','defaultBg', userInfo.playFlag ? 'playAnimate' : '']" style="{ border:1px solid red;backgroundImage: url('@/static/icon/fengziIcon.jpg') }">显示我</view> -->
<!--音频播放按钮处-->
<view class="audo-top">
<!-- 顺序播放 -->
<!-- <image v-if="orderPlayBtn" style="width:50rpx;height:50rpx;" src="/static/orderPlaya.png" mode="aspectFill" @click="orderPlay(false)"></image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/orderPlay.png" mode="aspectFill" @click="orderPlay(true)"></image>
<!--上一首切换按钮-->
<!-- <image v-if="jian" @click="sig" src="/static/xys.png" style="width:50rpx;height:50rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<image v-else style="width:50rpx;height:50rpx;" @click="nosig" src="/static/sys.png" mode="aspectFill"></image>-->
<image class="prevMusic" @click="prevMusic" src="/static/xys.png" style="width:90rpx;height:90rpx;transform:rotate(180deg)"
mode="aspectFill"></image>
<!--上一首切换按钮-->
<!--播放按钮-->
<image :src="userInfo.playFlag ?'/static/bofang2.png':'/static/zt.png'" mode="aspectFill"
style="width:180rpx;height:180rpx;" @click="plays()"></image>
<!--播放按钮-->
<!--下一首切换按钮-->
<!-- <image v-if="jia" @click="noxig" style="width:50rpx;height:50rpx;transform:rotate(180deg)" src="/static/sys.png"
mode="aspectFill"> </image>
<image v-else style="width:50rpx;height:50rpx;" src="/static/xys.png" @click="xig" mode="aspectFill"></image> -->
<image class="nextMusic" style="width:90rpx;height:90rpx;" src="/static/xys.png" @click="nextMusic" mode="aspectFill"></image>
<!-- 播放目录 -->
<image src="/static/libIcon.png" style="width:45rpx;height:45rpx;" mode="aspectFill" @click="showLib()"></image>
</view>
<!--音频播放按钮处-->
<view class="audo-a" style="margin:0 auto;">
<!--进度条-->
<view class="slider-box">
<text class="mm">{{timer}}</text>
<slider style="width: 370rpx;" @change="sliderChange" @changing="sliderChanging"
class="audio-slider" block-size="16" :min="0" :max="duration" :value="currentTime"
activeColor="#2fc348" @touchstart="lock= true" @touchend="lock = false" />
<text class="ss" v-if="overTimer!='NaN:NaN'">{{overTimer}}</text>
<text class="ss" v-else>00.00</text>
</view>
<!--进度条-->
</view>
</view>
</view>
<!-- 播放列表 -->
<u-popup mode="bottom" :show="LibVisible" :round="10" @close="LibVisible=false" >
<view class="libTitle">播放列表</view>
<view class="tanchu playList" style="height:400rpx;overflow-y: scroll;">
<scroll-view style="height:400rpx; overflow-y: scroll;" scroll-y="true"
<view class="item" v-for="(item,index) in libLIst" :key="index" >
<view @click="listenOne(item)" :class="userInfo.playIndex == index ? 'playNow' : ''">
<view>{{item.chapter}}</view>
</view>
</view>
</scroll-view>
</view>
</u-popup>
</view>
<view class="h-100"></view>
<!--占位-->
</view>
<!--音频组件 Author:chenxin-->
</template>
<script>
/*
list -- 音频文件传入 不传无法播放/数组形式
Faskms -- 快进秒数 number 默认15秒
Slowms -- 快退秒数 number 默认15秒
autoNext -- 是否自动播放下一首
autoplays -- 进入页面是否自动播放 - 默认false
slideYes -- 滑动进度条时是否开启播放 - 默认false
switAud -- 切换上下音频是否开启播放 - 默认false
BsNav -- 倍数数据传入/数组形式
按钮图片未自定义，如想改动请在组件内部修改，页面头部已注释 -- 逻辑根据自己需求改
目前只测试 微信小程序和H5和APP -- 其他平台未知
Author:chenxin 交流vx:cxalq8-24
*/
import {
mapState,mapMutations
} from 'vuex';
export default {
name: "cx-audio-play",
props: {
list: { //音频数据
Type: Array,
default:[]
},
},
data() {
return {
playIndex: 0,// 播放器index
LibVisible:false,
libLIst:[],
fengUrl:'',
orderPlayBtn:false,
shows: false, //倍数弹框
show: true, //倍数弹框动画默认开启
// jia: true, //加-切换图标
succes: true, //播放按钮
bsid: '', //倍数默认显示第一个
bsindex: 2, //倍数默认显示第一个
num: 0,
current: 0, //当前选中的索引
recorPath: '', //音频播放地址
lock: false, // 锁
currentTime: 0, //当前进度
duration: 1, // 总进度
videoContext: null,
loading: true, //锁 加载
audioMannager:null ,// 背景音乐
saveInterVal:null,
fengImg:'',
nofengImg:'../../static/icon/fengziIcon.jpg'
}
},
created() {
this.libLIst = this.$bgm.musicList
this.fengImg = this.userInfo.fengImg
console.log(this.userInfo.fengImg,'this.userInfo.fengImg++++++++++++++')
this.userInfo.playTimes ? this.setUserInfo({'currentTime': this.userInfo.playTimes}) : ''
},
computed: {
...mapState(['userInfo']),
timer() {
this.currentTime = this.userInfo.currentTime
return calcTimer(this.userInfo.currentTime)
},
overTimer() {
this.duration = this.userInfo.duration
return calcTimer(this.userInfo.duration)
},
},
watch: {
},
methods: {
...mapMutations(['setUserInfo']),
// 上一首
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()
}
}
},
// 播放单个音频
listenOne(item){
if(this.$bgm._options.src == ''){
this.$music.playBgm({mute:false})
this.$music.setOneMusic(item)
}else{
this.$music.setOneMusic(item)
}
},
// 显示播放列表
showLib(){
this.LibVisible = true
},
// 拖动进度条
sliderChange(data) {
// console.log(data,'拖动进度条',data)
if(this.$bgm._options.src == ''){
this.$music.playBgm({mute:false})
// this.$bgm.pause()
}else{
this.$bgm.play()
}
console.log('拖动',data.detail.value)
uni.getBackgroundAudioManager().seek(data.detail.value)
// this.$bgm.seek(data.detail.value) //获取秒数
},
//拖动中
sliderChanging(data) {
this.$bgm.pause()
this.currentTime = data.detail.value
//console.log('拖动中',this.currentTime)
},
},
watch: {}
}
//时间换算
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>
.graytitle{color: #999;}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.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;
}
.fengmianBox{text-align: center; width: 400rpx; height: 400rpx; position: relative; border-radius: 400rpx; margin: 0 auto; margin-bottom: 140rpx; background-size: contain;}
.fengmianBox:after{
content: ''; display: inline-block; left:0; top:0; z-index: 0;width: 400rpx; height: 400rpx; position: absolute; border-radius: 400rpx; box-shadow: rgba(177, 235, 202, 0.8) 0px 0px 29px 0px;
}
.fengmianBox.defaultBg{background-image: url('@/static/icon/home_icon_0.png'); background-size: cover;}
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: 20rpx 40rpx;
display: flex;
justify-content: space-around;
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>

58
components/cx-audio-play/miniplay.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<view>
<view v-if="minishow" class="fuchuang" style="width: 750rpx;">
我是浮窗
<view class="libTitle">播放列表</view>
<view class="libTitle"v-for="(item,index) in libLIst">{{item.chapterName}}</view>
<view class="tanchu playList">
<!-- <u-button>显示目录</u-button> -->
</view>
</view>
</view>
</template>
<script>
export default {
name: "miniPlay",
props: {
LibVisible:{
Type: Boolean,
default: false,
},
},
data() {
return {
minishow:true,
playid:1,
libLIst:[
{
'chapterName':1,
'chapterId':1
},
{
'chapterName':2,
'chapterId':1
},
{
'chapterName':3,
'chapterId':1
},
]
}
},
methods: {
showLib(){
this.LibVisible = true
}
}
}
</script>
<style>
.fuchuang{font-size: 20px; position:fixed; right: 0; bottom: 70px; background: green; z-index: 55;}
</style>

BIN
components/cx-audio-play/statics/bofang2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
components/cx-audio-play/statics/bofangxiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
components/cx-audio-play/statics/kj.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
components/cx-audio-play/statics/kt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
components/cx-audio-play/statics/play-icon-audio.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
components/cx-audio-play/statics/stop-play-btn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 B

BIN
components/cx-audio-play/statics/sys.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 799 B

BIN
components/cx-audio-play/statics/tabbar/tabbarimg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1014 B

BIN
components/cx-audio-play/statics/zanting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
components/cx-audio-play/statics/zt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB