1

src/components/FirstJob/detail.vue

@@ -209,13 +209,37 @@
               <div id="swiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
-                    <img :src="item" alt @click="showImage(index)" style="cursor:pointer"/>
+                    <img :src="item" alt v-if="isImg(item)" @click="showImage(index)" style="cursor:pointer;" />
+                    <div v-if="!isImg(item)">
+                      <div style="position: absolute;width: 78px;height: 78px; left: 0;top: 0;z-index: 99;background-color: transparent;cursor: pointer;" @click.stop="handlePreview(item)"></div>
+                      <video class="imgSpan" style="width: 80px;height:45px" controls>
+                        <source :src="item" type="video/mp4" />
+                        <source :src="item" type="video/ogg" />您的浏览器不支持 HTML5 video 标签。
+                      </video>
+                    </div>
                   </div>
                 </div>
               </div>
               <div class="swiper-button-next"></div>
               <div class="swiper-button-prev"></div>
             </div>
+            <a-modal :visible="previewVisible" wrapClassName="spic" centered :footer="null" @cancel="handleCancel">
+              <video style="width: 100%; max-height: calc(100vh - 40px)" id="movie" autoplay :src="previewImage" controls="controls" />
+            </a-modal>
+            <!-- <div class="swiperBox">
+              <div id="swiper">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
+                    <img :src="item" alt @click="showImage(index)" style="cursor:pointer" />
+                  </div>
+                   <div class="swiper-slide" v-for="(item, index) in [...storeImage]" :key="index">
+                    <img :src="item" alt @click="showImage(index)" style="cursor:pointer" />
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-button-next"></div>
+              <div class="swiper-button-prev"></div>
+            </div>-->
           </div>
           <div class="subsetright">
             <div class="topbox">
@@ -763,6 +787,8 @@ export default {
   // 组件状态值
   data() {
     return {
+      previewVisible: false,
+      previewImage: '',
       relationList: [],
       jobDetail: {}, // 职位相关信息
       storeImage: [],
@@ -778,7 +804,7 @@ export default {
       skeletonshow: true,
       tabchange: 1,
       nationlist,
-      imgList:[], // 预览图片列表
+      imgList: [], // 预览图片列表
       labelColor: ['pink', 'blue', 'purple', 'orange', 'green', 'cyan', 'red', 'purple'],
       form: {
         // 录单数据
@@ -896,12 +922,24 @@ export default {
           }
           this.storeInfo = newdata
           let regs = /\.(jpg|jpeg|png)(\?.*)?$/
+          // data.data.storeImage.forEach((item) => {
+          //   if (regs.test(item.url.toLowerCase())) {
+          //     this.storeImage.push(item.url)
+          //   }
+          // })
+          // console.log(this.storeImage);
+          let storeImage = []
+          let storeVideo = []
           data.data.storeImage.forEach((item) => {
+            console.log(item.url)
+
             if (regs.test(item.url.toLowerCase())) {
-              this.storeImage.push(item.url)
+              storeImage.push(item.url)
+            } else {
+              storeVideo.push(item.url)
             }
           })
-          // console.log(this.storeImage);
+          this.storeImage = [...storeImage, ...storeVideo]
         } else {
           this.$message.warning('数据获取失败')
         }
@@ -916,13 +954,17 @@ export default {
     // 录单弹出层的关闭
     handleCancel() {
       this.visible = false
-      this.form = {
-        // 录单数据
-        name: '',
-        tel: '',
-        peoplecard: '',
-        username: '',
-      }
+      this.previewVisible = false
+      let movie = document.querySelector('#movie')
+      console.dir(movie);
+      movie.pause();
+      // this.form = {
+      //   // 录单数据
+      //   name: '',
+      //   tel: '',
+      //   peoplecard: '',
+      //   username: '',
+      // }
     },
     // 录单提交按钮的回调
     handleOk() {
@@ -990,7 +1032,7 @@ export default {
      */
     showImage(idx) {
       var that = this
-      console.log( that.storeImage);
+      console.log(that.storeImage)
       that.storeImage.forEach((item, index) => {
         if (that.isImg(item)) {
           that.imgList.push(item)
@@ -1005,7 +1047,7 @@ export default {
       // }
     },
     isImg(str) {
-      console.log(str);
+      console.log(str)
       let regs = /\.(jpg|jpeg|png)(\?.*)?$/
       return regs.test(str)
     },
@@ -1034,6 +1076,10 @@ export default {
         },
       })
     },
+    handlePreview(file) {
+      this.previewImage = file
+      this.previewVisible = true
+    },
   },
 }
 </script>
@@ -1865,4 +1911,38 @@ export default {
 .swiper-button-disabled {
   display: none;
 }
+.spic.ant-modal-wrap {
+  text-align: center;
+}
+/deep/ .spic {
+  .ant-modal {
+    width: auto !important;
+    display: inline-block;
+  }
+  .ant-modal-close {
+    top: 24px;
+    right: 6px;
+    position: fixed;
+    color: #fff;
+
+    .ant-modal-close-x {
+      font-size: 30px;
+    }
+  }
+  .ant-modal-content {
+    background-color: transparent;
+
+    .ant-modal-body {
+      padding: 0;
+    }
+
+    img {
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
+    }
+  }
+}
 </style>