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

<script lang="ts" setup>
import { StudyTour } from '../../../../core/libs/models'
import dayjs from 'dayjs'
import { useRouter } from '../../../../core/utils/router'
import { map } from '@designer-hub/assets/src/assets/svgs'
import { NetImages } from '../../../../core/libs/net-images'
import ActivityCountDown from '../../components/activity-count-down.vue'
import { useActivity } from '../../../../composables/activity'
import ButtonEvo from '@/components/button-evo.vue'
import { omit } from 'radash'
import TooltipEvo from '@/components/tooltip-evo.vue'

const props = defineProps<{
  customClass?: string
  options?: StudyTour & { levelsByMemberLevel; index }
}>()

const router = useRouter()
const activityOptions = ref(omit(props.options, ['levelsByMemberLevel', 'index']))
const { listItemButtonText, statusText, status, difference, startAt, endAt, refresh } =
  useActivity(activityOptions)
const toDetail = () => {
  router.push(`/pages/home/activity/detail/index?id=${props.options?.id}&type=studyTour`)
}
</script>
<template>
  <div
    class="relative box-border aspect-[1.15/1] bg-[length:100%] flex flex-col"
    :class="customClass"
    :style="{ backgroundImage: `url(${NetImages.StudyTourItemBg})` }"
    @click="toDetail"
  >
    <div class="flex flex-col pt-2.25 px-6 gap-6">
      <div class="flex gap-1">
        <wd-img width="23" height="23" :src="map"></wd-img>
        <div class="text-white text-base font-normal font-['PingFang_SC'] leading-relaxed">
          第{{ options?.sort }}站
        </div>
        <div class="flex-1"></div>
        <div
          class="rounded-[20px] backdrop-blur-[15px] px-4 py-1.5"
          :class="`${['running', 'registering'].includes(status) ? 'bg-[#fff4f4] text-[#a60707]' : 'bg-[#f3f3f3] text-black/40'}`"
        >
          <div class="text-sm font-normal font-['PingFang_SC']">
            {{ statusText }}
          </div>
        </div>
      </div>
      <div class="flex gap-4 pt-2">
        <wd-img
          width="110"
          height="88"
          custom-class="rounded-[10px] overflow-hidden vertical-bottom"
          :src="options?.thumbnailUrl"
          mode="scaleToFill"
        />
        <div class="flex flex-col justify-around">
          <div class="text-black text-base font-normal font-['PingFang_SC'] leading-relaxed">
            {{ options?.name }}
          </div>
          <div class="flex items-center">
            <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
              游学时间：
            </div>
            <div
              class="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>
          <div class="flex">
            <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
              兑换积分：
            </div>
            <div class="text-[#ef4343] text-xl font-normal font-['D-DIN_Exp'] leading-[34px]">
              {{ options?.needPointsCount }}
            </div>
          </div>
        </div>
        <div></div>
      </div>
      <div class="flex items-center justify-between">
        <ActivityCountDown
          :start-at="options?.applyStartTime || options?.planApplyStartTime"
          :end-at="options?.applyEndTime || options?.planApplyEndTime"
          @end="refresh"
        ></ActivityCountDown>
        <TooltipEvo
          placement="top"
          :content="`还差${difference}积分`"
          :model-value="status === 'runing' && difference > 0"
        >
          <!-- {{ difference }} -->
          <ButtonEvo size="md">
            {{ options?.ifSingnUp ? '已报名' : listItemButtonText }}
          </ButtonEvo>
          <div @tap.stop="toDetail()"></div>
        </TooltipEvo>
      </div>
      <div class="flex justify-between border-t-solid border-t-[#f2f2f2] border-t-1 py-4">
        <div></div>
        <div
          class="text-justify text-black/40 text-xs font-normal font-['PingFang_SC'] leading-relaxed"
        >
          <!-- 黄金会员以上等级 -->
          {{
            options?.memberLevel
              ?.map((it) => options?.levelsByMemberLevel[String(it)]?.memberLevelName)
              ?.join('、')
          }}
          可报名
        </div>
      </div>
    </div>
  </div>
</template>