designer-hub/packages/app/src/pages-sub/home/study-tour/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "设计游学",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script lang="ts" setup>
import Card from '@/components/card.vue'
import MomentItem from '@/components/moment-item.vue'
import SectionHeading from '@/components/section-heading.vue'
import ClassItem from '../components/class-item.vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import {
  getAppMemberLevelConfigs,
  getBanners,
  getCircles,
  getContents,
  getStudyTours,
} from '../../../core/libs/requests'
import { handleUpvoteClick } from '@/core/libs/actions'
import { NetImages } from '../../../core/libs/net-images'
import { BannerMode } from '../../../core/libs/models'
import { useRouter } from '../../../core/utils/router'
import PageHelper from '@/components/page-helper.vue'
import RegisterCard from './components/register-card.vue'
import { ComponentExposed } from 'vue-component-type-helpers'
const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
const currentBanner = ref(0)
const handleSwiperChange = ({ detail: { current } }) => {
  currentBanner.value = current
}
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const shareOptions = ref()
const router = useRouter()
const { data: studyTours, run: setStudyTours } = useRequest(() =>
  getStudyTours({ headRecommend: 1 }),
)
const { data: classmates, run: setClassmates } = useRequest(
  () => getContents({ contentCategory: '101', pageSize: '2' }),
  { initialData: { list: [] } },
)
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.StudyTour }),
  { initialData: [] },
)
const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
  initialData: [],
})
const handleLike = async (options) => {
  await handleUpvoteClick({
    ...options,
    userId: userInfo.value.userId,
    userName: userInfo.value.nickname,
  })
  await pageHelperRef.value?.refresh()
}
const levelsByMemberLevel = computed(() =>
  levels.value.reduce((acc, item) => {
    acc[item.memberLevel] = item
    return acc
  }, {}),
)
onMounted(async () => {
  await Promise.all([setLevels(), setStudyTours(), setClassmates(), setBanners()])
})
onShow(async () => {
  await pageHelperRef.value?.reload()
})
</script>
<template>
  <view class="flex-grow flex flex-col gap-6 p-3.5">
    <div class="">
      <!-- <TimeLine></TimeLine> -->
      <template v-if="banners.length">
        <div class="aspect-[1.73/1]">
          <wd-img
            width="100%"
            height="100%"
            custom-class="aspect-[1.73/1]"
            :src="banners[0].bannerImgUrl"
            @click="
              router.push(
                `/pages-sub/home/study-tour/list?designStudyAbroadYear=${banners[0].designStudyAbroadYear}&designDesc=${banners[0].designDesc}`,
              )
            "
          ></wd-img>
        </div>
      </template>
    </div>

    <div class="relative">
      <template v-if="studyTours?.list.length">
        <swiper class="aspect-[0.75/1] rounded-[20px] overflow-hidden" @change="handleSwiperChange">
          <template v-for="(it, i) in studyTours?.list" :key="i">
            <swiper-item>
              <RegisterCard :options="{ ...it, levelsByMemberLevel }"></RegisterCard>
            </swiper-item>
          </template>
        </swiper>
      </template>
      <div class="absolute flex gap-1 dots">
        <template v-for="(it, i) in studyTours?.list" :key="i">
          <div
            class="w-1 h-1 rounded-full"
            :class="`${currentBanner === i ? 'bg-white bg-active' : 'bg-white/40'}`"
          ></div>
        </template>
      </div>
    </div>
    <!-- </template>
    </PageHelper> -->
    <!-- <card custom-class="p-0!">
      <view class="relative">
        <wd-img
          custom-class="vertical-bottom"
          width="100%"
          height="275"
          src="https://via.placeholder.com/347x464"
        ></wd-img>
        <div
          class="w-[63px] h-[29px] bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-5 right-3.5 flex items-center justify-center"
        >
          <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-relaxed">
            报名中
          </div>
        </div>
        <view class="absolute left-3.5 bottom-2.5 flex items-center">
          <avatar-group-casual
            :show-number="3"
            :urls="[
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
            ]"
          ></avatar-group-casual>
          <div
            class="ml-1 text-white/60 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
          >
            40人已报名
          </div>
        </view>
      </view>
      <div class="bg-[#27130d]/50 rounded-bl-2xl rounded-br-2xl backdrop-blur-[20px] p-3.5">
        <div class="w-[293px] text-white text-xl font-normal font-['PingFang_SC'] leading-relaxed">
          日本研学·东京艺术大学设计游学
        </div>
        <view class="flex items-center">
          <div class="text-white/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
            游学时间：
          </div>
          <div class="text-white/60 text-base font-normal font-['PingFang_SC'] leading-[34px]">
            07.15 08.10
          </div>
        </view>
        <div
          class="text-justify text-white/60 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
        >
          等级限制：黄金会员以上
        </div>
        <view class="flex items-center justify-between">
          <view class="flex items-end">
            <div class="text-white text-3xl font-bold font-['D-DIN_Exp'] leading-normal">16000</div>
            <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
              积分
            </div>
          </view>
          <tilted-button custom-class="" size="large" color="white">立即报名</tilted-button>
        </view>
      </div>
    </card> -->
    <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>
    <section-heading
      custom-class=""
      title="同学荟"
      path="/pages-sub/home/classmates/index"
    ></section-heading>
    <template v-for="(it, i) in classmates.list" :key="i">
      <ClassItem :options="it"></ClassItem>
    </template>
    <wd-status-tip
      v-if="!classmates.list?.length"
      :image="NetImages.NotContent"
      tip="暂无内容"
    ></wd-status-tip>
    <section-heading custom-class="" title="设计圈"></section-heading>
    <PageHelper
      ref="pageHelperRef"
      :request="getCircles"
      :query="{ tagName: '设计游学' }"
      class="flex-grow flex flex-col"
    >
      <template #default="{ source }">
        <div class="flex-grow flex flex-col gap-6">
          <template v-for="(it, i) in source.list" :key="i">
            <MomentItem :options="it" @like="handleLike"></MomentItem>
          </template>
        </div>
      </template>
    </PageHelper>
  </view>
</template>
<style scoped>
.dots {
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
}
.bg-active {
  width: 40rpx;
}
:deep(.level-circle) {
  top: -10rpx;
  left: -5rpx;
}
</style>