m1ngsama/FUJI
1
0
Fork 0
mirror of https://github.com/m1ngsama/FUJI.git synced 2025-12-24 10:51:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add member page

Browse source
This commit is contained in:
ClasWen 2024-09-24 22:34:33 +08:00
parent 4f94c77dbe
commit 4332b1aed5
2 changed files with 89 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/MemberCard.astro
View file

@ -1,9 +1,9 @@
---
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import type { Member } from "../store/member"
import type { PublicMember } from "../store/member"
import "../styles/global.css"
const { member } = Astro.props as { member: Member }
const { member } = Astro.props as { member: PublicMember }
const avatar = member.avatar;
---
@ -19,32 +19,32 @@ const avatar = member.avatar;
class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
>
{
avatar
? (
typeof avatar !== "string"
? (
<img
class="object-cover h-full navigate"
src={(await avatar)?.default?.src}
alt=""
/>
)
: (
<img
class="object-cover h-full navigate"
src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
alt=""
/>
)
)
: (
<img
class="object-cover h-3/4 navigate"
src="https://oss.nbtca.space/CA-logo.svg"
alt=""
/>
)
}
avatar
? (
typeof avatar !== "string"
? (
<img
class="object-cover h-full navigate"
src={(await avatar)?.default?.src}
alt=""
/>
)
: (
<img
class="object-cover h-full navigate"
src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
alt=""
/>
)
)
: (
<img
class="object-cover h-3/4 navigate"
src="https://oss.nbtca.space/CA-logo.svg"
alt=""
/>
)
}
</div>
</div>
<div class="h-16">

61
src/pages/members/index.astro Normal file
View file

@ -0,0 +1,61 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import { computed } from "vue"
import MemberCard from "../../components/MemberCard.astro"
import type { PublicMember } from "../../store/member.ts"
import { saturdayClient } from "../../utils/client"
const { data: members } = await saturdayClient.GET("/members", { params: {} })
// memberId is like "3232323233", the second and third number is the year of the member
const memberGroupByYear = computed(() => {
const group = members
// TODO delete the test member
.filter(
member =>
member.memberId != "0000000000" && member.memberId != "2333333333",
)
.reduce(
(acc, cur) => {
const year = parseInt("20" + cur.memberId.slice(1, 3))
if (!acc[year]) {
acc[year] = []
}
acc[year].push(cur)
return acc
},
{} as Record<string, PublicMember[]>,
)
return group
});
---
<BaseLayout primaryTitle="关于">
<section class="pb-20 bg-[#f5f5f7]">
<div class="section-content">
<div
class="text-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6"
>
协会成员
</div>
<div>
{
Object.keys(memberGroupByYear.value)
.sort((a, b) => parseInt(b) - parseInt(a))
.map((year) => {
return (
<div class="py-4 first:pt-2">
<div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
{memberGroupByYear.value[year].map(member => (
<MemberCard member={member} />
))}
</div>
</div>
)
})
}
</div>
</div>
</section>
</BaseLayout>