hemall.terabimsoft.com.cn/plugins/shop_server/components/default/prodViewImages.vue

<!-- 商品图片组件 -->

<template>
  <div class="products-pic-panel">
    <div class="products-pic-all-box" id="PicZoom">
      <div class="products-pic-show-box" id="BigPic">
        <div class="middle-box" :style="{width: `${boxWidth}px`, height: `${boxHeight}px`}" @mouseenter="isShow = true" @mouseleave="isShow = false" @mousemove="move($event)">
          <div class="play" @click="openvideo" v-show="!hide_img && video">
            <img src="~/assets/images/icon/play.png">
          </div>
          <div class="video" v-show="hide_img">
            <video controls ref="myvideo" @ended="stop()">
              <source :src="video" />
            </video>
          </div>
          <img :src="popThumb || middleImage[curIndex]" :alt="middleImage[curIndex]" v-show="!hide_img">
          <div class="move" :style="{width: `${this.glassWidth}px`,height: `${this.glassHeight}px`,top: `${this.glassTop}px`,left: `${this.glassLeft}px`}" v-show="isShow&&!hide_img"></div>
        </div>
      </div>
      <div class="products-pic-small-box">
        <span id="products-pic-pre" v-if="smallImage.length>3" @click="goPre"></span>
        <span id="products-pic-next" v-if="smallImage.length>3" @click="goNext"></span>
        <div id="SmallPicList" class="products-pic-list-box" style="width:80%;">
          <ul :style="{width: `${this.ulWidth}px`,marginLeft: `${this.ulMarginLeft}px`}">
            <li v-for="(image,index) in smallImage" :key="index" :class="{picCur: curIndex == index}" @mouseenter="closeVideo(index)">
              <img :src="image" :alt="image">
            </li>
          </ul>
        </div>
      </div>
      <div class="b_box" v-if="isShow">
        <img :src="popThumb || bigImage[curIndex]" :style="{left: `${bigLeft}px`, top: `${bigTop}px`,width: `${this.bigWidth}px`,height: `${this.bigHeight}px`}">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "ProdViewImages",
  props: {
    video: String,
    bigImage: Array,
    middleImage: Array,
    smallImage: Array,
    popThumb: String
  },
  data() {
    return {
      hide_img: false,
      next_length: 3,
      //当前选中商品
      curIndex: 0,
      //是否显示大图
      isShow: false,

      //显示盒子的宽度和高度
      boxWidth: 400,
      boxHeight: 400,

      //显示盒子相对于浏览器窗口的偏移
      boxOffsetLeft: 0,
      boxOffsetTop: 0,

      //放大镜的宽度和高度
      glassWidth: 100,
      glassHeight: 100,

      //放大镜的位置
      glassLeft: 0,
      glassTop: 0,

      //大图的宽度和高度
      bigWidth: 1000,
      bigHeight: 1000,

      //大图的位置
      bigLeft: 0,
      bigTop: 0,

      //小图列表盒子的宽度
      SmallPicListWidth: 400,
      //小图列表li的宽度(加外边距)
      liOuterWidth: 110,

      //小图列表ul宽度
      ulWidth: 460,

      //小图列表ul的marginleft
      ulMarginLeft: 0
    };
  },
  //初始化
  mounted() {
    this.$nextTick(() => {
      //显示盒子到浏览器窗口最左端的距离
      this.boxOffsetLeft = this.getElementLeft(
        document.querySelector(".middle-box")
      );

      //显示盒子到浏览器窗口最顶部的距离
      this.boxOffsetTop = this.getElementTop(
        document.querySelector(".middle-box")
      );
      //小图列表ul宽度
      if (this.smallImage.length > 3) {
        this.ulWidth = this.liOuterWidth * this.smallImage.length - 20;
      }
    });
  },

  methods: {
    stop() {
      this.hide_img = false;
    },
    closeVideo(index) {
      this.curIndex = index;
      this.hide_img = false;
      this.$emit('removePopThumb')
    },
    openvideo() {
      if (this.video) {
        this.hide_img = true;
        let myvideo = this.$refs.myvideo;
        myvideo.play();
      }
    },
    //放大镜移动
    move(event) {
      //计算放大镜的位置
      //位置= 鼠标指针位置 - 显示盒子在浏览器上的偏移 - 放大镜宽高的一半
      this.glassLeft = event.pageX - this.boxOffsetLeft - this.glassWidth / 2;
      this.glassTop = event.pageY - this.boxOffsetTop - this.glassHeight / 2;

      //放大镜在水平方向上的最大距离
      var maxLeft = this.boxWidth - this.glassWidth;

      //放大镜在竖直方向上移动的最大距离
      var maxTop = this.boxHeight - this.glassHeight;

      //限制放大镜在水平方向的距离
      if (this.glassLeft < 0) {
        this.glassLeft = 0;
      } else if (this.glassLeft > maxLeft) {
        this.glassLeft = maxLeft;
      }

      //限制放大镜在竖直方向上的范围
      if (this.glassTop < 0) {
        this.glassTop = 0;
      } else if (this.glassTop > maxTop) {
        this.glassTop = maxTop;
      }

      //计算大图的移动位置
      this.bigLeft =
        -(this.glassLeft / maxLeft) * (this.bigWidth - this.boxWidth);
      this.bigTop =
        -(this.glassTop / maxTop) * (this.bigHeight - this.boxHeight);
    },
    //元素最左端到网页最左端的距离
    getElementLeft(element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;
      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }
      return actualLeft;
    },
    //元素最顶端到网页最顶端的距离
    getElementTop(element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      return actualTop;
    },
    //下一个点击按钮
    goNext() {
      this.ulMarginLeft = -this.liOuterWidth + this.ulMarginLeft;
    },
    //上一个点击按钮
    goPre() {
      if (this.ulMarginLeft > -this.liOuterWidth) {
        this.ulMarginLeft = 0;
        return;
      } else {
        this.ulMarginLeft = this.ulMarginLeft + this.liOuterWidth;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.middle-box {
  position: relative;
  .play {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    cursor: pointer;
  }
  .video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
.products-pic-panel {
  width: 100%;
  height: 100%;
}

.products-pic-all-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.products-pic-show-box {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.products-pic-show-box img {
  width: 100%;
  height: 100%;
}

.move {
  position: absolute;
  background: #fff;
  z-index: 99;
  filter: alpha(opacity=40);
  opacity: 0.4;
  cursor: move;
}

.b_box {
  position: absolute;
  top: 0;
  left: 410px;
  width: 400px;
  height: 400px;
  overflow: hidden;
  background: #fff;
  z-index: 9;
}

.b_box img {
  position: absolute;
  top: 0;
  left: 0;
}

.products-pic-small-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.products-pic-list-box {
  overflow: hidden;
  width: 460px;
  height: 102px;
  margin: 0 auto;
}

.products-pic-list-box ul {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.products-pic-list-box ul li {
  float: left;
  overflow: hidden;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background: #f2f2f2;
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
}

.products-pic-list-box ul li:last-child {
  margin-right: 0;
}

.products-pic-list-box ul li.picCur {
  border: 1px solid var(--color);
}

.products-pic-list-box ul li img {
  width: 100%;
  height: 100%;
}

span#products-pic-pre {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 100px;
  cursor: pointer;
  background: #f2f2f2 url(../../assets/images/index/banner-btn-pre.png) center
    center no-repeat;
}

span#products-pic-next {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 20px;
  height: 100px;
  cursor: pointer;
  background: #f2f2f2 url(../../assets/images/index/banner-btn-next.png) center
    center no-repeat;
}

span#products-pic-pre:hover {
  background: #f2f2f2 url(../../assets/images/products/banner-btn-pre-cur.png)
    center center no-repeat;
}

span#products-pic-next:hover {
  background: #f2f2f2 url(../../assets/images/products/banner-btn-next-cur.png)
    center center no-repeat;
}
</style>