designer-hub/packages/app/src/pages-sub/home/components/banner.vue

<script setup lang="ts">
import { getBanners } from '../../../core/libs/requests'
import { BannerMode } from '../../../core/libs/models'
import { useRouter } from '../../../core/utils/router'

const props = defineProps<{ mode: BannerMode; aspect?: string }>()
const router = useRouter()
const { data: banners, run: setBanners } = useRequest(() => getBanners({ mode: props.mode }), {
  initialData: [],
})
const current = ref<number>(0)
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
const handleClick = ({ index }: { index: number }) => {
  const banner = banners.value[index]
  console.log(banner)
  if (!banner.bannerLinkUrl && !banner.bannerDetailsContent) return
  if (banner.bannerDetailsType === '2') {
    if (banner.bannerLinkUrl?.startsWith('http')) {
      router.push(`/pages-sub/common/webview/index?url=${banner.bannerLinkUrl}`)
    } else {
      router.push(banner.bannerLinkUrl)
    }
  }
  if (banner.bannerDetailsType === '1') {
    router.push(`/pages-sub/home/content/index?type=banner&id=${banner.id}`)
  }
}
function onChange(e) {
  //   console.log(e)
}
onMounted(() => {
  setBanners()
})
</script>
<template>
  <div v-if="swiperList.length">
    <wd-swiper
      custom-class="rounded-2xl overflow-hidden aspect-[2.71/1]"
      :custom-style="`aspect-ratio: ${props.aspect ?? '2.71/1'}`"
      width="100%"
      height="100%"
      :list="swiperList"
      autoplay
      v-model:current="current"
      :indicator="{ type: 'dots-bar' } as any"
      @click="handleClick"
      @change="onChange"
    ></wd-swiper>
  </div>
</template>