123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <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="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>
|