feat: add week star activity page
This commit is contained in:
hy
parent
87392d7a2f
commit
eafe4a947e
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
dist/
|
||||
.DS_Store
|
||||
|
||||
807
h5/activity/week-star/index.html
Normal file
807
h5/activity/week-star/index.html
Normal file
@ -0,0 +1,807 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
|
||||
<title>yumi周榜</title>
|
||||
<style>
|
||||
:root {
|
||||
--page-width: 375px;
|
||||
--green-850: #0b3209;
|
||||
--green-700: #17532c;
|
||||
--cream-300: #f8efb3;
|
||||
--orange-700: #c56714;
|
||||
--hero-image: url("../../assets/yumi-week-star/hero-en.png");
|
||||
--title-frame-image: url("../../assets/yumi-week-star/title-frame.png");
|
||||
--subtitle-frame-image: url("../../assets/yumi-week-star/subtitle-frame.png");
|
||||
--gift-frame-image: url("../../assets/yumi-week-star/gift-frame.png");
|
||||
--tab-default-image: url("../../assets/yumi-week-star/tab-default.png");
|
||||
--tab-active-image: url("../../assets/yumi-week-star/tab-active.png");
|
||||
--rank-top1-image: url("../../assets/yumi-week-star/rank-top1.png");
|
||||
--rank-top2-image: url("../../assets/yumi-week-star/rank-top2.png");
|
||||
--rank-top3-image: url("../../assets/yumi-week-star/rank-top3.png");
|
||||
--reward-card-frame-image: url("../../assets/yumi-week-star/reward-card-frame.png");
|
||||
--reward-board-image: url("../../assets/yumi-week-star/reward-board.png");
|
||||
--bottom-glow-image: url("../../assets/yumi-week-star/bottom-glow.png");
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
background: #f0f0f0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #ffffff;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: min(100%, var(--page-width));
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, #163a07 0%, #123708 38%, #0d2f08 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
background: linear-gradient(180deg, rgba(255, 219, 118, 0.04), rgba(255, 219, 118, 0));
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
aspect-ratio: 1080 / 1027;
|
||||
background: center top / cover no-repeat var(--hero-image);
|
||||
}
|
||||
|
||||
.hero-visual::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 84px;
|
||||
background: linear-gradient(180deg, rgba(16, 55, 8, 0) 0%, rgba(12, 46, 7, 0.78) 100%);
|
||||
}
|
||||
|
||||
.hero-floor,
|
||||
.hero-ribbon,
|
||||
.hero-crown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 88px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-period {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: min(72%, 230px);
|
||||
max-width: calc(100% - 44px);
|
||||
aspect-ratio: 665 / 88;
|
||||
padding: 0 24px 6px;
|
||||
background: center / 100% 100% no-repeat var(--subtitle-frame-image);
|
||||
color: #f8e29b;
|
||||
font-size: 13px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-copy {
|
||||
padding: 18px 22px 0;
|
||||
color: var(--cream-300);
|
||||
font-size: 15px;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.gift-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 14px 15px 0;
|
||||
}
|
||||
|
||||
.gift-card {
|
||||
position: relative;
|
||||
aspect-ratio: 250 / 269;
|
||||
padding: 14px 12px 24px;
|
||||
background: center / 100% 100% no-repeat var(--gift-frame-image);
|
||||
}
|
||||
|
||||
.gift-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gift-inner img {
|
||||
display: block;
|
||||
width: 74%;
|
||||
height: 74%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.gift-empty {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.tab-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding: 14px 15px 0;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 336 / 126;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tab-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: center / 100% 100% no-repeat var(--tab-default-image);
|
||||
}
|
||||
|
||||
.tab-button.active::before {
|
||||
background-image: var(--tab-active-image);
|
||||
width: 103.4%;
|
||||
height: 109%;
|
||||
}
|
||||
|
||||
.tab-button span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
color: #fff8ef;
|
||||
font-size: 11px;
|
||||
line-height: 1.04;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tab-button.active span {
|
||||
color: #c15f17;
|
||||
}
|
||||
|
||||
.period-strip {
|
||||
padding: 18px 18px 16px;
|
||||
color: #fff8c6;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rank-stage {
|
||||
position: relative;
|
||||
min-height: 264px;
|
||||
background: linear-gradient(180deg, rgba(14, 53, 11, 0.1), rgba(11, 48, 8, 0));
|
||||
}
|
||||
|
||||
.rank-stage::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
background:
|
||||
center bottom / 100% 100% no-repeat var(--bottom-glow-image),
|
||||
linear-gradient(180deg, rgba(11, 48, 8, 0) 0%, rgba(11, 48, 8, 0.78) 100%);
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rank-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 49px;
|
||||
padding: 5px 16px 5px 10px;
|
||||
}
|
||||
|
||||
.rank-row.light {
|
||||
background: var(--green-700);
|
||||
}
|
||||
|
||||
.rank-row.dark {
|
||||
background: var(--green-850);
|
||||
}
|
||||
|
||||
.rank-row.placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.rank-mark {
|
||||
width: 30px;
|
||||
flex: 0 0 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-badge-icon {
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.rank-mark .plain {
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rank-avatar {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
flex: 0 0 39px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
|
||||
.rank-avatar img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.rank-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rank-score {
|
||||
flex: 0 0 auto;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
padding: 22px 20px 58px;
|
||||
text-align: center;
|
||||
color: var(--cream-300);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.reward-stage {
|
||||
padding: 22px 12px 10px;
|
||||
}
|
||||
|
||||
.reward-board {
|
||||
position: relative;
|
||||
padding: 15px 12px 18px;
|
||||
background: center / 100% 100% no-repeat var(--reward-board-image);
|
||||
}
|
||||
|
||||
.reward-stage::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 36px;
|
||||
background: center top / 100% 100% no-repeat var(--bottom-glow-image);
|
||||
}
|
||||
|
||||
.reward-tier+.reward-tier {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.reward-head {
|
||||
width: 268px;
|
||||
max-width: 100%;
|
||||
aspect-ratio: 760 / 130;
|
||||
margin: 0 auto 12px;
|
||||
position: relative;
|
||||
padding: 0 32px;
|
||||
background: center / 100% 100% no-repeat var(--title-frame-image);
|
||||
color: #ffe789;
|
||||
}
|
||||
|
||||
.reward-head-text {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
top: 57%;
|
||||
transform: translateY(-37%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.reward-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.reward-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reward-thumb {
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
background: center / 100% 100% no-repeat var(--reward-card-frame-image);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reward-thumb img {
|
||||
width: 78%;
|
||||
height: 78%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.reward-label {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
color: var(--orange-700);
|
||||
font-size: 10px;
|
||||
line-height: 1.16;
|
||||
font-weight: 700;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.reward-empty {
|
||||
padding: 18px 14px 10px;
|
||||
text-align: center;
|
||||
color: var(--orange-700);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.hero-period {
|
||||
width: min(74%, 220px);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.top-copy {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.gift-grid,
|
||||
.tab-row,
|
||||
.reward-stage {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.__H5_ROUTE_PATH__ = "/activity/week-star";
|
||||
</script>
|
||||
<script src="../../assets/yumi-route-entry.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page" x-data="weekStarPage()" x-init="init()" x-cloak>
|
||||
<section class="hero">
|
||||
<div class="hero-visual">
|
||||
<div class="hero-ribbon left" aria-hidden="true"></div>
|
||||
<div class="hero-ribbon right" aria-hidden="true"></div>
|
||||
<div class="hero-floor" aria-hidden="true"></div>
|
||||
<div class="hero-crown" aria-hidden="true">
|
||||
<span class="wing left"></span>
|
||||
<span class="wing right"></span>
|
||||
<span class="core"></span>
|
||||
<span class="gem left"></span>
|
||||
<span class="gem right"></span>
|
||||
</div>
|
||||
<div class="hero-title">
|
||||
<h1 class="sr-only">WEEKLY STAR</h1>
|
||||
<div class="hero-period" x-text="heroPeriodText()"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="top-copy">
|
||||
Note: Send the following three gifts to participate in the ranking. Users who
|
||||
rank in the top 3 of the leaderboard will receive rewards.
|
||||
</div>
|
||||
|
||||
<div class="gift-grid">
|
||||
<template x-for="gift in giftSlots()" :key="gift.key">
|
||||
<div class="gift-card" :class="{ 'gift-empty': gift.placeholder }" :title="giftTitle(gift)">
|
||||
<div class="gift-inner">
|
||||
<template x-if="!gift.placeholder">
|
||||
<img :src="giftCover(gift)" :alt="giftTitle(gift)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<nav class="tab-row">
|
||||
<button type="button" class="tab-button" :class="{ active: activeTab === 'last' }" @click="activeTab = 'last'">
|
||||
<span>Previous Top 3 Records</span>
|
||||
</button>
|
||||
<button type="button" class="tab-button" :class="{ active: activeTab === 'current' }"
|
||||
@click="activeTab = 'current'">
|
||||
<span>This Week's rank list</span>
|
||||
</button>
|
||||
<button type="button" class="tab-button" :class="{ active: activeTab === 'reward' }"
|
||||
@click="activeTab = 'reward'">
|
||||
<span>Reward Description</span>
|
||||
</button>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<template x-if="activeTab !== 'reward'">
|
||||
<div class="period-strip" x-text="activePeriodText()"></div>
|
||||
</template>
|
||||
|
||||
<section class="rank-stage" x-show="activeTab !== 'reward'">
|
||||
<ul class="rank-list">
|
||||
<template x-for="(item, index) in displayRows()" :key="item.key">
|
||||
<li class="rank-row" :class="rowClass(index, item)">
|
||||
<div class="rank-mark">
|
||||
<template x-if="isTopRank(item.rank)">
|
||||
<img class="rank-badge-icon" :src="topRankIcon(item.rank)" :alt="'Top ' + item.rank" />
|
||||
</template>
|
||||
<template x-if="!isTopRank(item.rank)">
|
||||
<span class="plain" x-text="item.rank"></span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="rank-avatar">
|
||||
<template x-if="!item.placeholder">
|
||||
<img :src="avatarOf(item)" :alt="item.userNickname || 'avatar'" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="rank-name" x-text="rowName(item)"></div>
|
||||
<div class="rank-score" x-text="rowScore(item)"></div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<div class="empty-message" x-show="!hasRealRows() && !error">
|
||||
No ranking data yet. Send the selected gifts and the leaderboard will update
|
||||
here.
|
||||
</div>
|
||||
<div class="empty-message" x-show="error" x-text="error"></div>
|
||||
</section>
|
||||
|
||||
<section class="reward-stage" x-show="activeTab === 'reward'">
|
||||
<div class="reward-board">
|
||||
<template x-for="reward in rewardGroups()" :key="reward.key">
|
||||
<div class="reward-tier">
|
||||
<div class="reward-head">
|
||||
<span class="reward-head-text" x-text="'Top' + reward.rank"></span>
|
||||
</div>
|
||||
<div class="reward-grid" x-show="reward.items.length">
|
||||
<template x-for="item in reward.items" :key="item.key">
|
||||
<div class="reward-card">
|
||||
<div class="reward-thumb">
|
||||
<img :src="rewardCover(item)" :alt="rewardLabel(item)" />
|
||||
</div>
|
||||
<span class="reward-label" x-text="rewardLabel(item)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="reward-empty" x-show="!reward.items.length">
|
||||
Reward group is ready. Detailed items are not available yet.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const DEFAULT_AVATAR = "../../assets/defaultAvatar-CdxWBK1k-1776148661448.png";
|
||||
const FALLBACK_IMAGE = "../../assets/coin-lz3Tp0nX-1776148661447.png";
|
||||
const DEFAULT_WEEK_STAR_API_BASE = "https://jvapi.haiyihy.com/";
|
||||
const TOP_RANK_ICONS = {
|
||||
1: "../../assets/yumi-week-star/rank-top1.png",
|
||||
2: "../../assets/yumi-week-star/rank-top2.png",
|
||||
3: "../../assets/yumi-week-star/rank-top3.png",
|
||||
};
|
||||
|
||||
function normalizeBaseURL(base) {
|
||||
const value = String(base || "").trim();
|
||||
if (!value) {
|
||||
return DEFAULT_WEEK_STAR_API_BASE;
|
||||
}
|
||||
return value.endsWith("/") ? value : value + "/";
|
||||
}
|
||||
|
||||
function resolveWeekStarAPIBase() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const queryBase = params.get("apiBase");
|
||||
if (queryBase) {
|
||||
return normalizeBaseURL(queryBase);
|
||||
}
|
||||
if (typeof window.__WEEK_STAR_API_BASE__ === "string") {
|
||||
return normalizeBaseURL(window.__WEEK_STAR_API_BASE__);
|
||||
}
|
||||
return normalizeBaseURL(DEFAULT_WEEK_STAR_API_BASE);
|
||||
}
|
||||
|
||||
function weekStarPage() {
|
||||
return {
|
||||
activeTab: "last",
|
||||
data: normalizePageData({}),
|
||||
error: "",
|
||||
|
||||
activePeriodText() {
|
||||
if (this.activeTab === "last") {
|
||||
return this.data.lastPeriodText || this.data.currentPeriodText || "--";
|
||||
}
|
||||
return this.data.currentPeriodText || this.data.lastPeriodText || "--";
|
||||
},
|
||||
|
||||
avatarOf(item) {
|
||||
return item && item.userAvatar ? item.userAvatar : DEFAULT_AVATAR;
|
||||
},
|
||||
|
||||
buildRows(list, minSize, maxSize) {
|
||||
const realRows = (Array.isArray(list) ? list : []).slice(0, maxSize).map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
key: "row-" + (item.userId || "u") + "-" + (item.rank || index + 1),
|
||||
placeholder: false,
|
||||
rank: Number(item.rank || index + 1),
|
||||
};
|
||||
});
|
||||
const targetSize = Math.max(realRows.length, minSize);
|
||||
while (realRows.length < targetSize) {
|
||||
realRows.push({
|
||||
key: "placeholder-" + this.activeTab + "-" + realRows.length,
|
||||
placeholder: true,
|
||||
rank: realRows.length + 1,
|
||||
});
|
||||
}
|
||||
return realRows;
|
||||
},
|
||||
|
||||
displayRows() {
|
||||
if (this.activeTab === "current") {
|
||||
return this.buildRows(this.data.thisWeekTop10, 5, 10);
|
||||
}
|
||||
return this.buildRows(this.data.lastWeekTop3, 4, 4);
|
||||
},
|
||||
|
||||
async fetchPage() {
|
||||
this.error = "";
|
||||
try {
|
||||
const url = new URL("/go/public/h5/week-star/page", resolveWeekStarAPIBase());
|
||||
const sysOrigin = new URLSearchParams(window.location.search).get("sysOrigin");
|
||||
if (sysOrigin) {
|
||||
url.searchParams.set("sysOrigin", sysOrigin);
|
||||
}
|
||||
const response = await fetch(url.toString(), {
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Please retry later.");
|
||||
}
|
||||
const contentType = response.headers.get("content-type") || "";
|
||||
if (!contentType.includes("application/json")) {
|
||||
this.data = normalizePageData({});
|
||||
return;
|
||||
}
|
||||
const json = await response.json();
|
||||
const body = json && (json.body || json.data || json);
|
||||
this.data = normalizePageData(body);
|
||||
} catch (error) {
|
||||
this.error =
|
||||
error && error.name === "TypeError"
|
||||
? ""
|
||||
: error && error.message
|
||||
? error.message
|
||||
: "Please retry later.";
|
||||
this.data = normalizePageData({});
|
||||
}
|
||||
},
|
||||
|
||||
giftCover(gift) {
|
||||
return gift && gift.giftPhoto ? gift.giftPhoto : FALLBACK_IMAGE;
|
||||
},
|
||||
|
||||
giftSlots() {
|
||||
const slots = (this.data.qualifyingGifts || []).slice(0, 3).map((gift, index) => {
|
||||
return {
|
||||
...gift,
|
||||
key: "gift-" + (gift.giftId || index),
|
||||
placeholder: false,
|
||||
};
|
||||
});
|
||||
while (slots.length < 3) {
|
||||
slots.push({
|
||||
key: "gift-placeholder-" + slots.length,
|
||||
placeholder: true,
|
||||
});
|
||||
}
|
||||
return slots;
|
||||
},
|
||||
|
||||
giftTitle(gift) {
|
||||
if (!gift || gift.placeholder) {
|
||||
return "Gift";
|
||||
}
|
||||
return gift.giftName || "Gift " + gift.giftId;
|
||||
},
|
||||
|
||||
hasRealRows() {
|
||||
return this.displayRows().some((item) => !item.placeholder);
|
||||
},
|
||||
|
||||
heroPeriodText() {
|
||||
return this.data.currentPeriodText || this.data.lastPeriodText || "--";
|
||||
},
|
||||
|
||||
init() {
|
||||
this.fetchPage();
|
||||
},
|
||||
|
||||
isTopRank(rank) {
|
||||
return Number(rank) >= 1 && Number(rank) <= 3;
|
||||
},
|
||||
|
||||
topRankIcon(rank) {
|
||||
return TOP_RANK_ICONS[Number(rank)] || TOP_RANK_ICONS[3];
|
||||
},
|
||||
|
||||
rewardCover(item) {
|
||||
return item && item.cover ? item.cover : FALLBACK_IMAGE;
|
||||
},
|
||||
|
||||
rewardGroups() {
|
||||
const sourceMap = new Map();
|
||||
(this.data.rewardPreview || []).forEach((group) => {
|
||||
sourceMap.set(Number(group.rank), group || {});
|
||||
});
|
||||
return [1, 2, 3].map((rank) => {
|
||||
const group = sourceMap.get(rank) || {};
|
||||
const items = Array.isArray(group.items) ? group.items : [];
|
||||
return {
|
||||
...group,
|
||||
key: "reward-group-" + rank,
|
||||
rank,
|
||||
items: items.map((item, index) => ({
|
||||
...item,
|
||||
key:
|
||||
"reward-item-" +
|
||||
rank +
|
||||
"-" +
|
||||
(item.id || item.rewardId || item.name || item.content || index),
|
||||
})),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
rewardLabel(item) {
|
||||
const name = item && (item.name || item.content || item.type) ? item.name || item.content || item.type : "Reward";
|
||||
const quantity = Number(item && item.quantity ? item.quantity : 0);
|
||||
return quantity > 0 ? name + " (" + quantity + " days)" : name;
|
||||
},
|
||||
|
||||
rowClass(index, item) {
|
||||
const stripe = index % 2 === 0 ? "light" : "dark";
|
||||
return item.placeholder ? stripe + " placeholder" : stripe;
|
||||
},
|
||||
|
||||
rowName(item) {
|
||||
if (!item || item.placeholder) {
|
||||
return "";
|
||||
}
|
||||
return item.userNickname || ("User " + item.userId);
|
||||
},
|
||||
|
||||
rowScore(item) {
|
||||
if (!item || item.placeholder) {
|
||||
return "";
|
||||
}
|
||||
return toScoreText(item.scoreGold);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function normalizePageData(raw) {
|
||||
const value = raw || {};
|
||||
return {
|
||||
activityStatus: value.activityStatus || "DISABLED",
|
||||
countdownMillis: Number(value.countdownMillis || 0),
|
||||
currentPeriodText: value.currentPeriodText || "",
|
||||
lastPeriodText: value.lastPeriodText || "",
|
||||
lastWeekTop3: Array.isArray(value.lastWeekTop3) ? value.lastWeekTop3 : [],
|
||||
qualifyingGifts: Array.isArray(value.qualifyingGifts) ? value.qualifyingGifts : [],
|
||||
rewardPreview: Array.isArray(value.rewardPreview) ? value.rewardPreview : [],
|
||||
thisWeekTop10: Array.isArray(value.thisWeekTop10) ? value.thisWeekTop10 : [],
|
||||
};
|
||||
}
|
||||
|
||||
function toScoreText(value) {
|
||||
const number = Number(value || 0);
|
||||
if (!Number.isFinite(number)) {
|
||||
return "0";
|
||||
}
|
||||
return String(Math.max(0, Math.trunc(number)));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
17
h5/assets/yumi-week-star/README.md
Normal file
17
h5/assets/yumi-week-star/README.md
Normal file
@ -0,0 +1,17 @@
|
||||
Exported Figma assets for the week-star H5 live here.
|
||||
|
||||
Current file map:
|
||||
- `hero-en.png`
|
||||
- `title-frame.png`
|
||||
- `subtitle-frame.png`
|
||||
- `gift-frame.png`
|
||||
- `tab-default.png`
|
||||
- `tab-active.png`
|
||||
- `rank-top1.png`
|
||||
- `rank-top2.png`
|
||||
- `rank-top3.png`
|
||||
- `reward-card-frame.png`
|
||||
- `reward-board.png`
|
||||
- `bottom-glow.png`
|
||||
|
||||
The page still uses live user, gift, and reward images from the API plus local shared placeholders.
|
||||
BIN
h5/assets/yumi-week-star/bottom-glow.png
Normal file
BIN
h5/assets/yumi-week-star/bottom-glow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
h5/assets/yumi-week-star/gift-frame.png
Normal file
BIN
h5/assets/yumi-week-star/gift-frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
h5/assets/yumi-week-star/hero-en.png
Normal file
BIN
h5/assets/yumi-week-star/hero-en.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
h5/assets/yumi-week-star/rank-top1.png
Normal file
BIN
h5/assets/yumi-week-star/rank-top1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
h5/assets/yumi-week-star/rank-top2.png
Normal file
BIN
h5/assets/yumi-week-star/rank-top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
h5/assets/yumi-week-star/rank-top3.png
Normal file
BIN
h5/assets/yumi-week-star/rank-top3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
h5/assets/yumi-week-star/reward-board.png
Normal file
BIN
h5/assets/yumi-week-star/reward-board.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 386 KiB |
BIN
h5/assets/yumi-week-star/reward-card-frame.png
Normal file
BIN
h5/assets/yumi-week-star/reward-card-frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
h5/assets/yumi-week-star/subtitle-frame.png
Normal file
BIN
h5/assets/yumi-week-star/subtitle-frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
h5/assets/yumi-week-star/tab-active.png
Normal file
BIN
h5/assets/yumi-week-star/tab-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
h5/assets/yumi-week-star/tab-default.png
Normal file
BIN
h5/assets/yumi-week-star/tab-default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
h5/assets/yumi-week-star/title-frame.png
Normal file
BIN
h5/assets/yumi-week-star/title-frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Loading…
x
Reference in New Issue
Block a user