125 lines
4.5 KiB
HTML
125 lines
4.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ profile_user.username }} 的展示页{% endblock %}
|
|
{% block navbar %}{% endblock %}
|
|
{% block content %}
|
|
<div class="section-header">
|
|
<h1>📮 {{ profile_user.username }} 的明信片</h1>
|
|
</div>
|
|
|
|
{% set has_content = (sent_all|length + received_all|length) > 0 %}
|
|
{% if not has_content %}
|
|
<div class="empty-state">
|
|
<p>暂无展示内容</p>
|
|
</div>
|
|
{% else %}
|
|
|
|
<div class="tabs" id="tabs">
|
|
<button class="tab active" onclick="switchTab('sent')">发出 ({{ sent_all|length }})</button>
|
|
<button class="tab" onclick="switchTab('received')">收到 ({{ received_all|length }})</button>
|
|
</div>
|
|
|
|
<div id="tab-sent" class="tab-panel">
|
|
{% if mode == 'flat' %}
|
|
<div class="showcase-grid">
|
|
{% for pc in sent_all %}
|
|
<div class="showcase-card">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
|
|
{% else %}
|
|
<div class="showcase-card-img placeholder-img">📷</div>
|
|
{% endif %}
|
|
<div class="showcase-card-body">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="showcase-card-meta">
|
|
<span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
|
|
{% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{% for g in profile_groups %}
|
|
{% if g.sent %}
|
|
<h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
|
|
<div class="showcase-grid">
|
|
{% for pc in g.sent %}
|
|
<div class="showcase-card">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
|
|
{% else %}
|
|
<div class="showcase-card-img placeholder-img">📷</div>
|
|
{% endif %}
|
|
<div class="showcase-card-body">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="showcase-card-meta">
|
|
<span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
|
|
{% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="tab-received" class="tab-panel" style="display:none">
|
|
{% if mode == 'flat' %}
|
|
<div class="showcase-grid">
|
|
{% for pc in received_all %}
|
|
<div class="showcase-card">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
|
|
{% else %}
|
|
<div class="showcase-card-img placeholder-img">📷</div>
|
|
{% endif %}
|
|
<div class="showcase-card-body">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="showcase-card-meta">
|
|
<span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
|
|
{% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{% for g in profile_groups %}
|
|
{% if g.received %}
|
|
<h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
|
|
<div class="showcase-grid">
|
|
{% for pc in g.received %}
|
|
<div class="showcase-card">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" class="showcase-card-img">
|
|
{% else %}
|
|
<div class="showcase-card-img placeholder-img">📷</div>
|
|
{% endif %}
|
|
<div class="showcase-card-body">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="showcase-card-meta">
|
|
<span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
|
|
{% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(name) {
|
|
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
|
|
document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
|
|
event.currentTarget.classList.add('active');
|
|
document.getElementById('tab-' + name).style.display = '';
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|