|
@@ -12,137 +12,154 @@ import { storeToRefs } from 'pinia'
|
|
|
import { group } from 'radash'
|
|
|
import dayjs from 'dayjs'
|
|
|
import NavbarEvo from '@/components/navbar-evo.vue'
|
|
|
+import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
|
+import ButtonEvo from '@/components/button-evo.vue'
|
|
|
+import { useRouter } from '../../../core/utils/router'
|
|
|
|
|
|
+const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
const { userInfo } = storeToRefs(userStore)
|
|
|
-const { data, run } = useRequest(() => getMyStudyTours(), { initialData: [] })
|
|
|
+const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTours(), {
|
|
|
+ initialData: [],
|
|
|
+})
|
|
|
+const currentStudyTour = computed(() =>
|
|
|
+ studyTours.value.find(
|
|
|
+ (it) => dayjs(it.studyStartTime).isBefore(dayjs()) && dayjs(it.studyEndTime).isAfter(dayjs()),
|
|
|
+ ),
|
|
|
+)
|
|
|
+const schedules = computed(() =>
|
|
|
+ group(currentStudyTour.value.studyTravelDOList, (it) =>
|
|
|
+ dayjs(it?.travelTime).format('YYYY-MM-DD'),
|
|
|
+ ),
|
|
|
+)
|
|
|
|
|
|
onMounted(() => {
|
|
|
- run()
|
|
|
+ setStudyTours()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<view class="">
|
|
|
<NavbarEvo transparent dark></NavbarEvo>
|
|
|
<view class="bg-black w-full pos-relative aspect-[1.26/1]">
|
|
|
- <!-- <wd-img width="100%" height="100%" :src="data?.cover" /> -->
|
|
|
+ <wd-img width="100%" height="100%" mode="aspectFill" :src="currentStudyTour?.backgroundUrl" />
|
|
|
<div
|
|
|
class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
|
|
|
>
|
|
|
- <view class="mx-7">
|
|
|
+ <!-- <view class="mx-7">
|
|
|
<wd-button plain custom-class="bg-transparent! border-white! text-white!">
|
|
|
02:30
|
|
|
</wd-button>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</div>
|
|
|
</view>
|
|
|
<view class="bg-white relative bottom-4 rounded-t-2xl p-6.5">
|
|
|
- <template v-for="(it, i) in data" :key="i">
|
|
|
- <view class="border-b border-black/10 border-b-solid pb-5">
|
|
|
- <div class="text-black/90 text-2xl font-normal font-['PingFang_SC'] leading-normal">
|
|
|
- {{ it.name }}
|
|
|
+ <view class="border-b border-black/10 border-b-solid pb-5">
|
|
|
+ <div class="text-black/90 text-2xl font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ {{ currentStudyTour?.name }}
|
|
|
+ </div>
|
|
|
+ <view class="flex mt-5">
|
|
|
+ <wd-img
|
|
|
+ custom-class="rounded-full overflow-hidden mr-1"
|
|
|
+ width="22"
|
|
|
+ height="22"
|
|
|
+ :src="userInfo?.avatar"
|
|
|
+ />
|
|
|
+ <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ {{ userInfo?.nickname }}
|
|
|
</div>
|
|
|
- <template
|
|
|
- v-for="(date, index) in group(it.studyTravelDOList, (it) =>
|
|
|
- dayjs(it?.travelTime).format('YYYY-MM-DD'),
|
|
|
- )"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <view class="flex mt-5">
|
|
|
- <wd-img
|
|
|
- custom-class="rounded-full overflow-hidden mr-1"
|
|
|
- width="22"
|
|
|
- height="22"
|
|
|
- :src="userInfo?.avatar"
|
|
|
- />
|
|
|
- <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
- {{ userInfo?.nickname }}
|
|
|
- </div>
|
|
|
+ <div class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ <view class="mx-3.5">|</view>
|
|
|
+ <!-- 6月26日 第二天 -->
|
|
|
+ {{ dayjs().format('M月D日') }}
|
|
|
+ 第{{
|
|
|
+ Object.keys(schedules).findIndex((it) => it === dayjs().format('YYYY-MM-DD')) + 1
|
|
|
+ }}天
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template
|
|
|
+ v-for="(date, index) in group(currentStudyTour?.studyTravelDOList, (it) =>
|
|
|
+ dayjs(it?.travelTime).format('YYYY-MM-DD'),
|
|
|
+ )"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <template v-for="(item, itemIndex) in date" :key="itemIndex">
|
|
|
+ <view class="grid grid-gap-2 mt-8">
|
|
|
+ <view class="col-start-1 row-start-1 flex items-center justify-center">
|
|
|
+ <view
|
|
|
+ class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
|
|
|
+ >
|
|
|
+ <wd-img width="16" height="16" :src="map"></wd-img>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="col-start-2 row-start-1 flex">
|
|
|
<div
|
|
|
- class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
|
|
|
+ class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal mr-5"
|
|
|
>
|
|
|
- <view class="mx-3.5">|</view>
|
|
|
- <!-- 6月26日 第二天 -->
|
|
|
- {{
|
|
|
- // Object.keys(
|
|
|
- // group(it.studyTravelDOList, (it) => dayjs(it.travelTime).format('YYYY-MM-DD')),
|
|
|
- // )
|
|
|
- dayjs(date.at(i)?.travelTime).format('MM月DD日')
|
|
|
- }}
|
|
|
+ {{ dayjs(item?.travelTime).format('HH:mm') }}
|
|
|
+ </div>
|
|
|
+ <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
+ {{ item.title }}
|
|
|
</div>
|
|
|
</view>
|
|
|
- <template v-for="(item, itemIndex) in date" :key="itemIndex">
|
|
|
- <view class="grid grid-gap-2 mt-8">
|
|
|
- <view class="col-start-1 row-start-1 flex items-center justify-center">
|
|
|
- <view
|
|
|
- class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
|
|
|
- >
|
|
|
- <wd-img width="16" height="16" :src="map"></wd-img>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="col-start-2 row-start-1 flex">
|
|
|
- <div
|
|
|
- class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal mr-5"
|
|
|
- >
|
|
|
- {{ dayjs(item?.travelTime).format('HH:mm') }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal"
|
|
|
- >
|
|
|
- {{ item.title }}
|
|
|
- </div>
|
|
|
- </view>
|
|
|
- <view class="col-start-2 row-start-2 border-b border-black/10 border-b-solid pb-5">
|
|
|
- <div class="">
|
|
|
- <span
|
|
|
- class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
- >
|
|
|
- 行程介绍:
|
|
|
- </span>
|
|
|
- <span
|
|
|
- class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
- v-html="item.travelDesc"
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <view class="flex items-center my-4">
|
|
|
- <wd-img width="16" height="16" :src="camera"></wd-img>
|
|
|
- <div
|
|
|
- class="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
- >
|
|
|
- 打卡示例
|
|
|
- </div>
|
|
|
- </view>
|
|
|
- <img class="w-[285px] h-[157px] rounded-lg" :src="item.clockExplainUrl" />
|
|
|
- <div
|
|
|
- class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
- >
|
|
|
- {{ item.clockExplainDesc }}
|
|
|
- </div>
|
|
|
- </view>
|
|
|
+ <view
|
|
|
+ class="col-start-2 row-start-2 border-b border-black/10 pb-5"
|
|
|
+ :class="`${itemIndex < date.length - 1 ? 'border-b-solid' : ''}`"
|
|
|
+ >
|
|
|
+ <div class="">
|
|
|
+ <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[23px]">
|
|
|
+ 行程介绍:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
+ v-html="item.travelDesc"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <view class="flex items-center my-4">
|
|
|
+ <wd-img width="16" height="16" :src="camera"></wd-img>
|
|
|
+ <div
|
|
|
+ class="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 打卡示例
|
|
|
+ </div>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <!-- <template v-for="(it, index) in data.items" :key="index">
|
|
|
- </template> -->
|
|
|
- </template>
|
|
|
- </view>
|
|
|
+ <div class="w-[285px]">
|
|
|
+ <img
|
|
|
+ v-if="item.clockExplainUrl"
|
|
|
+ class="w-[285px] h-[157px] rounded-lg"
|
|
|
+ :src="item.clockExplainUrl"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
+ >
|
|
|
+ {{ item.clockExplainDesc }}
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</view>
|
|
|
- <!-- <div
|
|
|
- class="mx-3.5 p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] fixed bottom-4 left-0 right-0 flex items-center justify-between"
|
|
|
- >
|
|
|
- <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
- 发布圈子可得
|
|
|
- </div>
|
|
|
- <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
- 16000
|
|
|
+ <BottomAppBar fixed>
|
|
|
+ <div
|
|
|
+ class="p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] bottom-4 left-0 right-0 flex items-center justify-between gap-1"
|
|
|
+ >
|
|
|
+ <!-- <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
+ 发布圈子可得
|
|
|
+ </div>
|
|
|
+ <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
+ 16000
|
|
|
+ </div>
|
|
|
+ <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
+ 积分
|
|
|
+ </div> -->
|
|
|
+ <view class="flex-1"></view>
|
|
|
+ <view>
|
|
|
+ <ButtonEvo size="lg" @click="router.push('/pages/publish/moment/index')">
|
|
|
+ 发圈子
|
|
|
+ </ButtonEvo>
|
|
|
+ </view>
|
|
|
</div>
|
|
|
- <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">积分</div>
|
|
|
- <view class="flex-1"></view>
|
|
|
- <view>
|
|
|
- <TiltedButton size="large" custom-class="">
|
|
|
- <view class="px-3">发圈子</view>
|
|
|
- </TiltedButton>
|
|
|
- </view>
|
|
|
- </div> -->
|
|
|
+ </BottomAppBar>
|
|
|
</view>
|
|
|
</template>
|