daikan-international/src/components/hotspot/metas/image-view.vue

<!--  -->
<template>
  <div class="image-view">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(i, index) in imageList" :key="index">
          <div class="swiper-zoom-container">
            <div
              :id="`vmRef_${index}`"
              class="swiper-zoom-target"
              :style="`background-image: url(${changeUrl(i.src)})`"
            ></div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, computed, nextTick } from 'vue';
  import { tagType, useSceneStore } from '/@/store/modules/scene';
  import { changeUrl } from '../common';

  const props = defineProps({
    data: {
      type: Object,
      default: {} as any as tagType,
    },
    metasHeight: {
      type: Number,
      default: null,
    },
  });

  const imageList = computed(() => {
    return props.data.media.image;
  });

  // const vmZoom = ref([]);
  // const zoomList = [];
  onMounted(() => {
    // let urls = [];
    (window as any).globalSwiper = new (window as any).Swiper('.mySwiper', {
      zoom: {
        toggle: false,
        maxRatio: 5,
      },
      pagination: {
        el: '.swiper-pagination',
      },
      on: {
        init: function (_) {
          // for (let i = 0; i < imageList.value.length; i++) {
          //     vmZoom.value[i] = document.getElementById(`vmRef_${i}`)
          //     zoomElement(vmZoom.value[i])
          // }
        },
        transitionStart: function (_) {
          // alert(swiper.previousIndex)
          // console.log(vmZoom.value[swiper.previousIndex].style.transform)
          // let scale = getTransform(vmZoom.value[swiper.previousIndex])
        },

        touchStart: function () {
          // console.log(swiper.previousIndex)
        },
        activeIndexChange: function (swiper) {
          console.log('event', swiper.activeIndex);
          const sceneStore = useSceneStore();
          sceneStore.setCurrentTagLayerIndex(swiper.activeIndex);
          // console.log(swiper.previousIndex)
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    // const getTransform = el => {
    //     var st = window.getComputedStyle(el, null)
    //     var tr =
    //         st.getPropertyValue('-webkit-transform') ||
    //         st.getPropertyValue('-moz-transform') ||
    //         st.getPropertyValue('-ms-transform') ||
    //         st.getPropertyValue('-o-transform') ||
    //         st.getPropertyValue('transform') ||
    //         'FAIL'

    //     var values = tr.split('(')[1].split(')')[0].split(',')
    //     var a = values[0]
    //     var b = values[1]

    //     var scale = Math.sqrt(a * a + b * b)
    //     console.log('Scale: ' + scale)
    //     return scale
    //     // var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI))
    //     // console.log('Rotate: ' + angle + 'deg')
    // }
    nextTick(() => {
      for (let i = 0; i < imageList.value.length; i++) {
        // console.log(vmZoom.value[i])
        // zoomElement(vmZoom.value[i])
      }
    });
    // for (let i = 0; i < imageList.value.length; i++) {
    //     urls.push(common.changeUrl(imageList.value[i].src))
    // }
    // var obj = {
    //     urls,
    //     current: urls[0],
    // }
    // console.log(previewImage)
    // previewImage.start(obj)
  });
</script>

<style lang="scss" scoped>
  .image-view {
    width: 100%;
    height: 100%;
    // position: fixed;
    // top: 0;
    // left: 0;
    // transform: translate3d(0, 0, 0);
    // overflow: hidden;

    .swiper {
      width: 100%;
      height: 100%;

      .swiper-slide {
        transform: translate3d(0, 0, 0);
        overflow: hidden;
      }
      .swiper-zoom-container {
        width: 100%;
        height: 100%;
        transform: translate3d(0, 0, 0);
        // overflow: hidden;
        .swiper-zoom-target {
          width: 100%;
          height: 100%;
          background-position: center;
          background-size: contain;
          margin: 0 auto;
          transform: translate3d(0, 0, 0);
          // img {
          //     width: 100%;
          //     height: 100%;
          // }
        }
      }
    }
  }
</style>
<style lang="scss">
  .image-view {
    .swiper-pagination-bullet {
      background: #f2f2f2;
    }
    .swiper-pagination-bullet-active {
      background: var(--editor-main-color);
    }
  }
</style>