切换

components/ItemComponent/roadshowItem.vue

@@ -1,10 +1,14 @@
 <template>
   <view class="global_card_content container-roadshow-item">
+    <view>
+      <view>xxxx</view>
+      <view> {{ totalSeconds(list) }}</view>
+    </view>
     <view class="global_title" @click="goDetails">
-      <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
+      <mp-html :content="list.Title" />
     </view>
-    <view @click="joinPlaylist(list)">加入播放列表</view>
-    <view class="cover-item" :style="{ 'background-image': 'url(' + list.BackgroundImg + ')' }">
+    <!-- <view>加入播放列表</view> -->
+    <!-- <view class="cover-item" :style="{ 'background-image': 'url(' + list.BackgroundImg + ')' }">
       <block v-if="list.Type == 2 || list.Type == 3">
         <image class="img-bg" @click="handelPlay(list)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
       </block>
@@ -29,6 +33,13 @@
             : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/multimedia/audio-icon.png'
         "
       ></image>
+    </view> -->
+    <view>
+      <view>播放</view>
+      <view @click="joinPlaylist(list)">播放列表</view>
+    </view>
+    <view class="global_title" @click="goDetails">
+      <mp-html :content="list.Title" />
     </view>
     <view class="title-share">
       <view class="share share-collected">
@@ -90,8 +101,7 @@ export default {
   },
   watch: {},
   created() {},
-  mounted() {
-  },
+  mounted() {},
   methods: {
     //播放的权限判断
     async handelPlay(item) {
@@ -202,6 +212,13 @@ export default {
         this.$store.commit("audioJoinPlaylist/addPlaylist", { dataList });
       }
     },
+    // 播放时长的转换
+    totalSeconds(item) {
+      let minutes = Math.floor(item.PlaySeconds / 60);
+      let seconds = item.PlaySeconds % 60;
+      let time = minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0");
+      return time;
+    },
   },
 };
 </script>

components/videoModule/index.vue

@@ -11,13 +11,24 @@
         show-mute-btn
         @ended="handleVideoEnd"
         @timeupdate="handleVideoTimeUpdate"
+        @fullscreenchange="handleFullscreenchange"
         autoplay
-      ></video>
+      >
+        <view class="video-inner-right-box" v-if="isShowControls">
+          <!-- 倍速控制按钮 -->
+          <view class="video-speed-btn" @click.stop="showSpeedOpt = true">倍速</view>
+        </view>
+
+        <!-- 倍速选项模块 -->
+        <view class="speed-opt-box" v-if="showSpeedOpt">
+          <view class="item" :style="{ color: item == curSpeed ? '#F3A52F' : '' }" v-for="item in speedOpts" :key="item" @click.stop="handleVideoSpeedChange(item)">{{ item }}X</view>
+        </view>
+      </video>
       <view class="title text_twoLine">
         {{ videoPopList.Title }}
       </view>
     </view>
-    <view class="close-icon">
+    <view class="close-icon" v-if="showCloseBtn">
       <image @click="handleShow" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close-icon.png"> </image>
     </view>
   </view>
@@ -51,6 +62,11 @@ export default {
     return {
       videoContext: null,
       curVideoTime: 0,
+      showSpeedOpt: false,
+      speedOpts: ["0.5", "0.8", "1.0", "1.25", "1.5", "2.0"],
+      curSpeed: "1.0",
+      isShowControls: false, //是否显示视频的控制栏
+      showCloseBtn: true,
     };
   },
   watch: {
@@ -90,8 +106,21 @@ export default {
       this.$store.commit("videoPlay/palyTimeUpdate", time);
     },
     handleShow() {
+      this.showSpeedOpt = false;
+      this.curSpeed = "1.0";
       // this.$parent.showVideoPop = false;
-      this.$emit("update:showVideoPop",false);
+      this.$emit("update:showVideoPop", false);
+    },
+    // 倍速切换
+    handleVideoSpeedChange(item) {
+      const num = Number(item);
+      this.videoContext.playbackRate(num);
+      this.curSpeed = item;
+      this.showSpeedOpt = false;
+    },
+    handleFullscreenchange(e) {
+      this.showCloseBtn = !e.detail.fullScreen;
+      this.isShowControls = e.detail.fullScreen;
     },
   },
 };
@@ -141,5 +170,43 @@ export default {
       width: 48rpx;
     }
   }
+  .video-inner-right-box {
+    position: absolute;
+    bottom: 30%;
+    right: 5%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .video-speed-btn {
+    width: 80rpx;
+    height: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 22rpx;
+    color: #fff;
+    font-size: 12px;
+  }
+  .speed-opt-box {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 20%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-top: 55rpx;
+    .item {
+      color: #fff;
+      font-size: 26rpx;
+      flex: 1;
+      width: 100%;
+      text-align: center;
+    }
+  }
 }
 </style>

pages/material/material.vue

@@ -118,7 +118,7 @@ export default {
   data() {
     return {
       topTabBars: [],
-      topTabsActive: 4, //一级top的tabs
+      topTabsActive: 2, //一级top的tabs
       secondActive: "", //二级的tabs
       secondBars: [], //二级的tabs数组
       chartChildren: [], //二级的tabs下的标签