73 lines
2.0 KiB
HTML
73 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<h1 class="my-4">订单列表</h1>
|
|
|
|
<!-- 状态导航 -->
|
|
<ul class="nav nav-tabs mb-4">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-status="in_progress" href="#">进行中</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-status="pending" href="#">待处理</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-status="completed" href="#">已完成</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-status="cancelled" href="#">已取消</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 订单表格 -->
|
|
<div id="orderTable">
|
|
{% include '_order_table.html' %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// 初始化：默认加载 "in_progress" 状态的订单
|
|
loadOrders('in_progress', 1);
|
|
|
|
// 切换选项卡
|
|
$('.nav-link[data-status]').click(function(e) {
|
|
e.preventDefault();
|
|
const status = $(this).data('status');
|
|
$('.nav-link').removeClass('active');
|
|
$(this).addClass('active');
|
|
loadOrders(status, 1);
|
|
});
|
|
|
|
// 加载订单列表
|
|
function loadOrders(status, page) {
|
|
console.log('Sending request with status:', status, 'and page:', page);
|
|
$.ajax({
|
|
url: "{{ url_for('orders.list_orders') }}",
|
|
data: {
|
|
status: status,
|
|
page: page
|
|
},
|
|
success: function(data) {
|
|
$('#orderTable').html(data);
|
|
},
|
|
error: function(xhr) {
|
|
console.error('请求失败:', xhr.statusText);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 分页链接点击
|
|
$('#orderTable').on('click', '.page-link', function(e) {
|
|
e.preventDefault();
|
|
const page = $(this).data('page');
|
|
const status = $('.nav-link.active').data('status');
|
|
loadOrders(status, page);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|