Midas
363 lines
16 KiB
HTML
363 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>智币省 - 智能省钱</title>
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#10b981">
|
|
<style>
|
|
:root {
|
|
--primary: #10b981;
|
|
--primary-dark: #059669;
|
|
--gold: #f59e0b;
|
|
--bg: #f8faf9;
|
|
--card: #ffffff;
|
|
--text: #1f2937;
|
|
--text-light: #6b7280;
|
|
--border: #e5e7eb;
|
|
--shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
--radius: 12px;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
|
|
.container { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
|
|
|
|
/* Header */
|
|
.header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 24px 20px 40px; border-radius: 0 0 24px 24px; }
|
|
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
|
.logo { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
|
|
.logo-icon { font-size: 26px; }
|
|
.version-badge { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 20px; font-size: 11px; }
|
|
.tagline { font-size: 13px; opacity: 0.9; margin-bottom: 20px; }
|
|
|
|
/* Search */
|
|
.search-box { background: white; border-radius: var(--radius); padding: 4px; display: flex; gap: 8px; box-shadow: var(--shadow); }
|
|
.search-input { flex: 1; border: none; padding: 12px 16px; font-size: 15px; border-radius: 8px; outline: none; }
|
|
.search-btn { background: var(--primary); color: white; border: none; padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
|
.search-btn:active { transform: scale(0.97); background: var(--primary-dark); }
|
|
|
|
/* Stats */
|
|
.stats { display: flex; gap: 12px; margin-top: 20px; }
|
|
.stat { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 10px 14px; flex: 1; text-align: center; }
|
|
.stat-value { font-size: 18px; font-weight: 700; }
|
|
.stat-label { font-size: 11px; opacity: 0.85; }
|
|
|
|
/* Content */
|
|
.content { padding: 20px; }
|
|
|
|
/* Section */
|
|
.section { margin-bottom: 24px; }
|
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
|
.section-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
|
|
.section-icon { font-size: 18px; }
|
|
.section-more { font-size: 13px; color: var(--text-light); cursor: pointer; }
|
|
.section-more:active { color: var(--primary); }
|
|
|
|
/* Deal Cards */
|
|
.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: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-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-price { color: #ef4444; font-weight: 700; font-size: 16px; }
|
|
.deal-price span { font-size: 12px; }
|
|
.deal-tag { display: inline-block; background: #fef2f2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
|
|
|
|
/* Linbao List */
|
|
.linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
|
.linbao-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
|
|
.linbao-item:last-child { border-bottom: none; }
|
|
.linbao-item:active { background: #f9fafb; }
|
|
.linbao-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
|
.linbao-title { font-size: 14px; font-weight: 600; flex: 1; margin-right: 10px; }
|
|
.linbao-hot { background: #fef2f2; color: #ef4444; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
|
|
.linbao-meta { font-size: 12px; color: var(--text-light); display: flex; gap: 12px; }
|
|
|
|
/* Product List */
|
|
.product-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
|
.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: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-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-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
|
|
.product-bottom { display: flex; align-items: center; justify-content: space-between; }
|
|
.product-price { color: #ef4444; font-weight: 700; font-size: 15px; }
|
|
.product-coupon { background: var(--primary); color: white; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; }
|
|
|
|
/* Tab Bar */
|
|
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: white; border-top: 1px solid var(--border); display: flex; padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
|
|
.tab { flex: 1; text-align: center; padding: 6px 0; cursor: pointer; }
|
|
.tab-icon { font-size: 20px; display: block; margin-bottom: 2px; }
|
|
.tab-label { font-size: 11px; color: var(--text-light); }
|
|
.tab.active .tab-label { color: var(--primary); }
|
|
|
|
/* Loading */
|
|
.loading { text-align: center; padding: 20px; color: var(--text-light); font-size: 14px; }
|
|
|
|
/* Empty State */
|
|
.empty-state { text-align: center; padding: 40px 20px; }
|
|
.empty-icon { font-size: 48px; margin-bottom: 12px; }
|
|
.empty-text { font-size: 14px; color: var(--text-light); }
|
|
|
|
/* Content padding for tabbar */
|
|
.main-content { padding-bottom: 80px; }
|
|
|
|
/* Search Results Panel */
|
|
.search-panel { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 100; overflow-y: auto; }
|
|
.search-panel.active { display: block; }
|
|
.search-header { background: white; padding: 16px 20px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
|
|
.search-header input { flex: 1; }
|
|
.back-btn { font-size: 20px; color: var(--text); cursor: pointer; padding: 4px; }
|
|
.close-btn { color: var(--text-light); font-size: 14px; cursor: pointer; padding: 8px; }
|
|
|
|
/* API Status */
|
|
.api-status { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; }
|
|
.status-dot.active { background: var(--primary); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div class="header-top">
|
|
<div class="logo"><span class="logo-icon">💰</span> 智币省</div>
|
|
<div class="api-status">
|
|
<span class="status-dot" id="apiDot"></span>
|
|
<span id="apiStatus">本地模式</span>
|
|
</div>
|
|
</div>
|
|
<div class="tagline">聚合全网隐藏优惠券 · 每日更新特价好物</div>
|
|
<div class="search-box">
|
|
<input type="text" class="search-input" id="searchInput" placeholder="搜索商品名称或链接..." />
|
|
<button class="search-btn" id="searchBtn">搜索</button>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value" id="statDeals">0</div>
|
|
<div class="stat-label">今日特价</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="statCoupon">0</div>
|
|
<div class="stat-label">覆盖平台</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">¥0</div>
|
|
<div class="stat-label">已帮省下</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="content main-content" id="mainContent">
|
|
<!-- Deals Section -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title"><span class="section-icon">🔥</span> 今日特价</div>
|
|
<div class="section-more">查看全部</div>
|
|
</div>
|
|
<div class="deals-grid" id="dealsGrid">
|
|
<div class="loading">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linbao Section -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title"><span class="section-icon">📢</span> 线报广场</div>
|
|
<div class="section-more">更多</div>
|
|
</div>
|
|
<div class="linbao-list" id="linbaoList">
|
|
<div class="loading">加载中...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div class="section" id="searchResultsSection" style="display:none;">
|
|
<div class="section-header">
|
|
<div class="section-title"><span class="section-icon">🔍</span> 搜索结果</div>
|
|
</div>
|
|
<div class="product-list" id="searchResults">
|
|
<div class="loading">搜索中...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Bar -->
|
|
<div class="tabbar">
|
|
<div class="tab active" data-tab="home">
|
|
<span class="tab-icon">🏠</span>
|
|
<span class="tab-label">首页</span>
|
|
</div>
|
|
<div class="tab" data-tab="deals">
|
|
<span class="tab-icon">🔥</span>
|
|
<span class="tab-label">特价</span>
|
|
</div>
|
|
<div class="tab" data-tab="linbao">
|
|
<span class="tab-icon">📢</span>
|
|
<span class="tab-label">线报</span>
|
|
</div>
|
|
<div class="tab" data-tab="my">
|
|
<span class="tab-icon">👤</span>
|
|
<span class="tab-label">我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// State
|
|
let currentTab = 'home';
|
|
|
|
// API Base
|
|
const API_BASE = '';
|
|
|
|
// DOM Elements
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
const dealsGrid = document.getElementById('dealsGrid');
|
|
const linbaoList = document.getElementById('linbaoList');
|
|
const searchResultsSection = document.getElementById('searchResultsSection');
|
|
const searchResults = document.getElementById('searchResults');
|
|
const apiDot = document.getElementById('apiDot');
|
|
const apiStatusEl = document.getElementById('apiStatus');
|
|
const statDeals = document.getElementById('statDeals');
|
|
const statCoupon = document.getElementById('statCoupon');
|
|
|
|
// Init
|
|
async function init() {
|
|
await Promise.all([loadDeals(), loadLinbao()]);
|
|
updateStats();
|
|
apiDot.classList.add('active');
|
|
apiStatusEl.textContent = '本地运行';
|
|
}
|
|
|
|
// Load Deals
|
|
async function loadDeals() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/today-deals`);
|
|
const json = await res.json();
|
|
if (json.success) {
|
|
renderDeals(json.data);
|
|
statDeals.textContent = json.data.length;
|
|
}
|
|
} catch (e) {
|
|
dealsGrid.innerHTML = '<div class="empty-state"><div class="empty-icon">📦</div><div class="empty-text">暂无数据</div></div>';
|
|
}
|
|
}
|
|
|
|
// Render Deals
|
|
function renderDeals(deals) {
|
|
if (!deals.length) {
|
|
dealsGrid.innerHTML = '<div class="empty-state"><div class="empty-icon">📦</div><div class="empty-text">暂无特价</div></div>';
|
|
return;
|
|
}
|
|
dealsGrid.innerHTML = deals.map(deal => `
|
|
<div class="deal-card" onclick="openDeal('${deal.id}')">
|
|
<div class="deal-img">🏷️</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 style="margin-top:6px;"><span class="deal-tag">${deal.discount}</span></div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Load Linbao
|
|
async function loadLinbao() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/linbao`);
|
|
const json = await res.json();
|
|
if (json.success) {
|
|
renderLinbao(json.data);
|
|
statCoupon.textContent = json.data.length;
|
|
}
|
|
} catch (e) {
|
|
linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
|
|
}
|
|
}
|
|
|
|
// Render Linbao
|
|
function renderLinbao(items) {
|
|
if (!items.length) {
|
|
linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
|
|
return;
|
|
}
|
|
linbaoList.innerHTML = items.map(item => `
|
|
<div class="linbao-item" onclick="openLinbao('${item.id}')">
|
|
<div class="linbao-top">
|
|
<div class="linbao-title">${item.title}</div>
|
|
<span class="linbao-hot">🔥 ${item.hot}</span>
|
|
</div>
|
|
<div class="linbao-meta">
|
|
<span>📢 ${item.source}</span>
|
|
<span>⏰ ${item.time}</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Search
|
|
async function doSearch(keyword) {
|
|
if (!keyword.trim()) return;
|
|
searchResultsSection.style.display = 'block';
|
|
searchResults.innerHTML = '<div class="loading">搜索中...</div>';
|
|
try {
|
|
const res = await fetch(`${API_BASE}/api/search?keyword=${encodeURIComponent(keyword)}`);
|
|
const json = await res.json();
|
|
if (json.success && json.data.length) {
|
|
renderSearchResults(json.data);
|
|
} else {
|
|
searchResults.innerHTML = '<div class="empty-state"><div class="empty-icon">🔍</div><div class="empty-text">未找到相关商品</div></div>';
|
|
}
|
|
} catch (e) {
|
|
searchResults.innerHTML = '<div class="empty-state"><div class="empty-icon">❌</div><div class="empty-text">搜索失败，请重试</div></div>';
|
|
}
|
|
}
|
|
|
|
// Render Search Results
|
|
function renderSearchResults(products) {
|
|
searchResults.innerHTML = products.map(p => `
|
|
<div class="product-item" onclick="goToCoupon('${p.id}')">
|
|
<div class="product-img">🏷️</div>
|
|
<div class="product-info">
|
|
<div class="product-title">${p.title}</div>
|
|
<div class="product-shop">🏪 ${p.shop}</div>
|
|
<div class="product-bottom">
|
|
<span class="product-price">¥${p.price}</span>
|
|
<span class="product-coupon">领${p.coupon}元券</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Update Stats
|
|
function updateStats() {
|
|
// Stats updated from data
|
|
}
|
|
|
|
// Placeholder actions
|
|
function openDeal(id) { console.log('open deal', id); }
|
|
function openLinbao(id) { console.log('open linbao', id); }
|
|
function goToCoupon(id) { console.log('go to coupon', id); alert('请复制链接到淘宝/京东app打开'); }
|
|
|
|
// Event Listeners
|
|
searchBtn.addEventListener('click', () => doSearch(searchInput.value));
|
|
searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') doSearch(searchInput.value); });
|
|
|
|
// Tab switching
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
currentTab = tab.dataset.tab;
|
|
});
|
|
});
|
|
|
|
// Start
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html> |