hot-activity-item.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <script lang="ts" setup>
  2. import dayjs from 'dayjs'
  3. import { Activity, StudyTour } from '../core/libs/models'
  4. import ActivityCountDown from '@/pages/home/components/activity-count-down.vue'
  5. import ButtonEvo from './button-evo.vue'
  6. import { useRouter } from '../core/utils/router'
  7. import { useActivity } from '../composables/activity'
  8. import { omit } from 'radash'
  9. const props = withDefaults(
  10. defineProps<{ options?: StudyTour | Activity; type?: 'studyTour' | 'activity' }>(),
  11. {},
  12. )
  13. const router = useRouter()
  14. const activityOptions = ref(omit(props.options, []))
  15. const { listItemButtonText, statusText, status, difference, startAt, endAt, refresh } =
  16. useActivity(activityOptions)
  17. </script>
  18. <template>
  19. <view
  20. class="relative w-full h-full box-border flex m-a"
  21. @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)"
  22. >
  23. <view class="w-full h-full flex flex-col justify-between pt-14 box-border px-3.5">
  24. <!-- <view class="flex"></view> -->
  25. <div class="w-[321px] h-[88px] relative">
  26. <div class="w-[94px] h-3 left-[185px] top-[64px] absolute">
  27. <div
  28. class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
  29. >
  30. {{ dayjs(startAt).format('MM.DD') }}
  31. <wd-icon name="play" size="22px"></wd-icon>
  32. {{ dayjs(endAt).format('MM.DD') }}
  33. </div>
  34. </div>
  35. <wd-img
  36. custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
  37. :src="options?.thumbnailUrl"
  38. mode="scaleToFill"
  39. />
  40. <div
  41. class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
  42. >
  43. <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
  44. {{ options?.name }}
  45. </div>
  46. <div
  47. class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
  48. >
  49. {{ { studyTour: '游学', activity: '活动' }[type] }}时间:
  50. </div>
  51. </div>
  52. <view class="flex items-center justify-between mb-1.5">
  53. <ActivityCountDown
  54. :start-at="options?.applyStartTime"
  55. :end-at="options?.applyEndTime"
  56. @end="refresh"
  57. ></ActivityCountDown>
  58. <div
  59. @click.stop="
  60. router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=${type}`)
  61. "
  62. >
  63. <ButtonEvo size="md">
  64. <!-- 立即报名 -->
  65. {{ options?.ifSingnUp ? '已报名' : listItemButtonText }}
  66. </ButtonEvo>
  67. </div>
  68. </view>
  69. </view>
  70. </view>
  71. </template>