7.4

activityPages/activityDetail/activityDetail.vue

@@ -12,25 +12,38 @@
         <!-- 内容部分 -->
         <view class="content">
           <view v-if="detailData.ActivityName" class="dialog-title" :class="1 == 1 ? 'brackets-title' : ''">{{ detailData.ActivityName }}</view>
-          <view class="audio-card" v-if="detailData.AudioLink">
+          <view class="audio-card">
             <view class="card-title text_oneLine">
               {{ detailData.VoiceList.Name }}
             </view>
-            <slider activeColor="#3385FF" :max="detailData.VoiceList.PlaySeconds" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
-            <view class="card-time">
-              <text class="time">{{ curTime | formatVoiceTime }}</text>
-              <text class="time">{{ detailData.VoiceList.PlaySeconds | formatVoiceTime }}</text>
+            <view class="slider-paly">
+              <view style="flex: 1; padding-top: 20rpx">
+                <slider activeColor="#3385FF" :max="detailData.VoiceList.PlaySeconds" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
+                <view class="card-time">
+                  <view class="time">{{ curTime | formatVoiceTime }}</view>
+                  <view class="time">{{ detailData.VoiceList.PlaySeconds | formatVoiceTime }}</view>
+                </view>
+              </view>
+              <view class="is-paly-card">
+                <image
+                  @click.stop="audioPlayBack"
+                  class=""
+                  :src="
+                    curVoiceId === detailData.ActivityId && !curAudioPaused
+                      ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif'
+                      : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'
+                  "
+                ></image>
+              </view>
             </view>
-            <view class="is-paly-card">
-              <image
-                @click.stop="audioPlayBack"
-                class=""
-                :src="
-                  curVoiceId === detailData.ActivityId && !curAudioPaused
-                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png'
-                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'
-                "
-              ></image>
+            <view class="fast-reverse">
+              <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
+              <block v-for="(item, index) in timesTheSpeed" :key="item.value">
+                <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
+                  {{ item.name }}
+                </view>
+              </block>
+              <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
             </view>
           </view>
           <view class="city-box">
@@ -220,7 +233,9 @@
       <jurisdiction :idAct="id" :haveAuth="haveAuth" :industryMsg="industryMsg" :msgType="msgType" :sellerMobile="sellerMobile" :sellerName="sellerName"></jurisdiction>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <audioModule :showAudioPop="false" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop="false" />
+    </view>
   </view>
 </template>
 
@@ -276,6 +291,13 @@ export default {
       goOnNextStep: "", //设置外呼号后弹出哪个
       mailboxBinding: false, //是否绑定邮箱
       play: false,
+      timesTheSpeed: [
+        { name: "倍速", value: 1 },
+        { name: "1.25倍", value: 1.25 },
+        { name: "1.5倍", value: 1.5 },
+        { name: "2倍", value: 2 },
+      ],
+      showAudioBox: false,
     };
   },
   mixins: [manageMixin],
@@ -293,10 +315,15 @@ export default {
       let initTime = this.curVoiceId === this.detailData.ActivityId ? this.$store.state.audioBg.curTime : 0;
       return initTime;
     },
+    //报名的显示
     showWay() {
       let text = this.detailData.SignupType == 1 ? "取消外呼" : "取消报名";
       return text;
     },
+    //几倍的播放数度
+    isTimes() {
+      return this.$store.state.audioBg.multiple;
+    },
   },
   components: {
     modalDialog,
@@ -496,6 +523,25 @@ export default {
       const value = e.detail.value;
       this.globalBgAudioManager.seek(value);
     },
+    //倍速播放
+    isTimesHandler(i) {
+      let index = i == 3 ? 0 : i + 1;
+      this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
+      this.globalBgAudioManager.pause();
+      this.play = true;
+      this.globalBgAudioManager.playbackRate = this.isTimes;
+      this.globalBgAudioManager.startTime = this.curTime;
+      this.globalBgAudioManager.play();
+    },
+    //快进 快退
+    speedReverseHandler(type) {
+      if (!this.globalBgAudioManager.src) {
+        this.init();
+      }
+      let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
+      isTime = isTime <= 0 ? 0 : isTime;
+      this.globalBgAudioManager.seek(isTime);
+    },
   },
   async onLoad(option) {
     this.id = option.id || "";
@@ -507,6 +553,12 @@ export default {
       this.getActivityDetail();
     }
   },
+  onShow() {
+    this.showAudioBox = true;
+  },
+  onHide() {
+    this.showAudioBox = false;
+  },
   /**
    * 用户点击分享
    */
@@ -756,7 +808,7 @@ export default {
     margin-bottom: 10rpx !important;
   }
   .dustrial-li {
-    display:flex;
+    display: flex;
     align-items: center;
     padding: 0 13rpx;
     margin: 0 20rpx 20rpx 0;
@@ -771,19 +823,27 @@ export default {
   .audio-card {
     width: 100%;
     height: 282rpx;
-    background: #f5f9ff;
+    background: #f9f9f9;
     border-radius: 16rpx;
     margin: 0 auto;
-    padding: 30rpx !important;
-
+    padding: 30rpx;
+    padding-left: 30rpx;
+    view {
+      padding-left: 0;
+    }
     .slider {
       width: 100%;
       margin: 0;
     }
+    .slider-paly {
+      display: flex;
+      height: 80rpx;
+      align-items: center;
+      padding-left: 20rpx;
+    }
     .card-title {
-      color: #3385ff;
       font-size: 28rpx;
-      padding: 0 66rpx;
+      padding: 0 40rpx;
       text-align: center;
       margin-bottom: 35rpx;
     }
@@ -792,20 +852,35 @@ export default {
       justify-content: space-between;
       color: #999999;
       font-size: 20rpx;
-      padding-left: 0;
-      .time {
-        padding: 0;
-        line-height: 26rpx;
-      }
     }
     .is-paly-card {
-      width: 100%;
-      text-align: center;
-      padding-left: 0;
+      width: 70rpx;
+      height: 70rpx;
+      flex-shrink: 0;
+      margin-left: 30rpx;
       image {
-        margin-top: 5rpx;
-        width: 100rpx;
-        height: 100rpx;
+        width: 70rpx;
+        height: 70rpx;
+      }
+    }
+    .fast-reverse {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 30rpx;
+      .speed-button {
+        width: 96rpx;
+        height: 47rpx;
+        background: #eaeaea;
+        border-radius: 8rpx;
+        text-align: center;
+        line-height: 47rpx;
+        margin: 0 70rpx;
+        padding-left: 0;
+      }
+      .speed-img {
+        width: 50rpx;
+        height: 50rpx;
       }
     }
   }

activityPages/playBack/playBack.vue

@@ -64,7 +64,9 @@
       </view>
       <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
     </view>
-    <audioModule :showAudioPop.sync="showAudioPop" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop.sync="showAudioPop" />
+    </view>
   </view>
 </template>
 
@@ -91,6 +93,7 @@ export default {
         nomore: "已经到底了",
       },
       showAudioPop: false,
+      showAudioBox: false,
     };
   },
   components: { audioModule },
@@ -228,6 +231,12 @@ export default {
     this.getActivityList();
     this.getUserSearchContent();
   },
+  onShow() {
+    this.showAudioBox = true;
+  },
+  onHide() {
+    this.showAudioBox = false;
+  },
   /* 触底 */
   onReachBottom: Throttle(function () {
     if (this.status === "nomore") return;

components/audioModule/index.vue

@@ -2,7 +2,7 @@
   <view class="container global-audio-box" v-if="showAudioPop">
     <view class="bg-overlay" @click="isShowMaskHandler"></view>
     <view class="audio-box">
-      <view class="activity-title text_oneLine">
+      <view class="activity-title">
         {{ activityTitle }}
         <view class="icon-cross" @click.stop="isShowMaskHandler">
           <van-icon name="cross" font-size="32" />
@@ -23,7 +23,6 @@
           <view class="is-paly-card">
             <image
               @click.stop="handleChangePlayStatus"
-              class=""
               :src="play ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'"
             ></image>
           </view>
@@ -75,16 +74,26 @@ export default {
         { name: "1.5倍", value: 1.5 },
         { name: "2倍", value: 2 },
       ],
-      isTimes: 1,
     };
   },
   computed: {
+    //重新
     audioInit() {
       return {
         activityId: this.$store.state.audioBg.activityId,
         reportId: this.$store.state.audioBg.reportId,
       };
     },
+    // 几倍的播放速度
+    isTimes() {
+      return this.$store.state.audioBg.multiple;
+      // get() {
+      //   return this.$store.state.audioBg.multiple;
+      // },
+      // set(val) {
+      //   return this.$store.state.audioBg.multiple = val;
+      // },
+    },
   },
   watch: {
     audioInit: {
@@ -108,21 +117,25 @@ export default {
     init() {
       const curAudio = this.$store.state.audioBg.list;
       if (this.globalBgAudioManager.src != curAudio.Url) {
+        this.$store.commit("audioBg/setMultiple", 1);
         this.globalBgAudioManager.src = curAudio.Url;
         this.globalBgAudioManager.title = curAudio.Name;
-        this.isTimes = 1;
+        this.$store.commit("audioBg/updateAudioTime", 0);
+        console.log("进来了？");
       }
       this.globalBgAudioManager.playbackRate = this.isTimes;
       this.audioTime = curAudio.PlaySeconds;
       this.title = curAudio.Name;
       this.activityTitle = this.$store.state.audioBg.activityTitle;
-      this.curTime = parseInt(this.globalBgAudioManager.currentTime || 0);
+      this.curTime = this.$store.state.audioBg.curTime;
+      // console.log(this.curTime, this.globalBgAudioManager.currentTime, this.$store.state.audioBg.curTime);
       this.play = !this.globalBgAudioManager.paused;
       this.listenAudio();
     },
     //音频播放事件
     listenAudio() {
       this.globalBgAudioManager.onPlay(async () => {
+        console.log("onPlay", 123);
         this.play = true;
         this.$store.commit("audioBg/updateAudioPause", false);
         if (this.$store.state.audioBg.activityId) {
@@ -130,7 +143,7 @@ export default {
         }
       });
       this.globalBgAudioManager.onPause(() => {
-        console.log("音频暂停");
+        console.log("音频暂停", 123);
         this.play = false;
         this.$store.commit("audioBg/updateAudioPause", true);
       });
@@ -140,6 +153,7 @@ export default {
           success: (res) => {
             if (res.osName == "ios") {
               console.log("ios");
+              this.play = false;
               this.$store.commit("audioBg/removeAudio");
             } else {
               this.play = false;
@@ -152,10 +166,12 @@ export default {
         console.log("音频onEnded");
         this.play = false;
         this.$store.commit("audioBg/updateAudioPause", true);
+        this.$store.commit("audioBg/setMultiple", 1);
       });
       this.globalBgAudioManager.onError((e) => {
         console.log("音频onError", e);
         this.$store.commit("audioBg/removeAudio");
+        this.$store.commit("audioBg/setMultiple", 1);
         uni.showToast({
           title: "音频播放错误",
           icon: "none",
@@ -188,7 +204,7 @@ export default {
     //倍速播放
     isTimesHandler(i) {
       let index = i == 3 ? 0 : i + 1;
-      this.isTimes = this.timesTheSpeed[index].value;
+      this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
       this.globalBgAudioManager.pause();
       this.play = true;
       this.globalBgAudioManager.playbackRate = this.isTimes;
@@ -230,7 +246,6 @@ export default {
     font-size: 30rpx;
     font-weight: 500;
     margin-bottom: 35rpx;
-    text-align: center;
     padding-right: 30rpx;
     .icon-cross {
       position: absolute;
@@ -244,12 +259,11 @@ export default {
     position: absolute;
     bottom: 0;
     left: 0;
+    padding: 30rpx;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
     width: 100%;
-    height: 460rpx;
     background: #ffffff;
-    padding: 30rpx;
     box-sizing: border-box;
     border-radius: 30rpx 30rpx 0 0;
   }

pages/activity/activity.vue

@@ -50,9 +50,8 @@
               <view class="item-img" @click="goDetails(item)"> </view>
               <view :style="{ 'background-image': 'url(' + item.ImgUrlBg + ')' }" class="activity-ui">
                 <view class="activity-li" :style="{ 'background-image': 'url(' + val.ImgUrlBg + ')' }" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val, item.Resource)">
-                  <!-- <image class="item-image" lazy-load :src="val.ImgUrlBg"></image> -->
+                  <image class="item-image" lazy-load src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_activity.png"></image>
                   <text class="text_oneLine"> {{ val.KeyWord }}</text>
-                  <image class="new_img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/new_icon.png" mode=""></image>
                 </view>
               </view>
             </view>
@@ -64,8 +63,8 @@
             <view class="content">
               <view class="item-img" @click="goDetails(item)"> </view>
               <view :style="{ 'background-image': 'url(' + item.ImgUrlBg + ')' }" class="activity-ui">
-                <view class="activity-li" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val, item.Resource)">
-                  <image class="item-image" lazy-load :src="val.ImgUrlBg"></image>
+                <view class="activity-li" :style="{ 'background-image': 'url(' + val.ImgUrlBg + ')' }" v-for="val in item.List" :key="val.KeyWord" @click="goDetails(val, item.Resource)">
+                  <image class="item-image" lazy-load src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_activity.png"></image>
                   <text class="text_oneLine"> {{ val.KeyWord }}</text>
                 </view>
               </view>
@@ -501,28 +500,27 @@ export default {
       width: 100%;
       height: 86rpx;
       display: flex;
-      text-align: center;
+      align-items: center;
+      justify-content:center;
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      padding-top: 20rpx;
-      // .item-image {
-      //   width: 100%;
-      //   height: 100%;
-      // }
+      padding: 0 20rpx;
+      position: relative;
+      font-size: 26rpx;
+      color: #fff;
+      .item-image {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        height: 50rpx;
+
+      }
       .new_img {
         width: 26rpx;
         height: 28rpx;
       }
-      // .text_oneLine {
-      //   // position: absolute;
-      //   // width: 100%;
-      //   // height: 50rpx;
-      //   // padding: 0 30rpx;
-      //   // text-align: center;
-      //   // font-size: 28rpx;
-      //   // top: 15rpx;
-      //   // color: #fff;
-      // }
     }
   }
   .more {

pages/reportForm/index.scss

@@ -1,11 +1,13 @@
 .reportForm-container {
   background-color: #f6f6f6;
+
   .index-fixed {
     width: 750rpx;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 999;
+
     .index-header {
       background-color: #fff;
       padding: 32rpx 34rpx 0;
@@ -36,6 +38,7 @@
         z-index: 100;
       }
     }
+
     .limit-box {
       position: absolute;
       text-align: center;
@@ -105,10 +108,12 @@
 
   .strategy {
     background-color: #fff;
+
     .row {
       height: 10rpx;
       background-color: #f7f7f7;
     }
+
     .tab-cont-two {
       position: sticky;
       top: 252rpx;
@@ -120,6 +125,7 @@
       display: flex;
       flex-wrap: wrap;
       padding: 30rpx 20rpx;
+
       .scroll-tab-item {
         position: relative;
         display: inline-block;
@@ -161,7 +167,7 @@
     .industry-top {
       display: flex;
       background-color: #fff;
-      justify-content:space-between;
+      justify-content: space-between;
       height: 90rpx;
       padding: 0 35rpx 0 30rpx;
       color: #333333;
@@ -169,6 +175,7 @@
       font-size: 32rpx;
       line-height: 90rpx;
       overflow: hidden;
+
       .img-top-box {
         display: flex;
         align-items: center;
@@ -196,11 +203,13 @@
           }
         }
       }
+
       .checkbox-content {
         color: #333333;
         font-size: 28rpx;
         font-weight: 400;
       }
+
       .menu-items-tow {
         display: flex;
         padding: 30rpx 30rpx 20rpx;
@@ -326,10 +335,15 @@
           font-size: 30rpx;
           padding-left: 10rpx;
           align-items: center;
+
           image {
             margin-left: 10rpx;
-            width: 26rpx;
-            height: 28rpx;
+            width: 60rpx;
+            height: 30rpx;
+          }
+
+          .hot-icon {
+            width: 30rpx;
           }
         }
 

pages/reportForm/reportForm.vue

@@ -107,8 +107,8 @@
             <view class="industry-box-right" @click="goIndustryReport(item.IndustrialManagementId)">
               <view class="ndustry-box-read">
                 <text>{{ item.IndustryName }}</text>
-                <image v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/host_report.png" mode=""></image>
-                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/new_icon.png" mode=""></image>
+                <image class="hot-icon" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png" mode=""></image>
+                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png" mode=""></image>
               </view>
               <view class="ndustry-box-arrow">
                 <text v-if="item.IsRed" class="read"></text>

reportPages/reportSecretDetail/reportSecretDetail.vue

@@ -13,21 +13,37 @@
           <text>注：请务必阅读</text>
           <text class="statement" @click="isShowStatement = true">免责声明 </text>
         </view>
-        <view class="content-audio">
-          <view class="audio-img">
-            <image
-              @click.stop="audioPlayBack"
-              class=""
-              :src="
-                curVoiceId === detali.ArticleId && !curAudioPaused
-                  ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/suspend_icon.png'
-                  : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/play_icon.png'
-              "
-            ></image>
+        <view class="audio-card">
+          <view class="card-title text_oneLine">
+            {{ detali.VideoName }}
           </view>
-          <view class="audio-title">
-            <text>{{ detali.VideoName }}</text>
-            <text>{{ detali.VideoPlaySeconds }}</text>
+          <view class="slider-paly">
+            <view style="flex: 1; padding-top: 20rpx">
+              <slider activeColor="#3385FF" :max="detali.VideoPlaySeconds" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
+              <view class="card-time">
+                <text class="time">{{ curTime | formatVoiceTime }}</text>
+                <text class="time">{{ detali.VideoPlaySeconds | formatVoiceTime }}</text>
+              </view>
+            </view>
+            <view class="is-paly-card">
+              <image
+                @click.stop="audioPlayBack"
+                :src="
+                  curVoiceId === detali.ArticleId && !curAudioPaused
+                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.gif'
+                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/pause_icon.png'
+                "
+              ></image>
+            </view>
+          </view>
+          <view class="fast-reverse">
+            <image @click="speedReverseHandler('reverse')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/fastReverse_icon.png"></image>
+            <block v-for="(item, index) in timesTheSpeed" :key="item.value">
+              <view class="speed-button" v-if="isTimes == item.value" @click="isTimesHandler(index)">
+                {{ item.name }}
+              </view>
+            </block>
+            <image @click="speedReverseHandler('speed')" class="speed-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/speed_icon.png"></image>
           </view>
         </view>
         <view v-if="detali.Abstract" class="content-abstract">
@@ -76,7 +92,9 @@
       </block>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <audioModule :showAudioPop="false" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop="false" />
+    </view>
   </view>
 </template>
 
@@ -102,8 +120,22 @@ export default {
       hasPermission: "", //权限判断
       videoUrl: "",
       isShowAlert: false,
+      timesTheSpeed: [
+        { name: "倍速", value: 1 },
+        { name: "1.25倍", value: 1.25 },
+        { name: "1.5倍", value: 1.5 },
+        { name: "2倍", value: 2 },
+      ],
+      showAudioBox: false,
     };
   },
+  filters: {
+    formatVoiceTime(e) {
+      let m = parseInt(e / 60);
+      let s = parseInt(e % 60);
+      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
+    },
+  },
   computed: {
     curVoiceId() {
       //当前正在播放的音频id
@@ -113,6 +145,15 @@ export default {
       //当前音频是否暂停状态
       return this.$store.state.audioBg.paused;
     },
+    curTime() {
+      //当前音频的播放时间
+      let initTime = this.curVoiceId === this.detali.ArticleId ? this.$store.state.audioBg.curTime : 0;
+      return initTime;
+    },
+    //几倍的播放数度
+    isTimes() {
+      return this.$store.state.audioBg.multiple;
+    },
   },
   methods: {
     //音频点击暂停播放
@@ -148,6 +189,9 @@ export default {
               ArticleId: this.id,
             });
       if (res.Ret === 200) {
+        let arr = res.Data.Detail.VideoPlaySeconds.split(":");
+        console.log(arr[0] * 60 + (arr[1] - 0));
+        res.Data.Detail.VideoPlaySeconds = arr[0] * 60 + (arr[1] - 0);
         this.detali = res.Data.Detail;
         this.hasPermission = res.Data.HasPermission;
         this.videoUrl = res.Data.Detail.VideoUrl;
@@ -192,6 +236,30 @@ export default {
         this.isShowAlert = res.Data.IsShow;
       }
     },
+    //拖动进度条
+    handleAudioSliderChange(e) {
+      const value = e.detail.value;
+      this.globalBgAudioManager.seek(value);
+    },
+    //倍速播放
+    isTimesHandler(i) {
+      let index = i == 3 ? 0 : i + 1;
+      this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
+      this.globalBgAudioManager.pause();
+      this.play = true;
+      this.globalBgAudioManager.playbackRate = this.isTimes;
+      this.globalBgAudioManager.startTime = this.curTime;
+      this.globalBgAudioManager.play();
+    },
+    //快进 快退
+    speedReverseHandler(type) {
+      if (!this.globalBgAudioManager.src) {
+        this.init();
+      }
+      let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
+      isTime = isTime <= 0 ? 0 : isTime;
+      this.globalBgAudioManager.seek(isTime);
+    },
   },
   components: {
     statement,
@@ -210,6 +278,13 @@ export default {
     await this.$store.dispatch("checkHandle");
     if (!this.$store.state.isAuth && !this.$store.state.isBind) this.getDetilaiList();
   },
+
+  onShow() {
+    this.showAudioBox = true;
+  },
+  onHide() {
+    this.showAudioBox = false;
+  },
   /**
    * 用户点击分享
    */
@@ -254,44 +329,65 @@ export default {
         color: #3385ff;
       }
     }
-
-    .content-audio {
-      margin: 60rpx 0;
-      width: 682rpx;
-      align-items: center;
-      background: #ffffff;
-      box-shadow: 0rpx 0rpx 12rpx rgba(33, 74, 135, 0.16);
-      opacity: 1;
+    .audio-card {
+      width: 100%;
+      height: 282rpx;
+      background: #f9f9f9;
       border-radius: 16rpx;
-      display: flex;
-      padding: 24rpx 21rpx 18rpx;
-
-      .audio-img {
-        width: 154rpx;
-        height: 154rpx;
-        margin-right: 20rpx;
-
+      margin: 30rpx auto;
+      padding: 30rpx;
+      .slider {
+        width: 100%;
+        margin: 0;
+      }
+      .slider-paly {
+        display: flex;
+        height: 80rpx;
+        align-items: center;
+        padding-left: 20rpx;
+      }
+      .card-title {
+        font-size: 28rpx;
+        padding: 0 40rpx;
+        text-align: center;
+        margin-bottom: 35rpx;
+      }
+      .card-time {
+        display: flex;
+        justify-content: space-between;
+        color: #999999;
+        font-size: 20rpx;
+      }
+      .is-paly-card {
+        width: 70rpx;
+        height: 70rpx;
+        flex-shrink: 0;
+        margin-left: 30rpx;
         image {
-          width: 154rpx;
-          height: 154rpx;
+          width: 70rpx;
+          height: 70rpx;
         }
       }
-
-      .audio-title {
-        font-size: 28rpx;
-        color: #333;
-
-        :first-child {
-          width: 450rpx;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-bottom: 30rpx;
-          font-size: 32rpx;
+      .fast-reverse {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30rpx;
+        .speed-button {
+          width: 96rpx;
+          height: 47rpx;
+          background: #eaeaea;
+          border-radius: 8rpx;
+          text-align: center;
+          line-height: 47rpx;
+          margin: 0 70rpx;
+        }
+        .speed-img {
+          width: 50rpx;
+          height: 50rpx;
         }
       }
     }
-
     .content-abstract {
       margin-bottom: 30rpx;
       font-size: 32rpx;

store/modules/audioBg.js

@@ -8,6 +8,7 @@ const audioModules = {
     paused: true, //当前是否音频正在播放 true暂停状态
     curTime: 0, //当前正在播放的音频播放的时间
     activityTitle: "",
+    multiple: 1, //倍数
   },
   mutations: {
     addAudio(state, payload) {
@@ -20,9 +21,12 @@ const audioModules = {
     updateAudioPause(state, payload) {
       state.paused = payload;
     },
+    setMultiple(state, payload) {
+      state.multiple = payload;
+    },
     // 更新音频播放进度
     updateAudioTime(state, payload) {
-        state.curTime = Number(payload);
+      state.curTime = Number(payload);
     },
     //删除当前音频播放
     removeAudio(state, payload) {