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

<script lang="ts" setup>
import Card from '@/components/card.vue'
import { Activity, StudyTour } from '../../../../core/libs/models'
import dayjs from 'dayjs'
import TiltedButton from '@/components/tilted-button.vue'
import { getActivitySignups, getStudyTourSignups } from '../../../../core/libs/requests'
import { NetImages } from '../../../../core/libs/net-images'
import { useRouter } from '../../../../core/utils/router'
import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
import { omit } from 'radash'
import { useActivity } from '@/composables/activity'

const props = defineProps<{
  customClass?: string
  options?: StudyTour & { levelsByMemberLevel }
}>()
const router = useRouter()
const { data: signups, run: setSignups } = useRequest(
  () => getStudyTourSignups({ studyId: props.options!.id.toString(), pageSize: -1 }),
  { initialData: { list: [], total: 0 } },
)
const activityOptions = computed(() => omit(props.options, ['levelsByMemberLevel']))
const { statusText, listItemButtonText } = useActivity(activityOptions)
onMounted(async () => {
  await setSignups()
})
</script>
<template>
  <div @click="router.push(`/pages/home/activity/detail/index?id=${options?.id}&type=studyTour`)">
    <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"
        ></wd-img>
      </div>
      <div
        class="px-2.5 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">
          {{ statusText }}
        </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
                .filter((it) => it.userId)
                .map((it) => it.headImgUrl || 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="w-full h-[46px] absolute top-0 bg-gradient-to-t from-black to-black/00"></div>
        <div class="bg-[#010102]/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?.studyStartTime || options?.planStudyStartTime).format('MM.DD') }}
              </div>
              <wd-icon name="play" size="22px"></wd-icon>
              <div class="text-center">
                {{ dayjs(options?.studyEndTime || options?.planStudyEndTime).format('MM.DD') }}
              </div>
            </div>
          </view>
          <div
            class="text-justify text-white/60 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
          >
            等级限制：{{
              options?.memberLevel
                ?.map((it) => options?.levelsByMemberLevel[String(it)]?.memberLevelName)
                ?.join('、')
            }}
          </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 ? '已报名' : listItemButtonText }}
            </tilted-button>
          </view>
        </div>
      </view>
    </Card>
  </div>
</template>