YuHuaTai-Pc/vue/src/views/Goods/components/Img.vue

<template>
  <div class="Img">
    <div class="txt">
      <h3>{{ info.name }}</h3>
      <p v-show="info.age">年代：{{ info.age }}</p>
      <p v-show="info.sort">类别：{{ info.sort }}</p>
      <p v-show="info.size">尺寸：<span v-html="info.size"></span></p>
      <p v-show="info.grain">质地：{{ info.grain }}</p>
      <p v-show="info.estate">级别：{{ info.estate }}</p>
    </div>
    <div class="close" @click="$emit('close')"></div>
    <viewer class="viewerCla" ref="viewer" :images="lookPics">
      <img :src="lookPics[0]" alt="" />
    </viewer>
    <template v-if="info.imgNum>1">
      <div class="imgMain">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="i in info.imgNum" :key="i"
              @click="lookImg(`goodsData/2D/${info.bs} (${i}).jpg`)">
              <img v-lazy="`goodsData/2D/${info.bs} (${i}).jpg`" alt="" />
            </div>
          </div>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
      <div class="swiper-pagination"></div>
    </template>
    <div class="imgMain2" v-else>
      <img v-lazy="`goodsData/2D/${info.bs}.jpg`" alt="" @click="lookImg(`goodsData/2D/${info.bs}.jpg`)" />
    </div>
  </div>
</template>

<script>
import Swiper from "@/assets/Swiper/swiper.js";
export default {
  name: "Img",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    info: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    //这里存放数据
    return {
      lookPics: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击查看大图
    lookImg(url) {
      let dom = this.$refs.viewer.$viewer;
      this.lookPics = [url];
      dom.show();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.info.imgNum) {
      new Swiper(".swiper-container", {
        slidesPerView: 1,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
      });
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
@import "../../../assets/Swiper/swiper.css";

.viewerCla img {
  display: none;
}

.Img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/img/Goods/GoodsBac.png");
  background-size: 100% 100%;

  .swiper-pagination {
    width: 100%;
    bottom: 40px;
  }

  /deep/.swiper-pagination-bullet {
    margin: 0 4px;
    background-color: #930909;
  }

  .txt {
    position: absolute;
    top: 44px;
    left: 40px;
    width: 300px;

    h3 {
      font-size: 20px;
      color: #930909;
      line-height: 28px;
    }

    p {
      font-size: 16px;
      color: #666666;
      margin: 15px 0;
    }
  }

  .close {
    position: absolute;
    width: 60px;
    height: 60px;
    cursor: pointer;
    top: 44px;
    right: 40px;
    background-image: url("../../../assets/img/Goods/close2.png");
    background-size: 100% 100%;
  }

  .imgMain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px;
    height: 600px;

    .swiper-button-next {
      outline: none;
      width: 40px;
      height: 60px;
      background-image: url("../../../assets/img/Goods/right.png");
      background-size: 100% 100%;
      color: transparent;
    }

    .swiper-button-prev {
      outline: none;
      width: 40px;
      height: 60px;
      background-image: url("../../../assets/img/Goods/left.png");
      background-size: 100% 100%;
      color: transparent;
    }
  }

  .imgMain2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px;
    height: 600px;
    text-align: center;

    &>img {
      cursor: pointer;
      width: 900px;
      height: 600px;
      object-fit: contain;
    }
  }

  .swiper-container {
    width: 900px;
    height: 600px;
    margin: 0 auto;

    .swiper-slide {
      width: 900px;
      height: 600px;

      &>img {
        cursor: pointer;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
</style>