427 lines
20 KiB
HTML
427 lines
20 KiB
HTML
{% extends "admin/base.html" %}
|
|
|
|
{% block title %}订单详情 - 太白购物商城管理后台{% endblock %}
|
|
|
|
{% block page_title %}订单详情{% endblock %}
|
|
{% block page_description %}订单号：{{ order.order_sn }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link href="{{ url_for('static', filename='css/admin_orders.css') }}" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="admin-order-detail">
|
|
<div class="row">
|
|
<!-- 左侧：订单信息 -->
|
|
<div class="col-md-8">
|
|
<!-- 订单基本信息 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">订单基本信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th width="120">订单号：</th>
|
|
<td>{{ order.order_sn }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>用户信息：</th>
|
|
<td>
|
|
<div>{{ order.user.username }}</div>
|
|
{% if order.user.phone %}
|
|
<small class="text-muted">{{ order.user.phone }}</small>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>订单状态：</th>
|
|
<td>
|
|
<span class="badge order-status-{{ order.status }}">{{ order.get_status_text() }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>支付方式：</th>
|
|
<td>
|
|
{% if order.payment_method %}
|
|
<span class="badge bg-info">{{ order.payment_method }}</span>
|
|
{% else %}
|
|
<span class="text-muted">未设置</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th width="120">创建时间：</th>
|
|
<td>{{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
</tr>
|
|
{% if order.shipped_at %}
|
|
<tr>
|
|
<th>发货时间：</th>
|
|
<td>{{ order.shipped_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if order.received_at %}
|
|
<tr>
|
|
<th>收货时间：</th>
|
|
<td>{{ order.received_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>配送方式：</th>
|
|
<td>{{ order.shipping_method or '标准配送' }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if order.remark %}
|
|
<div class="mt-3">
|
|
<strong>订单备注：</strong>
|
|
<p class="text-muted mb-0">{{ order.remark }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 收货信息 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">收货信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% set receiver = order.get_receiver_info() %}
|
|
{% if receiver %}
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th width="120">收货人：</th>
|
|
<td>{{ receiver.receiver_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>联系电话：</th>
|
|
<td>{{ receiver.receiver_phone }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th width="120">收货地址：</th>
|
|
<td>{{ receiver.full_address }}</td>
|
|
</tr>
|
|
{% if receiver.postal_code %}
|
|
<tr>
|
|
<th>邮政编码：</th>
|
|
<td>{{ receiver.postal_code }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted">暂无收货信息</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 订单商品 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">订单商品</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>商品信息</th>
|
|
<th>单价</th>
|
|
<th>数量</th>
|
|
<th>小计</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in order.order_items %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{% if item.product_image %}
|
|
<img src="{{ item.product_image }}" alt="{{ item.product_name }}"
|
|
class="product-thumb me-3" style="width: 60px; height: 60px; object-fit: cover;">
|
|
{% endif %}
|
|
<div>
|
|
<div class="fw-bold">{{ item.product_name }}</div>
|
|
{% if item.spec_combination %}
|
|
<small class="text-muted">{{ item.spec_combination }}</small>
|
|
{% endif %}
|
|
{% if item.sku_code %}
|
|
<small class="text-muted d-block">SKU: {{ item.sku_code }}</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>¥{{ "%.2f"|format(item.price) }}</td>
|
|
<td>{{ item.quantity }}</td>
|
|
<td>¥{{ "%.2f"|format(item.total_price) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：金额信息和操作 -->
|
|
<div class="col-md-4">
|
|
<!-- 金额信息 -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">金额信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th>商品总额：</th>
|
|
<td class="text-end">¥{{ "%.2f"|format(order.total_amount) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>运费：</th>
|
|
<td class="text-end">¥{{ "%.2f"|format(order.shipping_fee) }}</td>
|
|
</tr>
|
|
<tr class="table-active">
|
|
<th>实付金额：</th>
|
|
<td class="text-end fw-bold text-primary">¥{{ "%.2f"|format(order.actual_amount) }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 支付信息 -->
|
|
{% if payment %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">支付信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th>支付流水号：</th>
|
|
<td>{{ payment.payment_sn }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>支付状态：</th>
|
|
<td>
|
|
<span class="badge {% if payment.status == 2 %}bg-success{% elif payment.status == 1 %}bg-warning{% else %}bg-danger{% endif %}">
|
|
{{ payment.get_status_text() }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% if payment.paid_at %}
|
|
<tr>
|
|
<th>支付时间：</th>
|
|
<td>{{ payment.paid_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if payment.third_party_sn %}
|
|
<tr>
|
|
<th>第三方流水号：</th>
|
|
<td>{{ payment.third_party_sn }}</td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 物流信息 -->
|
|
{% if shipping_info %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">物流信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-sm">
|
|
<tr>
|
|
<th>物流公司：</th>
|
|
<td>{{ shipping_info.shipping_company }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>快递单号：</th>
|
|
<td>{{ shipping_info.tracking_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>物流状态：</th>
|
|
<td>
|
|
<span class="badge {% if shipping_info.shipping_status == 3 %}bg-success{% elif shipping_info.shipping_status == 2 %}bg-warning{% else %}bg-info{% endif %}">
|
|
{% if shipping_info.shipping_status == 1 %}已发货
|
|
{% elif shipping_info.shipping_status == 2 %}运输中
|
|
{% elif shipping_info.shipping_status == 3 %}已送达
|
|
{% endif %}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">订单操作</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
{% if order.status == 2 %}
|
|
<button class="btn btn-success" onclick="showShipModal({{ order.id }}, '{{ order.order_sn }}')">
|
|
<i class="bi bi-truck"></i> 发货
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if order.status in [2, 3] %}
|
|
<button class="btn btn-warning" onclick="showRefundModal({{ order.id }}, '{{ order.order_sn }}')">
|
|
<i class="bi bi-arrow-return-left"></i> 退款
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if order.can_cancel() %}
|
|
<button class="btn btn-danger" onclick="showCancelModal({{ order.id }}, '{{ order.order_sn }}')">
|
|
<i class="bi bi-x-circle"></i> 取消订单
|
|
</button>
|
|
{% endif %}
|
|
|
|
<a href="{{ url_for('admin.orders') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> 返回列表
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发货模态框 -->
|
|
<div class="modal fade" id="shipModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">订单发货</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="shipForm">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">订单号</label>
|
|
<input type="text" class="form-control" id="shipOrderSn" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">物流公司 <span class="text-danger">*</span></label>
|
|
<select class="form-select" name="shipping_company" required>
|
|
<option value="">请选择物流公司</option>
|
|
<option value="顺丰速运">顺丰速运</option>
|
|
<option value="圆通速递">圆通速递</option>
|
|
<option value="中通快递">中通快递</option>
|
|
<option value="申通快递">申通快递</option>
|
|
<option value="韵达速递">韵达速递</option>
|
|
<option value="百世快递">百世快递</option>
|
|
<option value="德邦快递">德邦快递</option>
|
|
<option value="京东物流">京东物流</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">快递单号 <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" name="tracking_number" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-success">
|
|
<i class="bi bi-truck"></i> 确认发货
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退款模态框 -->
|
|
<div class="modal fade" id="refundModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">订单退款</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="refundForm">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">订单号</label>
|
|
<input type="text" class="form-control" id="refundOrderSn" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">退款原因 <span class="text-danger">*</span></label>
|
|
<textarea class="form-control" name="refund_reason" rows="3" required placeholder="请输入退款原因"></textarea>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
退款后将自动恢复库存，减少销量统计
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-warning">
|
|
<i class="bi bi-arrow-return-left"></i> 确认退款
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 取消模态框 -->
|
|
<div class="modal fade" id="cancelModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">取消订单</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="cancelForm">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">订单号</label>
|
|
<input type="text" class="form-control" id="cancelOrderSn" readonly>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">取消原因</label>
|
|
<textarea class="form-control" name="cancel_reason" rows="3" placeholder="请输入取消原因（可选）"></textarea>
|
|
</div>
|
|
<div class="alert alert-danger">
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
取消订单后将自动恢复库存，减少销量统计
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-danger">
|
|
<i class="bi bi-x-circle"></i> 确认取消
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="{{ url_for('static', filename='js/admin_orders.js') }}"></script>
|
|
{% endblock %}
|