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

<route lang="yaml">
style:
  navigationStyle: custom
  navigationBarTitleText: 游学日程
</route>
<script setup lang="ts">
import { getMyStudyTours } from '../../../core/libs/requests'
import { camera, map } from '../../../core/libs/svgs'
import { useUserStore } from '../../../store'
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'
import ImageEvo from '@/components/image-evo.vue'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
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'),
    ) || { [dayjs().format('YYYY-MM-DD')]: [] },
)

onMounted(async () => {
  await setStudyTours()
})
</script>
<template>
  <view class="flex-grow flex flex-col relative">
    <NavbarEvo transparent dark></NavbarEvo>
    <wd-img
      :src="currentStudyTour?.bannerUrl"
      width="100%"
      height="100%"
      mode="widthFix"
      custom-class="fixed! top-0 left-0"
    ></wd-img>
    <view class="w-full bg-transparent! h-300px"></view>
    <div class="">
      <view
        class="flex-grow bg-white relative bottom-4 p-6.5 rounded-lt-[20px] rounded-tr-[20px] overflow-hidden pt-20px"
      >
        <view class="border-b border-black/10 border-b-solid pb-5">
          <div class="text-black/85 text-2xl fw-500 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>
            <div
              class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              <view class="mx-3.5">|</view>
              {{ dayjs().format('M月D日') }}
              第{{
                Object.keys(schedules || []).findIndex(
                  (it) => it === dayjs().format('YYYY-MM-DD'),
                ) + 1
              }}天
            </div>
          </view>
        </view>
        <template
          v-for="(item, itemIndex) in schedules?.[dayjs().format('YYYY-MM-DD')]"
          :key="itemIndex"
        >
          <view class="flex flex-col mt-8">
            <!-- 左侧图标 -->
            <view class="flex items-center">
              <view
                class="w-[30px] h-[30px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
              >
                <wd-img width="16" height="16" :src="map"></wd-img>
              </view>
              <div class="ml-3 text-black/90 font-normal">
                {{ dayjs(item?.travelTime).format('HH:mm') }}
              </div>
              <div class="ml-20px text-black/90 font-normal">
                {{ item.title }}
              </div>
            </view>

            <!-- 标题 -->

            <!-- 描述 -->
            <view class="ml-10 mt-2 border-b border-black/10 py-16px">
              <span class="text-black/60 text-sm font-normal lh-23px">行程介绍:</span>
              <span class="text-black/40 text-sm font-normal lh-23px">
                {{ item.travelDesc }}
              </span>
            </view>

            <!-- 打卡示例 -->
            <template v-if="item.clockExplainUrl">
              <view class="flex items-center ml-10">
                <wd-img width="16" height="16" :src="camera"></wd-img>
                <div class="ml-1 text-black/90 text-xs font-normal">打卡示例</div>
              </view>
              <wd-img
                v-if="(item.clockExplainUrl ?? '') !== ''"
                width="300px"
                custom-class="rounded-2xl overflow-hidden mt-11px ml-34px h-157px"
                :src="item.clockExplainUrl"
                mode="widthFix"
                enable-preview
              ></wd-img>
              <div class="mt-2.5 ml-10 text-black/40 text-xs font-normal">
                {{ item.clockExplainDesc }}
              </div>
            </template>
          </view>
        </template>
      </view>
    </div>
    <BottomAppBar fixed placeholder>
      <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"
      >
        <view class="flex-1 flex items-center" v-if="false">
          <div class="text-black/85 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
            发布圈子可得
          </div>
          <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-normal">
            {{ currentStudyTour.needPointsCount }}
          </div>
          <div class="text-black/85 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
            积分
          </div>
        </view>
        <view v-else class="flex-1"></view>
        <view>
          <ButtonEvo size="lg" @click="router.push('/pages-sub/publish/moment/index?circleType=1')">
            发圈子
          </ButtonEvo>
        </view>
      </div>
    </BottomAppBar>
  </view>
</template>