图片&视频预览

components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     Item: typeof import('./src/components/Position/item.vue')['default']
     JobTypeCard: typeof import('./src/components/jobTypeCard/index.vue')['default']
     Positions: typeof import('./src/components/Enterprise/components/positions.vue')['default']
+    PreviewImg: typeof import('./src/components/PreviewImg/index.vue')['default']
     RadioGroup: typeof import('./src/components/FormUI/radioGroup/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/Enterprise/components/introduction.vue

@@ -13,36 +13,35 @@
     <v-divider class="my-3"></v-divider>
     <div>
       <h4>公司相册</h4>
-      <v-slide-group :show-arrows="true" class="mt-3 img-box">
-        <!-- props.info.enterprise.albumList -->
-        <v-slide-group-item v-for="val in list" :key="val">
-          <v-img v-if="isImage(val)" class="mr-3" width="200" height="115" :src="val" cover rounded></v-img>
-          <video v-else class="videos-radius" :src="val" controls height="118" width="200" preload="preload"></video>
+      <v-slide-group :show-arrows="true" class="mt-3 img-box cursor-pointer">
+        <v-slide-group-item v-for="(val, i) in props.info.enterprise.albumList" :key="val">
+          <v-img v-if="checkIsImage(val)" class="mr-3" width="200" height="115" :src="val" cover rounded @click="handleClick(i)"></v-img>
+          <video v-else class="videos-radius mr-3" :src="val" controls height="118" width="200" preload="preload" @click="handleClick(i)"></video>
         </v-slide-group-item>
       </v-slide-group>
     </div>
+    <PreviewImg v-if="showPreview" :current="current" :list="props.info.enterprise.albumList" @close="showPreview = !showPreview"></PreviewImg>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'enterprise-introduction'})
+import { checkIsImage } from '@/utils'
+import { ref } from 'vue'
+
 const props = defineProps({
   info: {
     type: Object,
     default: () => {}
   }
 })
-const list = [
-  'https://img.bosszhipin.com/beijin/upload/com/img/20190823/9ed988f78163bf3784fa162764d429124d4ba1fec2b1a061e4a46fb61ddab12d.jpg',
-  'https://img.bosszhipin.com/beijin/upload/com/img/20190823/f01c227906f5c15554d19904cf5009944d4ba1fec2b1a061e4a46fb61ddab12d.jpg',
-  'https://img.bosszhipin.com/beijin/upload/com/img/20190823/154f6a1bc139eea59bf2610c3115fc664d4ba1fec2b1a061e4a46fb61ddab12d.jpg',
-  'https://img.bosszhipin.com/beijin/upload/com/img/20190823/644c82121f1d19cb120c1e4c2836d1004d4ba1fec2b1a061e4a46fb61ddab12d.jpg',
-  'https://img.bosszhipin.com/beijin/upload/com/img/20190823/4b867202f288d6512dac50856bae61194d4ba1fec2b1a061e4a46fb61ddab12d.jpg'
-]
 
-const isImage = (url) => {
-  var reg = /\.(png|jpg|gif|jpeg|webp)$/
-  return reg.test(url)
+// 预览
+const showPreview = ref(false)
+const current = ref(0)
+const handleClick = (index) => {
+  showPreview.value = !showPreview.value
+  current.value = index
 }
 </script>
 

src/components/PreviewImg/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-overlay v-model="overlay" class="align-center justify-center" @update:model-value="handleChange">
+    <!-- <div class="close" @click="overlay = false">
+      <v-icon color="#fff" size="60">mdi-close-circle</v-icon>
+    </div> -->
+    <v-window v-model="window" show-arrows @update:model-value="val => window = val">
+      <v-window-item v-for="val in list" :key="val">
+        <v-img v-if="checkIsImage(val)" width="1000" height="800" :src="val"></v-img>
+        <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
+      </v-window-item>
+    </v-window>
+  </v-overlay>
+</template>
+
+<script setup>
+defineOptions({ name: 'preview-img'})
+import { ref } from 'vue'
+import { checkIsImage } from '@/utils'
+
+const emits = defineEmits(['close'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  current: {
+    type: Number,
+    default: 0
+  }
+})
+
+const overlay = ref(true)
+const window = ref(0)
+if (props.current) window.value = props.current
+// const list = [
+//   'https://fastly.picsum.photos/id/232/500/300.jpg?hmac=fyd8W1w8466rO5Je10xId1ShHAphw8iYnpt8XIkW4w0',
+//   'https://zhipin-company-1251955568.file.myqcloud.com/zhipin-company/99/20231021/fpf81b1cdecd7a27dca3eeb40f661f1a3e_1a3cd48c41c942d0aa084b3dd0262681-OSS11.aac.s44100.stereo.1080x1920.b2000000.libx264.mp4?sign=d840267a7fb629df0a70cbc85702303e&t=1715917059'
+// ]
+
+const handleChange = (e) => {
+  if (!e) emits('close')
+}
+</script>
+
+<style scoped lang="scss">
+.close {
+  position: absolute;
+  right: -150px;
+  top: -45px;
+  cursor: pointer;
+}
+</style>

src/utils/index.js

@@ -14,4 +14,25 @@ export const blobToJson = (blob) => {
 
     reader.readAsText(blob)
   })
+}
+
+// 判断是图片还是视频
+export const checkIsImage = (url) => {
+  var link = new URL(url)
+  var path = link.pathname
+  var extension = path.split('.').pop().toLowerCase()
+  var imageExtensions = ['jpg', 'jpeg', 'gif', 'png']
+  var videoExtensions = ['mp4', 'wmv', 'avi', 'mov']
+
+  // 图片
+  if (imageExtensions.includes(extension)) {
+    return true
+  }
+
+  // 视频
+  if (videoExtensions.includes(extension)) {
+    return false
+  }
+
+  return null
 }