Merge branch 'yb3.3'

src/store/modules/hzyb.js

@@ -6,7 +6,9 @@ const hzybStore={
             url:'',//音频链接
             videoTime:0,//音频时长
             videoName:'',//音频名称
+            videoImg:'',//音频图片
             paused:true,//音频是否在暂停
+            show:false,// 显示音频弹窗
         }
     },
     mutations: {
@@ -15,18 +17,27 @@ const hzybStore={
             state.audioData.url=e.video_url
             state.audioData.videoTime=e.video_play_seconds
             state.audioData.videoName=e.video_name
+            state.audioData.videoImg=e.video_img
             state.audioData.INS.play()
+            state.audioData.show=true
         },
         // 更新音频播放状态
         upateAudioStatus(state,e){
             if(e==='end'){
                 state.audioData.url=''
-                
+                state.audioData.show=false
             }else if(e==='play'){
                 state.audioData.paused=false
             }else if(e==='paused'){
                 state.audioData.paused=true
             }
+        },
+        //关闭音频弹窗
+        closeAudioPop(state){
+            state.audioData.show=false
+        },
+        showAudioPop(state){
+            state.audioData.show=true
         }
     }
 }

src/views/hzyb/Index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from 'vue'
-import { Slider } from 'vant';
+import { Slider,Icon as VanIcon,Progress as VanProgress } from 'vant';
 import { useStore } from "vuex";
 
 const store=useStore()
@@ -11,10 +11,11 @@ const audioIconPausesmall=new URL('../../assets/hzyb/report/audio-pause-small.pn
 const formatVoiceTime = (e) => {
   let minus = parseInt(e / 60);
   let sec = parseInt(e % 60);
-  return `${minus > 9 ? minus : "0" + minus}分${sec > 9 ? sec : "0" + sec}秒`;
+  return `${minus > 9 ? minus : "0" + minus}:${sec > 9 ? sec : "0" + sec}`;
 };
 
 let currentTime=ref(0)
+let showBigAudio=ref(false)
 const audioIns=ref('')
 store.state.hzyb.audioData.INS=audioIns
 
@@ -55,7 +56,11 @@ const handleClickAudio=()=>{
         store.state.hzyb.audioData.INS.pause()
     }
 }
-
+// 关闭音频弹窗
+const handleCloseAudioPup=()=>{
+    showBigAudio.value=false
+    store.commit('hzyb/closeAudioPop')
+}
 
 </script>
 
@@ -74,14 +79,55 @@ const handleClickAudio=()=>{
         style="display:none"
     />
     <!-- 悬浮音频模块 -->
-    <div class="popup-audio-box" v-if="$store.state.hzyb.audioData.url">
-        <div>{{$store.state.hzyb.audioData.videoName}}</div>
+    <div class="popup-audio-box" v-if="$store.state.hzyb.audioData.show">
+        <div class="small-box" v-if="!showBigAudio" @click="showBigAudio=true">
+            <img :src="$store.state.hzyb.audioData.videoImg" class="bg-img">
+            <div class="small-con">
+                <div class="audio-name-box" style="flex:1">
+                    <div class="van-ellipsis title">{{$store.state.hzyb.audioData.videoName}}</div>
+                    <div style="color:#666">时长 {{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</div>
+                </div>
+                <img class="btn-img" :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click.stop="handleClickAudio" alt="">
+                <van-icon name="cross" color="#BBC3C9" size="16" @click.stop="handleCloseAudioPup" />
+            </div>
+            <van-progress 
+                class="bot-progress" 
+                stroke-width="1px" 
+                color="#D4AC78" 
+                :percentage="(currentTime/$store.state.hzyb.audioData.videoTime)*100" 
+                :show-pivot="false" 
+            />
+        </div>
+        <div class="big-box" v-else>
+            <van-icon name="arrow-down" color="#BBC3C9" size="16" class="arrow-d" @click="showBigAudio=false" />
+            <van-icon name="cross" color="#BBC3C9" size="16" class="arrow-c" @click.stop="handleCloseAudioPup" />
+            <div class="title">{{$store.state.hzyb.audioData.videoName}}</div>
+            <div class="flex">
+                <span>{{formatVoiceTime(currentTime)}}</span>
+                <Slider 
+                    button-size="14px" 
+                    v-model="currentTime" 
+                    :max="$store.state.hzyb.audioData.videoTime" 
+                    active-color="#D5AD79" 
+                    inactive-color="#E9E9E9"
+                    @change="SliderChange" 
+                    class="slider"
+                ></Slider>
+                <span>{{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</span>
+            </div>
+            <div class="flex" style="justify-content: center;">
+                <img src="@/assets/hzyb/report/audio-change-small-grey.png">
+                <img :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall" @click="handleClickAudio" style="margin:0 20px">
+                <img src="@/assets/hzyb/report/audio-change-small-grey.png" style="transform: rotate(180deg)">
+            </div>
+        </div>
+        <!-- <div>{{$store.state.hzyb.audioData.videoName}}</div>
         <div class="flex">
             <span>{{formatVoiceTime(currentTime)}}</span>
             <Slider button-size="10px" v-model="currentTime" :max="$store.state.hzyb.audioData.videoTime" active-color="#D5AD79" @change="SliderChange" class="slider"></Slider>
             <span>{{ formatVoiceTime($store.state.hzyb.audioData.videoTime) }}</span>
             <img :src="$store.state.hzyb.audioData.paused?audioIconPausesmall:audioIconPlaysmall"  alt="" @click="handleClickAudio">
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -92,30 +138,80 @@ const handleClickAudio=()=>{
     bottom: 30px;
     width: 90vw;
     left: 5vw;
-    min-height: 100px;
-    background: #FFFFFF;
-    border: 2px solid rgba(240, 234, 226, 0.32);
-    border-radius: 10px;
-    padding: 10px 20px;
-    font-size: 24px;
-    text-align: center;
-    padding-bottom: 20px;
-    .flex{
+    background-color: #fff;
+    box-shadow: 0px 0px 33px 1px rgba(50,35,17,0.25);
+    border: 1px solid #E4E4E4;
+    .small-box{
         display: flex;
-        align-items: center;
-        .slider{
-            margin-left: 15px;
-            margin-right: 10px;
-        }
-        span{
+        height: 100px;
+        position: relative;
+        .bg-img{
+            background-color: #f5f5f5;
+            width: 74px;
+            display: block;
+            height: 100%;
             flex-shrink: 0;
-            display: inline-block;
+            margin-right: 16px;
         }
-        img{
-            width: 36px;
-            height: 36px;
-            flex-shrink: 0;
-            margin-left: 10px;
+        .small-con{
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            flex: 1;
+            font-size: 20px;
+            padding-right: 33px;
+            .title{
+                font-size: 23px;
+            }
+            .btn-img{
+                width: 49px;
+                height: 49px;
+                display: block;
+                margin-right: 36px;
+            }
+        }
+        .bot-progress{
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+    }
+    .big-box{
+        padding: 25px;
+        position: relative;
+        .arrow-d{
+            position: absolute;
+            left: 25px;
+            top: 25px;
+        }
+        .arrow-c{
+            position: absolute;
+            right: 25px;
+            top: 25px;
+        }
+        .title{
+            padding: 0 40px;
+            text-align: center;
+            font-size: 23px;
+        }
+        .flex{
+            display: flex;
+            align-items: center;
+            margin-top: 40px;
+            span{
+                flex-shrink: 0;
+                font-size: 20px;
+                color: #666;
+            }
+            .slider{
+                flex: 1;
+                margin: 0 10px;
+            }
+            img{
+                width: 49px;
+                height: 49px;
+            }
         }
     }
 }

src/views/hzyb/report/ChapterDetail.vue

@@ -208,7 +208,8 @@ export default {
           auth_ok:res.data.auth_ok,
           video_name:res.data.report_chapter_item.video_name,
           video_play_seconds:res.data.report_chapter_item.video_play_seconds,
-          video_url:res.data.report_chapter_item.video_url
+          video_url:res.data.report_chapter_item.video_url,
+          video_img:res.data.report_chapter_item.video_img
         }
         document.title=res.data.report_chapter_item.classify_name_first
         if(res.data.auth_ok&&res.data.report_chapter_item.classify_name_first==='晨报'){

src/views/hzyb/report/Detail.vue

@@ -217,7 +217,8 @@ export default {
                     auth_ok:res.data.auth_ok,
                     video_name:res.data.report_info.video_name,
                     video_play_seconds:res.data.report_info.video_play_seconds,
-                    video_url:res.data.report_info.video_url
+                    video_url:res.data.report_info.video_url,
+                    video_img:res.data.report_info.video_img
                 }
                 this.chapterList=res.data.report_chapter_list
                 document.title = res.data.report_info.classify_name_first

src/views/hzyb/report/components/AudioBox.vue

@@ -23,6 +23,7 @@ const handleClickAudio=()=>{
     if(store.state.hzyb.audioData.url==props.audioData.video_url){
       if(store.state.hzyb.audioData.paused){
         store.state.hzyb.audioData.INS.play()
+        store.commit('hzyb/showAudioPop')
       }else{
         store.state.hzyb.audioData.INS.pause()
       }