feiniao-farm-h5/src/views/old_mini/interactionList/components/examplePopup.vue

<template>
    <popup v-model:show="localShow" class="example-popup" :overlay-style="{ backdropFilter: 'blur(4px)' }">
        <div class="example-content">
            <div class="example-swipe-wrap">
                <Swipe
                    ref="exampleSwipeRef"
                    :show-indicators="false"
                    v-model="activeIndex"
                    :autoplay="0"
                    indicator-color="#2199F8"
                >
                    <SwipeItem v-for="img in images" :key="img">
                        <div class="img-tag">{{ title }}</div>
                        <img class="example-img" :src="img" alt="" />
                    </SwipeItem>
                </Swipe>

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

            <div class="example-tips">
                {{ tips }}
            </div>
        </div>
    </popup>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { Popup, Swipe, SwipeItem } from "vant";

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    images: {
        type: Array,
        default: () => [],
    },
    startIndex: {
        type: Number,
        default: 0,
    },
    title: {
        type: String,
        default: "示例图",
    },
    tips: {
        type: String,
        default: "拍摄要求：请采集代表农场作物物候期的照片，请采集代表农场作物物候期的照片。",
    },
});

const emit = defineEmits(["update:show"]);

const exampleSwipeRef = ref(null);
const activeIndex = ref(0);

// v-model:show 双向绑定
const localShow = computed({
    get: () => props.show,
    set: (val) => emit("update:show", val),
});

// 当打开弹窗或 startIndex 变化时，设置当前索引
watch(
    () => [props.show, props.startIndex],
    ([show, start]) => {
        if (show) {
            activeIndex.value = start || 0;
            if (exampleSwipeRef.value) {
                exampleSwipeRef.value.swipeTo(activeIndex.value);
            }
        }
    }
);

const prevExample = () => {
    if (!props.images.length) return;
    activeIndex.value = (activeIndex.value - 1 + props.images.length) % props.images.length;
    exampleSwipeRef.value && exampleSwipeRef.value.swipeTo(activeIndex.value);
};

const nextExample = () => {
    if (!props.images.length) return;
    activeIndex.value = (activeIndex.value + 1) % props.images.length;
    exampleSwipeRef.value && exampleSwipeRef.value.swipeTo(activeIndex.value);
};
</script>

<style scoped lang="scss">
.example-popup {
    width: 100%;
    border-radius: 0;
    background: none;
    max-width: 100%;

    .example-content {
        text-align: center;

        .example-swipe-wrap {
            position: relative;
        }

        .example-img {
            width: 100%;
        }

        .img-tag {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 10px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 0 0 10px 0;
            z-index: 2;
        }

        .example-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }

        .arrow-left {
            left: 8px;
        }

        .arrow-right {
            right: 8px;
        }
    }

    .example-tips {
        margin: 16px 12px 6px 12px;
        background: #3d3d3d;
        padding: 8px 10px;
        border-radius: 4px;
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 14px;
        line-height: 21px;
        text-align: left;
    }
}
</style>