PointsPage.vue
8.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<template>
<div class="points-page h-screen bg-cover bg-center bg-no-repeat relative overflow-hidden flex flex-col">
<!-- Starry Background Effect -->
<StarryBackground :bg-image="bgImg" />
<!-- 头部积分球区域 -->
<div class="header-bubbles relative h-48 w-full pt-6 flex-shrink-0">
<!-- 球体 1 -->
<div class="bubble absolute left-10 top-12 animate-float-slow">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 2 -->
<div class="bubble absolute left-32 top-4 animate-float">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 3 -->
<div class="bubble absolute right-32 top-4 animate-float-delayed">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 4 -->
<div class="bubble absolute right-10 top-12 animate-float-slow-delayed">
<div class="bubble-bg w-12 h-12 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 5 (新增) -->
<div class="bubble absolute left-20 top-24 animate-float-delayed">
<div class="bubble-bg w-10 h-10 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 6 (新增) -->
<div class="bubble absolute right-20 top-24 animate-float">
<div class="bubble-bg w-10 h-10 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
<span class="text-white text-[8px] font-bold leading-none">+100</span>
</div>
</div>
<!-- 球体 7 (新增) -->
<!-- <div class="bubble absolute left-4 top-32 animate-float-slow">
<div class="bubble-bg w-8 h-8 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
<span class="text-white text-[6px] font-bold leading-none">+100</span>
</div>
</div> -->
<!-- 球体 8 (新增) -->
<!-- <div class="bubble absolute right-4 top-32 animate-float-slow-delayed">
<div class="bubble-bg w-8 h-8 bg-contain bg-center bg-no-repeat flex flex-col items-center justify-center" :style="{ backgroundImage: `url(${ppImg})` }">
<img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
<span class="text-white text-[6px] font-bold leading-none">+100</span>
</div>
</div> -->
</div>
<!-- 中间瓶子 -->
<div class="bottle-section flex justify-center -mt-20 relative z-10 flex-shrink-0" style="margin-top: -8rem;">
<img :src="pzImg" class="w-48 h-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]" alt="bottle" />
</div>
<!-- 内容区域 -->
<div class="flex flex-col justify-between px-4 pb-24 overflow-hidden">
<!-- 积分卡片 -->
<div class="mb-2 bg-white/10 backdrop-blur-md rounded-2xl p-4 text-center border border-white/20 shadow-lg flex-shrink-0">
<p class="text-white text-sm mb-1 opacity-90">您成功收集到</p>
<div class="flex items-baseline justify-center mb-1">
<span class="text-yellow-400 text-3xl font-bold mr-2 tracking-wider">{{ totalPoints || 0 }}</span>
<span class="text-white text-sm opacity-90">星球币</span>
</div>
<p class="text-white text-[12px] scale-90">基于您的历史活动自动计算所得 1元积1分</p>
</div>
<!-- 如何收获星球币卡片 -->
<div class="bg-white/10 backdrop-blur-md rounded-2xl p-4 border border-white/20 shadow-lg flex flex-col justify-center flex-1 min-h-0">
<h3 class="text-white text-[22px] font-bold mb-4 text-center shadow-text">如何收获星球币?</h3>
<div class="space-y-4 flex-1 flex flex-col justify-center">
<div v-for="(item, index) in harvestMethods" :key="index" class="flex items-center space-x-3 pl-4">
<img :src="item.icon" class="w-4 h-4 object-contain" :alt="item.text" />
<span class="text-white text-[15px] font-medium tracking-wide">{{ item.text }}</span>
</div>
</div>
<div class="mt-4 text-center">
<p class="text-white text-[12px] mb-0.5">每一步前行,</p>
<p class="text-white text-[12px]">皆可兑换成照耀生命的星光。</p>
</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="fixed bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/50 to-transparent pb-6 z-20">
<van-button block class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]" @click="handleExplore">
进入新星球探索
</van-button>
</div>
</div>
</template>
<script setup>
import { useTitle } from '@vueuse/core'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getPointsListAPI } from '@/api/points'
const bgImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/bg01@2x.png'
const ppImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/pp@2x.png'
const jbImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/jb@2x.png'
const pzImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/pz@2x.png'
const icon957 = 'https://cdn.ipadbiz.cn/mlaj/recall/img/957@2x.png'
const icon958 = 'https://cdn.ipadbiz.cn/mlaj/recall/img/958@2x.png'
const icon959 = 'https://cdn.ipadbiz.cn/mlaj/recall/img/959@2x.png'
const icon961 = 'https://cdn.ipadbiz.cn/mlaj/recall/img/961@2x.png'
useTitle('积分汇总')
const router = useRouter()
const harvestMethods = [
{ icon: icon957, text: '参加线下星球活动' },
{ icon: icon958, text: '参加线上学习活动' },
{ icon: icon959, text: '邀请挚友加入BEHALO' },
{ icon: icon961, text: '连续完成作业打卡' },
]
const handleExplore = () => {
// 路由跳转逻辑
router.push('/')
}
const totalPoints = ref(0);
onMounted(async () => {
const res = await getPointsListAPI()
if (res.code) {
// 需要格式化一下, 变成千分号显示
totalPoints.value = Number(res.data?.balance || 0).toLocaleString();
}
})
</script>
<style lang="less" scoped>
.submit-btn {
// Add a subtle gradient for better visual
background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.shadow-text {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes float-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-float-delayed {
animation: float 3s ease-in-out infinite 1.5s;
}
.animate-float-slow {
animation: float-slow 4s ease-in-out infinite 0.5s;
}
.animate-float-slow-delayed {
animation: float-slow 4s ease-in-out infinite 2s;
}
</style>