Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f1f68ab8 1 parent e521e128

feat(recall): 新增积分汇总页面及资源文件 

添加积分汇总页面组件 PointsPage.vue，包含积分球动画效果和交互逻辑
添加相关图片资源文件用于页面展示
更新路由配置以支持积分汇总页面访问
修改登录页按钮文字颜色为白色
Inline Side-by-side
Showing 10 changed files with 189 additions and 2 deletions
1 /* 1 /*
2 * @Date: 2025-03-20 20:36:36 2 * @Date: 2025-03-20 20:36:36
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-12-23 17:54:30 4 + * @LastEditTime: 2025-12-24 09:36:29
5 * @FilePath: /mlaj/src/router/routes.js 5 * @FilePath: /mlaj/src/router/routes.js
6 * @Description: 路由地址映射配置 6 * @Description: 路由地址映射配置
7 */ 7 */
...@@ -145,6 +145,12 @@ export const routes = [ ...@@ -145,6 +145,12 @@ export const routes = [
145 meta: { title: '分享海报' }, 145 meta: { title: '分享海报' },
146 }, 146 },
147 { 147 {
148 + path: '/recall/points',
149 + name: 'Points',
150 + component: () => import('../views/recall/PointsPage.vue'),
151 + meta: { title: '积分汇总' },
152 + },
153 + {
148 path: '/checkout', 154 path: '/checkout',
149 name: 'CheckoutPage', 155 name: 'CheckoutPage',
150 component: () => import('../views/checkout/CheckoutPage.vue'), 156 component: () => import('../views/checkout/CheckoutPage.vue'),
......
1 +<template>
2 + <div class="points-page h-screen bg-cover bg-center bg-no-repeat relative overflow-hidden flex flex-col" :style="{ backgroundImage: `url(${bgImg})` }">
3 + <!-- 头部积分球区域 -->
4 + <div class="header-bubbles relative h-48 w-full pt-6 flex-shrink-0">
5 + <!-- 球体 1 -->
6 + <div class="bubble absolute left-10 top-12 animate-float-slow">
7 + <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})` }">
8 + <img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
9 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
10 + </div>
11 + </div>
12 +
13 + <!-- 球体 2 -->
14 + <div class="bubble absolute left-32 top-4 animate-float">
15 + <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})` }">
16 + <img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
17 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
18 + </div>
19 + </div>
20 +
21 + <!-- 球体 3 -->
22 + <div class="bubble absolute right-32 top-4 animate-float-delayed">
23 + <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})` }">
24 + <img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
25 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
26 + </div>
27 + </div>
28 +
29 + <!-- 球体 4 -->
30 + <div class="bubble absolute right-10 top-12 animate-float-slow-delayed">
31 + <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})` }">
32 + <img :src="jbImg" class="w-3.5 h-3.5 mb-0.5" alt="coin" />
33 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
34 + </div>
35 + </div>
36 +
37 + <!-- 球体 5 (新增) -->
38 + <div class="bubble absolute left-20 top-24 animate-float-delayed">
39 + <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})` }">
40 + <img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
41 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
42 + </div>
43 + </div>
44 +
45 + <!-- 球体 6 (新增) -->
46 + <div class="bubble absolute right-20 top-24 animate-float">
47 + <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})` }">
48 + <img :src="jbImg" class="w-3 h-3 mb-0.5" alt="coin" />
49 + <span class="text-white text-[8px] font-bold leading-none">+100</span>
50 + </div>
51 + </div>
52 +
53 + <!-- 球体 7 (新增) -->
54 + <div class="bubble absolute left-4 top-32 animate-float-slow">
55 + <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})` }">
56 + <img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
57 + <span class="text-white text-[6px] font-bold leading-none">+100</span>
58 + </div>
59 + </div>
60 +
61 + <!-- 球体 8 (新增) -->
62 + <div class="bubble absolute right-4 top-32 animate-float-slow-delayed">
63 + <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})` }">
64 + <img :src="jbImg" class="w-2.5 h-2.5 mb-0.5" alt="coin" />
65 + <span class="text-white text-[6px] font-bold leading-none">+100</span>
66 + </div>
67 + </div>
68 + </div>
69 +
70 + <!-- 中间瓶子 -->
71 + <div class="bottle-section flex justify-center -mt-24 mb-2 relative z-10 flex-shrink-0">
72 + <img :src="pzImg" class="w-64 h-auto object-contain drop-shadow-[0_0_15px_rgba(255,255,255,0.3)]" alt="bottle" />
73 + </div>
74 +
75 + <!-- 内容区域 -->
76 + <div class="flex-1 flex flex-col justify-between px-4 pb-24 overflow-hidden">
77 + <!-- 积分卡片 -->
78 + <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">
79 + <p class="text-white text-sm mb-1 opacity-90">您成功收集到</p>
80 + <div class="flex items-baseline justify-center mb-1">
81 + <span class="text-yellow-400 text-3xl font-bold mr-2 tracking-wider">15,800</span>
82 + <span class="text-white text-sm opacity-90">星球币</span>
83 + </div>
84 + <p class="text-white text-[12px] scale-90">基于您的历史活动自动计算所得 1元积1分</p>
85 + </div>
86 +
87 + <!-- 如何收获星球币卡片 -->
88 + <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">
89 + <h3 class="text-white text-[22px] font-bold mb-4 text-center shadow-text">如何收获星球币?</h3>
90 +
91 + <div class="space-y-4 flex-1 flex flex-col justify-center">
92 + <div v-for="(item, index) in harvestMethods" :key="index" class="flex items-center space-x-3 pl-4">
93 + <img :src="item.icon" class="w-4 h-4 object-contain" :alt="item.text" />
94 + <span class="text-white text-[15px] font-medium tracking-wide">{{ item.text }}</span>
95 + </div>
96 + </div>
97 +
98 + <div class="mt-4 text-center">
99 + <p class="text-white text-[12px] mb-0.5">每一步前行,</p>
100 + <p class="text-white text-[12px]">皆可兑换成照耀生命的星光。</p>
101 + </div>
102 + </div>
103 + </div>
104 +
105 + <!-- 底部按钮 -->
106 + <div class="fixed bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/50 to-transparent pb-8 z-20">
107 + <van-button block class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]" @click="handleExplore">
108 + 进入新星球探索
109 + </van-button>
110 + </div>
111 + </div>
112 +</template>
113 +
114 +<script setup>
115 +import { useTitle } from '@vueuse/core'
116 +import { useRouter } from 'vue-router'
117 +
118 +// 导入图片资源
119 +import bgImg from '@/assets/images/recall/bg01@2x.png'
120 +import ppImg from '@/assets/images/recall/pp@2x.png'
121 +import jbImg from '@/assets/images/recall/jb@2x.png'
122 +import pzImg from '@/assets/images/recall/pz@2x.png'
123 +import icon957 from '@/assets/images/recall/957@2x.png'
124 +import icon958 from '@/assets/images/recall/958@2x.png'
125 +import icon959 from '@/assets/images/recall/959@2x.png'
126 +import icon961 from '@/assets/images/recall/961@2x.png'
127 +
128 +useTitle('积分汇总')
129 +const router = useRouter()
130 +
131 +const harvestMethods = [
132 + { icon: icon957, text: '参加线下星球活动' },
133 + { icon: icon958, text: '参加线上学习活动' },
134 + { icon: icon959, text: '邀请挚友加入BEHALO' },
135 + { icon: icon961, text: '连续完成作业打卡' },
136 +]
137 +
138 +const handleExplore = () => {
139 + // 路由跳转逻辑
140 + console.log('Enter new planet exploration')
141 + // router.push('/...')
142 +}
143 +</script>
144 +
145 +<style lang="less" scoped>
146 +.submit-btn {
147 + // Add a subtle gradient for better visual
148 + background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
149 + backdrop-filter: blur(4px);
150 + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
151 +}
152 +.shadow-text {
153 + text-shadow: 0 2px 4px rgba(0,0,0,0.3);
154 +}
155 +
156 +@keyframes float {
157 + 0%, 100% { transform: translateY(0); }
158 + 50% { transform: translateY(-10px); }
159 +}
160 +
161 +@keyframes float-slow {
162 + 0%, 100% { transform: translateY(0); }
163 + 50% { transform: translateY(-8px); }
164 +}
165 +
166 +.animate-float {
167 + animation: float 3s ease-in-out infinite;
168 +}
169 +
170 +.animate-float-delayed {
171 + animation: float 3s ease-in-out infinite 1.5s;
172 +}
173 +
174 +.animate-float-slow {
175 + animation: float-slow 4s ease-in-out infinite 0.5s;
176 +}
177 +
178 +.animate-float-slow-delayed {
179 + animation: float-slow 4s ease-in-out infinite 2s;
180 +}
181 +</style>
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
75 </div> 75 </div>
76 <div class="p-4 border-t border-gray-100 bg-white safe-area-bottom"> 76 <div class="p-4 border-t border-gray-100 bg-white safe-area-bottom">
77 <van-button block round type="primary" color="linear-gradient(to right, #FFDD01, #E5C600)" 77 <van-button block round type="primary" color="linear-gradient(to right, #FFDD01, #E5C600)"
78 - class="!text-black !font-bold !h-[44px]" @click="showAgreement = false"> 78 + class="!text-white !font-bold !h-[44px]" @click="showAgreement = false">
79 我已阅读并同意 79 我已阅读并同意
80 </van-button> 80 </van-button>
81 </div> 81 </div>
......