142 lines
3.5 KiB
Vue
142 lines
3.5 KiB
Vue
<template>
|
|
<div
|
|
class="adv_swiper"
|
|
:class="showTitle ? 'showTitleBox' : ''"
|
|
v-if="props.list.length > 0"
|
|
@touchstart.stop
|
|
@touchmove.stop
|
|
@touchend.stop
|
|
ref="advRef"
|
|
>
|
|
<div class="adv-container">
|
|
<van-swipe
|
|
class="my-swipe"
|
|
:show-indicators="isShowIndicators"
|
|
:indicator-color="indicatorColor"
|
|
:autoplay="2000"
|
|
:key="props.swiperKey"
|
|
>
|
|
<van-swipe-item
|
|
@click="handleJumpAdv(item, props.clickType)"
|
|
v-for="item in props.list"
|
|
:key="item.id"
|
|
class="adv-swiper-slide"
|
|
>
|
|
<lazyImg :src="item.cover" class="cover" />
|
|
<div class="advTitle ellipsis2" v-if="showTitle">{{ item.title }}</div>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { jumpAdv } from '@/utils/index';
|
|
import { nextTick, ref, watch } from 'vue';
|
|
import { AdImpressionType, setAdImpression } from '@/utils/eventReporter/adImpression';
|
|
import { useRoute } from 'vue-router';
|
|
import { reportAdClickEvent } from '@/utils/eventReporter/adClick';
|
|
|
|
const route = useRoute();
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
list: Types.App.AdsInfoListItem[];
|
|
height?: string;
|
|
isShowIndicators?: boolean;
|
|
clickType?: 'ads' | 'recreation';
|
|
indicatorColor?: string;
|
|
showTitle?: boolean;
|
|
swiperKey?: string;
|
|
adImpression?: AdImpressionType;
|
|
}>(),
|
|
{
|
|
list: () => [],
|
|
isShowIndicators: true,
|
|
clickType: 'ads',
|
|
indicatorColor: '#fff',
|
|
showTitle: () => true,
|
|
swiperKey: '',
|
|
},
|
|
);
|
|
// 广告展示埋点
|
|
const advRef = ref();
|
|
watch(
|
|
() => props.list,
|
|
() => {
|
|
if (props.list.length) {
|
|
nextTick(() => {
|
|
setAdImpression(advRef.value, props.list, {
|
|
page_key: props.adImpression?.page_key || (route.meta.pageKey as string) || '',
|
|
page_name: props.adImpression?.page_name || (route.meta.pageName as string) || '',
|
|
ad_type: props.adImpression?.ad_type || 'horizontal_cover',
|
|
}).setupObserver();
|
|
});
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
const handleJumpAdv = (item: Types.App.AdsInfoListItem, clickType?: 'ads' | 'recreation') => {
|
|
let params = {
|
|
...item,
|
|
page_key: props.adImpression?.page_key || (route.meta.pageKey as string) || '',
|
|
page_name: props.adImpression?.page_name || (route.meta.pageName as string) || '',
|
|
ad_type: props.adImpression?.ad_type || 'horizontal_cover',
|
|
};
|
|
reportAdClickEvent(params);
|
|
jumpAdv(item, clickType);
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.van-swipe__indicator--active) {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
padding-right: 12px;
|
|
}
|
|
.adv_swiper {
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
.adv-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
:deep(.van-swipe__track) {
|
|
width: 100% !important;
|
|
}
|
|
.adv-swiper-slide {
|
|
width: 100% !important;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
.cover {
|
|
height: 96px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.advTitle {
|
|
color: #fff;
|
|
padding: 4px 0;
|
|
font-size: 12px;
|
|
letter-spacing: 0.24px;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.van-swipe__indicator) {
|
|
width: 2px;
|
|
height: 2px;
|
|
border: none;
|
|
background-color: #fff;
|
|
}
|
|
:deep(.van-swipe__indicator--active) {
|
|
width: 4px;
|
|
height: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
.showTitleBox {
|
|
:deep(.van-swipe__indicators) {
|
|
top: 80px;
|
|
}
|
|
}
|
|
</style>
|