425 lines
16 KiB
HTML
425 lines
16 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;
|
|
}
|
|
|
|
.order-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.order-card:hover {
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.order-card.pending {
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.order-card.processing {
|
|
border-left-color: #38B6FF;
|
|
}
|
|
|
|
.order-card.shipping {
|
|
border-left-color: #9C27B0;
|
|
}
|
|
|
|
.order-card.completed {
|
|
border-left-color: #28a745;
|
|
}
|
|
|
|
.order-card.cancelled {
|
|
border-left-color: #dc3545;
|
|
}
|
|
|
|
.order-id {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.order-amount {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.order-date, .order-customer {
|
|
font-size: 13px;
|
|
color: var(--text-light);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-badge.pending {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.status-badge.processing {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.status-badge.shipping {
|
|
background: #e8d4f1;
|
|
color: #6a1b9a;
|
|
}
|
|
|
|
.status-badge.completed {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-badge.cancelled {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
</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">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 Sản phẩm:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Sử dụng thanh tìm kiếm để tìm sản phẩm theo tên hoặc mã</li>
|
|
<li>Nhấn "Bộ lọc" để lọc sản phẩm theo nhiều tiêu chí</li>
|
|
<li>Chuyển đổi giữa chế độ xem lưới và danh sách</li>
|
|
<li>Nhấn vào sản phẩm để xem chi tiết</li>
|
|
<li>Thêm sản phẩm yêu thích bằng icon tim</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> |