designer-hub/packages/app/src/components/hot-activity-item.vue

<script lang="ts" setup>
import dayjs from 'dayjs'
import { Activity, StudyTour } from '../core/libs/models'
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'

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"
    @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)"
  >
    <view class="w-full h-full flex flex-col justify-between pt-14 box-border px-3.5">
      <!-- <view class="flex"></view> -->
      <div class="w-[321px] h-[88px] relative">
        <div class="w-[94px] h-3 left-[185px] top-[64px] absolute">
          <div
            class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
          >
            {{ dayjs(startAt).format('MM.DD') }}
            <wd-icon name="play" size="22px"></wd-icon>
            {{ dayjs(endAt).format('MM.DD') }}
          </div>
        </div>
        <wd-img
          custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
          :src="options?.thumbnailUrl"
          mode="scaleToFill"
        />
        <div
          class=" px-2 h-4 bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-2.5 left-[7px] flex items-center justify-center"
        >
          <div class="text-white text-[9px] font-normal font-['PingFang_SC']">
            {{statusText}}
          </div>
        </div>
        <div
          class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
        >
          <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
          {{ options?.name }}
        </div>
        <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
          @click.stop="
            router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)
          "
        >
          <ButtonEvo size="md">
            <!-- 立即报名 -->
            {{ options?.ifSingnUp ? '已报名' : listItemButtonText }}
          </ButtonEvo>
        </div>
      </view>
    </view>
  </view>
</template>