feat(schedule): 优化日程页面，更新数据处理逻辑并引入新组件；调整样式和布局

packages/app/src/components/button-evo.vue

@@ -19,7 +19,7 @@ const buttonProps = computed(() => omit(props, ['color']))
 const btnClass = computed(
   () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
 )
-const height = computed(() => ({ lg: '20px' })[props.size] || '2.75rem')
+const height = computed(() => ({ lg: '2.75rem' })[props.size] || '2.75rem')
 </script>
 <template>
   <button

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

@@ -12,137 +12,154 @@ 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'
 
+const router = useRouter()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
-const { data, run } = useRequest(() => getMyStudyTours(), { initialData: [] })
+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'),
+  ),
+)
 
 onMounted(() => {
-  run()
+  setStudyTours()
 })
 </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%" mode="aspectFill" :src="currentStudyTour?.backgroundUrl" />
       <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">
+        <!-- <view class="mx-7">
           <wd-button plain custom-class="bg-transparent! border-white! text-white!">
             02:30
           </wd-button>
-        </view>
+        </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 }}
+      <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>
-          <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日 第二天 -->
+            {{ dayjs().format('M月D日') }}
+            第{{
+              Object.keys(schedules).findIndex((it) => it === dayjs().format('YYYY-MM-DD')) + 1
+            }}天
+          </div>
+        </view>
+      </view>
+      <template
+        v-for="(date, index) in group(currentStudyTour?.studyTravelDOList, (it) =>
+          dayjs(it?.travelTime).format('YYYY-MM-DD'),
+        )"
+        :key="index"
+      >
+        <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="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
+                class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal mr-5"
               >
-                <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日')
-                }}
+                {{ 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>
-            <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
+              class="col-start-2 row-start-2 border-b border-black/10 pb-5"
+              :class="`${itemIndex < date.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]"
+                  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>
-            </template>
-            <!-- <template v-for="(it, index) in data.items" :key="index">
-            </template> -->
-          </template>
-        </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>
+            </view>
+          </view>
+        </template>
       </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
+    <BottomAppBar fixed>
+      <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>
-      <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> -->
+    </BottomAppBar>
   </view>
 </template>