1

activityPages/activityDetail/activityDetail.vue

@@ -18,7 +18,7 @@
             </view>
             <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" />
+                <slider activeColor="#3385FF" :max="detailData.VoiceList.PlaySeconds" :value="curTime" @changing="handleAudioSliderChangeing($event)" block-size="16" class="slider" />
                 <view class="card-time">
                   <view class="time">{{ curTime | formatVoiceTime }}</view>
                   <view class="time">{{ detailData.VoiceList.PlaySeconds | formatVoiceTime }}</view>
@@ -233,8 +233,8 @@
       <jurisdiction :idAct="id" :haveAuth="haveAuth" :industryMsg="industryMsg" :msgType="msgType" :sellerMobile="sellerMobile" :sellerName="sellerName"></jurisdiction>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <view v-show="showAudioBox">
-      <audioModule :showAudioPop="false" />
+    <view v-show="false">
+      <audioModule :showAudioPop="showAudioPop" />
     </view>
   </view>
 </template>
@@ -297,7 +297,7 @@ export default {
         { name: "1.5倍", value: 1.5 },
         { name: "2倍", value: 2 },
       ],
-      showAudioBox: false,
+      curTime: 0,
     };
   },
   mixins: [manageMixin],
@@ -310,11 +310,11 @@ export default {
       //当前音频是否暂停状态
       return this.$store.state.audioBg.paused;
     },
-    curTime() {
-      //当前音频的播放时间
-      let initTime = this.curVoiceId === this.detailData.ActivityId ? this.$store.state.audioBg.curTime : 0;
-      return initTime;
-    },
+    // storeTime() {
+    //   //当前音频的播放时间
+    //   let initTime = this.curVoiceId === this.detailData.ActivityId ? this.$store.state.audioBg.curTime : 0;
+    //   return initTime;
+    // },
     //报名的显示
     showWay() {
       let text = this.detailData.SignupType == 1 ? "取消外呼" : "取消报名";
@@ -325,6 +325,9 @@ export default {
       let isMultiple = this.curVoiceId === this.detailData.ActivityId ? this.$store.state.audioBg.multiple : 1;
       return isMultiple;
     },
+    showAudioPop() {
+      return this.$store.state.audioBg.show;
+    },
   },
   components: {
     modalDialog,
@@ -342,6 +345,13 @@ export default {
       },
       immediate: true,
     },
+    "$store.state.audioBg.curTime": {
+      handler(newVal) {
+        this.curTime = this.curVoiceId === this.detailData.ActivityId ? newVal : 0;
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   methods: {
     //获取是否需要填写区号接口
@@ -504,40 +514,41 @@ export default {
     },
     //音频点击暂停播放
     audioPlayBack() {
-      if (this.globalBgAudioManager.src) {
-        if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
-          if (this.globalBgAudioManager.paused) {
-            this.globalBgAudioManager.play();
-          } else {
-            this.globalBgAudioManager.pause();
-          }
+      if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
         } else {
-          this.$store.commit("audioBg/addAudio", { list: this.detailData.VoiceList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
+          this.globalBgAudioManager.pause();
         }
       } else {
-        this.$store.commit("audioBg/removeAudio");
         this.$store.commit("audioBg/addAudio", { list: this.detailData.VoiceList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
       }
+      
     },
     //拖动进度条
-    handleAudioSliderChange(e) {
-      const value = e.detail.value;
-      this.globalBgAudioManager.seek(value);
+    handleAudioSliderChangeing(e) {
+      this.curTime = e.detail.value;
+      this.globalBgAudioManager.seek(this.curTime);
     },
     //倍速播放
     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();
+      if (this.$store.state.audioBg.activityId == this.detailData.ActivityId) {
+        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();
+      } else {
+        this.$store.commit("audioBg/removeAudio");
+        this.$store.commit("audioBg/addAudio", { list: this.detailData.VoiceList, activityId: this.detailData.ActivityId, activityTitle: this.detailData.ActivityName });
+      }
     },
     //快进 快退
     speedReverseHandler(type) {
       let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
-      isTime = isTime <= 0 ? 0 : isTime;
+      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
       this.globalBgAudioManager.seek(isTime);
     },
   },
@@ -551,12 +562,6 @@ export default {
       this.getActivityDetail();
     }
   },
-  onShow() {
-    this.showAudioBox = true;
-  },
-  onHide() {
-    this.showAudioBox = false;
-  },
   /**
    * 用户点击分享
    */

activityPages/activitySearch/activitySearch.vue

@@ -206,7 +206,6 @@ export default {
       dynamicList: [],
       hotKeyWord: [],
       showAudioPop: false,
-      showAudioBox: false,
     };
   },
   mixins: [myMixin, myActivityMixin],
@@ -317,6 +316,7 @@ export default {
     },
     //点击了回放
     audioPlayBack(item) {
+      this.$store.commit("audioBg/parseIntAudio", true);
       // 判断是否为同一个音频
       if (this.$store.state.audioBg.activityId == item.ActivityId) {
         if (this.globalBgAudioManager.paused) {
@@ -339,14 +339,17 @@ export default {
       //当前音频是否暂停状态
       return this.$store.state.audioBg.paused;
     },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
   },
   onShow() {
     this.countryCcode(); //判断是否加区号
     this.$store.dispatch("statistics", { PageType: "ActivitSearch" });
-    this.showAudioBox = true;
+    this.$store.commit("audioBg/parseIntAudio", true);
   },
   onHide() {
-    this.showAudioBox = false
+    this.$store.commit("audioBg/parseIntAudio", false);
   },
   //load
   onLoad(option) {

activityPages/playBack/playBack.vue

@@ -67,6 +67,8 @@
     <view v-if="showAudioBox">
       <audioModule :showAudioPop.sync="showAudioPop" />
     </view>
+    <!-- 所有自定义弹框 -->
+    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
   </view>
 </template>
 
@@ -74,6 +76,8 @@
 import { activity, User } from "@/config/api.js";
 import { Throttle } from "@/config/util.js";
 import audioModule from "@/components/audioModule/index";
+import modalDialog from "@/components/modalDialog.vue";
+
 export default {
   data() {
     return {
@@ -93,10 +97,19 @@ export default {
         nomore: "已经到底了",
       },
       showAudioPop: false,
-      showAudioBox: false,
+      isShowhasPermission: false, //  联系销售的提交申请
+      applyForIsShow: false, // 提交申请
+      jurisdictionList: {
+        SellerMobile: "",
+        PopupMsg: "",
+        OperationMode: "",
+        SellerName: "",
+        ActivityId: "",
+      },
+      hasPermission: "", //权限
     };
   },
-  components: { audioModule },
+  components: { audioModule, modalDialog },
   methods: {
     //获取活动
     async getActivityList() {
@@ -203,18 +216,37 @@ export default {
       item.IsChoose = !item.IsChoose;
     },
     //点击了回放
-    audioPlayBack(item) {
-      // 判断是否为同一个音频
-      if (this.$store.state.audioBg.activityId == item.ActivityId) {
-        if (this.globalBgAudioManager.paused) {
-          this.globalBgAudioManager.play();
-        } else {
-          this.globalBgAudioManager.pause();
+    async audioPlayBack(item) {
+      const res = await activity.getActivityDetail({
+        ActivityId: item.ActivityId,
+      });
+      if (res.Ret === 200) {
+        this.hasPermission = res.Data.HasPermission;
+        this.jurisdictionList.ActivityId = item.ActivityId;
+        if (this.hasPermission == 1) {
+          this.globalBgAudioManager.playbackRate = 1;
+          this.$store.commit("audioBg/parseIntAudio", true);
+          // 判断是否为同一个音频
+          if (this.$store.state.audioBg.activityId == item.ActivityId) {
+            if (this.globalBgAudioManager.paused) {
+              this.globalBgAudioManager.play();
+            } else {
+              this.globalBgAudioManager.pause();
+            }
+          } else {
+            this.$store.commit("audioBg/addAudio", { list: item.VoiceList, activityId: item.ActivityId, activityTitle: item.ActivityName });
+          }
+          this.showAudioPop = true;
+        } else if (this.hasPermission == 2) {
+          this.jurisdictionList.SellerMobile = res.Data.SellerMobile;
+          this.jurisdictionList.SellerName = res.Data.SellerName;
+          this.jurisdictionList.PopupMsg = res.Data.PopupMsg;
+          this.isShowhasPermission = true;
+        } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
+          this.jurisdictionList.PopupMsg = res.Data.PopupMsg;
+          this.applyForIsShow = true;
         }
-      } else {
-        this.$store.commit("audioBg/addAudio", { list: item.VoiceList, activityId: item.ActivityId, activityTitle: item.ActivityName });
       }
-      this.showAudioPop = true;
     },
   },
   computed: {
@@ -226,16 +258,20 @@ export default {
       //当前音频是否暂停状态
       return this.$store.state.audioBg.paused;
     },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
   },
   onLoad() {
     this.getActivityList();
     this.getUserSearchContent();
   },
   onShow() {
-    this.showAudioBox = true;
+    this.$store.dispatch("checkHandle");
+    this.$store.commit("audioBg/parseIntAudio", true);
   },
   onHide() {
-    this.showAudioBox = false;
+    this.$store.commit("audioBg/parseIntAudio", false);
   },
   /* 触底 */
   onReachBottom: Throttle(function () {

components/audioModule/index.vue

@@ -14,7 +14,7 @@
         </view>
         <view class="slider-paly">
           <view style="flex: 1; padding-top: 20rpx">
-            <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @change="handleAudioSliderChange($event)" block-size="16" class="slider" />
+            <slider activeColor="#3385FF" :max="audioTime" :value="curTime" @changing="handleAudioSliderChangeing($event)" block-size="16" class="slider" />
             <view class="card-time">
               <text class="time">{{ curTime | formatVoiceTime }}</text>
               <text class="time">{{ audioTime | formatVoiceTime }}</text>
@@ -111,7 +111,8 @@ export default {
       if (this.globalBgAudioManager.src != curAudio.Url && curAudio.Url) {
         this.$store.commit("audioBg/setMultiple", 1);
         this.$store.commit("audioBg/updateAudioTime", 0);
-        this.globalBgInit();
+        this.globalBgAudioManager.src = curAudio.Url;
+        this.globalBgAudioManager.title = curAudio.Name;
         this.globalBgAudioManager.startTime = 0;
         this.globalBgAudioManager.playbackRate = this.isTimes;
         this.curTime = 0;
@@ -124,18 +125,6 @@ export default {
       this.play = !this.globalBgAudioManager.paused;
       this.listenAudio();
     },
-    //播放不同的,或者播放结束了
-    globalBgInit(type) {
-      const curAudio = this.$store.state.audioBg.list;
-      this.globalBgAudioManager.src = curAudio.Url;
-      this.globalBgAudioManager.title = curAudio.Name;
-      if (type == "onEnded") {
-        this.play = false;
-        this.globalBgAudioManager.pause();
-        this.$store.commit("audioBg/updateAudioPause", true);
-      }
-    },
-
     //音频播放事件
     listenAudio() {
       this.globalBgAudioManager.onPlay(async () => {
@@ -171,19 +160,8 @@ export default {
 
       this.globalBgAudioManager.onEnded(() => {
         console.log("音频onEnded");
-        // this.$store.commit("audioBg/updateAudioTime", 0);
-        this.curTime = 0;
-        uni.getSystemInfo({
-          success: (res) => {
-            if (res.osName == "ios") {
-              this.globalBgInit("onEnded");
-            } else {
-              this.play = false;
-              this.globalBgAudioManager.pause();
-              this.$store.commit("audioBg/updateAudioPause", true);
-            }
-          },
-        });
+        this.$store.commit("audioBg/removeAudio");
+        this.$store.commit("audioBg/parseIntAudio", false);
       });
 
       this.globalBgAudioManager.onError((e) => {
@@ -200,14 +178,17 @@ export default {
       this.globalBgAudioManager.onTimeUpdate(() => {
         if (this.globalBgAudioManager.src && parseInt(this.globalBgAudioManager.currentTime) !== 0) {
           this.curTime = parseInt(this.globalBgAudioManager.currentTime);
+          if (this.audioTime - nvthis.curTimeal < 10) {
+            this.globalBgAudioManager.playbackRate = 1;
+          }
           this.$store.commit("audioBg/updateAudioTime", this.curTime);
         }
       });
     },
     //拖动进度条
-    handleAudioSliderChange(e) {
-      const value = e.detail.value;
-      this.globalBgAudioManager.seek(value);
+    handleAudioSliderChangeing(e) {
+      this.curTime = e.detail.value;
+      this.globalBgAudioManager.seek(this.curTime);
     },
     //音频点击暂停播放
     handleChangePlayStatus() {
@@ -231,7 +212,7 @@ export default {
     //快进 快退
     speedReverseHandler(type) {
       let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
-      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime : isTime;
+      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
       this.globalBgAudioManager.seek(isTime);
     },
   },

pages/activity/activity.vue

@@ -86,13 +86,11 @@
 import { activity } from "@/config/api.js";
 import { Throttle } from "@/config/util.js";
 import myActivityMixin from "@/activityPages/components/indexActivity.js";
-import modalDialog from "@/components/modalDialog.vue";
 import freeCharge from "@/components/freeCharge";
 let app = getApp();
 export default {
   mixins: [myActivityMixin],
   components: {
-    modalDialog,
     freeCharge,
   },
   data() {

reportPages/hotList/hotList.vue

@@ -7,18 +7,6 @@
           <image v-if="tabsActive == item.Source" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png"></image>
         </view>
       </view>
-      <block v-for="item in tabList" :key="item.Source">
-        <view class="children-tabs" v-if="tabsActive == item.Source">
-          <view
-            :class="['children-item', childrenTabsActive == key.ChartPermissionId && 'children-tab-active']"
-            v-for="(key, index) in item.List"
-            :key="key.ChartPermissionId"
-            @click="childrenTabsHandel(key, index)"
-          >
-            {{ key.PermissionName }}
-          </view>
-        </view>
-      </block>
     </view>
     <view class="content">
       <view class="content-ul" v-if="hotList.length && tabsActive == 1">
@@ -88,7 +76,6 @@ export default {
     return {
       tabList: [], //tab
       tabsActive: 1,
-      childrenTabsActive: 0,
       hotList: [],
       kolList: [],
 
@@ -105,29 +92,18 @@ export default {
       if (res.Ret === 200) {
         this.tabList = res.Data.List || [];
         this.tabsActive = this.tabList.length ? this.tabList[0].Source : 1;
-        this.childrenTabsActive = this.tabList.length ? this.tabList[0].List[0].ChartPermissionId : 1;
         this.researchHotList();
       }
     },
     /* 点击一级的tabs*/
     tabsHandler(item) {
       this.tabsActive = item.Source;
-      this.childrenTabsActive = item.List[0].ChartPermissionId;
-      this.listInit();
-      this.researchHotList();
-    },
-    /* 点击二级的tabs*/
-    childrenTabsHandel(item, index) {
-      this.childrenTabsActive = item.ChartPermissionId;
       this.listInit();
       this.researchHotList();
     },
     //产业关注 阅读、报告收藏
     async researchHotList() {
-      const res =
-        this.tabsActive == 1
-          ? await Reports.getIndustryFllowList({ ChartPermissionId: this.childrenTabsActive })
-          : await Reports.getIndustryReadList({ ChartPermissionId: this.childrenTabsActive, Source: this.tabsActive });
+      const res = this.tabsActive == 1 ? await Reports.getIndustryFllowList() : await Reports.getIndustryReadList({ Source: this.tabsActive });
       if (res.Ret === 200) {
         if (this.tabsActive == 1) {
           this.hotList = res.Data.List || [];

reportPages/reportSecretDetail/reportSecretDetail.vue

@@ -19,7 +19,15 @@
           </view>
           <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" />
+              <slider
+                activeColor="#3385FF"
+                :max="detali.VideoPlaySeconds"
+                :value="curTime"
+                @change="handleAudioSliderChange($event)"
+                @changing="handleAudioSliderChangeing($event)"
+                block-size="16"
+                class="slider"
+              />
               <view class="card-time">
                 <text class="time">{{ curTime | formatVoiceTime }}</text>
                 <text class="time">{{ detali.VideoPlaySeconds | formatVoiceTime }}</text>
@@ -92,8 +100,8 @@
       </block>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <view v-if="showAudioBox">
-      <audioModule ref="refAudioPop" :showAudioPop="false" />
+    <view v-show="false">
+      <audioModule :showAudioPop="showAudioPop" />
     </view>
   </view>
 </template>
@@ -127,6 +135,7 @@ export default {
         { name: "2倍", value: 2 },
       ],
       showAudioBox: false,
+      curTime: 0,
     };
   },
   filters: {
@@ -145,36 +154,25 @@ 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() {
       let isMultiple = this.curVoiceId === this.detali.ArticleId ? this.$store.state.audioBg.multiple : 1;
       return isMultiple;
     },
+    showAudioPop() {
+      return this.$store.state.audioBg.show;
+    },
   },
-  methods: {
-    //音频点击暂停播放
-    audioPlayBack() {
-      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
-      if (this.globalBgAudioManager.src) {
-        if (this.$store.state.audioBg.reportId == this.detali.ArticleId) {
-          if (this.globalBgAudioManager.paused) {
-            this.globalBgAudioManager.play();
-          } else {
-            this.globalBgAudioManager.pause();
-          }
-        } else {
-          this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
-        }
-      } else {
-        this.$store.commit("audioBg/removeAudio");
-        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
-      }
+  width: {
+    "$store.state.audioBg.curTime": {
+      handler(newVal) {
+        this.curTime = this.curVoiceId === this.detali.ArticleId ? newVal : 0;
+      },
+      immediate: true,
+      deep: true,
     },
+  },
+  methods: {
     //获取数据详情
     async getDetilaiList() {
       const res =
@@ -236,16 +234,34 @@ export default {
         this.isShowAlert = res.Data.IsShow;
       }
     },
+    //音频点击暂停播放
+    audioPlayBack() {
+      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
+      if (this.$store.state.audioBg.reportId == this.detali.ArticleId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        } else {
+          this.globalBgAudioManager.pause();
+        }
+      } else {
+        this.$store.commit("audioBg/updateAudioTime", 0);
+        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
+      }
+    },
     //拖动进度条
     handleAudioSliderChange(e) {
       const value = e.detail.value;
       this.globalBgAudioManager.seek(value);
     },
+    handleAudioSliderChangeing(e) {
+      this.curTime = e.detail.value;
+    },
     //倍速播放
     isTimesHandler(i) {
       let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
       let index = i == 3 ? 0 : i + 1;
       this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
+      console.log(this.timesTheSpeed[index].value);
       this.globalBgAudioManager.playbackRate = this.isTimes;
       this.globalBgAudioManager.startTime = this.curTime;
       if (this.$store.state.audioBg.reportId != this.detali.ArticleId) {
@@ -260,7 +276,7 @@ export default {
     //快进 快退
     speedReverseHandler(type) {
       let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
-      isTime = isTime <= 0 ? 0 : isTime;
+      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
       this.globalBgAudioManager.seek(isTime);
     },
   },

reportPages/roadEssence/roadEssence.vue

@@ -13,21 +13,45 @@
           <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)"
+                @changing="handleAudioSliderChangeing($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 class="content-abstract">
@@ -60,7 +84,9 @@
       </block>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
-    <audioModule :showAudioPop="false" />
+    <view v-show="false">
+      <audioModule ref="refAudioPop" :showAudioPop="showAudioPop" />
+    </view>
   </view>
 </template>
 
@@ -81,6 +107,14 @@ export default {
       haveAuth: "", //权限判断
       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,
+      curTime: 0,
     };
   },
   computed: {
@@ -92,6 +126,30 @@ export default {
       //当前音频是否暂停状态
       return this.$store.state.audioBg.paused;
     },
+    //几倍的播放数度
+    isTimes() {
+      let isMultiple = this.curVoiceId === this.detali.ArticleId ? this.$store.state.audioBg.multiple : 1;
+      return isMultiple;
+    },
+    showAudioPop() {
+      return this.$store.state.audioBg.show;
+    },
+  },
+  filters: {
+    formatVoiceTime(e) {
+      let m = parseInt(e / 60);
+      let s = parseInt(e % 60);
+      return `${m > 9 ? m : "0" + m}:${s > 9 ? s : "0" + s}`;
+    },
+  },
+  width: {
+    "$store.state.audioBg.curTime": {
+      handler(newVal) {
+        this.curTime = this.curVoiceId === this.detali.ArticleId ? newVal : 0;
+      },
+      immediate: true,
+      deep: true,
+    },
   },
   methods: {
     async getDetail() {
@@ -99,6 +157,8 @@ export default {
         ArticleId: this.id,
       });
       if (res.Ret === 200) {
+        let arr = res.Data.Detail.VideoPlaySeconds.split(":");
+        res.Data.Detail.VideoPlaySeconds = arr[0] * 60 + (arr[1] - 0);
         this.detali = res.Data.Detail;
         this.haveAuth = res.Data.HasPermission;
         this.videoUrl = res.Data.Detail.VideoUrl;
@@ -143,18 +203,14 @@ export default {
     //音频点击暂停播放
     audioPlayBack() {
       let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
-      if (this.globalBgAudioManager.src) {
-        if (this.$store.state.audioBg.reportId == this.detali.ArticleId) {
-          if (this.globalBgAudioManager.paused) {
-            this.globalBgAudioManager.play();
-          } else {
-            this.globalBgAudioManager.pause();
-          }
+      if (this.$store.state.audioBg.reportId == this.detali.ArticleId) {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
         } else {
-          this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
+          this.globalBgAudioManager.pause();
         }
       } else {
-        this.$store.commit("audioBg/removeAudio");
+        this.$store.commit("audioBg/updateAudioTime", 0);
         this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
       }
     },
@@ -169,23 +225,57 @@ export default {
         this.isShowAlert = res.Data.IsShow;
       }
     },
+    //拖动进度条
+    handleAudioSliderChange(e) {
+      const value = e.detail.value;
+      this.globalBgAudioManager.seek(value);
+    },
+    handleAudioSliderChangeing(e) {
+      this.curTime = e.detail.value;
+    },
+    //倍速播放
+    isTimesHandler(i) {
+      let list = { Url: this.detali.VideoUrl, Name: this.detali.Title, PlaySeconds: this.detali.VideoPlaySeconds };
+      let index = i == 3 ? 0 : i + 1;
+      this.$store.commit("audioBg/setMultiple", this.timesTheSpeed[index].value);
+      this.globalBgAudioManager.playbackRate = this.isTimes;
+      this.globalBgAudioManager.startTime = this.curTime;
+      if (this.$store.state.audioBg.reportId != this.detali.ArticleId) {
+        this.$store.commit("audioBg/addAudio", { list, reportId: this.detali.ArticleId });
+        this.globalBgAudioManager.play();
+      } else {
+        if (this.globalBgAudioManager.paused) {
+          this.globalBgAudioManager.play();
+        }
+      }
+    },
+    //快进 快退
+    speedReverseHandler(type) {
+      let isTime = type == "reverse" ? this.curTime - 15 : this.curTime + 15;
+      isTime = isTime <= 0 ? 0 : isTime >= this.audioTime ? this.audioTime - 1 : isTime;
+      this.globalBgAudioManager.seek(isTime);
+    },
   },
   components: {
     statement,
     freeCharge,
     audioModule,
   },
-  onLoad(option) {
+  async onLoad(option) {
     this.id = Number(option.id) || "";
     this.userIsShowAlert();
-  },
-  async onShow() {
     await this.$store.dispatch("checkHandle");
     if (!this.$store.state.isAuth && !this.$store.state.isBind) {
       //已授权已绑定
       this.getDetail();
     }
   },
+  onShow() {
+    this.showAudioBox = true;
+  },
+  onHide() {
+    this.showAudioBox = false;
+  },
   /**
    * 用户点击分享
    */
@@ -314,6 +404,65 @@ export default {
     margin: 0 auto 20rpx;
     color: #999999;
   }
+  .audio-card {
+    width: 100%;
+    height: 282rpx;
+    background: #f9f9f9;
+    border-radius: 16rpx;
+    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: 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;
+      }
+      .speed-img {
+        width: 50rpx;
+        height: 50rpx;
+      }
+    }
+  }
   @import "../jurisdiction.scss";
 }
 </style>

store/modules/audioBg.js

@@ -2,6 +2,7 @@
 const audioModules = {
   namespaced: true,
   state: {
+    show: false, //是否显示音频弹窗
     list: [], //[{url:音频地址,time:音频时长,title:音频标题,}]
     activityId: 0, //当前是哪个报告的音频
     reportId: 0,
@@ -9,9 +10,11 @@ const audioModules = {
     curTime: 0, //当前正在播放的音频播放的时间
     activityTitle: "",
     multiple: 1, //倍数
+    parseIntShow: false, //
   },
   mutations: {
     addAudio(state, payload) {
+      state.show = true;
       state.list = payload.list;
       state.activityTitle = payload.activityTitle;
       state.activityId = payload.activityId || 0;
@@ -30,10 +33,17 @@ const audioModules = {
     },
     //删除当前音频播放
     removeAudio(state, payload) {
-      state.list = [{ Url: "", Name: "", Title: "" }];
+      state.show = false;
+      state.list = [];
+      state.multiple = 1;
       state.activityId = 0;
+      state.reportId = 0;
+      state.curTime = 0;
       state.paused = true;
     },
+    parseIntAudio(state, payload) {
+      state.parseIntShow = payload;
+    },
   },
 };