96 lines
3.8 KiB
HTML
96 lines
3.8 KiB
HTML
{% extends 'base.html' %}
|
||
{% block title %}账单详情{% endblock %}
|
||
{% block content %}
|
||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
<div>
|
||
<h3>账单详情</h3>
|
||
<div class="text-muted">周期：{{ invoice.period_start }} ~ {{ invoice.period_end }}</div>
|
||
<div class="text-muted">状态：{{ invoice.get_status_display }}</div>
|
||
</div>
|
||
<div>
|
||
{% if invoice.status == 'unpaid' %}
|
||
<form method="post" onsubmit="return confirm('确认将该账单标记为已支付？');">
|
||
{% csrf_token %}
|
||
<input type="hidden" name="action" value="mark_paid" />
|
||
<button type="submit" class="btn btn-success">标记为已支付</button>
|
||
</form>
|
||
<a class="btn btn-primary ms-2" href="{% url 'billing:pay' invoice.id %}">立即支付</a>
|
||
{% endif %}
|
||
<a class="btn btn-outline-secondary" href="{% url 'billing:detail_csv' invoice.id %}">导出 CSV</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mb-3">
|
||
<div class="card-header">费用汇总</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-3">套餐费用：¥ {{ plan_total }}</div>
|
||
<div class="col-md-3">超量费用：¥ {{ overage_total }}</div>
|
||
<div class="col-md-3">调整：¥ {{ adjustment }}</div>
|
||
<div class="col-md-3"><strong>总金额：¥ {{ amount_total }}</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>域名</th>
|
||
<th>描述</th>
|
||
<th class="text-end">数量（GB）</th>
|
||
<th class="text-end">单价</th>
|
||
<th class="text-end">金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for it in items %}
|
||
<tr>
|
||
<td>{% if it.domain %}<a href="/domains/{{ it.domain.id }}/">{{ it.domain.name }}</a>{% else %}-{% endif %}</td>
|
||
<td>
|
||
<div>{{ it.description }}</div>
|
||
{% if it.description == '基础套餐费用' %}
|
||
<div class="text-muted small">每域名当月基础月费。</div>
|
||
{% elif it.description == '超量流量费用' %}
|
||
<div class="text-muted small">超出包含/免费额度的部分，按单价计费。</div>
|
||
{% elif it.description %}
|
||
<div class="text-muted small">{{ it.description }}</div>
|
||
{% endif %}
|
||
</td>
|
||
<td class="text-end">{{ it.quantity }}</td>
|
||
<td class="text-end">¥ {{ it.unit_price }}</td>
|
||
<td class="text-end"><strong>¥ {{ it.amount }}</strong></td>
|
||
</tr>
|
||
{% empty %}
|
||
<tr><td colspan="5" class="text-center">暂无账单项</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="card mb-3">
|
||
<div class="card-header">账单周期流量统计（引用）</div>
|
||
<div class="card-body">
|
||
<div class="text-muted mb-2">周期：{{ period_start }} ~ {{ period_end }}，统计为参考，可能与套餐变更及赠送额度生效时间相关。</div>
|
||
<div class="table-responsive">
|
||
<table class="table table-sm table-striped">
|
||
<thead>
|
||
<tr><th>域名</th><th>用量（GB）</th><th>查看详情</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for s in domain_stats %}
|
||
<tr>
|
||
<td>{{ s.domain.name }}</td>
|
||
<td>{{ s.gb }}</td>
|
||
<td><a class="btn btn-sm btn-outline-primary" href="/domains/{{ s.domain.id }}/">用户侧详情</a></td>
|
||
</tr>
|
||
{% empty %}
|
||
<tr><td colspan="3" class="text-center">暂无数据</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="text-muted small">当前暂未包含请求数/状态码分布的数据库统计，如需请在“域名详情 → 统计”查看。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="/billing/" class="btn btn-outline-secondary">返回列表</a>
|
||
{% endblock %} |