|
@@ -42,7 +42,8 @@ const router = useRouter()
|
|
|
const id = ref()
|
|
|
const type = ref<'activity' | 'studyTour'>()
|
|
|
const activityTypes = ref({ activity: '活动', studyTour: '游学' })
|
|
|
-const request = ref<() => Promise<IResData<Partial<Activity | StudyTour>>>>()
|
|
|
+const tab = ref(0)
|
|
|
+const request = ref<() => Promise<IResData<Partial<StudyTour> | Partial<Activity>>>>()
|
|
|
const { data, run: setData } = useRequest(() => request.value(), { initialData: {} })
|
|
|
const { data: signups, run: setSignups } = useRequest(
|
|
|
() => getActivitySignups({ activityId: id.value }),
|
|
@@ -69,16 +70,24 @@ const infos = computed(() => [
|
|
|
icon: calendar,
|
|
|
title: `${activityTypes.value[type.value]}时间`,
|
|
|
content: [
|
|
|
- dayjs(data.value.activityStartTime).format('YYYY.MM.DD'),
|
|
|
- dayjs(data.value.activityEndTime).format('YYYY.MM.DD'),
|
|
|
+ dayjs(
|
|
|
+ 'activityStartTime' in data.value
|
|
|
+ ? data.value.activityStartTime
|
|
|
+ : data.value.studyStartTime || data.value.planStudyStartTime,
|
|
|
+ ).format('YYYY.MM.DD'),
|
|
|
+ dayjs(
|
|
|
+ 'activityEndTime' in data.value
|
|
|
+ ? data.value.activityEndTime
|
|
|
+ : data.value.studyEndTime || data.value.planStudyEndTime,
|
|
|
+ ).format('YYYY.MM.DD'),
|
|
|
],
|
|
|
visable: true,
|
|
|
},
|
|
|
{
|
|
|
icon: location,
|
|
|
title: `${activityTypes.value[type.value]}地点`,
|
|
|
- content: [data.value.activityAddr],
|
|
|
- visable: true,
|
|
|
+ content: ['activityAddr' in data.value ? data.value.activityAddr : ''],
|
|
|
+ visable: isActivity.value,
|
|
|
},
|
|
|
{
|
|
|
icon: user,
|
|
@@ -214,7 +223,7 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
|
|
|
class="px-4 py-6 bg-[#010102]/30 backdrop-blur-[20px] rounded-2xl my-8 flex flex-col gap-3"
|
|
|
>
|
|
|
<template v-for="(it, i) in infos" :key="i">
|
|
|
- <div class="flex items-center gap-1.5">
|
|
|
+ <div v-if="it.show" class="flex items-center gap-1.5">
|
|
|
<wd-img width="16" height="16" :src="it.icon"></wd-img>
|
|
|
<div
|
|
|
class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-normal"
|
|
@@ -238,7 +247,7 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
|
|
|
</div>
|
|
|
<div v-if="isStudyTour" class="w-50%">
|
|
|
<wd-config-provider :themeVars="themeVars">
|
|
|
- <wd-tabs class="bg-transparent!" custom-class="bg-transparent!">
|
|
|
+ <wd-tabs v-model="tab" class="bg-transparent!" custom-class="bg-transparent!">
|
|
|
<wd-tab title="活动介绍"></wd-tab>
|
|
|
<wd-tab title="行程安排"></wd-tab>
|
|
|
</wd-tabs>
|
|
@@ -248,16 +257,60 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
|
|
|
|
|
|
<div class="mt-5 mx-3.5">
|
|
|
<div
|
|
|
+ v-if="tab === 0"
|
|
|
class="text-justify text-[#c1c1c1] text-base font-normal font-['PingFang_SC'] leading-relaxed"
|
|
|
>
|
|
|
{{ data['activityDesc'] }}
|
|
|
</div>
|
|
|
+ <div v-if="tab === 1 && 'studyTravelList' in data">
|
|
|
+ <template v-for="(it, i) in data.studyTravelList" :key="i">
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ 6月26日 第一天
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="w-[27px] h-[27px] bg-white/10 rounded-full"></div>
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ 9:00
|
|
|
+ </div>
|
|
|
+ <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ <!-- 早稻田大学课程 -->
|
|
|
+ {{ it.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="w-[298px] h-[114px]">
|
|
|
+ <span
|
|
|
+ class="text-[#c1c1c1] text-sm font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
+ >
|
|
|
+ 行程介绍:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="text-[#ababab] text-sm font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
+ >
|
|
|
+ <!-- 是位于日本东京都新宿区的一所著名的私立大学。它由早稻田大学的创始人大隈重信于1882年创立,是日本超级国际化大学计划(Top
|
|
|
+ Global University Project)选定的大学之一,也是日本顶尖的高等教育机构之一。 -->
|
|
|
+ {{ it.travelDesc }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="text-white text-xs font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ 打卡示例
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img class="w-[298px] h-[193px] rounded-2xl border" :src="it.clockExplainUrl" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<BottomAppBar fixed placeholder transparent>
|
|
|
<div
|
|
|
class="h-[63px] bg-white/90 rounded-2xl backdrop-blur-[20px] flex items-center gap-1 px-4 box-border"
|
|
|
>
|
|
|
- <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
+ <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN_Exp'] leading-normal">
|
|
|
{{ data.needPointsCount }}
|
|
|
</div>
|
|
|
<div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
|