文物详情页对接数据

package.json

@@ -15,6 +15,7 @@
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
+    "swiper": "^10.0.4",
     "v-viewer": "^3.0.11",
     "viewerjs": "^1.11.6",
     "vue-router": "^4.0.3",

src/views/RelicDetail.vue

@@ -17,19 +17,35 @@
     <div class="detail">
       {{ relicInfo['详细描述'] }}
     </div>
-    <img
-      class="relic"
-      :src="getRelicImgUrl()"
-      alt=""
-      draggable="false"
+    <div
+      class="swiper-root"
     >
+      <div
+        v-viewer
+        class="swiper-wrapper"
+      >
+        <img
+          v-for="(item, index) in relicImgUrlList"
+          :key="index"
+          class="swiper-slide"
+          :src="item"
+          alt=""
+          draggable="false"
+        >
+      </div>
+      <!-- <div class="swiper-button-prev" />
+      <div class="swiper-button-next" /> -->
+      <div class="swiper-pagination" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from "vue"
+import { ref, computed, watch, onMounted, nextTick } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import Swiper from 'swiper/bundle'
+import 'swiper/css/bundle'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,14 +55,48 @@ const relicInfo = computed(() => {
   return store.getters.relicData[route.query.relicIdx]
 })
 
-function getRelicImgUrl() {
-  if (Array.isArray(relicInfo.value['图片名']) && relicInfo.value['图片名'][0]) {
-    return `${process.env.BASE_URL}relic-data/big-photo/${relicInfo.value['图片名'][0]}`
+const relicImgUrlList = computed(() => {
+  if (Array.isArray(relicInfo.value['图片名'])) {
+    return relicInfo.value['图片名'].map((item) => {
+      return `${process.env.BASE_URL}relic-data/big-photo/${item}`
+    })
   } else {
-    return ''
+    return []
   }
-}
+})
 
+/**
+ * swiper 相关
+ */
+let swiper = null
+// const activeSwiperItemIndex = ref(0)
+function initSwiper() {
+  swiper = new Swiper('.swiper-root', {
+    pagination: {
+      el: '.swiper-pagination',
+    },
+
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+
+    on: {
+      // afterInit: function (e) {
+      //   activeSwiperItemIndex.value = e.activeIndex
+      // },
+      // slideChange: function(e) {
+      //   activeSwiperItemIndex.value = e.activeIndex
+      // }
+    }
+  })
+}
+onMounted(() => {
+  nextTick(() => {
+    initSwiper()
+  })
+})
 </script>
 
 <style lang="less" scoped>
@@ -116,14 +166,36 @@ function getRelicImgUrl() {
     line-height: 23px;
     letter-spacing: 4px;
   }
-  >img.relic{
+  >.swiper-root{
     position: absolute;
     left: calc(1385 / @page-width-design-px * 100vw);
     top: calc(99 / @page-height-design-px * 100vh);
     transform: translate(-50%, 0);
     width: calc(767 / @page-width-design-px * 100vw);
     height: calc(767 / @page-height-design-px * 100vh);
-    object-fit: contain;
+    overflow: hidden;
+    >.swiper-wrapper{
+      width: 100%;
+      height: 100%;
+      >img.swiper-slide {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    >:deep(.swiper-pagination){
+      >span{
+        width: 20px;
+        height: 5px;
+        border-radius: 0;
+        // background-color: #666;
+      }
+      >span.swiper-pagination-bullet-active{
+        // background-color: #f4d085;
+        opacity: 1;
+        background-color: #fff;
+      }
+    }
   }
 }
 </style>

yarn.lock

@@ -5858,6 +5858,11 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^10.0.4:
+  version "10.3.1"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-10.3.1.tgz#4d19d7e9d0bd184c30accf2c1b180cfe41b9f4af"
+  integrity sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==
+
 table@^6.0.9:
   version "6.8.1"
   resolved "https://registry.npmmirror.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"