feat(sponsorList): implement sponsor grouping and redesign UI
This commit introduces a major update to the sponsor list display. - Implements a feature to group cash sponsors below a certain amount threshold. This helps to declutter the display when there are many smaller donations. - Adds a new `cash-group` display type to handle the rendering of these grouped sponsors. - Completely redesigns the UI with a new color scheme, gradients, and improved typography for a more polished and visually engaging presentation. - Updates the styling for individual sponsor cards to improve readability and visual hierarchy.
This commit is contained in:
xiaomai
@@ -2,6 +2,25 @@
|
|||||||
"eventTitle": "永平新港汕河体育协会 2 周年庆联欢晚宴",
|
"eventTitle": "永平新港汕河体育协会 2 周年庆联欢晚宴",
|
||||||
"logos": [{ "imgSrc": "SamHor-HighRes.png" }, { "imgSrc": "关公文化-HighRes.png" }, { "imgSrc": "VWorld2 Logo.png" }],
|
"logos": [{ "imgSrc": "SamHor-HighRes.png" }, { "imgSrc": "关公文化-HighRes.png" }, { "imgSrc": "VWorld2 Logo.png" }],
|
||||||
"sponsorList": [
|
"sponsorList": [
|
||||||
|
{ "name": "Tootaio Studio", "type": "cash", "amount": 5000 },
|
||||||
|
{ "name": "路人甲子", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人乙丑", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人丙寅", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人丁卯", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人戊辰", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人己巳", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人庚午", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人辛未", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人壬申", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人癸酉", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人甲戌", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人乙亥", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人丙子", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人丁丑", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人戊寅", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人己卯", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人庚辰", "type": "cash", "amount": 500 },
|
||||||
|
{ "name": "路人辛巳", "type": "cash", "amount": 500 },
|
||||||
{ "name": "永平新港月圆联谊会", "type": "table", "amount": 1, "note": "" },
|
{ "name": "永平新港月圆联谊会", "type": "table", "amount": 1, "note": "" },
|
||||||
{ "name": "新港三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
{ "name": "新港三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
||||||
{ "name": "永平三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
{ "name": "永平三川福利联谊会", "type": "table", "amount": 1, "note": "" },
|
||||||
|
|||||||
@@ -33,30 +33,71 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app" class="h-screen flex flex-col select-none">
|
<div id="app" class="h-screen flex flex-col select-none">
|
||||||
<div class="text-center">{{eventTitle}}</div>
|
<div class="text-center text-6xl font-bold p-8 bg-red-700 text-white">
|
||||||
|
{{eventTitle}}
|
||||||
|
</div>
|
||||||
<!-- 特别赞助 -->
|
<!-- 特别赞助 -->
|
||||||
|
<div class="py-6 bg-yellow-300 text-red-500 shadow-yellow-500 shadow-lg">
|
||||||
<div class="overflow-clip mask-x-from-95% mask-x-to-100%">
|
<div class="overflow-clip mask-x-from-95% mask-x-to-100%">
|
||||||
<div class="flex pl-4 gap-4 w-max special-marquee-track">
|
<div class="flex pl-4 gap-4 w-max special-marquee-track text-4xl">
|
||||||
<div v-for="sponsor in specialSponsorDouble" :key="sponsor">
|
<div v-for="sponsor in specialSponsorDouble" :key="sponsor">
|
||||||
{{sponsor}}
|
{{sponsor}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- 下半部分二八分，左侧放 image，右侧走马灯 -->
|
<!-- 下半部分二八分，左侧放 image，右侧走马灯 -->
|
||||||
<div class="flex-1 flex min-h-0 overflow-clip">
|
<div
|
||||||
|
class="flex-1 flex min-h-0 overflow-clip bg-linear-to-b from-red-500 to-red-900"
|
||||||
|
>
|
||||||
<div class="flex-2 flex flex-col items-center justify-around">
|
<div class="flex-2 flex flex-col items-center justify-around">
|
||||||
<img
|
<img
|
||||||
v-for="logo in logos"
|
v-for="logo in logos"
|
||||||
:src="`../assets/${logo.imgSrc}`"
|
:src="`../assets/${logo.imgSrc}`"
|
||||||
:alt="logo.imgSrc"
|
:alt="logo.imgSrc"
|
||||||
class="w-[80%]"
|
class="w-[80%] drop-shadow-2xl"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-8">
|
<div class="flex-8 inset-red-lg">
|
||||||
<div class="flex flex-col pt-4 gap-4 sponsor-marquee-track">
|
<div class="flex flex-col pt-4 gap-4 px-4 sponsor-marquee-track">
|
||||||
<div v-for="sponsor in sponsorListDouble" :key="sponsor">
|
<div
|
||||||
<div v-if="sponsor.type == 'table'">
|
v-for="sponsor in sponsorListDouble"
|
||||||
{{sponsor.name}} {{tableToSeats(sponsor.amount)}}
|
:key="sponsor"
|
||||||
|
class="bg-linear-to-br from-white/20 to-white/10 px-16 py-4 rounded-2xl border-2 border-white/40"
|
||||||
|
>
|
||||||
|
<div v-if="sponsor.type == 'cash'" class="text-center py-8">
|
||||||
|
<div class="text-7xl text-yellow-400 font-bold">
|
||||||
|
RM {{sponsor.amount}}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-7xl text-white text-shadow-amber-400 text-shadow-lg"
|
||||||
|
>
|
||||||
|
{{sponsor.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="sponsor.type == 'cash-group'"
|
||||||
|
class="text-center py-8"
|
||||||
|
>
|
||||||
|
<div class="text-7xl text-yellow-400 font-bold mb-8">
|
||||||
|
RM {{sponsor.amount}}
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
<div v-for="child in sponsor.children" class="text-3xl px-4 py-2 bg-white/40 rounded-2xl">{{child}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="sponsor.type == 'table'"
|
||||||
|
class="flex items-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="text-3xl bg-red-500 text-white font-bold px-4 py-2 border-2 border-white rounded-full"
|
||||||
|
>
|
||||||
|
{{tableToSeats(sponsor.amount)}}
|
||||||
|
</div>
|
||||||
|
<div class="text-4xl font-bold flex-1 ml-4 text-white">
|
||||||
|
{{sponsor.name}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -77,11 +118,13 @@
|
|||||||
);
|
);
|
||||||
|
|
||||||
const typePriority = {
|
const typePriority = {
|
||||||
table: 3, // 优先级最高
|
table: 2, // 优先级最高
|
||||||
cash: 2,
|
cash: 3,
|
||||||
items: 1,
|
items: 1,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const groupByCashLessThan = ref(600);
|
||||||
|
|
||||||
function sortSponsors(list) {
|
function sortSponsors(list) {
|
||||||
return list.sort((a, b) => {
|
return list.sort((a, b) => {
|
||||||
// 先按 type 优先级排序（table > cash > items）
|
// 先按 type 优先级排序（table > cash > items）
|
||||||
@@ -109,14 +152,49 @@
|
|||||||
const sponsorListJsonData = await sponsorListResult.json();
|
const sponsorListJsonData = await sponsorListResult.json();
|
||||||
eventTitle.value = sponsorListJsonData.eventTitle || "活动名称";
|
eventTitle.value = sponsorListJsonData.eventTitle || "活动名称";
|
||||||
logos.value = sponsorListJsonData.logos || [];
|
logos.value = sponsorListJsonData.logos || [];
|
||||||
sponsorList.value = (sponsorListJsonData.sponsorList || []).map(
|
|
||||||
(s, idx) => ({
|
sponsorList.value = (
|
||||||
|
sponsorListJsonData.sponsorList || []
|
||||||
|
).reduce((acc, s, idx) => {
|
||||||
|
const sponsor = {
|
||||||
...s,
|
...s,
|
||||||
|
amount:
|
||||||
|
s.type == "cash"
|
||||||
|
? s.amount.toLocaleString("en-MY")
|
||||||
|
: s.amount,
|
||||||
_uid: `s-${idx}`,
|
_uid: `s-${idx}`,
|
||||||
})
|
};
|
||||||
);
|
|
||||||
|
// 如果是现金赞助且金额小于阈值
|
||||||
|
if (s.type === "cash" && s.amount < groupByCashLessThan.value) {
|
||||||
|
// 查找是否已存在该金额的分组
|
||||||
|
const groupId = `group-${s.amount}`;
|
||||||
|
let amountGroup = acc.find((item) => item._uid === groupId);
|
||||||
|
|
||||||
|
if (!amountGroup) {
|
||||||
|
// 创建新的金额分组
|
||||||
|
amountGroup = {
|
||||||
|
name: "其他赞助商",
|
||||||
|
type: "cash-group",
|
||||||
|
amount: s.amount, // 保持原始数字，不格式化
|
||||||
|
children: [],
|
||||||
|
_uid: groupId,
|
||||||
|
};
|
||||||
|
acc.push(amountGroup);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 将赞助商名称添加到分组的children中
|
||||||
|
amountGroup.children.push(s.name);
|
||||||
|
} else {
|
||||||
|
// 其他赞助商直接添加到结果中
|
||||||
|
acc.push(sponsor);
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, []);
|
||||||
// Sort SponsorList by type and amount
|
// Sort SponsorList by type and amount
|
||||||
sponsorList.value = sortSponsors(sponsorList.value);
|
sponsorList.value = sortSponsors(sponsorList.value);
|
||||||
|
console.log(sponsorList.value);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
}
|
}
|
||||||
@@ -141,14 +219,15 @@
|
|||||||
const specialSponsorDouble = computed(() => [
|
const specialSponsorDouble = computed(() => [
|
||||||
specialSponsor.value,
|
specialSponsor.value,
|
||||||
specialSponsor.value,
|
specialSponsor.value,
|
||||||
|
specialSponsor.value,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const tableToSeats = (amount) => {
|
const tableToSeats = (amount) => {
|
||||||
switch (amount) {
|
switch (amount) {
|
||||||
case 1:
|
case 1:
|
||||||
return "一桌";
|
return "一席";
|
||||||
case 0.5:
|
case 0.5:
|
||||||
return "半桌";
|
return "半席";
|
||||||
default:
|
default:
|
||||||
console.error("Error while converting table amount: ", amount);
|
console.error("Error while converting table amount: ", amount);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user