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

<route lang="yaml">
style:
  navigationStyle: custom
  navigationBarTitleText: 游学日程
</route>
<script setup lang="ts">
import TiltedButton from '@/components/tilted-button.vue'
import { getMyStudyTours, getSchedule, getUserInfo } 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'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data, run } = useRequest(() => getMyStudyTours(), { initialData: [] })

onMounted(() => {
  run()
})
</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" /> -->
      <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">
          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
            02:30
          </wd-button>
        </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 }}
          </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日 第二天 -->
                {{
                  // Object.keys(
                  //   group(it.studyTravelDOList, (it) => dayjs(it.travelTime).format('YYYY-MM-DD')),
                  // )
                  dayjs(date.at(i).travelTime).format('MM月DD日')
                }}
              </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>
            </template>
            <!-- <template v-for="(it, index) in data.items" :key="index">
            </template> -->
          </template>
        </view>
      </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
      </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> -->
  </view>
</template>