Browse Source

feat: 优化活动倒计时组件,调整时间显示逻辑,更新相关属性

EvilDragon 3 months ago
parent
commit
1711a828b0

+ 15 - 7
packages/app/src/components/hot-activity-item.vue

@@ -1,13 +1,20 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import { Activity, StudyTour } from '../core/libs/models'
-import TiltedButton from './tilted-button.vue'
 import ActivityCountDown from '@/pages/home/components/activity-count-down.vue'
 import ButtonEvo from './button-evo.vue'
 import { useRouter } from '../core/utils/router'
+import { useActivity } from '../composables/activity'
+import { omit } from 'radash'
 
-withDefaults(defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(), {})
+const props = withDefaults(
+  defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(),
+  {},
+)
 const router = useRouter()
+const activityOptions = ref(omit(props.options, []))
+const { listItemButtonText, statusText, status, difference, startAt, endAt, refresh } =
+  useActivity(activityOptions)
 </script>
 <template>
   <view class="relative w-full h-full box-border flex m-a">
@@ -18,10 +25,9 @@ const router = useRouter()
           <div
             class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
           >
-            <!-- 07.15 08.10 -->
-            {{ dayjs(options?.studyStartTime || options?.planStudyStartTime).format('MM.DD') }}
+            {{ dayjs(startAt).format('MM.DD') }}
             <wd-icon name="play" size="22px"></wd-icon>
-            {{ dayjs(options?.studyEndTime || options?.planStudyEndTime).format('MM.DD') }}
+            {{ dayjs(endAt).format('MM.DD') }}
           </div>
         </div>
         <wd-img
@@ -38,20 +44,22 @@ const router = useRouter()
         <div
           class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
         >
-          游学时间:
+          {{ { studyTour: '游学', activity: '活动' }[type] }}时间:
         </div>
       </div>
       <view class="flex items-center justify-between mb-1.5">
         <ActivityCountDown
           :start-at="options?.applyStartTime"
           :end-at="options?.applyEndTime"
+          @end="refresh"
         ></ActivityCountDown>
         <div>
           <ButtonEvo
             size="md"
             @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)"
           >
-            立即报名
+            <!-- 立即报名 -->
+            {{ options?.ifSingnUp ? '已报名' : listItemButtonText }}
           </ButtonEvo>
         </div>
       </view>

+ 2 - 0
packages/app/src/composables/activity.ts

@@ -78,5 +78,7 @@ export const useActivity = (options: globalThis.Ref<Partial<Activity | StudyTour
     tooltipShow,
     difference,
     refresh,
+    startAt,
+    endAt,
   }
 }

+ 1 - 1
packages/app/src/pages/home/components/activity-count-down.vue

@@ -26,7 +26,7 @@ const time = ref(
     <wd-count-down :time="time" @finish="emits('end')">
       <template #default="{ current }">
         <div v-if="time" class="flex items-center gap-1.25 text-black/40 text-sm">
-          <div>距{{ { waiting: '开始', running: '结束' }[status] }}还剩</div>
+          <div>距{{ { waiting: '报名开始', running: '报名结束' }[status] }}还剩</div>
           <div
             v-if="current.days"
             class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"

+ 4 - 3
packages/app/src/pages/home/study-tour/components/study-tour-card.vue

@@ -17,7 +17,8 @@ const props = defineProps<{
 
 const router = useRouter()
 const activityOptions = ref(omit(props.options, ['levelsByMemberLevel', 'index']))
-const { listItemButtonText, statusText, status, difference, refresh } = useActivity(activityOptions)
+const { listItemButtonText, statusText, status, difference, startAt, endAt, refresh } =
+  useActivity(activityOptions)
 const toDetail = () => {
   router.push(`/pages/home/activity/detail/index?id=${props.options?.id}&type=studyTour`)
 }
@@ -64,9 +65,9 @@ const toDetail = () => {
             <div
               class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
             >
-              {{ dayjs(options?.studyStartTime || options?.planStudyStartTime).format('MM.DD') }}
+              {{ dayjs(startAt).format('MM.DD') }}
               <wd-icon name="play" size="22px"></wd-icon>
-              {{ dayjs(options?.studyEndTime || options?.planStudyEndTime).format('MM.DD') }}
+              {{ dayjs(endAt).format('MM.DD') }}
             </div>
           </div>
           <div class="flex">