pc_shop_site/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 "
        v-show="!btnCurrent"
      >
        <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>
      <template v-if="pageData.template.length">
        <!-- <bxh
          v-show="btnCurrent"
          :link="pageData.template[current3D].link"
          :bxhType="'3D'"
          :height="'578px'"
          :key="current3D"
        ></bxh> -->
        <!-- 放大&3D按钮切换 -->
        <section class="switch-wrap" v-show="btnShow">
          <!-- <div class="switch-btn" v-show="btnCurrent">
            <span
              class="primary_button"
              @click="goDesign(pageData.template[current3D].template_id, pageData.template[current3D].link)"
              >Custom Design</span>
          </div> -->
          <div class="switch-btn">
            <span
              class="primary_button"
              :class="btnCurrent == index ? 'primary_checked' : ''"
              @click="handleSwitch(index)"
              v-for="(item, index) of btnObj"
              :key="index"
              >{{ item }}</span
            >
          </div>
        </section>
      </template>
    </div>
    <div class="smImgUl" v-show="!btnCurrent">
      <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 && !btnCurrent">
          <video width="100%" height="100%" :src="comInfo.video" />
          <div class="playMask">
            <img src="@/assets/img/play.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
    <!-- 包小盒3D图列表 -->
    <div class="smImgUl" v-show="btnCurrent">
      <ul>
        <li
          @click="selectCurrent3D(index)"
          :class="current3D == index ? 'slip' : ''"
          v-for="(item, index) of pageData.template"
          :key="index"
          class="banner"
          :style="{ backgroundImage: 'url(' + item.image + ')' }"
        ></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"],
      btnCurrent: 0, // 0 预览图，1 3D图
      // currentPre: 0, // 预览图序号
      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' }),
    handleSwitch(val) {
      this.btnCurrent = val;
    },
    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;
    },
    goDesign(template_id, goods_id) {
      this.$axios
        .get("/bxh/design", { params: { template_id, goods_id } })
        .then((res) => {
          const { href } = this.$router.resolve({
            name: "design-id",
            params: { id: res.result },
          });
          window.open(href, "_black");
        });
    },
    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>