fashion-ssr-vue3/components/business/goods/left.vue

<!-- @format -->

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'

defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const modules = [Navigation, Mousewheel]
const swiperVertical = ref<any>(null)
const swiperHorizontal = ref<any>(null)
const selectedIndex = ref<number | null>(null)
function onSlideChange(swiper: any) {
  swiperHorizontal.value.slideTo(swiper.activeIndex)
  swiperVertical.value.slideTo(swiper.activeIndex)
  selectedIndex.value = swiper.activeIndex
}
function syncHorizontalSwiper(index: number) {
  nextTick(() => {
    swiperHorizontal.value.slideTo(index)
    selectedIndex.value = index
  })
}
function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onHorizontalSwiper(swiper: any) {
  swiperHorizontal.value = swiper
}

function isSelected(index: number) {
  return selectedIndex.value === index ? 'selected-border' : ''
}
</script>

<template>
  <div class="mr-50px">
    <div class="flex">
      <div class="vertical-swiper mr-40px h-600px w-165px">
        <Swiper
          v-if="data?.goodsImgOrVideoList && data?.goodsImgOrVideoList.length"
          direction="vertical"
          :modules="modules"
          :slides-per-view="3"
          :space-between="50"
          :navigation="true"
          :mousewheel="{
            enabled: false,
          }"
          :style="{ height: `${600}px` }"
          @swiper="onVerticalSwiper"
          @slide-change="onSlideChange"
        >
          <SwiperSlide
            v-for="(item, index) in data?.goodsImgOrVideoList"
            :key="index"
            @click="syncHorizontalSwiper(index)"
          >
            <img :src="item" class="w-165px h-165px object-cover cursor-pointer b-rd-10px" :class="[isSelected(index)]" alt="" srcset="">
          </SwiperSlide>
        </Swiper>
      </div>
      <div class="h-swiper w-600px h-600px">
        <Swiper
          v-if="data?.goodsImgOrVideoList && data?.goodsImgOrVideoList.length"
          :modules="modules"
          :navigation="true"
          :style="{ height: `${600}px` }"
          @slide-change="onSlideChange"
          @swiper="onHorizontalSwiper"
        >
          <SwiperSlide v-for="item, index in data?.goodsImgOrVideoList" :key="index">
            <img :src="item" class="w-full h-full object-cover b-rd-10px" alt="" srcset="">
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.selected-border {
  border: 2px solid #c58c64;
}
.vertical-swiper {
  :deep(.swiper-button-prev) {
    transform: rotate(90deg) translateY(25%);
    top: 4% !important;
    left: 50% !important;
    &:after {
      content: url('@/assets/icons/swiperLeft.svg');
    }
  }

  :deep(.swiper-button-next) {
    transform: rotate(90deg) translateY(25%);
    top: 94% !important;
    left: 50% !important;
    &:after {
      content: url('@/assets/icons/swiperRight.svg');
    }
  }
}
.h-swiper {
  :deep(.swiper-button-prev) {
    left: 16px!important;
    &:after {
      content: url('@/assets/icons/swiperLeft.svg');
    }
  }

  :deep(.swiper-button-next) {
     right: 16px!important;
    &:after {
      content: url('@/assets/icons/swiperRight.svg');
    }
  }
}
</style>