131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
<template>
|
|
<div class="adv_swiper">
|
|
<div class="adv-container" v-if="props.list.length > 0">
|
|
<van-swipe ref="swipeRef" :show-indicators="false" :autoplay="autoTime" class="custom-swipe" @change="onChange">
|
|
<van-swipe-item
|
|
@click="handleJumpAdv(item, props.clickType)"
|
|
v-for="item in props.list"
|
|
:key="item.id"
|
|
:style="{ height: props.height }"
|
|
class="adv-swiper-slide"
|
|
>
|
|
<DecryptImg @load="load" :src="item.cover" />
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
<!-- 自定义指示器 -->
|
|
<div class="indicator-wrapper" v-if="isShowIndicators">
|
|
<div class="custom-indicators">
|
|
<div
|
|
v-for="(_, index) in props.list"
|
|
:key="index"
|
|
:class="['indicator-dot', { active: currentIndex === index }]"
|
|
@click="swipeRef?.swipeTo(index)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { jumpAdv } from '@/utils/index';
|
|
import { ref } from 'vue';
|
|
import type { SwipeInstance } from 'vant';
|
|
|
|
const emit = defineEmits(['load']);
|
|
const swipeRef = ref<SwipeInstance>();
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
list: Types.App.AdsInfoListItem[];
|
|
height?: string;
|
|
isShowIndicators?: boolean;
|
|
clickType?: 'ads' | 'recreation';
|
|
autoTime: number;
|
|
}>(),
|
|
{
|
|
list: () => [],
|
|
height: '156px',
|
|
isShowIndicators: true,
|
|
clickType: 'ads',
|
|
autoTime: 5000,
|
|
},
|
|
);
|
|
|
|
const currentIndex = ref(0);
|
|
|
|
const onChange = (index: number) => {
|
|
currentIndex.value = index;
|
|
};
|
|
|
|
const load = () => {
|
|
emit('load');
|
|
};
|
|
const handleJumpAdv = (item: Types.App.AdsInfoListItem, clickType?: 'ads' | 'recreation') => {
|
|
jumpAdv(item, clickType);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.adv_swiper {
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
.adv-container {
|
|
width: 100%;
|
|
position: relative;
|
|
height: 100%;
|
|
.custom-swipe {
|
|
height: 100%;
|
|
.adv-swiper-slide {
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
:deep(img) {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
.indicator-wrapper {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40px;
|
|
pointer-events: none;
|
|
z-index: 99;
|
|
|
|
.custom-indicators {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 12px;
|
|
display: flex;
|
|
gap: 4px;
|
|
pointer-events: auto;
|
|
|
|
.indicator-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border-radius: 50%;
|
|
transition: all 0.3s;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
width: 17px;
|
|
background: #3476ff;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|