254 lines
14 KiB
HTML
254 lines
14 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}我的订单 - 太白购物商城{% endblock %}
|
||
|
||
{% block head %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/orders.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="row">
|
||
<!-- 侧边栏 -->
|
||
<div class="col-md-3">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-person-circle"></i> 个人中心</h5>
|
||
</div>
|
||
<div class="list-group list-group-flush">
|
||
<a href="{{ url_for('user.profile') }}" class="list-group-item list-group-item-action">
|
||
<i class="bi bi-person"></i> 基本信息
|
||
</a>
|
||
<a href="{{ url_for('order.list') }}" class="list-group-item list-group-item-action active">
|
||
<i class="bi bi-bag"></i> 我的订单
|
||
</a>
|
||
<a href="{{ url_for('address.index') }}" class="list-group-item list-group-item-action">
|
||
<i class="bi bi-geo-alt"></i> 收货地址
|
||
</a>
|
||
<a href="{{ url_for('review.my_reviews') }}" class="list-group-item list-group-item-action">
|
||
<i class="bi bi-star"></i> 我的评价
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action">
|
||
<i class="bi bi-heart"></i> 我的收藏
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action">
|
||
<i class="bi bi-clock-history"></i> 浏览历史
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主要内容 -->
|
||
<div class="col-md-9">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h5><i class="bi bi-bag"></i> 我的订单</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 订单状态筛选 -->
|
||
<ul class="nav nav-pills mb-4">
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if not current_status %}active{% endif %}"
|
||
href="{{ url_for('order.list') }}">全部订单</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if current_status == 1 %}active{% endif %}"
|
||
href="{{ url_for('order.list', status=1) }}">待支付</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if current_status == 2 %}active{% endif %}"
|
||
href="{{ url_for('order.list', status=2) }}">待发货</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if current_status == 3 %}active{% endif %}"
|
||
href="{{ url_for('order.list', status=3) }}">待收货</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link {% if current_status == 5 %}active{% endif %}"
|
||
href="{{ url_for('order.list', status=5) }}">已完成</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- 订单列表 -->
|
||
{% if orders.items %}
|
||
{% for order in orders.items %}
|
||
<div class="order-card">
|
||
<!-- 订单头部 -->
|
||
<div class="order-header">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-3">
|
||
<strong>订单号：</strong>{{ order.order_sn }}
|
||
</div>
|
||
<div class="col-md-3">
|
||
<strong>下单时间：</strong>{{ order.created_at.strftime('%Y-%m-%d %H:%M') }}
|
||
</div>
|
||
<div class="col-md-3">
|
||
{% if order.status == 1 %}
|
||
<span class="badge bg-warning status-badge">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 2 %}
|
||
<span class="badge bg-info status-badge">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 3 %}
|
||
<span class="badge bg-primary status-badge">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 5 %}
|
||
<span class="badge bg-success status-badge">{{ order.get_status_text() }}</span>
|
||
{% elif order.status == 6 %}
|
||
<span class="badge bg-secondary status-badge">{{ order.get_status_text() }}</span>
|
||
{% else %}
|
||
<span class="badge bg-dark status-badge">{{ order.get_status_text() }}</span>
|
||
{% endif %}
|
||
</div>
|
||
<div class="col-md-3 text-end">
|
||
<a href="{{ url_for('order.detail', order_id=order.id) }}"
|
||
class="btn btn-outline-primary btn-sm">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单商品 -->
|
||
{% for item in order.order_items[:3] %}
|
||
<div class="order-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-0">{{ item.spec_combination }}</p>
|
||
{% endif %}
|
||
</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 %}
|
||
|
||
{% if order.order_items|length > 3 %}
|
||
<div class="order-item text-center text-muted">
|
||
<small>还有 {{ order.order_items|length - 3 }} 件商品...</small>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<!-- 订单底部 -->
|
||
<div class="order-footer">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-6">
|
||
<div class="d-flex gap-2 flex-wrap">
|
||
{% if order.can_pay() %}
|
||
<a href="{{ url_for('order.pay', payment_sn=order.payments[0].payment_sn) }}"
|
||
class="btn btn-danger btn-sm">立即支付</a>
|
||
{% endif %}
|
||
|
||
{% if order.can_cancel() %}
|
||
<button class="btn btn-outline-secondary btn-sm"
|
||
onclick="cancelOrder({{ order.id }})">取消订单</button>
|
||
{% endif %}
|
||
|
||
{% if order.can_confirm_receipt() %}
|
||
<button class="btn btn-success btn-sm"
|
||
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 btn-sm">评价商品</a>
|
||
{% else %}
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-warning btn-sm 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 %}
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 text-end">
|
||
<div>
|
||
<span class="text-muted">共 {{ order.order_items|length }} 件商品，</span>
|
||
<span class="text-muted">应付：</span>
|
||
<span class="order-amount">¥{{ "%.2f"|format(order.actual_amount) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
|
||
<!-- 分页 -->
|
||
{% if orders.pages > 1 %}
|
||
<nav aria-label="订单分页">
|
||
<ul class="pagination justify-content-center">
|
||
{% if orders.has_prev %}
|
||
<li class="page-item">
|
||
<a class="page-link" href="{{ url_for('order.list', page=orders.prev_num, status=current_status) }}">上一页</a>
|
||
</li>
|
||
{% endif %}
|
||
|
||
{% for page_num in orders.iter_pages() %}
|
||
{% if page_num %}
|
||
{% if page_num != orders.page %}
|
||
<li class="page-item">
|
||
<a class="page-link" href="{{ url_for('order.list', page=page_num, status=current_status) }}">{{ page_num }}</a>
|
||
</li>
|
||
{% else %}
|
||
<li class="page-item active">
|
||
<span class="page-link">{{ page_num }}</span>
|
||
</li>
|
||
{% endif %}
|
||
{% else %}
|
||
<li class="page-item disabled">
|
||
<span class="page-link">…</span>
|
||
</li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if orders.has_next %}
|
||
<li class="page-item">
|
||
<a class="page-link" href="{{ url_for('order.list', page=orders.next_num, status=current_status) }}">下一页</a>
|
||
</li>
|
||
{% endif %}
|
||
</ul>
|
||
</nav>
|
||
{% endif %}
|
||
|
||
{% else %}
|
||
<div class="text-center empty-state">
|
||
<i class="bi bi-bag-x display-1 text-muted"></i>
|
||
<h5 class="mt-3 text-muted">
|
||
{% if current_status %}
|
||
暂无该状态订单
|
||
{% else %}
|
||
暂无订单
|
||
{% endif %}
|
||
</h5>
|
||
<p class="text-muted">您还没有任何订单，快去购物吧！</p>
|
||
<a href="{{ url_for('main.index') }}" class="btn btn-primary">
|
||
<i class="bi bi-shop"></i> 去购物
|
||
</a>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/orders.js') }}"></script>
|
||
{% endblock %}
|