designer-hub/packages/app/src/pages/home/spread/design-awards/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '设计奖项',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import ElegantInfoCard from '../../components/elegant-info-card.vue'
import { getBanners, getContents } from '../../../../core/libs/requests'
import { NetImages } from '../../../../core/libs/net-images'
import { BannerMode } from '../../../../core/models/moment'

const { data, run: setData } = useRequest(
  () =>
    getContents({
      contentType: '3',
      contentCategory: '301',
    }),
  {
    initialData: { list: [] },
  },
)
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.DesignAwards }),
  { initialData: [] },
)
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
const current = ref<number>(0)
const products = ref([{}, {}, {}])
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}
onMounted(async () => {
  await setData()
  await setBanners()
})
</script>

<template>
  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
    <wd-swiper
      custom-class="rounded-2xl overflow-hidden 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>
    <SectionHeading title="筑巢奖"></SectionHeading>
    <template v-for="(it, i) in data.list" :key="i">
      <ElegantInfoCard :options="it"></ElegantInfoCard>
    </template>
    <wd-status-tip
      v-if="!data.list?.length"
      :image="NetImages.NotContent"
      tip="暂无内容"
    ></wd-status-tip>
  </view>
</template>

<style scoped lang="scss"></style>