Initial commit

templates/billing/detail.html

@@ -0,0 +1,96 @@
+{% 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 %}