Midas
593 lines
27 KiB
HTML
593 lines
27 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: 100px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; 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 span { font-size: 12px; text-decoration: line-through; color: #9ca3af; margin-left: 4px; }
|
|
.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 { 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: 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-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; display: flex; align-items: center; gap: 6px; }
|
|
.platform-badge { display: inline-block; padding: 1px 4px; border-radius: 3px; font-size: 10px; font-weight: 600; color: white; }
|
|
.platform-badge.taobao { background: #ff5000; }
|
|
.platform-badge.jd { background: #c00; }
|
|
.platform-badge.pinduoduo { background: #c00; }
|
|
.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; }
|
|
|
|
/* My Content */
|
|
.my-content { padding-bottom: 80px; }
|
|
.fav-item, .history-item { background: var(--card); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow); }
|
|
.fav-img { width: 48px; height: 48px; border-radius: 6px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
|
|
.fav-img img { width: 100%; height: 100%; object-fit: cover; }
|
|
.fav-info { flex: 1; min-width: 0; }
|
|
.fav-title { font-size: 13px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
|
.fav-price { font-size: 14px; color: #ef4444; font-weight: 700; }
|
|
.fav-remove { color: var(--text-light); font-size: 18px; padding: 4px 8px; cursor: pointer; }
|
|
.history-item { justify-content: space-between; }
|
|
.history-keyword { font-size: 14px; }
|
|
.history-time { font-size: 11px; color: var(--text-light); }
|
|
|
|
/* 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">6</div>
|
|
<div class="stat-label">今日特价</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="statCoupon">2</div>
|
|
<div class="stat-label">覆盖平台</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="statSaved">¥12</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>
|
|
|
|
<!-- My Tab Content -->
|
|
<div class="my-content" id="myContent" style="display:none;padding:20px;">
|
|
<div style="text-align:center;margin-bottom:24px;">
|
|
<div style="font-size:48px;margin-bottom:8px;">👤</div>
|
|
<div style="font-size:18px;font-weight:700;color:var(--text);">智币省用户</div>
|
|
<div style="font-size:13px;color:var(--text-light);">开始省钱之旅吧 ~</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div style="display:flex;gap:12px;margin-bottom:24px;">
|
|
<div style="flex:1;background:var(--card);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow);">
|
|
<div style="font-size:24px;font-weight:700;color:var(--primary);" id="myFavCount">0</div>
|
|
<div style="font-size:12px;color:var(--text-light);">我的收藏</div>
|
|
</div>
|
|
<div style="flex:1;background:var(--card);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow);">
|
|
<div style="font-size:24px;font-weight:700;color:#f59e0b;" id="mySearchCount">0</div>
|
|
<div style="font-size:12px;color:var(--text-light);">搜索记录</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favorites -->
|
|
<div style="margin-bottom:24px;">
|
|
<div style="font-size:16px;font-weight:700;margin-bottom:12px;">❤️ 我的收藏</div>
|
|
<div id="favoritesList">
|
|
<div style="text-align:center;padding:20px;color:var(--text-light);font-size:14px;">暂无收藏</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search History -->
|
|
<div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
|
<div style="font-size:16px;font-weight:700;">🔍 搜索记录</div>
|
|
<div style="font-size:12px;color:var(--text-light);cursor:pointer;" onclick="clearSearchHistory()">清空</div>
|
|
</div>
|
|
<div id="searchHistoryList">
|
|
<div style="text-align:center;padding:20px;color:var(--text-light);font-size:14px;">暂无搜索记录</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 - 留空使用相对路径，服务器通过nginx转发/api到后端
|
|
const API_BASE = '';
|
|
|
|
// Platform config
|
|
const PLATFORM_NAME = { taobao: '淘宝', jd: '京东', pinduoduo: '拼多多' };
|
|
|
|
// 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" style="position:relative;">
|
|
<div class="fav-btn" onclick="event.stopPropagation();toggleFavorite(${JSON.stringify(deal)},'deal')" style="position:absolute;top:8px;right:8px;font-size:18px;cursor:pointer;z-index:2;">${isFavorited('deal_'+deal.id) ? '❤️' : '🤍'}</div>
|
|
<div onclick='openDeal(${JSON.stringify(deal)})'>
|
|
<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" style="margin-top:4px;"><span class="platform-badge ${deal.platform}" style="font-size:9px;margin-right:4px;">${PLATFORM_NAME[deal.platform] || deal.platform}</span>${deal.title}</div>
|
|
<div class="deal-price">¥${deal.price}<span>¥${deal.originalPrice}</span><span class="deal-tag">${deal.discount}</span></div>
|
|
<div class="deal-commission">🎁 预估返 ¥${deal.commission || 0}</div>
|
|
</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);
|
|
}
|
|
} 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="window.open('${item.url || '#'}', '_blank')">
|
|
<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" style="position:relative;">
|
|
<div class="fav-btn" onclick="event.stopPropagation();toggleFavorite(${JSON.stringify(p)},'product')" style="position:absolute;top:8px;right:8px;font-size:16px;cursor:pointer;z-index:2;">${isFavorited('product_'+p.id) ? '❤️' : '🤍'}</div>
|
|
<div onclick='goToCoupon(${JSON.stringify(p)})'>
|
|
<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-title">${p.title}</div>
|
|
<div class="product-shop"><span class="platform-badge ${p.platform}">${PLATFORM_NAME[p.platform] || p.platform}</span> ${p.shop}</div>
|
|
<div class="product-bottom">
|
|
<span class="product-price">¥${p.price}</span>
|
|
<span class="product-coupon">-¥${p.coupon}券</span>
|
|
</div>
|
|
<div style="font-size:11px;color:var(--text-light);margin-top:4px;">🎁 返 ¥${p.commission || 0}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Update Stats
|
|
function updateStats() {
|
|
// Stats updated from data
|
|
}
|
|
|
|
// Local Storage Keys
|
|
const FAVORITES_KEY = 'zhibisheng_favorites';
|
|
const SEARCH_HISTORY_KEY = 'zhibisheng_search_history';
|
|
|
|
// Load favorites from localStorage
|
|
function getFavorites() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(FAVORITES_KEY) || '[]');
|
|
} catch { return []; }
|
|
}
|
|
|
|
// Save to favorites
|
|
function toggleFavorite(item, type) {
|
|
let favorites = getFavorites();
|
|
const id = type + '_' + item.id;
|
|
const index = favorites.findIndex(f => f.id === id);
|
|
if (index > -1) {
|
|
favorites.splice(index, 1);
|
|
showToast('已取消收藏');
|
|
} else {
|
|
favorites.unshift({ ...item, id, type, addedAt: Date.now() });
|
|
showToast('已收藏 ~');
|
|
}
|
|
localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
|
|
renderMyTab();
|
|
}
|
|
|
|
// Check if favorited
|
|
function isFavorited(id) {
|
|
return getFavorites().some(f => f.id === id);
|
|
}
|
|
|
|
// Toast notification
|
|
function showToast(msg) {
|
|
const existing = document.querySelector('.toast');
|
|
if (existing) existing.remove();
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast';
|
|
toast.textContent = msg;
|
|
toast.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:white;padding:12px 24px;border-radius:8px;font-size:14px;z-index:9999;animation:fadeIn 0.3s';
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 1500);
|
|
}
|
|
|
|
// Copy text to clipboard
|
|
function copyToClipboard(text, successMsg) {
|
|
if (navigator.clipboard) {
|
|
navigator.clipboard.writeText(text).then(() => showToast(successMsg || '已复制')).catch(() => fallbackCopy(text));
|
|
} else {
|
|
fallbackCopy(text);
|
|
}
|
|
}
|
|
|
|
function fallbackCopy(text) {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.position = 'fixed'; ta.style.opacity = '0';
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
showToast('已复制');
|
|
}
|
|
|
|
// Actions
|
|
function openDeal(deal) {
|
|
if (deal.link && deal.link !== '#') {
|
|
window.open(deal.link, '_blank');
|
|
} else {
|
|
// Generate mock coupon link
|
|
const couponLink = `https://taobao.com/item?id=${deal.id}`;
|
|
copyToClipboard(couponLink, '链接已复制，打开淘宝购买');
|
|
}
|
|
}
|
|
|
|
function goToCoupon(product) {
|
|
if (product.link && product.link !== '#') {
|
|
window.open(product.link, '_blank');
|
|
} else {
|
|
const couponText = `${product.title}
|
|
原价: ¥${product.originalPrice}
|
|
券后: ¥${product.price}
|
|
${product.shop}
|
|
【下载淘宝APP打开链接购买】`;
|
|
copyToClipboard(couponText, '已复制商品信息');
|
|
}
|
|
}
|
|
|
|
// Event Listeners
|
|
searchBtn.addEventListener('click', () => doSearch(searchInput.value));
|
|
searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') doSearch(searchInput.value); });
|
|
|
|
// Tab switching
|
|
const mainContent = document.getElementById('mainContent');
|
|
const myContent = document.getElementById('myContent');
|
|
|
|
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;
|
|
|
|
if (currentTab === 'my') {
|
|
mainContent.style.display = 'none';
|
|
myContent.style.display = 'block';
|
|
renderMyTab();
|
|
} else {
|
|
mainContent.style.display = 'block';
|
|
myContent.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// Render My Tab
|
|
function renderMyTab() {
|
|
const favorites = getFavorites();
|
|
document.getElementById('myFavCount').textContent = favorites.length;
|
|
|
|
// Render favorites
|
|
if (favorites.length === 0) {
|
|
document.getElementById('favoritesList').innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-light);font-size:14px;">暂无收藏</div>';
|
|
} else {
|
|
document.getElementById('favoritesList').innerHTML = favorites.map(f => `
|
|
<div class="fav-item">
|
|
<div class="fav-img"><img src="https://picsum.photos/seed/${f.id}/100/100" alt=""></div>
|
|
<div class="fav-info">
|
|
<div class="fav-title">${f.title}</div>
|
|
<div class="fav-price">¥${f.price}</div>
|
|
</div>
|
|
<div class="fav-remove" onclick="toggleFavorite({id:'${f.id.replace(f.type+'_', '')}', title:'${f.title}', price:${f.price}}, '${f.type}')">✕</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Render search history
|
|
try {
|
|
const history = JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || '[]');
|
|
document.getElementById('mySearchCount').textContent = history.length;
|
|
if (history.length === 0) {
|
|
document.getElementById('searchHistoryList').innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-light);font-size:14px;">暂无搜索记录</div>';
|
|
} else {
|
|
document.getElementById('searchHistoryList').innerHTML = history.slice(0, 10).map(h => `
|
|
<div class="history-item" onclick="searchFromHistory('${h.keyword}')">
|
|
<span class="history-keyword">🔍 ${h.keyword}</span>
|
|
<span class="history-time">${formatTime(h.time)}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
} catch {}
|
|
}
|
|
|
|
function formatTime(ts) {
|
|
const d = new Date(ts);
|
|
return `${d.getMonth()+1}/${d.getDate()} ${d.getHours()}:${String(d.getMinutes()).padStart(2, '0')}`;
|
|
}
|
|
|
|
function searchFromHistory(keyword) {
|
|
searchInput.value = keyword;
|
|
document.querySelector('[data-tab="home"]').click();
|
|
doSearch(keyword);
|
|
}
|
|
|
|
function clearSearchHistory() {
|
|
localStorage.removeItem(SEARCH_HISTORY_KEY);
|
|
renderMyTab();
|
|
showToast('已清空');
|
|
}
|
|
|
|
// Save search to history
|
|
const originalDoSearch = doSearch;
|
|
async function doSearch(keyword) {
|
|
if (!keyword.trim()) return;
|
|
try {
|
|
const history = JSON.parse(localStorage.getItem(SEARCH_HISTORY_KEY) || '[]');
|
|
const filtered = history.filter(h => h.keyword !== keyword);
|
|
filtered.unshift({ keyword, time: Date.now() });
|
|
localStorage.setItem(SEARCH_HISTORY_KEY, JSON.stringify(filtered.slice(0, 20)));
|
|
} catch {}
|
|
return originalDoSearch(keyword);
|
|
}
|
|
|
|
// Start
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html> |