designer-hub/packages/app/src/pages-sub/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 currentBanner = ref(0)
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 handleSwiperChange = ({ detail: { current } }) => {
  currentBanner.value = current 
}
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-sub/home/offline-activity/list/index"
      end-text="查看全部"
    ></section-heading>
    <view class="relative">
		<template v-if="activities.list?.length">
		  <swiper class="aspect-[0.75/1] rounded-[20px] overflow-hidden" @change="handleSwiperChange">
		    <template v-for="(it, i) in activities.list" :key="i">
		      <swiper-item>
		        <RegisterCard :options="{ ...it, levelsByMemberLevel }"></RegisterCard>
		      </swiper-item>
		    </template>
		  </swiper>
		  <div class="absolute flex gap-1 dots">
		    <template v-for="(it, i) in activities.list" :key="i">
		      <div
		        class="w-1 h-1 rounded-full"
		        :class="`${currentBanner === i ? 'bg-white bg-active' : 'bg-white/40'}`"
		      ></div>
		    </template>
		  </div>
		</template>
	</view>
    <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="always"
      @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-sub/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">
	.dots{
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.bg-active{
		width:40rpx;
	}
	:deep(.wd-tabs.is-slide .wd-tabs__nav-item){
		padding:0 12px !important;
	}
</style>