切换 7.4

pages/index/index.vue

@@ -39,32 +39,40 @@
       <view class="audio-video-content" v-if="topTabsActive == '4'">
         <view :class="1 == 1 ? 'audio-item' : 'video-item'">
           <view class="cover-item" :style="{ 'background-image': 'url(' + 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_bg.jpg' + ')' }">
-            <view class="img-bg">
-              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.png"></image>
-            </view>
-            <text class="time">2022-08-25</text>
-          </view>
-          <view class="title-share">
-            <view class="title">音频文件名称音频文件名 称音频。 </view>
-            <view class="share">
-              <text> 音频 ｜ 消费 </text>
-              <button open-type="share" :data-item="item" class="share-icon">
-                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/share-btn-icon.png"></image>
-              </button>
-            </view>
-          </view>
-        </view>
-        <view :class="1 == 1 ? 'audio-item' : 'video-item'">
-          <view class="cover-item" :style="{ 'background-image': 'url(' + 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_bg.jpg' + ')' }">
-            <view class="img-bg">
-              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/share-btn-icon.png"></image>
-            </view>
+            <block v-if="1 == 2">
+              <video
+                id="myVideo"
+                src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+                poster="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/card_default.png"
+                enable-play-gesture
+                object-fit="contain"
+                show-mute-btn
+                :autoplay="false"
+                @ended="handleVideoEnd"
+                v-if="1 == 3"
+              ></video>
+              <image v-else class="img-bg" @click="handelVideoPlay" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
+            </block>
+            <block v-else>
+              <image
+                class="img-bg"
+                @click.stop="audioPlayBack(item)"
+                :src="
+                  curVoiceId === item.ActivityId && !curAudioPaused
+                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                "
+              ></image>
+            </block>
             <text class="time">2022-08-25</text>
           </view>
           <view class="title-share">
             <view class="title">音频文件名称音频文件名 称音频。 </view>
             <view class="share">
-              <text> 音频 ｜ 消费 </text>
+              <view class="share-text" :style="[classifyColor('买方严选')]">
+                <image :src="classifyIcon('买方严选')"></image>
+                音频 ｜ 消费
+              </view>
               <button class="share-icon">
                 <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/share-btn-icon.png"></image>
               </button>
@@ -81,22 +89,34 @@
                 enable-play-gesture
                 object-fit="contain"
                 show-mute-btn
-                autoplay
+                :autoplay="false"
                 @ended="handleVideoEnd"
+                v-if="1 == 3"
               ></video>
-              <image class="img-bg" @click="handelVideoPlay" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.png"></image>
+              <image v-else class="img-bg" @click="handelVideoPlay" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
             </block>
             <block v-else>
-              <image class="img-bg" @click="handelAudioPlay" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon.png"></image>
+              <image
+                class="img-bg"
+                @click.stop="audioPlayBack(item)"
+                :src="
+                  curVoiceId === item.ActivityId && !curAudioPaused
+                    ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_stop_index.png'
+                    : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/back_group_index.png'
+                "
+              ></image>
             </block>
             <text class="time">2022-08-25</text>
           </view>
           <view class="title-share">
             <view class="title">音频文件名称音频文件名 称音频。 </view>
             <view class="share">
-              <text> 音频 ｜ 消费 </text>
+              <view class="share-text" :style="[classifyColor('买方严选')]">
+                <image :src="classifyIcon('买方严选')"></image>
+                音频 ｜ 消费
+              </view>
               <button class="share-icon">
-                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
+                <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/share-btn-icon.png"></image>
               </button>
             </view>
           </view>
@@ -183,15 +203,23 @@
       </block>
     </view>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+    <view v-if="showAudioBox">
+      <audioModule :showAudioPop.sync="showAudioPop" />
+    </view>
     <suspenButton v-if="reportShow" />
+    <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
   </view>
 </template>
 
 <script>
-import { Home, Reports, Chart } from "@/config/api.js";
+import { Home, Reports, Chart, activity } from "@/config/api.js";
 import { Throttle, deepCopy } from "@/config/util.js";
 import freeCharge from "@/components/freeCharge";
 import suspenButton from "@/components/suspen_button.vue";
+import { color_word_bg, MultimediaIcon } from "@/utils/styleClassify";
+import audioModule from "@/components/audioModule/index";
+import modalDialog from "@/components/modalDialog.vue";
+
 let app = getApp();
 export default {
   data() {
@@ -227,11 +255,18 @@ export default {
       isShowResearch: false, //研选限免
       isBindingMobile: true, //图表我的收藏是否绑定手机号
       videoContext: null,
+      showAudioPop: false, //播放音频
+      isShowhasPermission: false, //  联系销售的提交申请
+      applyForIsShow: false, // 提交申请
+      jurisdictionList: {},
+      hasPermission: "", //权限
     };
   },
   components: {
     freeCharge,
     suspenButton,
+    modalDialog,
+    audioModule,
   },
   watch: {},
   onLoad(optios) {
@@ -260,6 +295,20 @@ export default {
     // #ifdef MP-WEIXIN
     uni.hideHomeButton();
     // #endif
+    this.$store.commit("audioBg/parseIntAudio", true);
+  },
+  computed: {
+    curVoiceId() {
+      //当前正在播放的音频id
+      return this.$store.state.audioBg.indexId;
+    },
+    curAudioPaused() {
+      //当前音频是否暂停状态
+      return this.$store.state.audioBg.paused;
+    },
+    showAudioBox() {
+      return this.$store.state.audioBg.parseIntShow;
+    },
   },
   methods: {
     //获取胶囊位置
@@ -511,9 +560,59 @@ export default {
       }, 200);
     },
     //视频的播放事件
-    handelVideoPlay(){},
+    handelVideoPlay() {
+      this.globalBgAudioManager.stop();
+      this.videoContext = wx.createVideoContext("myVideo");
+    },
     //音频的播放事件
-    handelAudioPlay(){},
+    async audioPlayBack(item) {
+      this.videoContext && this.videoContext.stop;
+      return
+      if (!item.BackAudioPlay) {
+        const res = await activity.getActivityDetail({
+          ActivityId: item.ActivityId,
+        });
+        if (res.Ret === 200) {
+          item.BackAudioPlay = res.Data;
+        }
+      }
+      this.hasPermission = item.BackAudioPlay.HasPermission;
+      this.jurisdictionList.ActivityId = item.BackAudioPlay.ActivityId;
+      if (this.hasPermission == 1) {
+        this.$store.commit("audioBg/parseIntAudio", true);
+        // 判断是否为同一个音频
+        if (this.$store.state.audioBg.indexId == item.ActivityId) {
+          if (this.globalBgAudioManager.paused) {
+            this.globalBgAudioManager.play();
+          } else {
+            this.globalBgAudioManager.pause();
+          }
+        } else {
+          this.$store.commit("audioBg/addAudio", { list: item.VoiceList, indexId: item.ActivityId, activityTitle: item.ActivityName });
+        }
+        this.showAudioPop = true;
+      } else if (this.hasPermission == 2) {
+        this.jurisdictionList.SellerMobile = item.BackAudioPlay.SellerMobile;
+        this.jurisdictionList.SellerName = item.BackAudioPlay.SellerName;
+        this.jurisdictionList.PopupMsg = item.BackAudioPlay.PopupMsg;
+        this.isShowhasPermission = true;
+      } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
+        this.jurisdictionList.PopupMsg = item.BackAudioPlay.PopupMsg;
+        this.applyForIsShow = true;
+      }
+    },
+    classifyColor(item) {
+      let text_color = color_word_bg.color_word.find((key) => key.name == item).color;
+      let back_ground = color_word_bg.color_bg.find((key) => key.name == item).color;
+      let _isColor = { color: text_color, "background-color": back_ground };
+      return _isColor;
+    },
+    classifyIcon(item) {
+      return MultimediaIcon.find((key) => key.name == item).audio;
+    },
+  },
+  onHide() {
+    this.$store.commit("audioBg/parseIntAudio", false);
   },
   /* 下拉刷新 */
   onPullDownRefresh: Throttle(function () {
@@ -963,6 +1062,16 @@ export default {
           width: 44rpx;
           height: 44rpx;
         }
+        .share-text {
+          position: flex;
+          align-items: center;
+          padding: 0 10rpx;
+          image {
+            width: 20rpx;
+            height: 20rpx;
+            margin-right: 5rpx;
+          }
+        }
       }
     }
   }

store/modules/audioBg.js

@@ -4,15 +4,16 @@ const audioModules = {
   state: {
     show: false, //是否显示音频弹窗
     list: [], //[{url:音频地址,time:音频时长,title:音频标题,}]
-    activityId: 0, //当前是哪个报告的音频
-    reportId: 0,
+    activityId: 0, //当前是哪个报告的音频 活动的id
+    reportId: 0, //文章的id
+    indexId: 0, //素材库的id
     paused: true, //当前是否音频正在播放 true暂停状态
     curTime: 0, //当前正在播放的音频播放的时间
     activityTitle: "",
     multiple: 1, //倍数
     parseIntShow: false, //
-    isDragSlide:false,//是否在拖动进度条
-    isAudioEnded:false, //
+    isDragSlide: false, //是否在拖动进度条
+    isAudioEnded: false, //
   },
   mutations: {
     addAudio(state, payload) {
@@ -21,6 +22,7 @@ const audioModules = {
       state.activityTitle = payload.activityTitle;
       state.activityId = payload.activityId || 0;
       state.reportId = payload.reportId || 0;
+      state.indexId = payload.indexId || 0;
     },
     // 音频状态
     updateAudioPause(state, payload) {
@@ -39,18 +41,19 @@ const audioModules = {
       state.list = [];
       state.activityId = 0;
       state.reportId = 0;
+      state.indexId = 0
       state.curTime = 0;
       state.paused = true;
     },
     parseIntAudio(state, payload) {
       state.parseIntShow = payload;
     },
-    setSlide(state, payload){
+    setSlide(state, payload) {
       state.isDragSlide = payload;
     },
     setAudioEnd(state, payload) {
       state.isAudioEnded = payload;
-    }
+    },
   },
 };
 

utils/styleClassify.js

@@ -52,3 +52,36 @@ export const color_word_bg = {
     },
   ],
 };
+
+export const MultimediaIcon = [
+  {
+    name: "医药",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/green_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/green_video.png",
+  },
+  {
+    name: "科技",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/blue_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/blue_video.png",
+  },
+  {
+    name: "消费",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/yellow_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/yellow_video.png",
+  },
+  {
+    name: "智造",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/purple_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/purple_video.png",
+  },
+  {
+    name: "策略",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/orange_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/orange_video.png",
+  },
+  {
+    name: "买方严选",
+    audio: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/red_audio.png",
+    video: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/red_video.png",
+  },
+];