273 lines
13 KiB
HTML
273 lines
13 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}订单详情 - 太白购物商城{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container">
|
||
<nav aria-label="breadcrumb" class="mb-4">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="{{ url_for('main.index') }}">首页</a></li>
|
||
<li class="breadcrumb-item"><a href="{{ url_for('order.list') }}">我的订单</a></li>
|
||
<li class="breadcrumb-item active">订单详情</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<!-- 订单状态 -->
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-clock-history"></i> 订单状态</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="order-status-timeline">
|
||
<div class="timeline-item completed">
|
||
<h6>订单已提交</h6>
|
||
<p class="text-muted mb-0">{{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
|
||
</div>
|
||
|
||
<div class="timeline-item {% if order.status >= 2 %}completed{% elif order.status == 1 %}current{% endif %}">
|
||
<h6>等待买家付款</h6>
|
||
{% if order.status >= 2 %}
|
||
<p class="text-muted mb-0">已完成</p>
|
||
{% else %}
|
||
<p class="text-muted mb-0">请在15分钟内完成支付</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="timeline-item {% if order.status >= 3 %}completed{% elif order.status == 2 %}current{% endif %}">
|
||
<h6>卖家发货</h6>
|
||
{% if order.status >= 3 %}
|
||
<p class="text-muted mb-0">{{ order.shipped_at.strftime('%Y-%m-%d %H:%M:%S') if order.shipped_at else '已发货' }}</p>
|
||
{% else %}
|
||
<p class="text-muted mb-0">等待卖家发货</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="timeline-item {% if order.status >= 4 %}completed{% elif order.status == 3 %}current{% endif %}">
|
||
<h6>确认收货</h6>
|
||
{% if order.status >= 4 %}
|
||
<p class="text-muted mb-0">{{ order.received_at.strftime('%Y-%m-%d %H:%M:%S') if order.received_at else '已确认收货' }}</p>
|
||
{% else %}
|
||
<p class="text-muted mb-0">等待买家确认收货</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="timeline-item {% if order.status == 5 %}completed{% endif %}">
|
||
<h6>交易完成</h6>
|
||
{% if order.status == 5 %}
|
||
<p class="text-muted mb-0">交易成功</p>
|
||
{% else %}
|
||
<p class="text-muted mb-0">等待交易完成</p>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品信息 -->
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-box"></i> 商品信息</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for item in order.order_items %}
|
||
<div class="product-item">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-2">
|
||
<img src="{{ item.product_image or '/static/images/default-product.jpg' }}"
|
||
class="product-image" alt="{{ item.product_name }}">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6 class="mb-1">{{ item.product_name }}</h6>
|
||
{% if item.spec_combination %}
|
||
<p class="text-muted mb-1">{{ item.spec_combination }}</p>
|
||
{% endif %}
|
||
<small class="text-muted">单价：¥{{ "%.2f"|format(item.price) }}</small>
|
||
</div>
|
||
<div class="col-md-2 text-center">
|
||
<span class="text-muted">× {{ item.quantity }}</span>
|
||
</div>
|
||
<div class="col-md-2 text-end">
|
||
<span class="fw-bold">¥{{ "%.2f"|format(item.total_price) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 物流信息 -->
|
||
{% if order.shipping_info %}
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-truck"></i> 物流信息</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
{% for shipping in order.shipping_info %}
|
||
<div class="info-row">
|
||
<span>物流公司：</span>
|
||
<span>{{ shipping.shipping_company or '待发货' }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>快递单号：</span>
|
||
<span>{{ shipping.tracking_number or '待发货' }}</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="col-lg-4">
|
||
<!-- 订单信息 -->
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-receipt"></i> 订单信息</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="info-row">
|
||
<span>订单号：</span>
|
||
<span>{{ order.order_sn }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>下单时间：</span>
|
||
<span>{{ order.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>订单状态：</span>
|
||
<span>
|
||
{% if order.status == 1 %}
|
||
<span class="badge bg-warning">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 2 %}
|
||
<span class="badge bg-info">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 3 %}
|
||
<span class="badge bg-primary">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 5 %}
|
||
<span class="badge bg-success">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 6 %}
|
||
<span class="badge bg-secondary">{{ order.get_status_text() }}</span>
|
||
{% else %}
|
||
<span class="badge bg-dark">{{ order.get_status_text() }}</span>
|
||
{% endif %}
|
||
</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>支付方式：</span>
|
||
<span>{{ order.payment_method or '未选择' }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>配送方式：</span>
|
||
<span>{{ order.shipping_method or '标准配送' }}</span>
|
||
</div>
|
||
{% if order.remark %}
|
||
<div class="info-row">
|
||
<span>备注：</span>
|
||
<span>{{ order.remark }}</span>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 收货信息 -->
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-geo-alt"></i> 收货信息</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
{% set receiver = order.get_receiver_info() %}
|
||
<div class="info-row">
|
||
<span>收货人：</span>
|
||
<span>{{ receiver.receiver_name or '未知' }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>联系电话：</span>
|
||
<span>{{ receiver.receiver_phone or '未知' }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>收货地址：</span>
|
||
<span>{{ receiver.full_address or '未知' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 费用明细 -->
|
||
<div class="card order-detail-card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-calculator"></i> 费用明细</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="info-row">
|
||
<span>商品总价：</span>
|
||
<span>¥{{ "%.2f"|format(order.total_amount) }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span>运费：</span>
|
||
<span>¥{{ "%.2f"|format(order.shipping_fee) }}</span>
|
||
</div>
|
||
<hr>
|
||
<div class="info-row">
|
||
<span><strong>应付总额：</strong></span>
|
||
<span class="total-amount">¥{{ "%.2f"|format(order.actual_amount) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="d-grid gap-2">
|
||
{% if order.can_pay() %}
|
||
<a href="{{ url_for('order.pay', payment_sn=order.payments[0].payment_sn) }}"
|
||
class="btn btn-danger">立即支付</a>
|
||
{% endif %}
|
||
|
||
{% if order.can_cancel() %}
|
||
<button class="btn btn-outline-secondary" onclick="cancelOrder({{ order.id }})">
|
||
取消订单
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if order.can_confirm_receipt() %}
|
||
<button class="btn btn-success" onclick="confirmReceipt({{ order.id }})">
|
||
确认收货
|
||
</button>
|
||
{% endif %}
|
||
|
||
{% if order.status == 4 %}
|
||
<!-- 评价商品按钮，根据商品数量展示 -->
|
||
{% if order.order_items|length == 1 %}
|
||
<a href="{{ url_for('review.write_review', order_id=order.id, product_id=order.order_items[0].product_id) }}"
|
||
class="btn btn-outline-warning">评价商品</a>
|
||
{% else %}
|
||
<div class="dropdown d-grid">
|
||
<button class="btn btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||
评价商品
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
{% for item in order.order_items %}
|
||
<li>
|
||
<a class="dropdown-item"
|
||
href="{{ url_for('review.write_review', order_id=order.id, product_id=item.product_id) }}">
|
||
{{ item.product_name[:20] }}{% if item.product_name|length > 20 %}...{% endif %}
|
||
</a>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
{% endif %}
|
||
|
||
<a href="{{ url_for('order.list') }}" class="btn btn-outline-primary">
|
||
返回订单列表
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重要：确保order_detail.css在最后加载 -->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/order_detail.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/order_detail.js') }}"></script>
|
||
{% endblock %}
|