119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<template>
|
|
<div class="headerAdv" v-if="state.advList.length">
|
|
<!-- 5宫格广告 -->
|
|
<div class="fiveGrid" v-if="props.type === 'five'">
|
|
<div class="rectAdvBox" @click="handleJumpAdv(item)" v-for="item in state.advList" :key="item.id">
|
|
<lazyImg class="rectAdvIcon" :src="item.cover" />
|
|
<div class="rectName">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
<AdvSwiper class="swiper" v-else-if="props.type === 'swiper'" :list="state.advList" height="18.933vw"></AdvSwiper>
|
|
<div class="rows-adv" v-else-if="props.type === 'rows'">
|
|
<div class="box" @touchstart.stop @touchmove.stop @touchend.stop v-if="state.advList.length > 0">
|
|
<div class="rectAdvBox" @click="handleJumpAdv(item)" v-for="item in state.advList" :key="item.id">
|
|
<lazyImg class="rectAdvIcon" :src="item.cover" />
|
|
<div class="rectName">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import { getAdItem } from '@/utils/getConfig';
|
|
import { jumpAdv } from '@/utils/index';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
advType?: number;
|
|
type?: 'five' | 'swiper' | 'rows';
|
|
length?: number; //广告获取长度0-不限制
|
|
random?: boolean; //是否随机获取
|
|
}>(),
|
|
{
|
|
advType: 28,
|
|
type: 'five',
|
|
length: 5,
|
|
},
|
|
);
|
|
const state = reactive({
|
|
advList: <any>[], // 广告数据
|
|
});
|
|
const init = () => {
|
|
const arr = getAdItem(props.advType) || [];
|
|
if (props.length > 0) {
|
|
state.advList = arr.slice(0, props.length);
|
|
} else {
|
|
if (props.random) {
|
|
const shuffled = arr.slice().sort(() => 0.5 - Math.random());
|
|
state.advList = shuffled.slice(0, 5);
|
|
} else {
|
|
state.advList = arr;
|
|
}
|
|
}
|
|
};
|
|
init();
|
|
const handleJumpAdv = (item: Types.App.AdsInfoListItem) => {
|
|
jumpAdv(item, 'ads');
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.headerAdv {
|
|
width: 100%;
|
|
.fiveGrid {
|
|
margin: 8px 0 12px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-row-gap: 12px;
|
|
grid-column-gap: 10px;
|
|
box-sizing: border-box;
|
|
.rectAdvBox {
|
|
width: 60px;
|
|
.rectAdvIcon {
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.rectName {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.swiper {
|
|
padding: 0 10px;
|
|
}
|
|
.rows-adv {
|
|
.box {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding: 18px 0;
|
|
.rectAdvBox {
|
|
width: 60px;
|
|
margin-right: 6px;
|
|
.rectAdvIcon {
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.rectName {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.rectAdvBox:last-child {
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|