0685c46500
1. 添加了banner请求相关的类型定义和hooks 2. 更新了广告页面的路由跳转逻辑，支持传递code参数 3. 修改了相关组件的导入和使用方式 4. 更新了类型定义文件以支持新的功能 5. 优化了图片轮播组件的交互逻辑
42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router';
|
||
import { bannerInfo } from '@/views/AD/hooks/useAD';
|
||
import { fetchBanners } from '@/hooks/request/banner';
|
||
|
||
const { banners } = fetchBanners();
|
||
|
||
const router = useRouter();
|
||
// const defineBanners = defineModel('banners');
|
||
// 如果定义了 banner ， 那么 banners 就不再初始化
|
||
// defineBanners.value && updateBanners(defineBanners.value);
|
||
const borderRadius = defineModel('borderRadius');
|
||
|
||
function handleBannerClick(banner: any) {
|
||
// 把对应的信息给 AD 的 hooks
|
||
bannerInfo.value = banner;
|
||
router.push({ name: 'ad', params: { code: banner.code } });
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<van-swipe :autoplay="5000" indicator-color="white">
|
||
<van-swipe-item v-for="banner in banners">
|
||
<el-image
|
||
class="img"
|
||
:style="{ borderRadius: borderRadius + 'px' }"
|
||
:src="banner.banner_address"
|
||
fit="contain"
|
||
@click="handleBannerClick(banner)"
|
||
/>
|
||
</van-swipe-item>
|
||
</van-swipe>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@use '@/assets/css/theme' as *;
|
||
|
||
.img {
|
||
border-radius: $card-radius;
|
||
}
|
||
</style>
|