designer-hub/packages/app/src/pages/home/offline-activity/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '线下活动',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import Card from '@/components/card.vue'
import OfflineActivityItem from '../components/offline-activity-item.vue'
import {
  getAllCategories,
  getContents,
  getActivities,
  getAppMemberLevelConfigs,
} from '../../../core/libs/requests'
import { strip, leaderboardText } from '@designer-hub/assets/src/assets/svgs'
import { NetImages } from '../../../core/libs/net-images'
import RegisterCard from '../components/register-card.vue'
import PageHelper from '@/components/page-helper.vue'

const { data: categories, run: setCategories } = useRequest(() => getAllCategories(), {
  initialData: [],
})
const tab = ref<number>(0)
const contentCategory = ref()
const { data, run: setData } = useRequest(
  () =>
    getContents({
      // contentType: '2',
      contentCategory: contentCategory.value,
    }),
  {
    initialData: { list: [] },
  },
)
const { data: activities, run: setActivities } = useRequest(
  () => getActivities({ headRecommend: 1 }),
  {
    initialData: { list: [] },
  },
)
const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
  initialData: [],
})
const levelsByMemberLevel = computed(() =>
  levels.value.reduce((acc, item) => {
    acc[item.memberLevel] = item
    return acc
  }, {}),
)
const setContentCategory = (index) => {
  contentCategory.value = categories.value.find(({ id }) => id === 2)?.children[index].id.toString()
}
const handleTabChange = ({ index }) => {
  setContentCategory(index)
  setData()
}
onMounted(async () => {
  await setCategories()
  setContentCategory(tab.value)
  await Promise.all([setActivities(), setData(), setLevels()])
})
</script>

<template>
  <view class="flex-grow px-3.5 flex flex-col gap-6 py-7">
    <section-heading
      custom-class=""
      title="线下活动"
      path="/pages/home/offline-activity/list/index"
      end-text="查看全部"
    ></section-heading>
    <template v-if="activities.list?.length">
      <swiper class="aspect-[0.75/1] rounded-[20px] overflow-hidden">
        <template v-for="(it, i) in activities.list" :key="i">
          <swiper-item>
            <RegisterCard :options="{ ...it, levelsByMemberLevel }"></RegisterCard>
          </swiper-item>
        </template>
      </swiper>
    </template>
    <card custom-class="">
      <div class="my-7.5 text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
        筑巢荟-活动营
      </div>
      <div
        class="text-justify text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"
      >
        我们为您精心打造了一个独特且极具价值的活动营。这个项目的核心旨在全方位提升您作为设计师的能力。
        在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。
        参与专业的研讨会和工作坊，与同行们分享见解、碰撞思维火花，进一步深化对设计的理解。
      </div>
    </card>
    <wd-tabs
      v-model="tab"
      custom-class="bg-transparent!"
      :slidable-num="4"
      @change="handleTabChange"
    >
      <block v-for="(it, item) in categories.find(({ id }) => id === 2)?.children" :key="item">
        <wd-tab :title="it.name"></wd-tab>
      </block>
    </wd-tabs>
    <Card custom-class="py-2 rounded-lg" v-if="tab === 0">
      <div class="flex items-center">
        <wd-img width="22" height="22" :src="strip"></wd-img>
        <wd-img width="80" :src="leaderboardText" mode="widthFix"></wd-img>
        <div class="flex-1">
          <section-heading
            title="筑巢荟骑行俱乐部"
            size="sm"
            path="/pages/home/offline-activity/cycling-rankings/index"
          ></section-heading>
        </div>
      </div>
    </Card>
    <template v-for="(it, index) in data.list" :key="index">
      <offline-activity-item class="" :options="it"></offline-activity-item>
    </template>
    <wd-status-tip
      v-if="!data.list?.length"
      :image="NetImages.NotContent"
      tip="暂无内容"
    ></wd-status-tip>
  </view>
</template>

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