designer-hub/packages/app/src/pages/home/components/register-card.vue

<script lang="ts" setup>
import Card from '@/components/card.vue'
import { Activity, DictType } from '../../../core/libs/models'
import dayjs from 'dayjs'
import TiltedButton from '@/components/tilted-button.vue'
import { getActivitySignups, getByDictType } from '../../../core/libs/requests'
import { NetImages } from '../../../core/libs/net-images'
import { useRouter } from '../../../core/utils/router'
import { getActivityStatusButtonText, getActivityStatusText } from '../../../core/utils/common'

const props = defineProps<{ customClass?: string; options?: Activity }>()
const router = useRouter()
const { data: signups, run: setSignups } = useRequest(
  () => getActivitySignups({ activityId: props.options!.id.toString() }),
  { initialData: { list: [], total: 0 } },
)
// const {} = useRequest(() => getByDictType(DictType))
onMounted(async () => {
  await setSignups()
})
</script>
<template>
  <div @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=activity`)">
    <Card custom-class="w-full p-0! relative aspect-[0.75/1]">
      <div class="absolute left-0 top-0 right-0 bottom-0">
        <wd-img
          custom-class="vertical-bottom"
          width="100%"
          height="100%"
          :src="options?.bannerUrl[0]"
        ></wd-img>
      </div>
      <div
        class="w-[63px] h-[29px] bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-5 right-3.5 flex items-center justify-center"
      >
        <div class="text-white text-sm font-normal font-['PingFang_SC'] leading-relaxed">
          {{ getActivityStatusText(options?.applyStartTime, options?.applyEndTime) }}
        </div>
      </div>
      <view class="absolute bottom-0 left-0 right-0">
        <view class="flex items-center mx-4 my-2.5 gap-1">
          <avatar-group-casual
            :show-number="3"
            :urls="signups.list.map((it) => it.avatar || NetImages.DefaultAvatar)"
          ></avatar-group-casual>
          <div
            class="ml-1 text-white/60 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
          >
            {{ signups.total }}人已报名
          </div>
        </view>
        <div class="bg-[#27130d]/50 rounded-bl-2xl rounded-br-2xl backdrop-blur-[20px] p-3.5">
          <div
            class="w-[293px] text-white text-xl font-normal font-['PingFang_SC'] leading-relaxed"
          >
            {{ options?.name }}
          </div>
          <view class="flex items-center">
            <div class="text-white/60 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
              游学时间：
            </div>
            <div
              class="text-white/60 text-base font-normal font-['PingFang_SC'] leading-[34px] flex items-center gap-1"
            >
              <div class="text-center">
                {{ dayjs(options?.activityStartTime).format('MM.DD') }}
              </div>
              <wd-icon name="play" size="22px"></wd-icon>
              <div class="text-center">
                {{ dayjs(options?.activityStartTime).format('MM.DD') }}
              </div>
            </div>
          </view>
          <div
            class="text-justify text-white/60 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
          >
            等级限制：{{ options?.memberLevel }}
          </div>
          <view class="flex items-center justify-between">
            <view class="flex items-end">
              <div class="text-white text-3xl font-bold font-['D-DIN_Exp']">
                {{ options?.needPointsCount }}
              </div>
              <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang_SC']">积分</div>
            </view>
            <tilted-button custom-class="" size="large" color="white">
              {{
                options?.ifSingnUp
                  ? '已报名'
                  : getActivityStatusButtonText(options?.applyStartTime, options?.activityEndTime)
              }}
            </tilted-button>
          </view>
        </div>
      </view>
    </Card>
  </div>
</template>