1131 lines
43 KiB
HTML
1131 lines
43 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
|
|
|
{% block title %}EwoooC 活動看板{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.campaign-stack {
|
|
display: grid;
|
|
gap: 24px;
|
|
}
|
|
|
|
.campaign-switcher {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
padding: 4px;
|
|
gap: 2px;
|
|
overflow-x: auto;
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.campaign-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
color: var(--momo-text-secondary);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: var(--momo-transition-base);
|
|
}
|
|
|
|
.campaign-tab:hover {
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-paper);
|
|
}
|
|
|
|
.campaign-tab.is-active {
|
|
color: var(--momo-text-inverse);
|
|
background: var(--momo-ink);
|
|
}
|
|
|
|
.campaign-tab-count {
|
|
padding: 1px 6px;
|
|
color: var(--momo-text-tertiary);
|
|
background: var(--momo-bg-subtle);
|
|
border-radius: var(--momo-radius-pill);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-tab.is-active .campaign-tab-count {
|
|
color: var(--momo-text-inverse);
|
|
background: rgba(250, 247, 240, 0.22);
|
|
}
|
|
|
|
.campaign-hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.campaign-hero {
|
|
position: relative;
|
|
min-height: 220px;
|
|
overflow: hidden;
|
|
padding: 24px;
|
|
color: #fff;
|
|
background: linear-gradient(160deg, #dc2626 0%, #ea580c 52%, #f97316 100%);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.campaign-hero.is-festival {
|
|
background: linear-gradient(160deg, #7c3aed 0%, #6d28d9 52%, #5b21b6 100%);
|
|
}
|
|
|
|
.campaign-hero.is-mothers-day {
|
|
background: linear-gradient(160deg, #db2777 0%, #be185d 52%, #9d174d 100%);
|
|
}
|
|
|
|
.campaign-hero.is-valentine-520 {
|
|
background: linear-gradient(160deg, #e11d48 0%, #be123c 52%, #9f1239 100%);
|
|
}
|
|
|
|
.campaign-hero.is-labor-day {
|
|
background: linear-gradient(160deg, #0891b2 0%, #0e7490 52%, #155e75 100%);
|
|
}
|
|
|
|
.campaign-hero::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
content: "";
|
|
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
|
|
background-size: 12px 12px;
|
|
}
|
|
|
|
.campaign-hero-content {
|
|
position: relative;
|
|
display: flex;
|
|
min-height: 172px;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.campaign-eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.campaign-eyebrow-label {
|
|
padding: 3px 10px;
|
|
border: 1px solid rgba(255, 255, 255, 0.26);
|
|
border-radius: var(--momo-radius-pill);
|
|
background: rgba(255, 255, 255, 0.16);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.campaign-title {
|
|
margin: 0;
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
line-height: 1.12;
|
|
}
|
|
|
|
.campaign-meta-grid {
|
|
display: flex;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.campaign-meta-label {
|
|
margin-bottom: 2px;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.campaign-meta-value {
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: auto;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.campaign-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 32px;
|
|
padding: 8px 14px;
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-action.is-light {
|
|
color: var(--momo-ink);
|
|
background: #fff;
|
|
border-color: #fff;
|
|
}
|
|
|
|
.campaign-kpi-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 220px;
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.campaign-panel-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-kpi-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
padding: 20px;
|
|
flex: 1;
|
|
}
|
|
|
|
.campaign-kpi {
|
|
padding: 12px;
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.campaign-kpi-label {
|
|
margin-bottom: 4px;
|
|
color: var(--momo-text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.campaign-kpi-value {
|
|
color: var(--momo-text-primary);
|
|
font-size: 26px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.campaign-panel-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-paper);
|
|
border-top: 1px solid var(--momo-border-light);
|
|
border-radius: 0 0 8px 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.campaign-section-label {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.campaign-section-label .num {
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.campaign-section-label .title {
|
|
color: var(--momo-text-primary);
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-slot-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-bottom: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.campaign-slot-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.campaign-slot-tab.active {
|
|
color: var(--momo-text-inverse);
|
|
background: var(--momo-ink);
|
|
border-color: var(--momo-ink);
|
|
}
|
|
|
|
.campaign-slot-count {
|
|
color: inherit;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.campaign-table-card {
|
|
overflow: hidden;
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.campaign-table-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.campaign-stat-badges {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.campaign-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 3px 8px;
|
|
color: var(--momo-text-secondary);
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-pill);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-filterbar {
|
|
display: inline-flex;
|
|
padding: 2px;
|
|
gap: 0;
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.campaign-filter-chip {
|
|
padding: 5px 10px;
|
|
color: var(--momo-text-secondary);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-filter-chip:hover {
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-subtle);
|
|
}
|
|
|
|
.campaign-filter-chip.is-active {
|
|
color: var(--momo-text-inverse);
|
|
background: var(--momo-ink);
|
|
}
|
|
|
|
.campaign-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.campaign-table {
|
|
width: 100%;
|
|
min-width: 920px;
|
|
border-collapse: collapse;
|
|
font-size: var(--momo-font-size-sm);
|
|
}
|
|
|
|
.campaign-table th {
|
|
padding: 11px 14px;
|
|
color: var(--momo-text-tertiary);
|
|
background: var(--momo-bg-paper);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
font-family: var(--momo-font-family-mono);
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.10em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.campaign-table th a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.campaign-table td {
|
|
padding: 14px;
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.campaign-table tbody tr:hover {
|
|
background: var(--momo-bg-paper);
|
|
}
|
|
|
|
.campaign-product-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.campaign-product-thumb {
|
|
width: 52px;
|
|
height: 52px;
|
|
flex: 0 0 auto;
|
|
object-fit: cover;
|
|
background: var(--momo-bg-paper);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.campaign-product-name {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
color: var(--momo-text-primary);
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
text-decoration: none;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.campaign-product-name:hover {
|
|
color: var(--momo-accent);
|
|
}
|
|
|
|
.campaign-product-id {
|
|
margin-top: 4px;
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.campaign-category {
|
|
display: inline-flex;
|
|
max-width: 120px;
|
|
padding: 3px 8px;
|
|
overflow: hidden;
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-subtle);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-pill);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.campaign-price {
|
|
color: var(--momo-text-primary);
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-history-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 0;
|
|
color: var(--momo-text-primary);
|
|
background: transparent;
|
|
border: 0;
|
|
font: inherit;
|
|
text-align: right;
|
|
}
|
|
|
|
.campaign-history-button:hover {
|
|
color: var(--momo-accent-strong);
|
|
}
|
|
|
|
.campaign-history-button i {
|
|
color: var(--momo-accent-strong);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.campaign-old-price {
|
|
color: var(--momo-text-tertiary);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.campaign-change-up {
|
|
color: var(--momo-danger);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-change-down {
|
|
color: var(--momo-success);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-empty {
|
|
padding: 48px 16px;
|
|
color: var(--momo-text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
.campaign-filter-empty.is-hidden,
|
|
.campaign-row.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.campaign-history-modal .modal-content {
|
|
overflow: hidden;
|
|
color: var(--momo-text-primary);
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 8px;
|
|
box-shadow: var(--momo-shadow-lg);
|
|
}
|
|
|
|
.campaign-history-modal .modal-header {
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding: 18px 20px;
|
|
background: var(--momo-bg-paper);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
}
|
|
|
|
.campaign-history-modal .modal-title {
|
|
color: var(--momo-text-primary);
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.campaign-history-subtitle {
|
|
margin-top: 4px;
|
|
color: var(--momo-text-tertiary);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.campaign-history-range {
|
|
display: inline-flex;
|
|
padding: 2px;
|
|
margin-top: 10px;
|
|
gap: 0;
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.campaign-history-range button {
|
|
padding: 5px 10px;
|
|
color: var(--momo-text-secondary);
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.campaign-history-range button.is-active {
|
|
color: var(--momo-text-inverse);
|
|
background: var(--momo-ink);
|
|
}
|
|
|
|
.campaign-chart-shell {
|
|
position: relative;
|
|
min-height: 360px;
|
|
}
|
|
|
|
.campaign-chart-state {
|
|
display: grid;
|
|
min-height: 360px;
|
|
color: var(--momo-text-secondary);
|
|
place-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.campaign-chart-state.is-hidden,
|
|
.campaign-chart-canvas.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.campaign-chart-canvas {
|
|
max-height: 380px;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.campaign-hero-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.campaign-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.campaign-kpi-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block ewooo_content %}
|
|
{% set current_endpoint = 'edm.' ~ current_promo_page ~ '_dashboard' %}
|
|
{% set current_stats = {'new': 0, 'up': 0, 'down': 0, 'delisted_last_run': 0, 'on_shelf': 0} %}
|
|
{% if active_tab in slot_stats %}
|
|
{% set current_stats = slot_stats[active_tab] %}
|
|
{% elif slot_stats %}
|
|
{% set current_stats = slot_stats.values() | list | first %}
|
|
{% endif %}
|
|
{% set task_key = 'festival_task' if current_promo_page == 'festival' else 'edm_task' %}
|
|
{% set run_list = scheduler_stats.get(task_key, []) %}
|
|
{% set latest_run = run_list[0] if run_list else None %}
|
|
|
|
<div class="campaign-stack">
|
|
<section>
|
|
<div class="campaign-switcher">
|
|
{% for page in promo_pages %}
|
|
<a class="campaign-tab {% if page.id == current_promo_page %}is-active{% endif %}" href="{{ page.url }}">
|
|
<span>{{ page.name }}</span>
|
|
{% if page.id == current_promo_page %}
|
|
<span class="campaign-tab-count momo-mono">{{ total_edm_products | number_format }}</span>
|
|
{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="campaign-hero-grid">
|
|
<div class="campaign-hero is-{{ current_promo_page|replace('_', '-') }}">
|
|
<div class="campaign-hero-content">
|
|
<div class="campaign-eyebrow">
|
|
<span class="campaign-eyebrow-label">CAMPAIGN</span>
|
|
<span class="momo-mono" style="font-size:11px;color:rgba(255,255,255,.72);">ID · {{ current_promo_page|upper }}</span>
|
|
</div>
|
|
<h1 class="campaign-title">{{ page_title }}</h1>
|
|
<div class="campaign-meta-grid momo-mono">
|
|
<div>
|
|
<div class="campaign-meta-label">活動時段</div>
|
|
<div class="campaign-meta-value">{{ activity_time }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="campaign-meta-label">最後更新</div>
|
|
<div class="campaign-meta-value">{{ last_update }}</div>
|
|
</div>
|
|
<div>
|
|
<div class="campaign-meta-label">商品總數</div>
|
|
<div class="campaign-meta-value" style="font-size:20px;">{{ total_edm_products | number_format }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="campaign-actions">
|
|
{% if current_promo_page == 'edm' %}
|
|
<button class="campaign-action" type="button" onclick="triggerEdmTask()">
|
|
<i class="fas fa-rotate"></i> 手動更新
|
|
</button>
|
|
<button class="campaign-action is-light" type="button" onclick="triggerNotification()">
|
|
<i class="fas fa-bell"></i> 發送通知
|
|
</button>
|
|
{% elif current_promo_page == 'festival' %}
|
|
<button class="campaign-action" type="button" onclick="triggerFestivalTask()">
|
|
<i class="fas fa-rotate"></i> 手動更新
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="campaign-kpi-panel">
|
|
<div class="campaign-panel-title">
|
|
<i class="fas fa-chart-line"></i>
|
|
<span>活動數據</span>
|
|
</div>
|
|
<div class="campaign-kpi-grid">
|
|
<div class="campaign-kpi">
|
|
<div class="campaign-kpi-label">上架商品</div>
|
|
<div class="campaign-kpi-value momo-mono">{{ current_stats.get('on_shelf', 0) | number_format }}</div>
|
|
</div>
|
|
<div class="campaign-kpi">
|
|
<div class="campaign-kpi-label">新品</div>
|
|
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-info);">{{ current_stats.get('new', 0) | number_format }}</div>
|
|
</div>
|
|
<div class="campaign-kpi">
|
|
<div class="campaign-kpi-label">漲價</div>
|
|
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-danger);">{{ current_stats.get('up', 0) | number_format }}</div>
|
|
</div>
|
|
<div class="campaign-kpi">
|
|
<div class="campaign-kpi-label">降價</div>
|
|
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-success);">{{ current_stats.get('down', 0) | number_format }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="campaign-panel-footer momo-mono">
|
|
{% if latest_run %}
|
|
<span class="momo-live-dot"></span>
|
|
<span>排程 · {{ latest_run.last_run }}</span>
|
|
<span>|</span>
|
|
<span>異動 {{ latest_run.get('changed_records', 0) }} 筆</span>
|
|
{% else %}
|
|
<span>尚無排程紀錄</span>
|
|
{% endif %}
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="campaign-section-label">
|
|
<span class="num momo-mono">02</span>
|
|
<span class="title">時段</span>
|
|
</div>
|
|
{% if slot_stats %}
|
|
<div class="campaign-slot-tabs" role="tablist">
|
|
{% for slot, stats in slot_stats.items() %}
|
|
{% set slot_id = slugify(slot) %}
|
|
<button class="campaign-slot-tab {% if slot == active_tab %}active{% endif %}" id="slot-{{ slot_id }}-tab" data-bs-toggle="tab" data-bs-target="#slot-{{ slot_id }}" type="button" role="tab">
|
|
<span class="momo-mono">{{ slot }}</span>
|
|
<span class="campaign-slot-count momo-mono">{{ stats.get('on_shelf', 0) }} 件</span>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="campaign-table-card">
|
|
<div class="campaign-empty">目前沒有可顯示的活動時段資料</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if slot_stats %}
|
|
<section class="tab-content">
|
|
{% for slot, stats in slot_stats.items() %}
|
|
{% set slot_id = slugify(slot) %}
|
|
{% set items = grouped_items.get(slot, []) %}
|
|
<div class="tab-pane fade {% if slot == active_tab %}show active{% endif %}" id="slot-{{ slot_id }}" role="tabpanel">
|
|
<div class="campaign-table-card">
|
|
<div class="campaign-table-head">
|
|
<span class="momo-mono" style="font-size:11px;font-weight:800;color:var(--momo-text-tertiary);letter-spacing:.08em;">03</span>
|
|
<strong>商品列表</strong>
|
|
<span class="momo-mono" data-campaign-visible-count style="color:var(--momo-text-tertiary);font-size:12px;">{{ items|length }} 筆</span>
|
|
<div class="campaign-filterbar" aria-label="{{ slot }} 商品狀態篩選">
|
|
<button class="campaign-filter-chip is-active" type="button" data-campaign-filter="all">全部 {{ items|length }}</button>
|
|
<button class="campaign-filter-chip" type="button" data-campaign-filter="new">新品 {{ stats.get('new', 0) }}</button>
|
|
<button class="campaign-filter-chip" type="button" data-campaign-filter="up">漲價 {{ stats.get('up', 0) }}</button>
|
|
<button class="campaign-filter-chip" type="button" data-campaign-filter="down">降價 {{ stats.get('down', 0) }}</button>
|
|
<button class="campaign-filter-chip" type="button" data-campaign-filter="delisted">下架 {{ stats.get('delisted_last_run', 0) }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="campaign-table-wrap">
|
|
<table class="campaign-table">
|
|
<thead>
|
|
<tr>
|
|
<th>分類</th>
|
|
<th>
|
|
{% set next_order_name = 'asc' if current_sort == 'name' and current_order == 'desc' else 'desc' %}
|
|
<a href="{{ url_for(current_endpoint, sort_by='name', order=next_order_name) }}">商品資訊</a>
|
|
</th>
|
|
<th class="text-end">
|
|
{% set next_order_price = 'asc' if current_sort == 'price' and current_order == 'desc' else 'desc' %}
|
|
<a href="{{ url_for(current_endpoint, sort_by='price', order=next_order_price) }}">價格</a>
|
|
</th>
|
|
<th class="text-center">
|
|
{% if current_promo_page == 'edm' %}
|
|
{% set next_order_qty = 'asc' if current_sort == 'remain_qty' and current_order == 'desc' else 'desc' %}
|
|
<a href="{{ url_for(current_endpoint, sort_by='remain_qty', order=next_order_qty) }}">倒數組數</a>
|
|
{% else %}
|
|
狀態
|
|
{% endif %}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in items %}
|
|
{% set campaign_filter = 'new' if item.status_change == 'NEW' else ('up' if item.status_change == 'PRICE_UP' else ('down' if item.status_change == 'PRICE_DOWN' else ('delisted' if item.status_change in ['DELISTED', 'SLOT_END'] else 'active'))) %}
|
|
<tr class="campaign-row" data-campaign-row data-campaign-filter="{{ campaign_filter }}" data-i-code="{{ item.i_code }}" data-product-name="{{ item.name|e }}">
|
|
<td>
|
|
<span class="campaign-category">{{ item.main_category or '未分類' }}</span>
|
|
</td>
|
|
<td>
|
|
<div class="campaign-product-cell">
|
|
{% if item.image_url %}
|
|
<img class="campaign-product-thumb" src="{{ item.image_url }}" alt="{{ item.name }}" loading="lazy" referrerpolicy="no-referrer">
|
|
{% else %}
|
|
<div class="campaign-product-thumb d-flex align-items-center justify-content-center" style="color:var(--momo-text-tertiary);font-size:11px;">無圖</div>
|
|
{% endif %}
|
|
<div>
|
|
<a class="campaign-product-name" href="{{ item.url or '#' }}" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
|
|
<div class="campaign-product-id momo-mono">ID {{ item.i_code }}</div>
|
|
<div class="campaign-stat-badges" style="margin-top:6px;">
|
|
{% if item.status_change == 'NEW' %}
|
|
<span class="campaign-badge">NEW</span>
|
|
{% elif item.status_change == 'PRICE_DOWN' %}
|
|
<span class="campaign-badge" style="color:var(--momo-success);">降價</span>
|
|
{% elif item.status_change == 'PRICE_UP' %}
|
|
<span class="campaign-badge" style="color:var(--momo-danger);">漲價</span>
|
|
{% elif item.status_change in ['DELISTED', 'SLOT_END'] %}
|
|
<span class="campaign-badge">下架</span>
|
|
{% endif %}
|
|
{% if item.discount_text %}
|
|
<span class="campaign-badge">{{ item.discount_text }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="text-end momo-mono">
|
|
{% if item.previous_price and item.price and item.previous_price != item.price %}
|
|
{% set diff = item.price - item.previous_price %}
|
|
{% if diff < 0 %}
|
|
<div class="campaign-change-down">▼ {{ (diff|abs) | number_format }}</div>
|
|
{% else %}
|
|
<div class="campaign-change-up">▲ {{ diff | number_format }}</div>
|
|
{% endif %}
|
|
<div><span class="campaign-old-price">${{ item.previous_price | number_format }}</span></div>
|
|
<button
|
|
class="campaign-history-button"
|
|
type="button"
|
|
data-campaign-history-trigger
|
|
data-i-code="{{ item.i_code }}"
|
|
data-product-name="{{ item.name|e }}"
|
|
onclick="event.stopPropagation(); showCampaignHistory(this.dataset.iCode, this.dataset.productName);"
|
|
aria-label="查看 {{ item.name|e }} 的歷史價格圖表"
|
|
>
|
|
<span class="campaign-price">${{ item.price | number_format }}</span>
|
|
<i class="fas fa-chart-line" aria-hidden="true"></i>
|
|
</button>
|
|
{% elif item.price is not none %}
|
|
<button
|
|
class="campaign-history-button"
|
|
type="button"
|
|
data-campaign-history-trigger
|
|
data-i-code="{{ item.i_code }}"
|
|
data-product-name="{{ item.name|e }}"
|
|
onclick="event.stopPropagation(); showCampaignHistory(this.dataset.iCode, this.dataset.productName);"
|
|
aria-label="查看 {{ item.name|e }} 的歷史價格圖表"
|
|
>
|
|
<span class="campaign-price">${{ item.price | number_format }}</span>
|
|
<i class="fas fa-chart-line" aria-hidden="true"></i>
|
|
</button>
|
|
{% else %}
|
|
<span style="color:var(--momo-text-tertiary);">--</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-center momo-mono">
|
|
{% if current_promo_page == 'edm' %}
|
|
{% if item.remain_qty is not none %}
|
|
<span class="campaign-badge" style="color:var(--momo-warning-text);background:var(--momo-warning-bg);">剩 {{ item.remain_qty | number_format }} 組</span>
|
|
{% else %}
|
|
<span style="color:var(--momo-text-tertiary);">--</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="campaign-badge">{{ item.status_change or '活動中' }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4">
|
|
<div class="campaign-empty">此時段目前沒有商品資料</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
<tr class="campaign-filter-empty is-hidden">
|
|
<td colspan="4">
|
|
<div class="campaign-empty">此篩選條件目前沒有商品資料</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="modal fade campaign-history-modal" id="campaignHistoryModal" tabindex="-1" aria-labelledby="campaignHistoryModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div>
|
|
<h5 class="modal-title" id="campaignHistoryModalLabel">歷史價格走勢</h5>
|
|
<div class="campaign-history-subtitle momo-mono" id="campaignHistoryModalSubtitle">真實價格紀錄</div>
|
|
<div class="campaign-history-range" aria-label="價格歷史區間">
|
|
<button type="button" data-campaign-history-range="week">週</button>
|
|
<button class="is-active" type="button" data-campaign-history-range="month">月</button>
|
|
<button type="button" data-campaign-history-range="quarter">季</button>
|
|
<button type="button" data-campaign-history-range="year">年</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="campaign-chart-shell">
|
|
<div class="campaign-chart-state" id="campaignHistoryChartState">載入價格歷史中...</div>
|
|
<canvas class="campaign-chart-canvas is-hidden" id="campaignPriceChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
let campaignPriceChartInstance = null;
|
|
let activeCampaignHistoryRange = 'month';
|
|
let currentCampaignICode = null;
|
|
let currentCampaignProductName = '';
|
|
|
|
function getCSRFToken() {
|
|
return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
|
}
|
|
|
|
function formatCampaignPriceTick(value) {
|
|
return '$' + Number(value || 0).toLocaleString();
|
|
}
|
|
|
|
function setCampaignHistoryChartState(message, showCanvas = false) {
|
|
const state = document.getElementById('campaignHistoryChartState');
|
|
const canvas = document.getElementById('campaignPriceChart');
|
|
if (!state || !canvas) return;
|
|
state.textContent = message;
|
|
state.classList.toggle('is-hidden', showCanvas);
|
|
canvas.classList.toggle('is-hidden', !showCanvas);
|
|
}
|
|
|
|
function destroyCampaignPriceChart() {
|
|
if (campaignPriceChartInstance) {
|
|
campaignPriceChartInstance.destroy();
|
|
campaignPriceChartInstance = null;
|
|
}
|
|
}
|
|
|
|
function updateCampaignHistoryRangeButtons() {
|
|
document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
|
|
button.classList.toggle('is-active', button.dataset.campaignHistoryRange === activeCampaignHistoryRange);
|
|
});
|
|
}
|
|
|
|
function showCampaignHistory(iCode, productName, range = activeCampaignHistoryRange) {
|
|
const modalEl = document.getElementById('campaignHistoryModal');
|
|
const title = document.getElementById('campaignHistoryModalLabel');
|
|
const subtitle = document.getElementById('campaignHistoryModalSubtitle');
|
|
const canvas = document.getElementById('campaignPriceChart');
|
|
|
|
if (!modalEl || !title || !subtitle || !canvas) return;
|
|
|
|
currentCampaignICode = iCode;
|
|
currentCampaignProductName = productName || '歷史價格走勢';
|
|
activeCampaignHistoryRange = range;
|
|
updateCampaignHistoryRangeButtons();
|
|
|
|
title.textContent = currentCampaignProductName;
|
|
subtitle.textContent = `商品 ID ${iCode} · 讀取真實價格紀錄`;
|
|
destroyCampaignPriceChart();
|
|
setCampaignHistoryChartState('載入價格歷史中...');
|
|
|
|
const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
|
|
modal.show();
|
|
|
|
if (typeof Chart === 'undefined') {
|
|
setCampaignHistoryChartState('圖表元件尚未載入完成，請重新整理後再試。');
|
|
return;
|
|
}
|
|
|
|
fetch(`/api/history/i-code/${encodeURIComponent(iCode)}?range=${activeCampaignHistoryRange}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(payload => {
|
|
const points = payload.data || [];
|
|
if (payload.range_label) {
|
|
subtitle.textContent = `商品 ID ${iCode} · ${payload.range_label}真實價格紀錄`;
|
|
}
|
|
|
|
if (!Array.isArray(points) || points.length === 0) {
|
|
setCampaignHistoryChartState('目前沒有可顯示的歷史價格紀錄。');
|
|
return;
|
|
}
|
|
|
|
setCampaignHistoryChartState('', true);
|
|
const ctx = canvas.getContext('2d');
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 380);
|
|
gradient.addColorStop(0, 'rgba(190, 106, 45, 0.26)');
|
|
gradient.addColorStop(1, 'rgba(190, 106, 45, 0.04)');
|
|
|
|
campaignPriceChartInstance = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: points.map(point => point.t),
|
|
datasets: [{
|
|
label: '價格',
|
|
data: points.map(point => point.p),
|
|
borderColor: '#be6a2d',
|
|
backgroundColor: gradient,
|
|
borderWidth: 3,
|
|
fill: true,
|
|
tension: 0.35,
|
|
pointRadius: 3,
|
|
pointHoverRadius: 7,
|
|
pointBackgroundColor: '#be6a2d',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: 'rgba(55, 45, 35, 0.94)',
|
|
titleColor: '#faf7f0',
|
|
bodyColor: '#faf7f0',
|
|
borderColor: '#be6a2d',
|
|
borderWidth: 1,
|
|
displayColors: false,
|
|
padding: 12,
|
|
callbacks: {
|
|
label: context => '價格 ' + formatCampaignPriceTick(context.parsed.y)
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
grid: {
|
|
color: 'rgba(71, 61, 49, 0.08)'
|
|
},
|
|
ticks: {
|
|
color: '#7f715f',
|
|
callback: formatCampaignPriceTick
|
|
}
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: {
|
|
color: '#9b8a77',
|
|
maxRotation: 0,
|
|
autoSkip: true,
|
|
maxTicksLimit: 8
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('活動商品價格歷史載入失敗:', error);
|
|
setCampaignHistoryChartState('價格歷史載入失敗，請稍後再試。');
|
|
});
|
|
}
|
|
|
|
function applyCampaignFilter(card, filter) {
|
|
const rows = Array.from(card.querySelectorAll('[data-campaign-row]'));
|
|
const empty = card.querySelector('.campaign-filter-empty');
|
|
const counter = card.querySelector('[data-campaign-visible-count]');
|
|
let visibleCount = 0;
|
|
|
|
rows.forEach(row => {
|
|
const matches = filter === 'all' || row.dataset.campaignFilter === filter;
|
|
row.classList.toggle('is-hidden', !matches);
|
|
if (matches) visibleCount += 1;
|
|
});
|
|
|
|
if (empty) {
|
|
empty.classList.toggle('is-hidden', visibleCount !== 0);
|
|
}
|
|
|
|
if (counter) {
|
|
counter.textContent = `${visibleCount.toLocaleString()} 筆`;
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('.campaign-table-card').forEach(card => {
|
|
card.querySelectorAll('[data-campaign-filter]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
card.querySelectorAll('[data-campaign-filter]').forEach(item => {
|
|
item.classList.toggle('is-active', item === button);
|
|
});
|
|
applyCampaignFilter(card, button.dataset.campaignFilter);
|
|
});
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
if (!currentCampaignICode) return;
|
|
showCampaignHistory(currentCampaignICode, currentCampaignProductName, button.dataset.campaignHistoryRange);
|
|
});
|
|
});
|
|
|
|
function triggerEdmTask() {
|
|
if (confirm('確定要手動執行 EDM 爬蟲嗎？')) {
|
|
fetch('/api/run_edm_task', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': getCSRFToken() }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => alert(data.message))
|
|
.catch(error => alert('錯誤: ' + error));
|
|
}
|
|
}
|
|
|
|
function triggerFestivalTask() {
|
|
if (confirm('確定要手動執行節慶活動爬蟲嗎？')) {
|
|
fetch('/api/run_festival_task', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': getCSRFToken() }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => alert(data.message))
|
|
.catch(error => alert('錯誤: ' + error));
|
|
}
|
|
}
|
|
|
|
function triggerNotification() {
|
|
if (confirm('確定要發送 EDM 活動通知嗎？')) {
|
|
fetch('/api/trigger_edm_notification', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': getCSRFToken() }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => alert(data.message))
|
|
.catch(error => alert('錯誤: ' + error));
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|