Jelajahi Sumber

feat(schedule): 优化行程展示逻辑,调整模板结构,增强可读性

EvilDragon 5 bulan lalu
induk
melakukan
58cb9b770d
1 mengubah file dengan 52 tambahan dan 49 penghapusan
  1. 52 49
      packages/app/src/pages/home/schedule/index.vue

+ 52 - 49
packages/app/src/pages/home/schedule/index.vue

@@ -77,68 +77,71 @@ onMounted(() => {
           </div>
         </view>
       </view>
-      <template
+      <!-- <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 schedules?.[dayjs().format('YYYY-MM-DD')]"
+        :key="itemIndex"
       >
-        <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="grid grid-gap-2 mt-8">
+          <view class="col-start-1 row-start-1 flex items-center justify-center">
             <view
-              class="col-start-2 row-start-2 border-b border-black/10 pb-5"
-              :class="`${itemIndex < date.length - 1 ? 'border-b-solid' : ''}`"
+              class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
             >
-              <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>
-              <div class="w-[285px]">
-                <img
-                  v-if="item.clockExplainUrl"
-                  class="w-[285px] h-[157px] rounded-lg"
-                  :src="item.clockExplainUrl"
-                />
-              </div>
+              <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]"
+                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="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
+                class="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
               >
-                {{ item.clockExplainDesc }}
+                打卡示例
               </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>
           </view>
-        </template>
+        </view>
       </template>
+      <!-- </template> -->
     </view>
     <BottomAppBar fixed placeholder>
       <div