Like 0
Fork 0

Last active 1 month ago

侧边栏捐赠名单显示

qxzhan's Avatar qxzhan revised this gist 1 month ago. Go to revision

No changes

qxzhan's Avatar qxzhan revised this gist 1 month ago. Go to revision

1 file changed, 369 insertions

js(file created)

@@ -0,0 +1,369 @@
1 + // 全局变量
2 + let allRewards = [];
3 + let currentPage = 1;
4 + const pageSize = 5;
5 +
6 + // 获取赞助信息并展示在侧栏
7 + fetch('https://rewards.qxzhan.cn/api/rewards')
8 + .then(response => {
9 + if (!response.ok) {
10 + throw new Error('Network response was not ok');
11 + }
12 + return response.json();
13 + })
14 + .then(data => {
15 + allRewards = data.data || [];
16 + showRewardsPage(currentPage);
17 + })
18 + .catch(error => {
19 + console.error('获取赞助信息失败:', error);
20 + const rewardsList = document.getElementById('rewards-list');
21 + if (rewardsList) {
22 + rewardsList.innerHTML = `
23 + <div style="padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; line-height: 1.6; background: var(--efu-card-bg, #fff); color: var(--efu-fontcolor, #333);">
24 + 暂未获取到赞助信息，请稍后再试
25 + </div>
26 + `;
27 + }
28 + });
29 +
30 + function showRewardsPage(page) {
31 + const rewardsList = document.getElementById('rewards-list');
32 +
33 + if (!rewardsList) {
34 + console.error('未找到赞助信息容器');
35 + return;
36 + }
37 +
38 + // 清空容器
39 + rewardsList.innerHTML = '';
40 +
41 + // 添加标题和赞助按钮
42 + const titleContainer = document.createElement('div');
43 + titleContainer.style.display = 'flex';
44 + titleContainer.style.justifyContent = 'space-between';
45 + titleContainer.style.alignItems = 'center';
46 + titleContainer.style.marginBottom = '15px';
47 + titleContainer.style.marginTop = '15px';
48 + titleContainer.style.borderBottom = '2px solid var(--efu-main, #49B1F5)';
49 + titleContainer.style.paddingBottom = '8px';
50 +
51 + const title = document.createElement('h3');
52 + title.innerHTML = '💝 赞助鸣谢';
53 + title.style.margin = '0';
54 + title.style.color = 'var(--efu-main, #49B1F5)';
55 +
56 + const sponsorButton = document.createElement('button');
57 + sponsorButton.innerHTML = '赞助作者';
58 + sponsorButton.style.background = 'var(--efu-main, #49B1F5)';
59 + sponsorButton.style.color = 'white';
60 + sponsorButton.style.border = 'none';
61 + sponsorButton.style.padding = '6px 12px';
62 + sponsorButton.style.borderRadius = '4px';
63 + sponsorButton.style.cursor = 'pointer';
64 + sponsorButton.style.fontSize = '14px';
65 + sponsorButton.style.transition = 'all 0.3s ease';
66 +
67 + // 按钮悬停效果
68 + sponsorButton.onmouseover = function() {
69 + this.style.background = 'var(--efu-theme, #1e9fff)';
70 + this.style.transform = 'translateY(-1px)';
71 + };
72 + sponsorButton.onmouseout = function() {
73 + this.style.background = 'var(--efu-main, #49B1F5)';
74 + this.style.transform = 'translateY(0)';
75 + };
76 +
77 + // 点击显示赞助模态框
78 + sponsorButton.onclick = function() {
79 + showSponsorModal();
80 + };
81 +
82 + titleContainer.appendChild(title);
83 + titleContainer.appendChild(sponsorButton);
84 + rewardsList.appendChild(titleContainer);
85 +
86 + // 检查是否有数据
87 + if (!allRewards || allRewards.length === 0) {
88 + const emptyMsg = document.createElement('div');
89 + emptyMsg.innerHTML = `
90 + <div style="padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 10px 0; line-height: 1.6; background: var(--efu-card-bg, #fff); color: var(--efu-fontcolor, #333); text-align: center;">
91 + 暂无赞助记录<br>
92 + <small style="color: var(--efu-secondtext, #999);">成为第一位赞助者吧！</small>
93 + </div>
94 + `;
95 + rewardsList.appendChild(emptyMsg);
96 + return;
97 + }
98 +
99 + // 按赞助金额排序（从高到低）
100 + const sortedRewards = [...allRewards].sort((a, b) => b.money - a.money);
101 +
102 + // 计算分页
103 + const totalPages = Math.ceil(sortedRewards.length / pageSize);
104 + const startIndex = (page - 1) * pageSize;
105 + const endIndex = Math.min(startIndex + pageSize, sortedRewards.length);
106 + const pageRewards = sortedRewards.slice(startIndex, endIndex);
107 +
108 + // 创建当前页的赞助列表
109 + pageRewards.forEach((reward, index) => {
110 + const globalIndex = startIndex + index;
111 + const rewardItem = document.createElement('div');
112 +
113 + // 格式化日期
114 + const date = new Date(reward.date);
115 + const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
116 +
117 + // 设置不同排名样式
118 + let rankStyle = '';
119 + if (globalIndex === 0) {
120 + rankStyle = 'border-left: 4px solid #FFD700; background: linear-gradient(135deg, var(--efu-card-bg, #fff) 0%, rgba(255,215,0,0.1) 100%);';
121 + } else if (globalIndex === 1) {
122 + rankStyle = 'border-left: 4px solid #C0C0C0; background: linear-gradient(135deg, var(--efu-card-bg, #fff) 0%, rgba(192,192,192,0.1) 100%);';
123 + } else if (globalIndex === 2) {
124 + rankStyle = 'border-left: 4px solid #CD7F32; background: linear-gradient(135deg, var(--efu-card-bg, #fff) 0%, rgba(205,127,50,0.1) 100%);';
125 + } else {
126 + rankStyle = 'border-left: 4px solid var(--efu-main, #49B1F5);';
127 + }
128 +
129 + rewardItem.innerHTML = `
130 + <div style="${rankStyle} padding: 12px 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 8px 0; line-height: 1.6; background: var(--efu-card-bg, #fff); transition: all 0.3s ease; cursor: pointer;"
131 + onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 8px rgba(0,0,0,0.15)';"
132 + onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)';">
133 + <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
134 + <span style="font-weight: bold; color: var(--efu-main, #49B1F5); font-size: 14px;">${reward.name}</span>
135 + <span style="color: #FF6B6B; font-weight: bold; font-size: 14px;">¥${reward.money}</span>
136 + </div>
137 + <div style="display: flex; justify-content: space-between; align-items: center;">
138 + <small style="color: var(--efu-secondtext, #999); font-size: 12px;">${formattedDate}</small>
139 + ${globalIndex < 3 ? `<span style="background: ${globalIndex === 0 ? '#FFD700' : globalIndex === 1 ? '#C0C0C0' : '#CD7F32'}; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold;">TOP${globalIndex + 1}</span>` : ''}
140 + </div>
141 + </div>
142 + `;
143 +
144 + rewardsList.appendChild(rewardItem);
145 + });
146 +
147 + // 添加统计信息
148 + const totalAmount = sortedRewards.reduce((sum, reward) => sum + reward.money, 0);
149 + const totalSponsors = sortedRewards.length;
150 +
151 + const stats = document.createElement('div');
152 + stats.innerHTML = `
153 + <div style="padding: 12px 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 15px 0 10px 0; line-height: 1.6; background: var(--efu-card-bg, #fff); border-top: 2px solid var(--efu-main, #49B1F5);">
154 + <div style="display: flex; justify-content: space-between; font-size: 13px;">
155 + <span style="color: var(--efu-fontcolor, #333);">累计赞助:</span>
156 + <span style="color: #FF6B6B; font-weight: bold;">¥${totalAmount}</span>
157 + </div>
158 + <div style="display: flex; justify-content: space-between; font-size: 13px; margin-top: 5px;">
159 + <span style="color: var(--efu-fontcolor, #333);">赞助人数:</span>
160 + <span style="color: var(--efu-main, #49B1F5); font-weight: bold;">${totalSponsors}人</span>
161 + </div>
162 + </div>
163 + `;
164 + rewardsList.appendChild(stats);
165 +
166 + // 添加分页控件（只有在需要分页时才显示）
167 + if (totalPages > 1) {
168 + const pagination = document.createElement('div');
169 + pagination.style.display = 'flex';
170 + pagination.style.justifyContent = 'center';
171 + pagination.style.alignItems = 'center';
172 + pagination.style.marginTop = '15px';
173 + pagination.style.gap = '8px';
174 +
175 + // 上一页按钮
176 + const prevButton = document.createElement('button');
177 + prevButton.innerHTML = '‹';
178 + prevButton.disabled = page === 1;
179 + prevButton.style.padding = '6px 12px';
180 + prevButton.style.border = '1px solid var(--efu-main, #49B1F5)';
181 + prevButton.style.background = page === 1 ? 'var(--efu-secondbg, #f6f6f6)' : 'var(--efu-card-bg, #fff)';
182 + prevButton.style.color = page === 1 ? 'var(--efu-secondtext, #999)' : 'var(--efu-main, #49B1F5)';
183 + prevButton.style.borderRadius = '4px';
184 + prevButton.style.cursor = page === 1 ? 'not-allowed' : 'pointer';
185 + prevButton.style.transition = 'all 0.3s ease';
186 +
187 + if (page > 1) {
188 + prevButton.onclick = () => {
189 + currentPage = page - 1;
190 + showRewardsPage(currentPage);
191 + };
192 + prevButton.onmouseover = () => {
193 + if (page > 1) prevButton.style.background = 'var(--efu-main, #49B1F5)';
194 + if (page > 1) prevButton.style.color = 'white';
195 + };
196 + prevButton.onmouseout = () => {
197 + if (page > 1) prevButton.style.background = 'var(--efu-card-bg, #fff)';
198 + if (page > 1) prevButton.style.color = 'var(--efu-main, #49B1F5)';
199 + };
200 + }
201 +
202 + // 页码信息
203 + const pageInfo = document.createElement('span');
204 + pageInfo.textContent = `${page} / ${totalPages}`;
205 + pageInfo.style.fontSize = '14px';
206 + pageInfo.style.color = 'var(--efu-fontcolor, #333)';
207 + pageInfo.style.padding = '0 10px';
208 +
209 + // 下一页按钮
210 + const nextButton = document.createElement('button');
211 + nextButton.innerHTML = '›';
212 + nextButton.disabled = page === totalPages;
213 + nextButton.style.padding = '6px 12px';
214 + nextButton.style.border = '1px solid var(--efu-main, #49B1F5)';
215 + nextButton.style.background = page === totalPages ? 'var(--efu-secondbg, #f6f6f6)' : 'var(--efu-card-bg, #fff)';
216 + nextButton.style.color = page === totalPages ? 'var(--efu-secondtext, #999)' : 'var(--efu-main, #49B1F5)';
217 + nextButton.style.borderRadius = '4px';
218 + nextButton.style.cursor = page === totalPages ? 'not-allowed' : 'pointer';
219 + nextButton.style.transition = 'all 0.3s ease';
220 +
221 + if (page < totalPages) {
222 + nextButton.onclick = () => {
223 + currentPage = page + 1;
224 + showRewardsPage(currentPage);
225 + };
226 + nextButton.onmouseover = () => {
227 + if (page < totalPages) nextButton.style.background = 'var(--efu-main, #49B1F5)';
228 + if (page < totalPages) nextButton.style.color = 'white';
229 + };
230 + nextButton.onmouseout = () => {
231 + if (page < totalPages) nextButton.style.background = 'var(--efu-card-bg, #fff)';
232 + if (page < totalPages) nextButton.style.color = 'var(--efu-main, #49B1F5)';
233 + };
234 + }
235 +
236 + pagination.appendChild(prevButton);
237 + pagination.appendChild(pageInfo);
238 + pagination.appendChild(nextButton);
239 + rewardsList.appendChild(pagination);
240 + }
241 + }
242 +
243 + // 赞助模态框函数
244 + function showSponsorModal() {
245 + // 创建模态框
246 + const modal = document.createElement('div');
247 + modal.style.position = 'fixed';
248 + modal.style.top = '0';
249 + modal.style.left = '0';
250 + modal.style.width = '100%';
251 + modal.style.height = '100%';
252 + modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
253 + modal.style.display = 'flex';
254 + modal.style.justifyContent = 'center';
255 + modal.style.alignItems = 'center';
256 + modal.style.zIndex = '1000';
257 +
258 + modal.innerHTML = `
259 + <div style="background: white; padding: 25px; border-radius: 12px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
260 + <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
261 + <h3 style="margin: 0; color: var(--efu-main, #49B1F5);">支持作者</h3>
262 + <button id="close-modal" style="
263 + background: none;
264 + border: none;
265 + font-size: 20px;
266 + cursor: pointer;
267 + color: var(--efu-secondtext, #999);
268 + transition: color 0.3s;
269 + ">×</button>
270 + </div>
271 +
272 + <p style="margin-bottom: 20px; color: var(--efu-fontcolor, #333);">感谢您的支持！您的赞助将鼓励我创作更多优质内容。</p>
273 +
274 + <div style="display: flex; justify-content: space-around; margin-bottom: 25px;">
275 + <div style="text-align: center;">
276 + <div style="font-weight: bold; margin-bottom: 8px; color: #07C160;">微信</div>
277 + <div style="width: 150px; height: 150px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
278 + <img src="https://image.lolimi.cn/2025/10/07/68e47ecc450c5.png" style="width: 150px; height: 150px; border-radius: 8px;" alt="微信赞赏码">
279 + </div>
280 + </div>
281 + <div style="text-align: center;">
282 + <div style="font-weight: bold; margin-bottom: 8px; color: #1677FF;">支付宝</div>
283 + <div style="width: 150px; height: 150px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto;">
284 + <img src="https://image.lolimi.cn/2025/10/07/68e47ecc3e3a9.jpg" style="width: 150px; height: 150px; border-radius: 8px;" alt="支付宝赞赏码">
285 + </div>
286 + </div>
287 + </div>
288 +
289 + <div style="border-top: 1px solid #eee; padding-top: 20px;">
290 + <p style="margin-bottom: 15px; color: var(--efu-secondtext, #999); font-size: 14px;">或者通过赞助网站支持</p>
291 + <button id="sponsor-site-btn" style="
292 + background: linear-gradient(135deg, var(--efu-main, #49B1F5) 0%, var(--efu-theme, #1e9fff) 100%);
293 + color: white;
294 + border: none;
295 + padding: 10px 20px;
296 + border-radius: 25px;
297 + font-size: 14px;
298 + font-weight: bold;
299 + cursor: pointer;
300 + transition: all 0.3s ease;
301 + display: inline-flex;
302 + align-items: center;
303 + gap: 8px;
304 + ">
305 + <span>💝</span>
306 + 前往赞助网站
307 + </button>
308 + </div>
309 + </div>
310 + `;
311 +
312 + document.body.appendChild(modal);
313 +
314 + // 关闭按钮事件
315 + const closeBtn = document.getElementById('close-modal');
316 + closeBtn.onclick = function() {
317 + modal.remove();
318 + };
319 +
320 + // 赞助网站按钮事件
321 + const sponsorSiteBtn = document.getElementById('sponsor-site-btn');
322 + sponsorSiteBtn.onmouseover = function() {
323 + this.style.transform = 'translateY(-2px)';
324 + this.style.boxShadow = '0 4px 12px rgba(73, 177, 245, 0.4)';
325 + };
326 + sponsorSiteBtn.onmouseout = function() {
327 + this.style.transform = 'translateY(0)';
328 + this.style.boxShadow = 'none';
329 + };
330 + sponsorSiteBtn.onclick = function() {
331 + window.open('https://rewards.qxzhan.cn/', '_blank');
332 + };
333 +
334 + // 点击背景关闭
335 + modal.onclick = function(e) {
336 + if (e.target === modal) {
337 + modal.remove();
338 + }
339 + };
340 +
341 + // ESC键关闭
342 + document.addEventListener('keydown', function closeModalOnEsc(e) {
343 + if (e.key === 'Escape') {
344 + modal.remove();
345 + document.removeEventListener('keydown', closeModalOnEsc);
346 + }
347 + });
348 + }
349 +
350 + // Pjax支持
351 + function handlePjaxComplete() {
352 + // 重新加载赞助信息
353 + fetch('https://rewards.qxzhan.cn/api/rewards')
354 + .then(response => response.json())
355 + .then(data => {
356 + allRewards = data.data || [];
357 + currentPage = 1; // 重置到第一页
358 + showRewardsPage(currentPage);
359 + })
360 + .catch(error => console.error('Pjax后获取赞助信息失败:', error));
361 + }
362 +
363 + // 添加pjax:complete事件监听
364 + document.addEventListener('pjax:complete', handlePjaxComplete);
365 +
366 + // 页面加载完成后初始化
367 + document.addEventListener('DOMContentLoaded', function() {
368 + // 赞助信息会在页面加载时自动获取并显示
369 + });
Newer Older

Powered by Opengist ⋅ Load: 53ms⋅

English
⋅ 青序栈 ⋅ 捐赠