designer-hub/packages/app/src/pages/home/components/activity-count-down.vue

<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps<{ startAt?: string | number; endAt?: string | number }>()
const emits = defineEmits<{ end: [] }>()
const status = computed(() => {
  // 如果当前时间小于开始时间返回等待中，如果当前时间大于等于开始时间小于等于结束时间返回进行中，当前时间大于结束时间返回已结束
  const now = new Date()
  if (dayjs(now).isBefore(dayjs(props.startAt))) {
    return 'waiting'
  } else if (dayjs(now).isAfter(dayjs(props.startAt)) && dayjs(now).isBefore(dayjs(props.endAt))) {
    return 'running'
  } else {
    return 'overdue'
  }
})
const time = ref(
  dayjs({ waiting: props.startAt, running: props.endAt }[status.value]).diff(
    new Date(),
    'millisecond',
  ),
)
</script>
<template>
  <div>
    <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
            v-if="current.days"
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.days }}
          </div>
          <span v-if="current.days" class="custom-count-down-colon">天</span>
          <div
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.hours }}
          </div>
          <span class="custom-count-down-colon">时</span>
          <div
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.minutes }}
          </div>
          <span class="custom-count-down-colon">分</span>
          <div
            v-if="!current.days"
            class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
          >
            {{ current.seconds }}
          </div>
          <span v-if="!current.days" class="custom-count-down-colon">秒</span>
        </div>
      </template>
    </wd-count-down>
  </div>
</template>