feiniao-farm-h5/src/components/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">
                <!-- <photo-consumer
                    class="carousel-img"
                    v-for="(photo, index) in images"
                    :key="photo.id"
                    :src="base_img_url2 + (photo.cloudFilename ? photo.cloudFilename : photo)"
                >
                    <img
                        :index="index"
                        :src="base_img_url2 + (photo.cloudFilename ? photo.cloudFilename : photo)"
                        alt=""
                    />
                </photo-consumer> -->
                <template  v-for="(photo, index) in images"
                   :key="photo.id">
                    <album-draw-box :isShowNum="0" :farmId="766" :photo="photo" :current="currentIndex" :index="index" :length="images.length"
                    ></album-draw-box>
                    </template>
            </photo-provider>
        </div>
        <div class="label-text" v-if="labelText">{{ labelText }}</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 { toRefs, ref, computed, onMounted, onUnmounted } from "vue";
import AlbumDrawBox from "./albumDrawBox.vue";
import { base_img_url2 } from "@/api/config";
import "./cacheImg.js";
const props = defineProps({
    images: {
        type: Array,
        required: true,
    },
    labelText: {
        type: String,
        default: "",
    },
});
const { images, labelText } = toRefs(props);
let timer = null;
const currentIndex = ref(0);

onMounted(() => {
    updateImagePosition();
    clearAndRestartTimer();
});
onUnmounted(() => {
    clearInterval(timer);
});

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();
};

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

const clearAndRestartTimer = () => {
    if (timer) {
        clearInterval(timer);
    }
    // timer = setInterval(next, 5000);
};
</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%;
        .carousel-img {
            min-width: 100%;
            img {
                min-width: 100%;
                height: 255px;
                object-fit: cover;
            }
        }
    }
    .label-text {
        position: absolute;
        top: 0;
        left: 0;
        padding: 4px 10px;
        background: rgba(54, 52, 52, 0.8);
        color: #fff;
        font-size: 12px;
        border-radius: 8px 0 8px 0;
        z-index: 1;
    }
    .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>