feat(schedule): 添加获取我的游学信息功能并优化页面展示

packages/app/src/pages/home/schedule/index.vue

@@ -5,21 +5,27 @@ style:
 </route>
 <script setup lang="ts">
 import TiltedButton from '@/components/tilted-button.vue'
-import { getSchedule, getUserInfo } from '@/core/libs/requests'
-import { camera, map } from '@/core/libs/svgs'
+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 { data, run } = useRequest(getSchedule)
-const { data: userInfo, run: runUserInfo } = useRequest(getUserInfo)
+const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
+const { data, run } = useRequest(() => getMyStudyTours(), { initialData: [] })
 
 onMounted(() => {
   run()
-  runUserInfo()
 })
 </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%" :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"
       >
@@ -31,73 +37,97 @@ onMounted(() => {
       </div>
     </view>
     <view class="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">
-          {{ data?.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 }}
+      <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>
-          <div class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
-            <view class="mx-3.5">|</view>
-            6月26日 第二天
-          </div>
-        </view>
-      </view>
-      <template v-for="(it, index) in data.items" :key="index">
-        <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"
-            >
-              {{ it.time }}
-            </div>
-            <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
-              {{ it.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]">
-                {{ it.content }}
-              </span>
-            </div>
-            <view class="flex items-center my-4">
-              <wd-img width="16" height="16" :src="camera"></wd-img>
+          <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="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
+                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>
-            <img class="w-[285px] h-[157px] rounded-lg" :src="it.momentExample" />
-            <div
-              class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
-            >
-              {{ it.monentHint }}
-            </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
+    <!-- <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]">
@@ -113,6 +143,6 @@ onMounted(() => {
           <view class="px-3">发圈子</view>
         </TiltedButton>
       </view>
-    </div>
+    </div> -->
   </view>
 </template>