uk_front/components/product/ProductLeft.vue

<template>
  <div class="product-left">
    <div class="media">
      <div
        class="big"
        v-show="bigShow">
        <img
          :src="
            $utils.generateResizedImageUrl(
              comInfo.mergeImages[currentPre],
              1800
            )
          "
          alt=""
          ref="big" />
      </div>
      <el-carousel
        :interval="5000"
        arrow="always"
        height="578px"
        indicator-position="none"
        :autoplay="false"
        ref="carousel"
        @change="changeCarousel">
        <el-carousel-item
          v-for="item in comInfo.mergeImages"
          :key="item">
          <!-- <div class="banner" :style="{backgroundImage: 'url(' + item + ')'}"></div> -->
          <zoom
            :imgUrl="
              $utils.generateResizedImageUrl(
                comInfo.mergeImages[currentPre],
                1800
              )
            "
            @sendStyle="getStyle"
            @handleViwer="handleViwer"></zoom>
        </el-carousel-item>
        <el-carousel-item v-if="comInfo.video">
          <video
            controls
            width="100%"
            height="100%"
            ref="video">
            <source :src="comInfo.video" />
            Your browser does not support the video tag.
          </video>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="smImgUl">
      <ul>
        <li
          @click="changeCarousel(index)"
          :class="currentPre == index ? 'slip' : ''"
          v-for="(item, index) of comInfo.mergeImages"
          :key="index"
          class="banner">
          <el-image
            :src="$utils.generateResizedImageUrl(item, 100)"
            class="card-img-1"
            fit="cover"
            style="width: 100%; height: 100%"></el-image>
        </li>
        <li
          @click="changeCarousel(comInfo.mergeImages?.length)"
          :class="currentPre == comInfo.mergeImages?.length ? 'slip' : ''"
          v-if="comInfo.video">
          <video
            width="100%"
            height="100%"
            :src="comInfo.video" />
          <div class="playMask">
            <img
              src="@/assets/img/play.png"
              alt="" />
          </div>
        </li>
      </ul>
    </div>

    <ElImageViewer
      v-if="showViewer"
      :initial-index="currentPre"
      :on-close="closeViewer"
      :url-list="comS3Img" />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import Zoom from '@/components/Zoom'

export default {
  components: { Zoom, ElImageViewer },
  props: {
    pageData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      indexBanner: [],
      btnObj: ['View larger', '3D Preview'],
      current3D: 0, // 3D图序号
      btnShow: true, // 所有按钮显示
      bigShow: false,
      showViewer: false,
    }
  },
  computed: {
    currentPre() {
      return this.$store.state.product.smImgUlIdx
    },
    comInfo() {
      const { main } = this.pageData
      const images = main.image_color.map(i => i.image)

      if (main.image) {
        images.unshift(main.image)
      }

      main.mergeImages = images
      return main
    },

    comS3Img() {
      return this.comInfo.mergeImages.map(url => this.$utils.repaceDomain(url))
    },
  },
  watch: {
    currentPre(newVal) {
      this.$refs.carousel.setActiveItem(newVal)
    },
  },
  mounted() {
    if (this.comInfo.video) {
      this.$refs.video.volume = 0.5
    }
  },
  methods: {
    ...mapMutations({ setSmImgUlIdx: 'product/setSmImgUlIdx' }),
    changeCarousel(val) {
      this.setSmImgUlIdx(val)
      if (val === this.comInfo.mergeImages?.length) {
        this.btnShow = false
        this.comInfo.video && this.$refs.video.play()
      } else {
        this.btnShow = true
        this.comInfo.video && this.$refs.video.pause()
      }
    },
    selectCurrent3D(val) {
      this.current3D = val
    },
    getStyle(val) {
      const bigImg = this.$refs.big
      bigImg.style.left = -2 * val.left + 'px'
      bigImg.style.top = -2 * val.top + 'px'
      this.bigShow = val.bigShow
    },
    closeViewer() {
      this.showViewer = false
    },
    handleViwer() {
      this.showViewer = true
    },
  },
}
</script>

<style lang="scss" scoped>
.product-left {
  padding-right: 20px;
  .media {
    border: 1px solid rgba(74, 89, 108, 0.2);
    position: relative;
    width: 578px;
    height: 578px;
    .banner {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    video {
      object-fit: contain;
    }
    .design_list_img {
      padding: 10px;
      // display: flex;
      // flex-wrap: wrap;
      // justify-content:space-around;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      li {
        cursor: pointer;
        // width: 192px;
        // height:192px;
      }
    }
    .switch-wrap {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translate(-50%, 0);
      z-index: 2;
      font-family: ProximaNova-Regular;
    }
    .switch-btn {
      text-align: center;
      &:nth-child(1) {
        margin-bottom: 20px;
      }
      .primary_button {
        display: inline-block;
        cursor: pointer;
        width: 140px;
        background: rgba(255, 255, 255);
        box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
        padding: 10px 0;
        color: #00213b;
        transition: all 0.2s ease-out 0s;
      }
      .primary_checked {
        background: #00213b !important;
        color: #fff !important;
      }
    }
  }
  .smImgUl {
    ul {
      margin-top: 10px;
      display: inline-grid;
      grid-template-columns: repeat(8, 68px);
      gap: 5px;
      li {
        box-sizing: border-box;
        border: 1px solid #eee;
        cursor: pointer;
        width: 100%;
        height: 68px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
      }
      .slip {
        border-color: #4a596c !important;
      }
      .playMask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.big {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -1px;
  left: 100%;
  border: 1px solid rgba(74, 89, 108, 0.2);
  overflow: hidden;
  z-index: 3;
  //   display: block;
  background: white;
  // box-sizing: border-box;
  img {
    width: 200%;
    max-width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
  }
}
</style>