designer-hub/packages/app/src/pages/home/activity/detail/index.vue

<route lang="json">
{
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import NavbarEvo from '@/components/navbar-evo.vue'
import { activitySignup, getActivity, getActivitySignups } from '../../../../core/libs/requests'
import { bell, map, rightFill } from '@designer-hub/assets/src/assets/svgs'
import TiltedButton from '@/components/tilted-button.vue'
import dayjs from 'dayjs'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useRouter } from '../../../../core/utils/router'
import PageHelper from '@/components/page-helper.vue'

const router = useRouter()
const id = ref()
const { data, run: setData } = useRequest(() => getActivity(id.value))
const show = ref(false)
const successShow = ref(false)
const listShow = ref(false)

const handleConfirm = async () => {
  const { data, code, msg } = await activitySignup({ id: id.value })
  console.log(msg)
  if (code === 0) {
    // todo: 报名成功弹框
    show.value = false
    successShow.value = true
  }
}
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
  console.log(data.value)
})
</script>
<template>
  <div class="flex-grow bg-[#36200f] px-3.5">
    <NavbarEvo transparent dark></NavbarEvo>
    <div class="aspect-[1.26/1] relative">
      <wd-img width="100%" height="100%" src=""></wd-img>
      <div
        class="absolute bottom-3 bg-white/20 rounded-[20px] backdrop-blur-[6px] px-3.5 py-1 flex gap-2.5"
        @click="listShow = true"
      >
        <wd-img width="20" height="20" :src="bell"></wd-img>
        <div class="text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal">
          白金会员王凯峰已报名
        </div>
        <div class="w-6 bg-black aspect-square rounded-full flex items-center justify-center">
          <wd-img width="18" height="18" :src="rightFill"></wd-img>
        </div>
      </div>
    </div>
    <div class="flex">
      <wd-img width="18" height="18" :src="map"></wd-img>
      <div class="text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal">
        第一站
      </div>
    </div>
    <div class="w-[347px] text-white text-[26px] font-normal font-['PingFang SC'] leading-[44px]">
      <!-- 日本研学·东京艺术大学设计游学 -->
      {{ data?.name }}
      <div class="inline-block py-1.5 px-4 bg-white rounded-[20px] backdrop-blur-[15px]">
        <div
          class="w-[42px] h-[21px] text-[#a60707] text-sm font-normal font-['PingFang SC'] leading-relaxed"
        >
          报名中
        </div>
      </div>
    </div>
    <div class="px-4 py-6 bg-[#29170b] rounded-2xl my-8">
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
        >
          报名时间
        </div>
        <div class="w-4"></div>
        <div
          class="flex items-center text-white text-base font-normal font-['PingFang SC'] leading-[34px]"
        >
          {{ dayjs(data.applyStartTime).format('YYYY.MM.DD') }}
          <wd-icon name="play" size="22px"></wd-icon>
          {{ dayjs(data.applyEndTime).format('YYYY.MM.DD') }}
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
        >
          游学时间
        </div>
        <div class="w-4"></div>
        <div
          class="flex items-center text-white text-base font-normal font-['PingFang SC'] leading-[34px]"
        >
          <!-- 2024.12.15 2025.01.15 -->
          {{ dayjs(data.activityStartTime).format('YYYY.MM.DD') }}
          <wd-icon name="play" size="22px"></wd-icon>
          {{ dayjs(data.activityEndTime).format('YYYY.MM.DD') }}
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
        >
          游学名额
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
          40人/剩余10人
        </div>
      </div>
      <div class="flex items-center">
        <wd-img width="16" height="16"></wd-img>
        <div
          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
        >
          等级限制
        </div>
        <div class="w-4"></div>
        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
          黄金以上等级
        </div>
      </div>
    </div>
    <wd-tabs class="bg-transparent!" custom-class="bg-transparent!">
      <wd-tab title="活动介绍"></wd-tab>
      <wd-tab title="行程安排"></wd-tab>
    </wd-tabs>
    <div class="mt-5">
      <div
        class="text-justify text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-relaxed"
      >
        东京艺术大学（英文：Tokyo University of the
        Arts；日文平假名：とうきょうげいじゅつだいがく），简称东京艺大、艺大（とうきょうげいだい、げいだい），是一所校本部位于东京都台东区上野公园内的艺术类日本国立大学。其是超级国际化大学计划、亚洲校园 成员。其前身是于1887年分别创立的东京美术学校和东京音乐学校，1949年两校合并成为新制东京艺术大学。东京艺术大学的主要目的为培养美术和音乐领域的艺术家，其中音乐学部已培养了许多著名作曲家、演奏家、指挥家，美术学部也诞生了许多著名画家、艺术家、建筑家。
      </div>
    </div>
    <BottomAppBar fixed placeholder transparent>
      <div
        class="h-[63px] bg-white/90 rounded-2xl backdrop-blur-[20px] flex items-center gap-1 px-4 box-border"
      >
        <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">
          {{ data.needPointsCount }}
        </div>
        <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-[34px]">
          积分
        </div>
        <div class="flex-1"></div>
        <div @click="show = true">
          <TiltedButton size="large">立即报名</TiltedButton>
        </div>
      </div>
    </BottomAppBar>
    <wd-action-sheet v-model="show">
      <view class="px-3.5 py-10">
        <div class="flex gap-5 mb-13.5">
          <div class="w-[110px] h-[94px] bg-[#f6f6f6] rounded-2xl"></div>
          <div class="flex flex-col justify-between flex-1">
            <div class="text-black text-base font-normal font-['PingFang SC'] leading-normal">
              阿芙佳朵
            </div>
            <div class="flex items-center gap-1">
              <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
                1000
              </div>
              <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
                积分
              </div>
              <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[34px]">
                剩余：9003
              </div>
              <div class="flex-1"></div>
              <!-- <wd-input-number /> -->
            </div>
          </div>
        </div>
        <wd-button block :round="false" @click="handleConfirm">确认报名</wd-button>
      </view>
    </wd-action-sheet>
    <wd-overlay :show="listShow" @click="listShow = false">
      <view class="flex h-full items-center justify-center">
        <div class="flex flex-col gap-5 bg-white">
          <PageHelper :request="getActivitySignups" :query="{ activityId: id }">
            <template #default="{ source }">
              <template v-for="(it, i) in source.list" :key="i">
                <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal">
                  {{ dayjs(it.createTime).format('YYYY-MM-DD') }} 白金会员-王璐已报名
                </div>
              </template>
            </template>
          </PageHelper>
        </div>
      </view>
    </wd-overlay>
    <wd-overlay :show="successShow" @click="successShow = false">
      <view class="flex h-full items-center justify-center">
        <div class="flex flex-col gap-5 bg-white">
          <div class="flex gap-1.5">
            <wd-icon name="error-circle" size="22px"></wd-icon>
            <div
              class="w-[151px] h-[21px] text-justify text-black/40 text-base font-normal font-['PingFang SC'] leading-[21px]"
            >
              请准时参加活动！
            </div>
          </div>
          <div
            class="w-[237px] h-[60px] text-justify text-black/60 text-base font-normal font-['PingFang SC'] leading-normal"
          >
            如有问题可咨询官方客服或您的专属经纪人！
          </div>
        </div>
      </view>
    </wd-overlay>
  </div>
</template>