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/
|
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