foster-pc-vue/src/views/home/album_compoents/albumCarouselItem.vue

<template>
  <div class="carousel-container">
    <!-- 图片列表 -->
    <div class="carousel-wrapper"  :style="carouselStyle">
      <photo-provider v-if="images" :photo-closable="true" @visibleChange="handleVisibleChange">
        <template  v-for="(photo, index) in images"
                   :key="photo.id">
          <album-draw-box  :farmId="farmId" :photo="photo" :name="name" :current="currentIndex" :index="index" :length="images.length"
          ></album-draw-box>
        </template>
      </photo-provider>
    </div>
    <div class="blur-bg" v-if="lock && currentIndex !== 0">
      <div class="blur-content">
        <div class="blur-img">
          <img src="@/assets/img/gallery/camera-icon.png" />
        </div>
      </div>
    </div>

    <!-- 左右箭头 -->
    <div @click.stop="prev" v-if="currentIndex !== 0" class="arrow left-arrow">
      <el-icon color="#F0D09C"><ArrowLeftBold /></el-icon>
    </div>
    <div
      @click.stop="next"
      v-if="images && currentIndex !== images.length - 1"
      class="arrow right-arrow"
    >
      <el-icon color="#F0D09C"><ArrowRightBold /></el-icon>
    </div>
  </div>
</template>

<script setup>
import eventBus from "@/api/eventBus";
import { toRefs, ref, computed, onMounted, onUnmounted } from "vue";
import AlbumDrawBox from "./albumDrawBox";
import "./cacheImg.js"
const props =defineProps({
  images:{
    type: Array,
    required: true
  },
  farmId:{
    type: [Number,String],
    required: true
  },
  lock:{
    type: Boolean,
    default: true
  },
  name:{
    type: String,
    default: ""
  }
})
const {images} = toRefs(props);
let timer = null;
const currentIndex = ref(0);

onMounted(() => {
  updateImagePosition();
  clearAndRestartTimer();
  eventBus.on("resetImgIndex", resetImgIndex)
  eventBus.on("resetImgIndex", resetImgIndex)
});
onUnmounted(() => {
  clearInterval(timer);
  eventBus.off("resetImgIndex", resetImgIndex)
});

const updateImagePosition = () => {
  carouselStyle.value.transform = `translateX(-${currentIndex.value * 100}%)`;
};

const clickPhotoShow = () => {
  if (timer) {
    clearInterval(timer)
  };
}

// 图片显隐切换回调
const handleVisibleChange = ({visible}) => {
  if (visible.value) {
    if (timer) {
      clearInterval(timer)
    }
  } else {
    clearAndRestartTimer();
  }
}

// 计算轮播图样式
const carouselStyle = computed(() => {
  return {
    transform: `translateX(-${currentIndex.value * 100}%)`,
  };
});

// 下一张图片
const next = () => {
  // 图片总数
  const totalImages = images.value.length;
  currentIndex.value = (currentIndex.value + 1) % totalImages;
  updateImagePosition();
  clearAndRestartTimer();
  eventBus.emit("albumCarousel", currentIndex.value)
};

// 上一张图片
const prev = () => {
  // 图片总数
  const totalImages = images.value.length;
  currentIndex.value = (currentIndex.value - 1 + totalImages) % totalImages;
  updateImagePosition();
  clearAndRestartTimer();
  eventBus.emit("albumCarousel", currentIndex.value)
};

const clearAndRestartTimer = () => {
  if (timer) {
    clearInterval(timer);
  }
  // timer = setInterval(next, 5000);
};

function resetImgIndex() {
  setTimeout(() => {
    currentIndex.value = 0
  }, 500)
}

</script>

<style lang="scss" scoped>
@import "src/styles/index";
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  .carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
  }
  .blur-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1.4px);
    .blur-content {
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #fff;
      .blur-img {
        img {
          width: 54px;
          position: relative;
          left: 4px;
          top: 4px;
        }
      }
      .blur-text {
        padding: 8px 0;
        text-align: center;
        line-height: 1.5;
      }
      .blur-btn {
        padding: 0 40px;
        box-shadow: 0 -2px 2px #86C9FF;
        height: 28px;
        line-height: 28px;
        border-radius: 50px;
        background: rgba(33, 153, 248, 0.7);
        // background: linear-gradient(#86C9FF, rgba(255, 255, 255, 0));
      }
    }
  }

  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    width: rpx(72);
    height: rpx(72);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
  }

  .left-arrow {
    left: rpx(32);
  }

  .right-arrow {
    right: rpx(32);
  }
}
</style>