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

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "游学计划",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { BannerMode } from '../../../core/libs/models'
import { getAppMemberLevelConfigs, getStudyTours, getBanners } from '../../../core/libs/requests'
import StudyTourCard from './components/study-tour-card.vue'
import PageHelper from '@/components/page-helper.vue'

// const title = computed(() => `${dayjs().year()}年游学计划`)
const designStudyAbroadYear = ref('')
const title = ref('')
const studyYear = ref('')
const designDesc = ref('')

const { data: levels, run: setLevels } = useRequest(() => getAppMemberLevelConfigs(), {
  initialData: [],
})
const levelsByMemberLevel = computed(() =>
  levels.value.reduce((acc, item) => {
    acc[item.memberLevel] = item
    return acc
  }, {}),
)
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.StudyTour }),
  { initialData: [] },
)
onLoad(async (query?: Record<string | 'designStudyAbroadYear' | 'designDesc', string>) => {
  designStudyAbroadYear.value = query.designStudyAbroadYear
  title.value = `${designStudyAbroadYear.value}年游学计划`
  if (query.designDesc) {
    designDesc.value = decodeURIComponent(query.designDesc)
  }
})

onMounted(async () => {
  await setLevels()
  await setBanners()
  console.log(banners)
})
onShareAppMessage(() => ({
  title: '游学计划',
  imageUrl: banners.value?.length > 0 ? banners.value[0].bannerImgUrl : '',
}))
onShareTimeline(() => ({
  title: '游学计划',
  imageUrl: banners.value?.length > 0 ? banners.value[0].bannerImgUrl : '',
}))
</script>
<template>
  <div class="flex flex-col gap-6 p-3.5">
    <SectionHeading custom-class="" :title="title"></SectionHeading>
    <div
      v-if="designDesc"
      class="mx-3.5 relative top--4 text-justify text-black/40 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
    >
      <!--      *我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升-->
      {{ designDesc }}
    </div>
    <PageHelper
      :request="getStudyTours"
      :query="{ showStatus: '1', studyYear: designStudyAbroadYear }"
    >
      <template #default="{ source }">
        <div class="py-4 flex flex-col gap-6">
          <template v-for="(it, index) in source?.list" :key="index">
            <div class="mx--2.5 my--2.5">
              <StudyTourCard
                custom-class=""
                :options="{ ...it, levelsByMemberLevel, index }"
              ></StudyTourCard>
            </div>
          </template>
        </div>
      </template>
    </PageHelper>
  </div>
</template>