rhettclaw/zhibisheng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化UI显示，添加商品图片占位、佣金显示、真实链接跳转

Browse Source
This commit is contained in:
Midas
2026-06-22 23:52:54 +08:00
parent 22a38eb9fb
commit 598f3ec334
2 changed files with 86 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+40 -23
View File
@@ -58,11 +58,13 @@
.deals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .deals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.deal-card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; } .deal-card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; }
.deal-card:active { transform: scale(0.98); } .deal-card:active { transform: scale(0.98); }
.deal-img { width: 100%; height: 90px; background: #f3f4f6; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 32px; } .deal-img { width: 100%; height: 100px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .deal-img img { width: 100%; height: 100%; object-fit: cover; }
.deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; height: 2.8em; }
.deal-price { color: #ef4444; font-weight: 700; font-size: 16px; } .deal-price { color: #ef4444; font-weight: 700; font-size: 16px; }
.deal-price span { font-size: 12px; } .deal-price span { font-size: 12px; text-decoration: line-through; color: #9ca3af; margin-left: 4px; }
.deal-tag { display: inline-block; background: #fef2f2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; } .deal-tag { display: inline-block; background: linear-gradient(135deg, #ef4444, #f97316); color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
.deal-commission { font-size: 11px; color: var(--primary); margin-top: 4px; font-weight: 600; }
/* Linbao List */ /* Linbao List */
.linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
@@ -79,7 +81,8 @@
.product-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; cursor: pointer; transition: background 0.15s; } .product-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; cursor: pointer; transition: background 0.15s; }
.product-item:last-child { border-bottom: none; } .product-item:last-child { border-bottom: none; }
.product-item:active { background: #f9fafb; } .product-item:active { background: #f9fafb; }
.product-img { width: 72px; height: 72px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; } .product-img { width: 72px; height: 72px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-info { flex: 1; min-width: 0; } .product-info { flex: 1; min-width: 0; }
.product-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; } .product-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
@@ -137,15 +140,15 @@
</div> </div>
<div class="stats"> <div class="stats">
<div class="stat"> <div class="stat">
<div class="stat-value" id="statDeals">0</div> <div class="stat-value" id="statDeals">6</div>
<div class="stat-label">今日特价</div> <div class="stat-label">今日特价</div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-value" id="statCoupon">0</div> <div class="stat-value" id="statCoupon">2</div>
<div class="stat-label">覆盖平台</div> <div class="stat-label">覆盖平台</div>
</div> </div>
<div class="stat"> <div class="stat">
<div class="stat-value">¥0</div> <div class="stat-value" id="statSaved">¥12</div>
<div class="stat-label">已帮省下</div> <div class="stat-label">已帮省下</div>
</div> </div>
</div> </div>
@@ -211,8 +214,11 @@
// State // State
let currentTab = 'home'; let currentTab = 'home';
// API Base // API Base - 留空使用相对路径，服务器通过nginx转发/api到后端
const API_BASE = ''; const API_BASE = '';
// Platform config
const PLATFORM_NAME = { taobao: '淘宝', jd: '京东', pinduoduo: '拼多多' };
// DOM Elements // DOM Elements
const searchInput = document.getElementById('searchInput'); const searchInput = document.getElementById('searchInput');
@@ -231,7 +237,7 @@
await Promise.all([loadDeals(), loadLinbao()]); await Promise.all([loadDeals(), loadLinbao()]);
updateStats(); updateStats();
apiDot.classList.add('active'); apiDot.classList.add('active');
apiStatusEl.textContent = '本地运行'; apiStatusEl.textContent = '服务正常';
} }
// Load Deals // Load Deals
@@ -255,11 +261,11 @@
return; return;
} }
dealsGrid.innerHTML = deals.map(deal => ` dealsGrid.innerHTML = deals.map(deal => `
<div class="deal-card" onclick="openDeal('${deal.id}')"> <div class="deal-card" onclick='openDeal(${JSON.stringify(deal)})'>
<div class="deal-img">🏷️</div> <div class="deal-img"><img src="https://picsum.photos/seed/${deal.id}/200/200" alt="${deal.title}" loading="lazy" onerror="this.style.display='none'"></div>
<div class="deal-title">${deal.title}</div> <div class="deal-title">${deal.title}</div>
<div class="deal-price">¥${deal.price}<span style="text-decoration:line-through;color:#9ca3af;font-size:11px;margin-left:4px;">¥${deal.originalPrice}</span></div> <div class="deal-price">¥${deal.price}<span>¥${deal.originalPrice}</span><span class="deal-tag">${deal.discount}</span></div>
<div style="margin-top:6px;"><span class="deal-tag">${deal.discount}</span></div> <div class="deal-commission">🎁 预估返 ¥${deal.commission || 0}</div>
</div> </div>
`).join(''); `).join('');
} }
@@ -271,7 +277,6 @@
const json = await res.json(); const json = await res.json();
if (json.success) { if (json.success) {
renderLinbao(json.data); renderLinbao(json.data);
statCoupon.textContent = json.data.length;
} }
} catch (e) { } catch (e) {
linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>'; linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
@@ -285,7 +290,7 @@
return; return;
} }
linbaoList.innerHTML = items.map(item => ` linbaoList.innerHTML = items.map(item => `
<div class="linbao-item" onclick="openLinbao('${item.id}')"> <div class="linbao-item" onclick="window.open('${item.url || '#'}', '_blank')">
<div class="linbao-top"> <div class="linbao-top">
<div class="linbao-title">${item.title}</div> <div class="linbao-title">${item.title}</div>
<span class="linbao-hot">🔥 ${item.hot}</span> <span class="linbao-hot">🔥 ${item.hot}</span>
@@ -319,15 +324,16 @@
// Render Search Results // Render Search Results
function renderSearchResults(products) { function renderSearchResults(products) {
searchResults.innerHTML = products.map(p => ` searchResults.innerHTML = products.map(p => `
<div class="product-item" onclick="goToCoupon('${p.id}')"> <div class="product-item" onclick='goToCoupon(${JSON.stringify(p)})'>
<div class="product-img">🏷️</div> <div class="product-img"><img src="https://picsum.photos/seed/${p.id}/200/200" alt="${p.title}" loading="lazy" onerror="this.parentElement.innerHTML='🏷️'"></div>
<div class="product-info"> <div class="product-info">
<div class="product-title">${p.title}</div> <div class="product-title">${p.title}</div>
<div class="product-shop">🏪 ${p.shop}</div> <div class="product-shop">🏪 ${p.shop}</div>
<div class="product-bottom"> <div class="product-bottom">
<span class="product-price">¥${p.price}</span> <span class="product-price">¥${p.price}</span>
<span class="product-coupon">领${p.coupon}元券</span> <span class="product-coupon">-¥${p.coupon}券</span>
</div> </div>
<div style="font-size:11px;color:var(--text-light);margin-top:4px;">🎁 返 ¥${p.commission || 0}</div>
</div> </div>
</div> </div>
`).join(''); `).join('');
@@ -338,10 +344,21 @@
// Stats updated from data // Stats updated from data
} }
// Placeholder actions // Actions
function openDeal(id) { console.log('open deal', id); } function openDeal(deal) {
function openLinbao(id) { console.log('open linbao', id); } if (deal.link && deal.link !== '#') {
function goToCoupon(id) { console.log('go to coupon', id); alert('请复制链接到淘宝/京东app打开'); } window.open(deal.link, '_blank');
} else {
alert('复制商品链接，请在淘宝/京东App打开购买~');
}
}
function goToCoupon(product) {
if (product.link && product.link !== '#') {
window.open(product.link, '_blank');
} else {
alert('复制商品链接，请在淘宝/京东App打开购买~');
}
}
// Event Listeners // Event Listeners
searchBtn.addEventListener('click', () => doSearch(searchInput.value)); searchBtn.addEventListener('click', () => doSearch(searchInput.value));
server.js
+46 -29
View File
@@ -65,57 +65,74 @@ function generateMockResults(keyword) {
return [ return [
{ {
id: '1', id: '1',
title: `${keyword} 空气炸锅 智能版`, title: `苏泊尔空气炸锅5.5L大容量${keyword}智能款`,
price: 199, price: 189,
originalPrice: 299, originalPrice: 399,
coupon: 50, coupon: 60,
commission: 15, commission: 15,
shop: '某某电器旗舰店', shop: '苏泊尔官方旗舰店',
link: '#', link: 'https://s.click.taobao.com/abc123',
platform: 'taobao' platform: 'taobao',
img: 'https://img.alicdn.com/bao/uploaded/O1CN01Z1a2b3_!!600000000.jpg'
}, },
{ {
id: '2', id: '2',
title: `${keyword} 破壁机 多功能`, title: `九阳破壁机L12-Y5多功能全自动${keyword}`,
price: 299, price: 299,
originalPrice: 499, originalPrice: 699,
coupon: 80, coupon: 100,
commission: 25, commission: 25,
shop: '厨房电器专营店', shop: '九阳厨房电器旗舰店',
link: '#', link: 'https://s.click.taobao.com/def456',
platform: 'taobao' platform: 'taobao',
img: 'https://img.alicdn.com/bao/uploaded/O1CN01C3d4e5_!!600000000.jpg'
}, },
{ {
id: '3', id: '3',
title: `${keyword} 电饭煲 智能预约`, title: `美的${keyword}电饭煲MB-RE476智能预约`,
price: 159, price: 159,
originalPrice: 259, originalPrice: 399,
coupon: 40, coupon: 50,
commission: 12, commission: 12,
shop: '品牌电器直营', shop: '美的官方旗舰店',
link: '#', link: 'https://u.jd.com/gh789',
platform: 'jd' platform: 'jd',
img: 'https://img.alicdn.com/bao/uploaded/O1CN01F6h7i8_!!600000000.jpg'
},
{
id: '4',
title: `小米手环8 NFC版${keyword}运动健康监测`,
price: 229,
originalPrice: 399,
coupon: 30,
commission: 18,
shop: '小米官方旗舰店',
link: 'https://s.click.taobao.com/jkl012',
platform: 'taobao',
img: 'https://img.alicdn.com/bao/uploaded/O1CN01G8m9n0_!!600000000.jpg'
} }
]; ];
} }
function generateMockDeals() { function generateMockDeals() {
return [ return [
{ id: 'd1', title: '苏泊尔空气炸锅', price: 189, originalPrice: 299, discount: '63折', endTime: '2026-06-05' }, { id: 'd1', title: '苏泊尔空气炸锅5.5L大容量智能款', price: 189, originalPrice: 399, discount: '47折', endTime: '2026-06-25', img: 'https://img.alicdn.com/bao/uploaded/O1CN01abc123_!!600000000.jpg', platform: 'taobao', commission: 15 },
{ id: 'd2', title: '九阳破壁机', price: 299, originalPrice: 599, discount: '5折', endTime: '2026-06-05' }, { id: 'd2', title: '九阳破壁机L12-Y536多功能全自动', price: 299, originalPrice: 699, discount: '43折', endTime: '2026-06-25', img: 'https://img.alicdn.com/bao/uploaded/O1CN01def456_!!600000000.jpg', platform: 'taobao', commission: 25 },
{ id: 'd3', title: '美的电饭煲', price: 159, originalPrice: 299, discount: '53折', endTime: '2026-06-05' }, { id: 'd3', title: '美的电饭煲MB-RE476智能预约', price: 159, originalPrice: 399, discount: '40折', endTime: '2026-06-23', img: 'https://img.alicdn.com/bao/uploaded/O1CN01ghi789_!!600000000.jpg', platform: 'jd', commission: 12 },
{ id: 'd4', title: '小米手环8', price: 199, originalPrice: 299, discount: '67折', endTime: '2026-06-06' }, { id: 'd4', title: '小米手环8 NFC版运动健康', price: 229, originalPrice: 399, discount: '57折', endTime: '2026-06-26', img: 'https://img.alicdn.com/bao/uploaded/O1CN01jkl012_!!600000000.jpg', platform: 'taobao', commission: 18 },
{ id: 'd5', title: '华为手表GT4', price: 899, originalPrice: 1488, discount: '6折', endTime: '2026-06-07' } { id: 'd5', title: '戴森吹风机HD15负离子护发', price: 2199, originalPrice: 3299, discount: '67折', endTime: '2026-06-28', img: 'https://img.alicdn.com/bao/uploaded/O1CN01mno345_!!600000000.jpg', platform: 'taobao', commission: 180 },
{ id: 'd6', title: '添可洗地机2.0 LED智能清洁', price: 1499, originalPrice: 2599, discount: '58折', endTime: '2026-06-24', img: 'https://img.alicdn.com/bao/uploaded/O1CN01pqr678_!!600000000.jpg', platform: 'jd', commission: 120 }
]; ];
} }
function generateMockLinbao() { function generateMockLinbao() {
return [ return [
{ id: 'l1', title: '淘宝618预售开启，付定金可抵双倍', source: '官方', time: '10分钟前', hot: 98 }, { id: 'l1', title: '🎉 淘宝618预售开启！付定金可抵双倍，AirPods Pro低至999', source: '官方公告', time: '10分钟前', hot: 98, url: 'https://taobao.com' },
{ id: 'l2', title: '美团外卖新用户立减15元', source: '美团', time: '30分钟前', hot: 85 }, { id: 'l2', title: '🔥 京东PLUS会员专属大额券，500-50全场通用', source: '京东', time: '30分钟前', hot: 92, url: 'https://jd.com' },
{ id: 'l3', title: '京东闪购不定时放大额券', source: '京东', time: '1小时前', hot: 92 }, { id: 'l3', title: '💰 美团外卖新用户首单立减15元，红包秒到账', source: '美团', time: '1小时前', hot: 85, url: 'https://meituan.com' },
{ id: 'l4', title: '饿了么端午红包来袭', source: '饿了么', time: '2小时前', hot: 78 }, { id: 'l4', title: '🛒 拼多多百亿补贴再加码，iPhone15 Pro Max直降500', source: '拼多多', time: '2小时前', hot: 95, url: 'https://pinduoduo.com' },
{ id: 'l5', title: '拼多多百亿补贴再加码', source: '拼多多', time: '3小时前', hot: 88 } { id: 'l5', title: '⏰ 饿了么端午粽子专场，满39减10', source: '饿了么', time: '3小时前', hot: 78, url: 'https://elem.com' },
{ id: 'l6', title: '📱 抖音618好物节，直播间专属优惠来袭', source: '抖音', time: '4小时前', hot: 88, url: 'https://douyin.com' }
]; ];
} }