96 lines
3.5 KiB
HTML
96 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ profile.nickname }} - 明信片管理器{% endblock %}
|
|
{% block content %}
|
|
<div class="section-header">
|
|
<h1>{{ profile.nickname }} 的明信片</h1>
|
|
<a href="/profiles/{{ profile.id }}/postcards/new" class="btn btn-primary">+ 新明信片</a>
|
|
</div>
|
|
<div class="filter-bar">
|
|
<form method="get" class="form-row">
|
|
<select name="country">
|
|
<option value="">全部国家</option>
|
|
{% for c in countries %}
|
|
<option value="{{ c }}" {% if country == c %}selected{% endif %}>{{ c|flag }} {{ c }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="btn">筛选</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="tabs" id="tabs">
|
|
<button class="tab active" onclick="switchTab('sent')">寄出 ({{ sent|length }})</button>
|
|
<button class="tab" onclick="switchTab('received')">收到 ({{ received|length }})</button>
|
|
</div>
|
|
|
|
<div id="tab-sent" class="tab-panel">
|
|
{% if sent %}
|
|
{% for pc in sent %}
|
|
<a href="/postcards/{{ pc.id }}" class="postcard-row">
|
|
<div class="postcard-row-img">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="正面">
|
|
{% else %}
|
|
<div class="thumb placeholder">📷</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="postcard-row-info">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="postcard-row-detail">
|
|
<span>{{ pc.country|flag }} {{ pc.country or '-' }}</span>
|
|
<span>→ {{ pc.recipient_name or '-' }}</span>
|
|
</div>
|
|
<span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) }}</span>
|
|
<span class="postcard-row-date">
|
|
{% if pc.send_time %}{{ pc.send_time.strftime('%Y-%m-%d') }}寄出{% endif %}
|
|
{% if pc.arrival_time %}<br>{{ pc.arrival_time.strftime('%Y-%m-%d') }}送达{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="postcard-row-action">
|
|
{% if pc.status == 'sent' %}
|
|
<form method="post" action="/postcards/{{ pc.id }}/mark-delivered" onclick="event.preventDefault();event.stopPropagation();if(confirm('确认已送达？'))this.submit();">
|
|
<button type="submit" class="btn btn-sm btn-primary">已送达</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="empty">没有寄出的明信片。</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="tab-received" class="tab-panel" style="display:none">
|
|
{% if received %}
|
|
{% for pc in received %}
|
|
<a href="/postcards/{{ pc.id }}" class="postcard-row">
|
|
<div class="postcard-row-img">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="正面">
|
|
{% else %}
|
|
<div class="thumb placeholder">📷</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="postcard-row-info">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="postcard-row-detail">
|
|
<span>← {{ pc.sender_name or '-' }}</span>
|
|
</div>
|
|
{% if pc.receive_time %}<span class="postcard-row-date">{{ pc.receive_time.strftime('%Y-%m-%d') }}收到</span>{% endif %}
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="empty">没有收到的明信片。</p>
|
|
{% 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>
|
|
{% endblock %}
|