fanghuayuexuan/pages/home/components/home-play.vue

<!--
 * @Author: jmy
 * @Date: 2026-01-06 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-06 15:02:20
 * @Description: 自定义轮播图组件
-->
<template>
    <view class="w-all relative zi-2" :style="{ height: height * 2 + 30 + 'rpx', }">
        <swiper class="w-all  mt-5 rounded-8 overflow-hidden" :style="{ height: height * 2 + 'rpx', }"
            :circular="circular" :class="isDotStyle ? 'dotStyle' : ''" :indicator-dots="indicatorDots"
            indicator-active-color="#02B176 " indicator-color="#EEEEEE" :autoplay="autoplay" :interval="interval"
            :duration="duration" :current="current" :display-multiple-items='displayMultipleItems'
            :next-margin="nextMargin" @change="change" @transition="transition" @animationfinish="animationfinish">
            <swiper-item class="flex flex-wrap h-all w-all bg-light relative" v-for="(item, index) in swiperList"
                :key="index">
                <image src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422"
                    class="w-all h-all" />

                <view class="flex items-center h-30 fw-400 fs-10 rounded-6 overflow-hidden absolute top-8 left-8">
                    <view class="h-all left-box text-white px-4 lh-30">预约中</view>
                    <view class="h-all px-4 text-white bg-000000 opacity-6 lh-30">1800人已预约</view>
                </view>
            </swiper-item>
        </swiper>
        <view class="flex items-center justify-center w-all gap-1 mt-11">
            <view v-for="(item, index) in swiperList" :key="index" class="w-10 h-2  rounded-1"
                :class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        swiperList: {
            type: Array,
            default: () => []
        },
        // 轮播图高度px
        height: {
            type: Number,
            default: 202
        },
        // 是否显示指示器
        indicatorDots: {
            type: Boolean,
            default: false
        },
        // 是否循环播放
        circular: {
            type: Boolean,
            default: true
        },
        // 是否自动切换
        autoplay: {
            type: Boolean,
            default: false
        },
        // 自动切换时间间隔
        interval: {
            type: Number,
            default: 3000
        },
        // 切换动画时长
        duration: {
            type: Number,
            default: 1000
        },
        // 显示多个项
        displayMultipleItems: {
            type: Number,
            default: 1
        },
        // 下一个项的外边距
        nextMargin: {
            type: String,
            default: '0'
        },

        // 当前滑块显示项的索引
        current: {
            type: Number,
            default: 0
        },
    },
    data() {
        return {
            currentDot: 0,
        }
    },
    methods: {
        // current 改变时会触发 change 事件
        change(e) {
            this.$emit('change', e.detail.current)
        },
        // 	swiper-item 的位置发生改变时会触发
        transition(e) {
            // console.log('transition:', e.detail)
            this.$emit('transition', e.detail.current)
        },
        // 	swiper-item 的位置发生改变并且动画结束时会触发
        animationfinish(e) {
            this.$emit('animationfinish', e.detail.current)
        },
        // 导航到对应页面
        handleNavTo(value) {
            // 根据实际需求实现导航逻辑
            console.log('导航到:', value)
        }
    }
}
</script>
<style lang="scss" scoped>
.left-box {
    background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
}
</style>