提交

src/view/SilkRoadShanShiPinList/index.vue

@@ -5,7 +5,12 @@
     <div class="guize" style="top: 5em" @click="paiming">查看排名</div>
     <van-cell-group title="团队组" style="padding: 8px">
       <van-row gutter="8">
-        <van-col span="12" v-for="item in list" :key="item.id">
+        <van-col
+          span="12"
+          v-for="item in list"
+          :key="item.id"
+          @click="() => clickShowVideo(item)"
+        >
           <van-image
             :width="width"
             :height="height"
@@ -32,7 +37,12 @@
     </van-cell-group>
     <van-cell-group title="个人组" style="padding: 8px">
       <van-row gutter="8">
-        <van-col span="12" v-for="item in listSelf" :key="item.id">
+        <van-col
+          span="12"
+          v-for="item in listSelf"
+          :key="item.id"
+          @click="() => clickShowVideo(item)"
+        >
           <van-image
             :width="width"
             :height="height"
@@ -58,10 +68,7 @@
       </van-row>
     </van-cell-group>
     <Shanshipin />
-    <van-dialog
-      v-model:show="showPaihang"
-      confirm-button-text="关闭"
-    >
+    <van-dialog v-model:show="showPaihang" confirm-button-text="关闭">
       <div style="height: 50vh">
         <van-tabs>
           <van-tab title="个人">
@@ -93,6 +100,27 @@
         </van-tabs>
       </div>
     </van-dialog>
+    <van-overlay z-index="20" :show="showVideo" @click="showVideo = false">
+      <van-icon @click="() => clickShowVideo()" name="close" class="close" />
+
+      <div class="video" v-if="showVideo" @click.stop>
+        <video
+          muted
+          loop
+          x5-video-player-type="h5"
+          preload="metadata"
+          autoplay
+          playsinline="true"
+          webkit-playsinline="true"
+          x-webkit-airplay="true"
+          x5-video-orientation="portraint"
+          x5-video-player-fullscreen="true"
+          :src="video.file"
+          class="videoEle"
+        ></video>
+        <div class="videoText" v-text="video.introduction"></div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 <script setup>
@@ -130,6 +158,8 @@ const height = ref(width.value * 0.57);
 const showPaihang = ref(false);
 const list = ref([]);
 const listSelf = ref([]);
+const showVideo = ref(false);
+const video = ref({});
 const config = reactive({
   times: -1,
   isShanShiPin: window.$shanshipin.UserId,
@@ -243,7 +273,7 @@ const showGuize = () => {
 };
 
 const paiming = () => {
-    if (!config.isShanShiPin) return showToast("下载闪视频查看投票结果。");
+  if (!config.isShanShiPin) return showToast("下载闪视频查看投票结果。");
   getList(() => {
     showPaihang.value = true;
   });
@@ -262,6 +292,13 @@ const formmate = num => {
   }
   return N;
 };
+
+const clickShowVideo = item => {
+  showVideo.value = !showVideo.value;
+  if (!item) return;
+  video.value = item || {};
+  console.log(item);
+};
 </script>
 <style lang="scss">
 .SilkRoadShanShiPinList {
@@ -278,11 +315,39 @@ const formmate = num => {
     padding: 3px 5px 3px 15px;
     border-top-left-radius: 1em;
     border-bottom-left-radius: 1em;
-    z-index: 11;
+    z-index: 2;
   }
   .SilkList {
     height: calc(50vh - 60px);
     overflow-y: auto;
   }
+  .van-overlay {
+    .video {
+      width: 100vw;
+      position: absolute;
+      .videoEle {
+        width: 100%;
+        position: fixed;
+        top:50%;
+        transform: translateY(-50%);
+      }
+      .videoText{
+        color: #fff;
+        position: fixed;
+        bottom: 0;
+        padding: .5em;
+        text-indent: 2em;
+      }
+    }
+
+    .close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 11;
+      color: #fff;
+      font-size: 20px;
+    }
+  }
 }
 </style>