designer-hub/packages/app/src/pages/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">
    <NavbarEvo transparent dark></NavbarEvo>
    <view class="bg-black w-full aspect-[1.26/1]">
      <ImageEvo :src="currentStudyTour?.backgroundUrl"></ImageEvo>
      <div
        class="aspect-[4.17/1] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
      ></div>
    </view>
    <div class="flex-grow bg-white">
      <view class="flex-grow bg-white relative bottom-4 rounded-t-2xl p-6.5">
        <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>
            <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="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 pb-5"
              :class="`${itemIndex < (schedules?.[dayjs().format('YYYY-MM-DD')] || []).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]">
                  {{ item.travelDesc }}
                </span>
              </div>
              <template v-if="item.clockExplainUrl">
                <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>
                <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>
              </template>
            </view>
          </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"
      >
        <!-- <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>
    </BottomAppBar>
  </view>
</template>