620 lines
22 KiB
HTML
620 lines
22 KiB
HTML
{% extends "ewoooc_base.html" %}
|
|
|
|
{% block title %}PChome 商品監控 - EwoooC{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.pchome-tool-page {
|
|
color: var(--momo-text-primary);
|
|
}
|
|
|
|
.pchome-tool-head {
|
|
padding: var(--momo-space-4) var(--momo-space-5);
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-md);
|
|
}
|
|
|
|
.pchome-tool-head h2 {
|
|
margin: 0;
|
|
color: var(--momo-text-primary);
|
|
font-family: var(--momo-font-display);
|
|
font-size: var(--momo-text-headline);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.pchome-tool-head p,
|
|
.pchome-tool-page .text-muted {
|
|
color: var(--momo-text-secondary) !important;
|
|
}
|
|
|
|
.pchome-card-head {
|
|
background: var(--momo-bg-paper);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
color: var(--momo-text-primary);
|
|
font-family: var(--momo-font-display);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.pchome-table-head th {
|
|
background: var(--momo-bg-paper) !important;
|
|
color: var(--momo-text-secondary) !important;
|
|
font-family: var(--momo-font-mono, monospace);
|
|
font-size: var(--momo-text-label);
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.pchome-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 22px;
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-sm);
|
|
font-family: var(--momo-font-mono, monospace);
|
|
font-size: var(--momo-text-label);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pchome-badge.is-danger {
|
|
background: var(--momo-danger-bg);
|
|
border-color: var(--momo-danger-border);
|
|
color: var(--momo-danger-text);
|
|
}
|
|
|
|
.pchome-badge.is-success {
|
|
background: var(--momo-success-bg);
|
|
border-color: var(--momo-success-border);
|
|
color: var(--momo-success-text);
|
|
}
|
|
|
|
.pchome-badge.is-muted {
|
|
background: var(--momo-tag-muted-bg);
|
|
border-color: var(--momo-tag-muted-border);
|
|
color: var(--momo-tag-muted-text);
|
|
}
|
|
|
|
.pchome-product-title {
|
|
color: var(--momo-text-primary);
|
|
font-weight: 800;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.pchome-product-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
color: var(--momo-text-secondary);
|
|
font-size: var(--momo-text-small);
|
|
}
|
|
|
|
.pchome-product-meta span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
padding: 2px 7px;
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-sm);
|
|
background: var(--momo-bg-paper);
|
|
}
|
|
|
|
.pchome-toast {
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
min-width: min(300px, calc(100vw - 40px));
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-md);
|
|
background: var(--momo-bg-elevated);
|
|
color: var(--momo-text-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pchome-toast--success {
|
|
background: var(--momo-success-bg);
|
|
border-color: var(--momo-success-border);
|
|
color: var(--momo-success-text);
|
|
}
|
|
|
|
.pchome-toast--danger {
|
|
background: var(--momo-danger-bg);
|
|
border-color: var(--momo-danger-border);
|
|
color: var(--momo-danger-text);
|
|
}
|
|
|
|
.pchome-toast--warning {
|
|
background: var(--momo-warning-bg);
|
|
border-color: var(--momo-warning-border);
|
|
color: var(--momo-warning-text);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.pchome-tool-head {
|
|
padding: var(--momo-space-4);
|
|
}
|
|
|
|
.pchome-tool-page .card-header {
|
|
align-items: flex-start !important;
|
|
flex-direction: column;
|
|
gap: var(--momo-space-2);
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4 pchome-tool-page">
|
|
<header class="pchome-tool-head mb-4">
|
|
<h2><i class="fas fa-magnifying-glass-chart me-2"></i>PChome 24h 商品監控</h2>
|
|
<p class="text-muted">補齊 PChome 商品、售價、庫存與賣場連結，支援同款確認、價差與促銷監控。</p>
|
|
</header>
|
|
|
|
<!-- 資料取得方式選擇 -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-folder-open me-2"></i>館別商品整理
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">選擇館別分類</label>
|
|
<select class="form-select" id="categorySelect">
|
|
<option value="">-- 選擇分類 --</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">選擇館別</label>
|
|
<select class="form-select" id="regionSelect" disabled>
|
|
<option value="">-- 先選擇分類 --</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" id="crawlRegionBtn" disabled>
|
|
<i class="fas fa-download me-1"></i>開始整理
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-search me-2"></i>關鍵字搜尋
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">搜尋關鍵字</label>
|
|
<input type="text" class="form-control" id="searchKeyword" placeholder="輸入商品關鍵字...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">最多筆數</label>
|
|
<select class="form-select" id="searchLimit">
|
|
<option value="20">20 筆</option>
|
|
<option value="50" selected>50 筆</option>
|
|
<option value="100">100 筆</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" id="searchBtn">
|
|
<i class="fas fa-search me-1"></i>搜尋
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自訂 URL -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-link me-2"></i>自訂賣場整理
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-9 mb-2 mb-lg-0">
|
|
<label class="form-label">PChome 24h 頁面 URL</label>
|
|
<input type="url" class="form-control" id="customUrl"
|
|
placeholder="https://24h.pchome.com.tw/region/DDAB">
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<button class="btn btn-primary w-100" id="crawlCustomBtn">
|
|
<i class="fas fa-download me-1"></i>取得商品
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 資料整理進度 -->
|
|
<div class="row mb-4" id="progressSection" style="display: none;">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="spinner-border text-primary me-3" role="status">
|
|
<span class="visually-hidden">載入中...</span>
|
|
</div>
|
|
<div>
|
|
<strong id="progressText">正在整理商品...</strong>
|
|
<br>
|
|
<small class="text-muted" id="progressDetail">請稍候</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 結果區域 -->
|
|
<div class="row" id="resultSection" style="display: none;">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="fas fa-list me-2"></i>商品清單 (<span id="resultCount">0</span> 筆)</span>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary me-2" id="exportExcelBtn">
|
|
<i class="fas fa-file-excel me-1"></i>下載表格
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="exportStoreLinksBtn">
|
|
<i class="fas fa-link me-1"></i>下載賣場清單
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0" id="resultTable">
|
|
<thead class="pchome-table-head">
|
|
<tr>
|
|
<th style="width: 80px;">圖片</th>
|
|
<th>商品名稱</th>
|
|
<th style="width: 100px;">售價</th>
|
|
<th style="width: 100px;">原價</th>
|
|
<th style="width: 80px;">折扣</th>
|
|
<th style="width: 80px;">庫存</th>
|
|
<th style="width: 100px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resultBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
let regionsData = {};
|
|
let categoriesData = {};
|
|
let currentProducts = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadRegions();
|
|
bindEvents();
|
|
});
|
|
|
|
async function loadRegions() {
|
|
try {
|
|
const response = await fetch('/api/pchome/regions');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
regionsData = data.data.regions;
|
|
categoriesData = data.data.categories;
|
|
|
|
// 填充分類下拉選單
|
|
const categorySelect = document.getElementById('categorySelect');
|
|
for (const cat of Object.keys(categoriesData)) {
|
|
const option = document.createElement('option');
|
|
option.value = cat;
|
|
option.textContent = cat;
|
|
categorySelect.appendChild(option);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('載入館別失敗:', error);
|
|
}
|
|
}
|
|
|
|
function bindEvents() {
|
|
// 分類選擇變更
|
|
document.getElementById('categorySelect').addEventListener('change', function() {
|
|
const category = this.value;
|
|
const regionSelect = document.getElementById('regionSelect');
|
|
const crawlBtn = document.getElementById('crawlRegionBtn');
|
|
|
|
regionSelect.innerHTML = '<option value="">-- 選擇館別 --</option>';
|
|
|
|
if (category && categoriesData[category]) {
|
|
for (const region of categoriesData[category]) {
|
|
const option = document.createElement('option');
|
|
option.value = region.code;
|
|
option.textContent = `${region.code} - ${region.name}`;
|
|
regionSelect.appendChild(option);
|
|
}
|
|
regionSelect.disabled = false;
|
|
} else {
|
|
regionSelect.disabled = true;
|
|
}
|
|
crawlBtn.disabled = true;
|
|
});
|
|
|
|
// 館別選擇變更
|
|
document.getElementById('regionSelect').addEventListener('change', function() {
|
|
document.getElementById('crawlRegionBtn').disabled = !this.value;
|
|
});
|
|
|
|
// 館別商品整理
|
|
document.getElementById('crawlRegionBtn').addEventListener('click', crawlRegion);
|
|
|
|
// 搜尋
|
|
document.getElementById('searchBtn').addEventListener('click', searchProducts);
|
|
document.getElementById('searchKeyword').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') searchProducts();
|
|
});
|
|
|
|
// 自訂賣場整理
|
|
document.getElementById('crawlCustomBtn').addEventListener('click', crawlCustomUrl);
|
|
|
|
// 匯出
|
|
document.getElementById('exportExcelBtn').addEventListener('click', exportExcel);
|
|
document.getElementById('exportStoreLinksBtn').addEventListener('click', exportStoreLinks);
|
|
}
|
|
|
|
async function crawlRegion() {
|
|
const regionCode = document.getElementById('regionSelect').value;
|
|
if (!regionCode) return;
|
|
|
|
const regionName = regionsData[regionCode]?.name || regionCode;
|
|
showProgress(`正在整理 ${regionName} 商品...`, '取得商品列表中');
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/crawl/region', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ region_code: regionCode })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`已整理 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('商品整理失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function searchProducts() {
|
|
const keyword = document.getElementById('searchKeyword').value.trim();
|
|
if (!keyword) {
|
|
showToast('先填搜尋關鍵字。', 'warning');
|
|
return;
|
|
}
|
|
|
|
const limit = parseInt(document.getElementById('searchLimit').value);
|
|
showProgress(`搜尋 "${keyword}"...`, '查詢中');
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/search', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keyword, limit })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`找到 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('搜尋失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function crawlCustomUrl() {
|
|
const url = document.getElementById('customUrl').value.trim();
|
|
if (!url) {
|
|
showToast('先貼上 PChome 24h 連結。', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (!url.startsWith('https://24h.pchome.com.tw/')) {
|
|
showToast('僅支援 PChome 24h 網站', 'warning');
|
|
return;
|
|
}
|
|
|
|
showProgress(`正在取得賣場資料...`, url);
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/crawl/custom', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`已整理 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('商品整理失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function showProgress(title, detail) {
|
|
document.getElementById('progressText').textContent = title;
|
|
document.getElementById('progressDetail').textContent = detail;
|
|
document.getElementById('progressSection').style.display = 'block';
|
|
document.getElementById('resultSection').style.display = 'none';
|
|
}
|
|
|
|
function hideProgress() {
|
|
document.getElementById('progressSection').style.display = 'none';
|
|
}
|
|
|
|
function showResults(products) {
|
|
document.getElementById('resultCount').textContent = products.length;
|
|
document.getElementById('resultSection').style.display = 'block';
|
|
|
|
const tbody = document.getElementById('resultBody');
|
|
tbody.innerHTML = '';
|
|
|
|
for (const p of products) {
|
|
const productName = String(p.name || 'PChome 商品');
|
|
const productId = String(p.product_id || '').trim();
|
|
const productUrl = String(p.product_url || '').trim();
|
|
const imageUrl = String(p.image_url || '').trim();
|
|
const price = toNumber(p.price);
|
|
const originalPrice = toNumber(p.original_price);
|
|
const discountValue = toNumber(p.discount);
|
|
const stock = toNumber(p.stock);
|
|
const discount = discountValue > 0 ? `<span class="pchome-badge is-danger">-${discountValue}%</span>` : '-';
|
|
const stockBadge = stock > 0
|
|
? `<span class="pchome-badge is-success">${stock}</span>`
|
|
: `<span class="pchome-badge is-muted">缺貨</span>`;
|
|
const imageSrc = imageUrl ? `${escapeHtml(imageUrl)}?width=80` : '/static/images/no-image.png';
|
|
const productTitle = `${escapeHtml(productName.substring(0, 50))}${productName.length > 50 ? '...' : ''}`;
|
|
const productLink = productUrl
|
|
? `<a href="${escapeHtml(productUrl)}" target="_blank" rel="noopener noreferrer" class="text-decoration-none pchome-product-title">${productTitle}</a>`
|
|
: `<span class="pchome-product-title">${productTitle}</span>`;
|
|
const storeAction = productUrl
|
|
? `<a href="${escapeHtml(productUrl)}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary"><i class="fas fa-up-right-from-square me-1"></i>賣場</a>`
|
|
: `<button type="button" class="btn btn-sm btn-outline-secondary" disabled>待補</button>`;
|
|
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>
|
|
<img src="${imageSrc}" alt="${escapeHtml(productName)}" class="img-thumbnail"
|
|
style="width: 60px; height: 60px; object-fit: cover;"
|
|
onerror="this.src='/static/images/no-image.png'">
|
|
</td>
|
|
<td>
|
|
${productLink}
|
|
<div class="pchome-product-meta">
|
|
<span>商品編號 ${escapeHtml(productId || '待補')}</span>
|
|
<span>PChome 24h 官方賣場</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-danger fw-bold">${formatMoney(price)}</td>
|
|
<td class="text-muted">${originalPrice ? `<s>${formatMoney(originalPrice)}</s>` : '-'}</td>
|
|
<td>${discount}</td>
|
|
<td>${stockBadge}</td>
|
|
<td>
|
|
${storeAction}
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function exportExcel() {
|
|
if (!currentProducts.length) {
|
|
showToast('沒有資料可匯出', 'warning');
|
|
return;
|
|
}
|
|
|
|
const headers = ['商品編號', '商品名稱', 'PChome 售價', 'PChome 原價', '折扣', '庫存狀態', '商品圖片', 'PChome 賣場'];
|
|
const rows = currentProducts.map(p => [
|
|
csvCell(p.product_id || ''),
|
|
csvCell(p.name || ''),
|
|
toNumber(p.price),
|
|
toNumber(p.original_price),
|
|
p.discount || '',
|
|
toNumber(p.stock),
|
|
csvCell(p.image_url || ''),
|
|
csvCell(p.product_url || '')
|
|
]);
|
|
|
|
const csv = '\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
|
|
downloadFile(csv, 'pchome_products.csv', 'text/csv;charset=utf-8');
|
|
}
|
|
|
|
function exportStoreLinks() {
|
|
if (!currentProducts.length) {
|
|
showToast('沒有資料可匯出', 'warning');
|
|
return;
|
|
}
|
|
|
|
const headers = ['商品編號', '商品名稱', 'PChome 賣場'];
|
|
const rows = currentProducts.map(p => [
|
|
csvCell(p.product_id || ''),
|
|
csvCell(p.name || ''),
|
|
csvCell(p.product_url || '')
|
|
]);
|
|
const csv = '\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
|
|
downloadFile(csv, 'pchome_store_links.csv', 'text/csv;charset=utf-8');
|
|
}
|
|
|
|
function downloadFile(content, filename, type) {
|
|
const blob = new Blob([content], { type });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function toNumber(value) {
|
|
const number = Number(value);
|
|
return Number.isFinite(number) ? number : 0;
|
|
}
|
|
|
|
function formatMoney(value) {
|
|
return `$${toNumber(value).toLocaleString()}`;
|
|
}
|
|
|
|
function csvCell(value) {
|
|
return `"${String(value).replace(/"/g, '""')}"`;
|
|
}
|
|
|
|
function showToast(message, type = 'info') {
|
|
// 簡易 Toast
|
|
const toast = document.createElement('div');
|
|
toast.className = `pchome-toast pchome-toast--${type} position-fixed`;
|
|
toast.innerHTML = `
|
|
<button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
|
|
${message}
|
|
`;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 5000);
|
|
}
|
|
</script>
|
|
{% endblock %}
|