audio

custom-tab-bar/index.wxss

@@ -9,6 +9,7 @@
   padding-bottom: calc(5px + constant(safe-area-inset-bottom));
   padding-bottom: calc(5px + env(safe-area-inset-bottom));
   box-shadow: 0px -3px 6px rgba(203, 203, 203, 0.16);
+  z-index:50;
 }
 
 .tab-bar-item {

mixin/index.js

@@ -34,6 +34,16 @@ module.exports = {
       const startTime=moment(start).format('HH:mm');
       const endTime=moment(end).format('HH:mm');
       return `${day} ${startTime}-${endTime} ${week}`
+    },
+    /**
+     * 格式化音频显示时间
+     * @param 120  时长整数秒
+     * @returns 02:09
+     */
+    formatVoiceTime(e){
+      let minus=parseInt(e/60)
+      let sec=e%60
+      return `${minus>9?minus:'0'+minus}分${sec>9?sec:'0'+sec}秒`
     }
   },
   data() {

pages-activity/detail.vue

@@ -34,23 +34,63 @@
                 class="audio-item"
                 v-for="(item,index) in audioList"
                 :key="item.voiceUrl"
+                @click="handleClickAudioItem(item)"
             >
+                <image
+                    class="icon" 
+                    src="../static/audio-doing.png"
+                    mode="aspectFill"
+                    v-if="activeAudioUrl==item.voiceUrl&&audioPlayStatus==true"
+                />
+                <image
+                    class="icon" 
+                    src="../static/audio-pause-3.png"
+                    mode="aspectFill"
+                    v-else-if="activeAudioUrl==item.voiceUrl&&audioPlayStatus==false"
+                />
                 <image 
                   class="icon" 
-                  :src="(activeAudioUrl==item.voiceUrl&&item.playStatus)?'./static/audio-doing.png':'./static/audio-play.png'" 
+                  src="../static/audio-pause-2.png" 
                   model="aspectFill" 
-                  @click="handlePlayAudio(item)">
-                </image>
-                <view class="name">{{ item.voiceName }}</view>
-                <view class="time">{{activeAudioUrl==item.voiceUrl?activeAudioTime:0|formarVoiceTime}} / {{ item.voicePlaySeconds|formarVoiceTime }}</view>
-                <slider 
-                    class="audio-slider" 
-                    activeColor="#e3b377"
-                    :max="item.voicePlaySeconds" 
-                    :value="activeAudioUrl==item.voiceUrl?activeAudioTime:0" 
-                    @change="handleAudioSliderChange($event,item)"
-                    block-size="20"
+                  v-else
                 />
+                <view class="name" :style="{color:item.voiceUrl==activeAudioUrl?'#D5AD79':''}">{{ item.voiceName }}</view>
+                <view class="time">{{ item.voicePlaySeconds|formatVoiceTime }}</view>
+            </view>
+
+            <view class="box" v-if="activeAudioUrl">
+                <view class="flex top-slider">
+                    <text>{{audioCurrentTime|formatVoiceTime}}</text>
+                    <slider 
+                        class="audio-slider" 
+                        activeColor="#e3b377"
+                        :max="activeAudioTime" 
+                        :value="audioCurrentTime" 
+                        @change="handleAudioSliderChange($event)"
+                        block-size="20"
+                    />
+                    <text>{{activeAudioTime|formatVoiceTime}}</text>
+                </view>
+                <view class="flex btns">
+                    <image 
+                        class="before" 
+                        :src="isFirstAudio?'../static/audio-before-grey.png':'../static/audio-before.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('before')"
+                    />
+                    <image 
+                        class="center" 
+                        :src="audioPlayStatus?'../static/audio-doing.png':'../static/audio-pause-3.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('center')"
+                    />
+                    <image 
+                        class="next" 
+                        :src="isLastAudio?'../static/audio-before-grey.png':'../static/audio-before.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('next')"
+                    />
+                </view>
             </view>
         </view>
 
@@ -136,12 +176,17 @@ import {
 import {baseApiUrl} from '@/utils/config.js'
 export default {
     name: "ActivityDetail",
-    filters:{
-      formarVoiceTime(e){
-        let minus=parseInt(e/60)
-        let sec=e%60
-        return `${minus}:${sec>9?sec:'0'+sec}`
-      }
+    computed: {
+      isFirstAudio(){
+          if(this.audioList.length>0){
+              return this.activeAudioUrl==this.audioList[0].voiceUrl
+          }
+      }, 
+      isLastAudio(){
+          if(this.audioList.length>0){
+              return this.activeAudioUrl==this.audioList[this.audioList.length-1].voiceUrl
+          }
+      },
     },
     data() {
         return {
@@ -151,7 +196,9 @@ export default {
             audioList: [], //音频数据
 
             activeAudioUrl:'',//正在播放的背景音频地址
-            activeAudioTime:0,//
+            activeAudioTime:0,//选择的音频数据时长
+            audioCurrentTime:0,//音频正常播放的时间
+            audioPlayStatus:false,//音频是否正在播放
 
             pupData: {
                 show: false,
@@ -159,6 +206,7 @@ export default {
                 type: "",
                 mobile: "",
             },
+
         };
     },
     onLoad(options) {
@@ -167,7 +215,22 @@ export default {
         this.getAudios()
     },
     onUnload(){
-        this.handleSaveAudioMsg()
+        // 存一次
+        // const audioPlayPaused=this.globalBgMusic.paused// true 当前没有音频在播放
+        // if(audioPlayPaused===false){
+            let obj={
+                activityId:this.id,//活动id
+                play:this.audioPlayStatus,//是否正在播放
+                list:this.audioList,//音频列表数据
+                show:false,//是否显示弹窗
+                title:'',//音频弹窗标题
+                audioCurrentTime:this.audioCurrentTime,//音频播放实时时间
+                audioTime:this.activeAudioTime,//当前音频时间
+                audioCurrentUrl:this.activeAudioUrl,//当前音频地址
+            }
+            uni.setStorageSync('audioMsg', JSON.stringify(obj))
+        // }
+        
     },
     onShareAppMessage() {
         let title=''
@@ -186,6 +249,138 @@ export default {
         }
     },
     methods: {
+        // 点击音频项
+        handleClickAudioItem(item){
+            // 点击同一个音频
+            if(item.voiceUrl==this.activeAudioUrl){
+                if(this.audioPlayStatus){
+                    this.globalBgMusic.pause()
+                }else{
+                    this.globalBgMusic.play()
+                }
+            }else{
+                this.handlePlayAudio(item)
+            }
+        },
+
+        // 播放音频
+        handlePlayAudio(e){
+            console.log(e);
+            
+            this.globalBgMusic.title=e.voiceName
+            this.globalBgMusic.src=e.voiceUrl
+
+            this.globalBgMusic.onCanplay(()=>{
+                console.log('onCanplay');
+                this.globalBgMusic.play()
+                this.activeAudioUrl=e.voiceUrl
+                this.activeAudioTime=e.voicePlaySeconds
+            })
+          
+            this.handleAudioFun()
+        },
+
+        // 音频事件
+        handleAudioFun(){
+            this.globalBgMusic.onPlay(()=>{
+                console.log('onplay');
+                this.audioPlayStatus=true
+            })
+            this.globalBgMusic.onPause(()=>{
+                console.log('onPause');
+                this.audioPlayStatus=false
+            })
+            this.globalBgMusic.onStop(()=>{
+                console.log('onStop');
+               this.audioPlayStatus=false
+            })
+            this.globalBgMusic.onEnded(()=>{
+                console.log('onEnded');
+                this.audioPlayStatus=false
+                this.handleAudioBtn('next','auto')
+            })
+            this.globalBgMusic.onError((e)=>{
+                console.log('onError',e);
+                uni.showToast({
+                    title:"音频播放错误",
+                    icon:'none'
+                })
+            })
+            this.globalBgMusic.onTimeUpdate(()=>{
+                if(this.globalBgMusic.src==this.activeAudioUrl){
+                    this.audioCurrentTime=parseInt(this.globalBgMusic.currentTime)
+                }
+            })
+        },
+
+        // 点击播放按钮
+        handleAudioBtn(type,e){
+            if(type==='center'){
+                if(this.audioPlayStatus){
+                    this.globalBgMusic.pause()
+                }else{
+                    this.globalBgMusic.play()
+                }
+            }
+
+            if(type==='before'){
+                if(!this.isFirstAudio){
+                    this.audioList.forEach((_item,index)=>{
+                        if(_item.voiceUrl==this.activeAudioUrl){
+                            this.handlePlayAudio(this.audioList[index-1])
+                        }
+                    })
+                }
+            }
+
+            if(type==='next'){
+                if(!this.isLastAudio){
+                    this.audioList.forEach((_item,index)=>{
+                        if(_item.voiceUrl==this.activeAudioUrl){
+                            this.handlePlayAudio(this.audioList[index+1])
+                        }
+                    })
+                }else{
+                    // 自动播放最后一个结束
+                    if(e==='auto'){
+                        this.activeAudioUrl=''
+                        this.audioPlayStatus=false
+                        this.activeAudioTime=0
+                        this.audioCurrentTime=0
+                    }
+                }
+            }
+
+
+        },
+
+        //音频进度条拖动
+        handleAudioSliderChange(e){
+            const value=e.detail.value
+            this.globalBgMusic.seek(value)
+        },
+
+        // 获取活动音频
+        async getAudios() {
+            const res = await apiActivityAudios({ activity_id: Number(this.id) });
+            if (res.code === 200&&res.data) {
+                this.audioList = res.data
+
+                const audioPlayPaused=this.globalBgMusic.paused// true 当前没有音频在播放
+                if(audioPlayPaused===false){// 当前有音频在播放
+                console.log('aa');
+                    let obj=uni.getStorageSync('audioMsg')
+                    if(obj){
+                        this.activeAudioUrl=JSON.parse(obj).audioCurrentUrl
+                        this.activeAudioTime=Number(JSON.parse(obj).audioTime)
+                        this.audioCurrentTime=Number(this.globalBgMusic.currentTime)
+                        this.audioPlayStatus=JSON.parse(obj).play
+                        this.handleAudioFun()
+                    }
+                }
+            }
+        },
+
         async getDetail() {
             const res = await apiActivityDetail({ activity_id: Number(this.id) });
             // 无权限
@@ -247,110 +442,6 @@ export default {
             }
         },
 
-        // 获取活动音频
-        async getAudios() {
-            const res = await apiActivityAudios({ activity_id: Number(this.id) });
-            if (res.code === 200&&res.data) {
-                const audioPlayPaused=this.globalBgMusic.paused// true 当前没有音频在播放
-                if(audioPlayPaused===false){// 当前有音频在播放
-                    this.activeAudioUrl=uni.getStorageSync('activityAudioUrl')
-                }
-
-                console.log('是否有音频在播放',audioPlayPaused===false);
-                
-                this.audioList = res.data.map(item=>{
-                    let obj={...item,playStatus:false}
-                    if(audioPlayPaused===false){
-                        if(item.voiceUrl==this.globalBgMusic.src){
-                            obj.playStatus=true
-                        }
-                    }
-                    return obj
-                });
-
-                if(audioPlayPaused===false){
-                    this.activeAudioTime=this.globalBgMusic.currentTime
-                    this.globalBgMusic.onTimeUpdate(()=>{
-                        this.activeAudioTime=parseInt(this.globalBgMusic.currentTime)
-                    })
-                }
-            }
-        },
-
-        // 播放音频
-        handlePlayAudio(e){
-            if(this.globalBgMusic.src==e.voiceUrl&&e.playStatus){// 同一个音频 并且是播放状态 则暂停
-                console.log('同一个音频 并且是播放状态 则暂停');
-                console.log('音频实例',this.globalBgMusic.src);
-                this.globalBgMusic.pause()
-            }else if(this.globalBgMusic.src==e.voiceUrl&&!e.playStatus){//同一个音频 并且是暂停状态 则直接播放
-                console.log('同一个音频 并且是暂停状态 则直接播放');
-                console.log('音频实例',this.globalBgMusic.src);
-                this.globalBgMusic.play()
-            }else{
-                this.globalBgMusic.title=e.voiceName
-                this.globalBgMusic.src=e.voiceUrl
-                this.activeAudioUrl=e.voiceUrl
-                this.activeAudioTime=0
-            }
-
-            this.globalBgMusic.onCanplay(()=>{
-                console.log('onCanplay');
-                this.globalBgMusic.play()
-            })
-          
-            this.globalBgMusic.onPlay(()=>{
-                console.log('onplay');
-                e.playStatus=true
-            })
-            this.globalBgMusic.onPause(()=>{
-                console.log('onPause');
-                e.playStatus=false
-            })
-            this.globalBgMusic.onStop(()=>{
-                console.log('onStop');
-                e.playStatus=false
-                this.activeAudioTime=0
-            })
-            this.globalBgMusic.onEnded(()=>{
-                console.log('onEnded');
-                e.playStatus=false
-                this.activeAudioTime=0
-            })
-            this.globalBgMusic.onError((e)=>{
-                console.log('onError',e);
-            })
-            this.globalBgMusic.onTimeUpdate(()=>{
-                if(this.globalBgMusic.src==e.voiceUrl){
-                    this.activeAudioTime=parseInt(this.globalBgMusic.currentTime)
-                }
-            })
-        },
-
-        //音频进度条拖动
-        handleAudioSliderChange(e,item){
-            const value=e.detail.value
-            item.currentPlayTime=value
-            // 如果当前activeAudioUrl 不等于拖动的这个音频
-            if(item.voiceUrl!=this.globalBgMusic.src){
-                this.handlePlayAudio(item)
-            }else{
-                this.globalBgMusic.seek(value)
-                this.globalBgMusic.play()
-            }
-
-        },
-
-        // 存储音频播放的信息
-        handleSaveAudioMsg(){
-            // 当音频暂停（不是停止）时 主动调一次停止
-            const audioPlayPaused=this.globalBgMusic.paused
-            if(audioPlayPaused===true){
-                this.globalBgMusic.stop()
-            }
-            uni.setStorageSync('activityAudioUrl',this.activeAudioUrl)
-        },
-
         // 点击信息项
         handleClickInfoItem(e) {
             if (e.type === "tel" && e.text) {
@@ -594,15 +685,15 @@ export default {
 }
 
 .audio-wrap {
-    padding: 0 94rpx 0 34rpx;
+    padding: 0 34rpx;
     .audio-item {
-        padding-top: 36rpx;
-        // border-bottom: 1px solid #E8DED2;
+        padding: 36rpx 0;
+        border-bottom: 1px solid #E8DED2;
         position: relative;
         .icon {
             position: absolute;
             top: 50rpx;
-            right: 0;
+            right: 6rpx;
             width: 48rpx;
             height: 48rpx;
         }
@@ -616,6 +707,44 @@ export default {
             margin: 20rpx 0 20rpx 20rpx; 
         }
     }
+    .box{
+        min-height: 100rpx;
+        margin-top: 60rpx;
+        margin-bottom: 70rpx;
+        padding: 30rpx 20rpx;
+        background: #FFFFFF;
+        border: 1px solid rgba(240, 234, 226, 0.3);
+        box-shadow: 0px 3px 12px rgba(154, 154, 154, 0.16);
+        border-radius: 16px;
+        .top-slider{
+            align-items: center;
+            text{
+                width: 110rpx;
+                font-size: 12px;
+                text-align: center;
+                flex-shrink: 0;
+            }
+            .audio-slider{
+                flex: 1;
+                margin: 0 20rpx;
+            }
+        }
+        .btns{
+            justify-content: space-between;
+            width: 50%;
+            align-items: center;
+            margin-left: auto;
+            margin-right: auto;
+            margin-top: 25rpx;
+            image{
+                width: 58rpx;
+                height: 58rpx;
+            }
+            .next{
+                transform: rotate(180deg);
+            }
+        }
+    }
 }
 
 .btn-wrap {

pages/activity/activity.vue

@@ -1,4 +1,5 @@
 <template>
+    <page-meta :page-style="currentAudioMsg.show? 'overflow: hidden;' : ''" />
     <view class="activity-page">
         <van-sticky style="background: #fff">
             <!-- <view class="search-wrap">
@@ -69,14 +70,14 @@
                 <view class="flex top">
                     <image class="avatar" :src="item.speakerHeadPic" mode="aspectFill"></image>
                     <view class="content">
-                        <view class="flex icon-box">
+                        <view class="flex icon-box" @click.stop="handleGetAudio(item)">
                             <template v-if="item.firstActivityTypeId===3&&item.city">
                                 <image src='../../static/position.png'></image>
                                 <text>{{item.city}}</text>
                             </template>
                             <template v-if="item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack">
-                                <image src='../../static/hf.png'></image>
-                                <text>可回放</text>
+                                <image :src="currentAudioMsg.activityId==item.activityId&&currentAudioMsg.play?'../../static/audio-doing.png':'../../static/audio-pause.png'"></image>
+                                <text>{{currentAudioMsg.activityId==item.activityId?currentAudioMsg.play?'暂停':'回放':'回放'}}</text>
                             </template>
                         </view>
                         <view class="van-ellipsis title">{{item.activityTypeName}}</view>
@@ -122,6 +123,61 @@
                 </view>
             </view>
         </van-popup>
+
+        <!-- 音频弹窗 -->
+        <van-popup 
+            :show="currentAudioMsg.show" 
+            @close="currentAudioMsg.show=false"
+            position="bottom"
+            closeable
+            round
+            z-index="99999"
+        >
+            <view class="audio-popup-box">
+                <view class="title">{{currentAudioMsg.title}}</view>
+                <view class="flex item " v-for="item in currentAudioMsg.list" :key="item.voiceUrl" @click="handleAudioChange(item)">
+                    <view>
+                        <view :style="{color:item.voiceUrl==currentAudioMsg.audioCurrentUrl?'#D5AD79':''}">{{item.voiceName}}</view>
+                        <view style="font-size:12px;color:#999">{{item.voicePlaySeconds|formatVoiceTime}}</view>
+                    </view>
+                    <image v-if="item.voiceUrl==currentAudioMsg.audioCurrentUrl&&currentAudioMsg.play" src="../../static/audio-doing.png" mode="scaleToFill"/>
+                    <image v-else-if="item.voiceUrl==currentAudioMsg.audioCurrentUrl&&!currentAudioMsg.play" src="../../static/audio-pause-3.png" mode="scaleToFill"/>
+                    <image v-else src="../../static/audio-pause-2.png" mode="scaleToFill"/>
+                </view>
+                <view class="flex box">
+                    <text>{{currentAudioMsg.audioCurrentTime|formatVoiceTime}}</text>
+                    <slider
+                        activeColor="#e3b377"
+                        :max="currentAudioMsg.audioTime" 
+                        :value="currentAudioMsg.audioCurrentTime" 
+                        @change="handleAudioSliderChange($event)"
+                        block-size="20"
+                    />
+                    <text>{{currentAudioMsg.audioTime|formatVoiceTime}}</text>
+                </view>
+                <view class="flex btns">
+                    <image 
+                        class="before" 
+                        :src="isFirstAudio?'../../static/audio-before-grey.png':'../../static/audio-before.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('before')"
+                    />
+                    <image 
+                        class="center" 
+                        :src="currentAudioMsg.play?'../../static/audio-doing.png':'../../static/audio-pause-3.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('center')"
+                    />
+                    <image 
+                        class="next" 
+                        :src="isLastAudio?'../../static/audio-before-grey.png':'../../static/audio-before.png'" 
+                        mode="aspectFit"
+                        @click="handleAudioBtn('next')"
+                    />
+                </view>
+            </view>
+        </van-popup>
+  
     </view>
 </template>
 
@@ -131,10 +187,23 @@ import {
     apiActivityAddRemind,
     apiActivityCancelRemind, 
     apiActivityRegister,
-    apiActivityCancelRegister
+    apiActivityCancelRegister,
+    apiActivityAudios
 } from '@/api/activity'
 import {apiApplyPermission,apiUserInfo} from '@/api/user'
 export default {
+    computed: {
+        isFirstAudio(){
+            if(this.currentAudioMsg.list.length>0){
+                return this.currentAudioMsg.audioCurrentUrl==this.currentAudioMsg.list[0].voiceUrl
+            }
+        },
+        isLastAudio(){
+            if(this.currentAudioMsg.list.length>0){
+                return this.currentAudioMsg.audioCurrentUrl==this.currentAudioMsg.list[this.currentAudioMsg.list.length-1].voiceUrl
+            }
+        }
+    },
     watch: {
       'pupData.show':{
           handler(nval){
@@ -149,7 +218,6 @@ export default {
           }
       }
     },
-    
     data() {
         return {
             searchVal: '',
@@ -169,6 +237,17 @@ export default {
             },
 
             onlySeeAuth:false,// 是否只看有权限的
+
+            currentAudioMsg:{
+                activityId:'',//活动id
+                play:false,//是否正在播放
+                list:[],//音频列表数据
+                show:false,//是否显示弹窗
+                title:'',//音频弹窗标题
+                audioCurrentTime:0,//音频播放实时时间
+                audioTime:0,//当前音频时间
+                audioCurrentUrl:'',//当前音频地址
+            },
         }
     },
     onLoad() {
@@ -180,9 +259,21 @@ export default {
         if(this.$store.state.activity.activityListPageRefresh){
             this.allRefresh()
         }
+
+        this.initAudio()
+        
+
+        // let obj=uni.getStorageSync('audioMsg')
+        // if(obj){
+        //     this.currentAudioMsg=JSON.parse(obj)
+        // }
+        // this.handleAudioFun()
     },
     onHide(){
         this.pupData.show=false
+        this.currentAudioMsg.show=false
+        // 存一次音频信息
+        uni.setStorageSync('audioMsg', JSON.stringify(this.currentAudioMsg))
     },
     onUnload(){
 		uni.$off('activityDetailSetRemind')
@@ -209,6 +300,148 @@ export default {
     },
 
     methods: {
+        // 初始化音频状态
+        initAudio(){
+            wx.getBackgroundAudioPlayerState({
+                success:(res)=> {
+                   const status=res.status;//0暂停中 1播放中 2没有音乐播放
+                   
+                   console.log(this.statusActive);
+                },
+                fail:(e)=>{
+                    console.log(e);
+                }
+            })
+        },
+
+        // 点击列表中播放音频
+        async handleGetAudio(item){
+            // 获取音频
+            if(this.currentAudioMsg.activityId!=item.activityId){
+                const res=await apiActivityAudios({activity_id: Number(item.activityId)})
+                if(res.code===200){
+                    if(res.data){
+                        this.currentAudioMsg.activityId=item.activityId
+                        this.currentAudioMsg.list=res.data
+                        this.currentAudioMsg.title=item.activityTypeName
+                        this.handlePlayAudio(res.data[0])
+                    }else{
+                        uni.showToast({
+                            title:"无音频数据",
+                            icon:"none"
+                        })
+                    }
+                }
+            }else{
+                if(this.currentAudioMsg.play){
+                    this.globalBgMusic.pause()
+                }else{
+                    this.globalBgMusic.play()
+                }
+            }
+
+            this.currentAudioMsg.show=!this.currentAudioMsg.show
+        },
+
+        // 播放音频
+        handlePlayAudio(item){
+            this.globalBgMusic.src=item.voiceUrl
+            this.globalBgMusic.title=item.voiceName
+
+            this.globalBgMusic.onCanplay(()=>{
+                this.globalBgMusic.play()
+            })
+          
+            this.globalBgMusic.onPlay(()=>{
+                this.currentAudioMsg.play=true
+                this.currentAudioMsg.audioTime=item.voicePlaySeconds
+                this.currentAudioMsg.audioCurrentUrl=this.globalBgMusic.src
+            })
+
+            this.handleAudioFun()
+        },
+
+        // 音频事件
+        handleAudioFun(){
+            this.globalBgMusic.onPause(()=>{
+                this.currentAudioMsg.play=false
+            })
+            this.globalBgMusic.onStop(()=>{
+                this.currentAudioMsg.play=false
+            })
+            this.globalBgMusic.onEnded(()=>{
+                console.log('onEnded');
+                this.currentAudioMsg.play=false
+                this.handleAudioBtn('next','auto')
+            })
+            this.globalBgMusic.onError((e)=>{
+                console.log('onError',e);
+            })
+            this.globalBgMusic.onTimeUpdate(()=>{
+                if(this.globalBgMusic.src==this.currentAudioMsg.audioCurrentUrl){
+                    this.currentAudioMsg.audioCurrentTime=parseInt(this.globalBgMusic.currentTime)
+                }
+            })
+        },
+
+        // 点击弹窗中的按钮
+        handleAudioBtn(type,e){
+            if(type==='center'){
+                if(this.currentAudioMsg.play){
+                    this.globalBgMusic.pause()
+                }else{
+                    this.globalBgMusic.play()
+                }
+            }
+            if(type==='before'){
+                if(!this.isFirstAudio){
+                    this.currentAudioMsg.list.forEach((_item,index)=>{
+                        if(_item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
+                            this.handlePlayAudio(this.currentAudioMsg.list[index-1])
+                        }
+                    })
+                }
+            }
+
+            if(type==='next'){
+                if(!this.isLastAudio){
+                    this.currentAudioMsg.list.forEach((_item,index)=>{
+                        if(_item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
+                            this.handlePlayAudio(this.currentAudioMsg.list[index+1])
+                        }
+                    })
+                }else{
+                    if(e==='auto'){
+                        this.currentAudioMsg.play=false
+                        this.currentAudioMsg.audioCurrentTime=0
+                        this.currentAudioMsg.audioTime=0
+                        this.currentAudioMsg.audioCurrentUrl=''
+                    }
+                }
+
+            }
+        },
+
+        //点击弹窗中的音频项
+        handleAudioChange(item){
+            // 点击的同一个
+            if(item.voiceUrl==this.currentAudioMsg.audioCurrentUrl){
+                if(this.currentAudioMsg.play){
+                    this.globalBgMusic.pause()
+                }else{
+                    this.globalBgMusic.play()
+                }
+            }else{
+                this.handlePlayAudio(item)
+            }
+        },
+
+        //拖动进度条
+        handleAudioSliderChange(e){
+            const value=e.detail.value
+            this.globalBgMusic.seek(value)
+        },
+
         async init(){
             let userInfoRes=this.userInfo
             if(!this.userInfo.status){
@@ -516,6 +749,49 @@ export default {
 </script>
 
 <style lang="scss">
+.audio-popup-box{
+    .title{
+        font-size: 16px;
+        font-weight: bold;
+        padding: 40rpx 34rpx;
+    }
+    .item{
+        padding: 34rpx 52rpx 34rpx 34rpx;
+        border-bottom: 1px solid $global-border-color;
+        justify-content: space-between;
+        image{
+            width: 48rpx;
+            height: 48rpx;
+            flex-shrink: 0;
+        }
+    }
+    .box{
+        align-items: center;
+        padding: 60rpx 54rpx 30rpx 54rpx;
+        text{
+            width: 110rpx;
+            display: inline-block;
+            font-size: 12px;
+        }
+        slider{
+            flex: 1;
+        }
+    }
+    .btns{
+        width: 45%;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 20rpx;
+        justify-content: space-between;
+        image{
+            width: 58rpx;
+            height: 58rpx;
+        }
+        .next{
+            transform: rotate(180deg);
+        }
+    }
+}
 .search-wrap {
     padding: 0 8rpx;
     background-color: $global-bg-color;

utils/request.js

@@ -107,10 +107,12 @@ const http=(url,params,method)=>{
 			},
 			fail(error) {
 				console.log(error);
-				uni.showToast({
-					title:'网络异常，稍后重试！',
-					icon:'none'
-				})
+				setTimeout(()=>{
+					uni.showToast({
+						title:'网络异常，稍后重试！',
+						icon:'none'
+					})
+				},0)
 			},
 			complete() {
 				// 关闭loading