337 lines
14 KiB
HTML
337 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Danh sách đơn hàng - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<style>
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
animation: slideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #e5e7eb;
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="index.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Danh sách đơn hàng</h1>
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<i class="fas fa-search search-icon"></i>
|
|
<input type="text" class="search-input" placeholder="Mã đơn hàng">
|
|
</div>
|
|
|
|
<!-- Status Filters -->
|
|
<!--<div class="tab-nav mb-3">
|
|
<button class="tab-item active">Tất cả</button>
|
|
<button class="tab-item">Chờ xác nhận</button>
|
|
<button class="tab-item">Đang xử lý</button>
|
|
<button class="tab-item">Đang giao</button>
|
|
<button class="tab-item">Hoàn thành</button>
|
|
<button class="tab-item">Đã hủy</button>
|
|
</div>-->
|
|
<!-- Filter Pills -->
|
|
<div class="filter-container">
|
|
<!--<button class="filter-pill active">Tất cả</button>-->
|
|
<button class="filter-pill active">Chờ xác nhận</button>
|
|
<button class="filter-pill">Đang xử lý</button>
|
|
<!--<button class="filter-pill">Đang giao</button>-->
|
|
<button class="filter-pill">Hoàn thành</button>
|
|
<button class="filter-pill">Đã hủy</button>
|
|
</div>
|
|
|
|
<!-- Orders List -->
|
|
<div class="orders-list">
|
|
<!-- Order Item 1 - Processing -->
|
|
<div class="order-card processing" onclick="viewOrderDetail('DH001234')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001234</h4>
|
|
<span class="order-amount">12.900.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 03/08/2025</p>
|
|
<p class="order-customer">Ngày giao: 06/08/2025</p>
|
|
<p class="order-customer">Địa chỉ: Quận 7, HCM</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge processing">Đang xử lý</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 2 - Completed -->
|
|
<div class="order-card completed" onclick="viewOrderDetail('DH001233')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001233</h4>
|
|
<span class="order-amount">8.500.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 24/06/2025</p>
|
|
<p class="order-customer">Ngày giao: 27/06/202</p>
|
|
<p class="order-customer">Địa chỉ: Thủ Dầu Một, Bình Dương</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge completed">Hoàn thành</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 3 - Shipping -->
|
|
<div class="order-card shipping" onclick="viewOrderDetail('DH001232')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001232</h4>
|
|
<span class="order-amount">15.200.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 01/03/2025</p>
|
|
<p class="order-customer">Ngày giao: 05/03/2025</p>
|
|
<p class="order-customer">Địa chỉ: Cầu Giấy, Hà Nội</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge shipping">Đang giao</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 4 - Pending -->
|
|
<div class="order-card pending" data-status="pending" onclick="viewOrderDetail('DH001231')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001231</h4>
|
|
<span class="order-amount">6.750.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 08/11/2024</p>
|
|
<p class="order-customer">Ngày giao: 12/11/2024</p>
|
|
<p class="order-customer">Địa chỉ: Thủ Đức, HCM</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge pending">Chờ xác nhận</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Item 5 - Cancelled -->
|
|
<div class="order-card cancelled" onclick="viewOrderDetail('DH001230')">
|
|
<div class="order-status-indicator"></div>
|
|
<div class="order-content">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<h4 class="order-id">#DH001230</h4>
|
|
<span class="order-amount">3.200.000 VND</span>
|
|
</div>
|
|
|
|
<div class="order-details">
|
|
<p class="order-date">Ngày đặt: 30/07/2024</p>
|
|
<p class="order-customer">Ngày giao: 04/08/2024</p>
|
|
<p class="order-customer">Địa chỉ: Rạch Giá, Kiên Giang</p>
|
|
<p class="order-status-text">
|
|
<span class="status-badge cancelled">Đã hủy</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<!-- <div class="bottom-nav">
|
|
<a href="index.html" class="nav-item active">
|
|
<i class="fas fa-home"></i>
|
|
<span>Trang chủ</span>
|
|
</a>
|
|
<a href="loyalty.html" class="nav-item">
|
|
<i class="fas fa-star"></i>
|
|
<span>Hội viên</span>
|
|
</a>
|
|
<a href="promotions.html" class="nav-item">
|
|
<i class="fas fa-tags"></i>
|
|
<span>Khuyến mãi</span>
|
|
</a>
|
|
<a href="notifications.html" class="nav-item">
|
|
<i class="fas fa-bell"></i>
|
|
<span>Thông báo</span>
|
|
</a>
|
|
<a href="account.html" class="nav-item">
|
|
<i class="fas fa-user"></i>
|
|
<span>Cài đặt</span>
|
|
</a>
|
|
</div>-->
|
|
|
|
<!-- Info Modal -->
|
|
<div id="infoModal" class="modal-overlay" style="display: none;">
|
|
<div class="modal-content info-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
|
|
<button class="modal-close" onclick="closeInfoModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Đây là nội dung hướng dẫn sử dụng cho tính năng Quản lý Đơn hàng:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Sử dụng các tab (Chờ xác nhận, Đang giao...) để lọc nhanh trạng thái các đơn hàng của bạn.</li>
|
|
<li>Bấm vào một đơn hàng bất kỳ để xem thông tin chi tiết, sản phẩm, và ngày giao dự kiến.</li>
|
|
<li>Thanh tiến trình giúp bạn biết đơn hàng đang ở bước nào: Đã tạo, Đã xác nhận, hay Đã hoàn thành.</li>
|
|
<li>Nếu bạn đã chọn "Yêu cầu đàm phán giá" khi đặt hàng, đơn hàng sẽ ở trạng thái "Chờ xác nhận & đàm phán" cho đến khi Sales liên hệ.</li>
|
|
<li>Bạn có thể xem "Thông tin hóa đơn" đã khai báo tại trang chi tiết đơn hàng.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
function viewOrderDetail(orderId) {
|
|
window.location.href = `order-detail.html?id=${orderId}`;
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Filter functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterButtons = document.querySelectorAll('.filter-pill');
|
|
const orderCards = document.querySelectorAll('.order-card');
|
|
|
|
// Set "Chờ xác nhận" as default active tab
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
filterButtons[0].classList.add('active'); // First button is "Chờ xác nhận"
|
|
|
|
// Show only pending orders by default
|
|
filterOrders('pending');
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Remove active class from all buttons
|
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Add active class to clicked button
|
|
this.classList.add('active');
|
|
|
|
// Get filter status
|
|
const filterText = this.textContent.trim();
|
|
let status = '';
|
|
|
|
switch(filterText) {
|
|
case 'Chờ xác nhận':
|
|
status = 'pending';
|
|
break;
|
|
case 'Đang xử lý':
|
|
status = 'processing';
|
|
break;
|
|
case 'Đang giao':
|
|
status = 'shipping';
|
|
break;
|
|
case 'Hoàn thành':
|
|
status = 'completed';
|
|
break;
|
|
case 'Đã hủy':
|
|
status = 'cancelled';
|
|
break;
|
|
}
|
|
|
|
filterOrders(status);
|
|
});
|
|
});
|
|
|
|
function filterOrders(status) {
|
|
orderCards.forEach(card => {
|
|
if (status === '' || card.classList.contains(status)) {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |