feat: 加入图片查看器

package.json

@@ -16,6 +16,7 @@
     "sass": "^1.83.4",
     "scss": "^0.2.4",
     "swiper": "5.4.5",
+    "v-viewer": "^3.0.21",
     "vite": "^6.0.7",
     "vue": "^3.5.13",
     "vue-perfectlooper": "^1.4.0",

src/assets/img/back.svg

@@ -0,0 +1,15 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="back">
+<g id="Group 1109">
+<circle id="Ellipse 16" cx="45" cy="45" r="45" fill="url(#paint0_linear_29_910)"/>
+<circle id="Ellipse 18" cx="44.9985" cy="45" r="37.5" stroke="#FFFBED" stroke-width="1.5"/>
+</g>
+<path id="Vector" d="M48.6926 24.8386C49.6492 23.8996 51.1997 23.8593 52.2062 24.7471C53.2133 25.6349 53.3174 27.134 52.4425 28.1442L52.2953 28.3011L35.0533 45.1352L52.2805 61.6899C53.2148 62.5878 53.2854 64.0286 52.4425 65.0078L52.2953 65.1662C51.3677 66.0713 49.8812 66.139 48.8703 65.3225L48.7068 65.1799L29.6786 46.895C28.7443 45.9971 28.6744 44.5563 29.5173 43.5771L29.6645 43.4187L48.6926 24.8386Z" fill="#FFFBED"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_29_910" x1="45" y1="0" x2="45" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D624C"/>
+<stop offset="1" stop-color="#92866D"/>
+</linearGradient>
+</defs>
+</svg>

src/main.js

@@ -2,6 +2,13 @@ import { createApp } from "vue";
 import "./assets/style.css";
 import App from "./App.vue";
 import 'lib-flexible/flexible'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 // import 'animate.css';
-createApp(App).mount("#app");
+
+
+
+const app = createApp(App)
+app.use(Viewer)
+app.mount('#app')
 

src/views/home/iframeView/index.vue

@@ -10,8 +10,8 @@
       <div class="swiper-dom view-container">
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="(i, index) in picList">
-            <div class="item-box" @click="changeIframe(i)">
-              <img v-if="iframeData.deatilsImg" :src="`resource/img/details/${i}`" alt="" />
+            <div class="item-box" @click="lookImg(`resource/img/details/${i}`)">
+              <img ref="test" v-if="iframeData.deatilsImg" :src="`resource/img/details/${i}`" alt="" />
             </div>
           </div>
         </div>
@@ -31,14 +31,18 @@
       </div>
     </div>
   </div>
-
-  <audio v-if="iframeData.deatilsAudio" ref="audioRef" preload="auto" loop class="bgm" :src="`resource/audio/${iframeData.deatilsAudio ? iframeData.deatilsAudio : 'music-user.mp3'}`"></audio>
+  <div class="image-view">
+    <viewer :images="images" ref="myViewer" @inited="inited">
+      <img v-for="src in images" :key="src" :src="src" />
+    </viewer>
+  </div>
+  <audio v-if="iframeData.deatilsAudio" ref="audioRef" preload="auto" class="bgm" :src="`resource/audio/${iframeData.deatilsAudio ? iframeData.deatilsAudio : 'music-user.mp3'}`"></audio>
 </template>
 
 <script setup>
 import "swiper/css/swiper.css";
 import Swiper from "swiper";
-import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits, defineProps, nextTick, watch } from "vue";
+import { reactive, ref, toRefs, onBeforeMount, onMounted, onUnmounted, defineEmits, defineProps, nextTick, watch } from "vue";
 const props = defineProps(["iframeData"]);
 const emits = defineEmits(["close"]);
 const audioRef = ref(null);
@@ -53,6 +57,7 @@ let imageSwiper = null;
 const options = {
   freeMode: false,
 };
+const images = ref(["https://picsum.photos/200/200", "https://picsum.photos/300/200", "https://picsum.photos/250/200"]);
 const setSwiper = () => {
   imageSwiper = new Swiper(".view-container", options);
 };
@@ -66,24 +71,61 @@ watch(
     }
   }
 );
+const myViewer = ref(null);
+const dom = ref(null);
 const handlerPicList = () => {
   if (props.iframeData.deatilsImg) {
     //按规则截取字符串
     picList.value = props.iframeData.deatilsImg.split("_");
   }
-  setSwiper();
+  nextTick(() => {
+    setSwiper();
+  });
+};
+const onPause = () => {
+  isPlay.value = false;
 };
-nextTick(() => {
-  handlerPicList();
-  rectH.value = contentRef.value.getBoundingClientRect().height;
-  let domBox = null;
-  if (props.iframeData.type == "2D") {
-    domBox = document.querySelector(".image-box");
-    domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
-  } else if (props.iframeData.type == "3D") {
-    domBox = document.querySelector(".iframe-box");
-    domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
+const test = ref(null);
+const lookImg = (url) => {
+  // if (!dom.value) {
+
+  //   dom.value = myViewer.value.$viewer;
+  // }
+  // console.error( myViewer.value.$viewer)
+
+  images.value = [url];
+  console.error(myViewer.value.$viewer);
+  // myViewer.value.show();
+
+  if (dom.value) {
+    dom.value.show();
   }
+};
+const inited = (viewer) => {
+  dom.value = viewer;
+};
+onMounted(() => {
+  nextTick(() => {
+    handlerPicList();
+    rectH.value = contentRef.value.getBoundingClientRect().height;
+    let domBox = null;
+    if (props.iframeData.type == "2D") {
+      domBox = document.querySelector(".image-box");
+      domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
+    } else if (props.iframeData.type == "3D") {
+      domBox = document.querySelector(".iframe-box");
+      domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
+    }
+    if (audioRef.value) {
+      audioRef.value.addEventListener("pause", onPause);
+    }
+  });
+
+  onUnmounted(() => {
+    if (audioRef.value) {
+      audioRef.value.removeEventListener("pause", onPause);
+    }
+  });
 });
 </script>
 <style lang="scss" scoped>
@@ -228,6 +270,26 @@ nextTick(() => {
   }
 }
 @media screen and (min-height: 1024px) {
-
+}
+.image-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  display: none;
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
+<style>
+.viewer-backdrop {
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.viewer-footer {
+  display: none;
 }
 </style>

src/views/home/iframeView/more.vue

@@ -39,13 +39,13 @@ const close = () => {
   }
   .close-btn {
     position: absolute;
-    top: 1.5333rem;
-    right: 0.5333rem;
-    width: 1.0667rem;
-    height: 1.0667rem;
+    top: 0.5333rem;
+    left: .2667rem;
+    width: 0.8rem;
+    height: 0.8rem;
     color: #fff;
     z-index: 102;
-    background: url("@/assets/img/icon-close.svg") no-repeat;
+    background: url("@/assets/img/back.svg") no-repeat;
     background-size: 100%;
   }
 }

yarn.lock

@@ -581,6 +581,11 @@ lib-flexible@^0.3.2:
   resolved "https://registry.npmmirror.com/lib-flexible/-/lib-flexible-0.3.2.tgz#06f5a74832314a2d35c12039bc9c3ca2daeaa426"
   integrity sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 magic-string@^0.30.11:
   version "0.30.17"
   resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
@@ -723,6 +728,19 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+v-viewer@^3.0.21:
+  version "3.0.21"
+  resolved "https://registry.npmmirror.com/v-viewer/-/v-viewer-3.0.21.tgz#cd789be10b73789a0e1b86cbb6e64db02fc036f5"
+  integrity sha512-FyorVqtWiv9LvDG36XEh8HDv8TAcVnMn0+s4b9yKUdBriAZNlYJvgyhGnhyBH/w9yK1PlLVyhorKEj26B6JK1Q==
+  dependencies:
+    lodash-es "^4.17.21"
+    viewerjs "^1.11.6"
+
+viewerjs@^1.11.6:
+  version "1.11.7"
+  resolved "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.7.tgz#99c39b86c3f1b6debf446747a1f0e25f8be4db74"
+  integrity sha512-0JuVqOmL5v1jmEAlG5EBDR3XquxY8DWFQbFMprOXgaBB0F7Q/X9xWdEaQc59D8xzwkdUgXEMSSknTpriq95igg==
+
 vite@^6.0.7:
   version "6.0.7"
   resolved "https://registry.npmmirror.com/vite/-/vite-6.0.7.tgz#f0f8c120733b04af52b4a1e3e7cb54eb851a799b"