designer-hub/packages/app/src/pages/home/components/schedule-card.vue

<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { scheduleCardBg } from '../../../core/libs/pngs'
import { group } from 'radash'
import dayjs from 'dayjs'
import ImageEvo from '@/components/image-evo.vue'
import { useRouter } from '../../../core/utils/router'

const props = withDefaults(
  defineProps<{
    customClass?: string
    items?: {
      createTime: any
      updateTime: any
      creator: any
      updater: any
      deleted: any
      id: any
      studyId: number
      travelDate: any
      travelTime: number
      title: string
      travelDesc: string
      clockExplainDesc: string
      clockExplainUrl: string
    }[]
  }>(),
  {
    items: () => [],
  },
)
const router = useRouter()
const data = ref()
const imgDisplayed = ref(false)
const schedules = computed(() =>
  group(props.items, (it) => dayjs(it?.travelTime).format('YYYY-MM-DD')),
)
const currentSchedule = computed(() => schedules.value[dayjs().format('YYYY-MM-DD')])
const pull = () => {
  data.value = currentSchedule.value.slice(0, 3)
}
const push = () => {
  data.value = currentSchedule.value.slice(0, 2)
}
const handleClick = async () => {
  router.push('/pages/home/schedule/index')
}
const handleImgDisplayed = () => {
  setTimeout(() => (imgDisplayed.value = true), 300)
}
onMounted(() => {
  push()
})
</script>
<template>
  <view class="flex flex-col items-center aspect-[1.28/1]" :class="[customClass]">
    <SectionHeading title="我的游学日程" custom-class="w-full"></SectionHeading>
    <div
      class="w-full my-3.5 text-[#acacac] text-sm font-normal font-['PingFang_SC'] leading-normal"
    >
      <!-- 6月26日 第二天 -->
      {{ dayjs().format('M月D日') }}
      第{{ Object.keys(schedules).findIndex((it) => it === dayjs().format('YYYY-MM-DD')) + 1 }}天
    </div>
    <div
      class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
    >
      <template v-for="(it, index) in data" :key="index">
        <view class="relative mb-4">
          <view class="flex items-center">
            <div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>

            <div
              class="w-12 ml-3.5 text-white text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              <!-- 9:00 -->
              {{ dayjs(it?.travelTime).format('HH:mm') }}
            </div>
            <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
              <!-- 早稻田大学课程 -->
              {{ it?.title }}
            </div>
          </view>
          <div class="ml-6.5 text-white/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
            <!-- 学习灯光设计师课程 -->
            {{ it?.travelDesc }}
          </div>
          <div
            v-if="index !== data?.length - 1"
            class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
          ></div>
        </view>
      </template>
    </div>
    <view class="w-full relative bottom-7 mb--9">
      <div class="aspect-[2.55/1]">
        <ImageEvo :src="scheduleCardBg" @displayed="handleImgDisplayed"></ImageEvo>
      </div>
      <view
        class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center"
        v-show="imgDisplayed"
      >
        <wd-icon
          custom-class="relative bottom-6"
          :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
          size="22px"
          color="#4f4f4f"
          @click="data?.length > 2 ? push() : pull()"
        ></wd-icon>
        <view class="w-full duration-800">
          <wd-button block size="large" custom-class="rd!" @click="handleClick">
            查看全部行程
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>