801 lines
25 KiB
HTML
801 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chi tiết đơn hàng #DH001234 - 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>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="orders.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Chi tiết đơn hàng</h1>
|
|
<div class="header-actions">
|
|
<button class="header-action-btn" onclick="shareOrder()">
|
|
<i class="fas fa-share"></i>
|
|
</button>
|
|
<button class="header-action-btn" onclick="printOrder()">
|
|
<i class="fas fa-print"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-detail-content">
|
|
<!-- Order Status Card -->
|
|
<div class="status-timeline-card">
|
|
<div class="order-header-info">
|
|
<h2 class="order-number">#DH001234</h2>
|
|
<span class="current-status processing">Đang xử lý</span>
|
|
</div>
|
|
|
|
<!-- Status Timeline -->
|
|
<div class="status-timeline">
|
|
<div class="timeline-item completed">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Đơn hàng được tạo</div>
|
|
<div class="timeline-date">03/08/2023 - 09:30</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item completed">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Đã xác nhận đơn hàng</div>
|
|
<div class="timeline-date">03/08/2023 - 10:15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item active">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-cog fa-spin"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Đang chuẩn bị hàng</div>
|
|
<div class="timeline-date">Đang thực hiện</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item pending">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-truck"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Vận chuyển</div>
|
|
<div class="timeline-date">Dự kiến: 05/08/2023</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item pending">
|
|
<div class="timeline-icon">
|
|
<i class="fas fa-box-open"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-title">Giao hàng thành công</div>
|
|
<div class="timeline-date">Dự kiến: 07/08/2023</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delivery Information Card -->
|
|
<div class="delivery-info-card">
|
|
<h3><i class="fas fa-shipping-fast"></i> Thông tin giao hàng</h3>
|
|
|
|
<div class="delivery-details">
|
|
<div class="delivery-method">
|
|
<div class="delivery-method-icon">
|
|
<i class="fas fa-truck"></i>
|
|
</div>
|
|
<div class="delivery-method-info">
|
|
<div class="method-name">Giao hàng tiêu chuẩn</div>
|
|
<div class="method-description">Giao trong 3-5 ngày làm việc</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="delivery-dates">
|
|
<div class="date-item">
|
|
<div class="date-label">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
Ngày xuất kho
|
|
</div>
|
|
<div class="date-value confirmed">05/08/2023</div>
|
|
</div>
|
|
|
|
<div class="date-item">
|
|
<div class="date-label">
|
|
<i class="fas fa-clock"></i>
|
|
Thời gian giao hàng
|
|
</div>
|
|
<div class="date-value">07/08/2023, 8:00 - 17:00</div>
|
|
</div>
|
|
|
|
<div class="date-item">
|
|
<div class="date-label">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
Địa chỉ giao hàng
|
|
</div>
|
|
<div class="address-value">
|
|
123 Đường Lê Văn Lương, Phường Tân Hưng, <br>
|
|
Quận 7, TP. Hồ Chí Minh
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-item">
|
|
<div class="date-label">
|
|
<i class="fas fa-user"></i>
|
|
Người nhận
|
|
</div>
|
|
<div class="date-value">Nguyễn Văn A - 0901234567</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Information -->
|
|
<div class="customer-info-card">
|
|
<h3><i class="fas fa-user-circle"></i> Thông tin khách hàng</h3>
|
|
<div class="customer-details">
|
|
<div class="customer-row">
|
|
<span class="customer-label">Tên khách hàng:</span>
|
|
<span class="customer-value">Nguyễn Văn A</span>
|
|
</div>
|
|
<div class="customer-row">
|
|
<span class="customer-label">Số điện thoại:</span>
|
|
<span class="customer-value">0901234567</span>
|
|
</div>
|
|
<div class="customer-row">
|
|
<span class="customer-label">Email:</span>
|
|
<span class="customer-value">nguyenvana@email.com</span>
|
|
</div>
|
|
<div class="customer-row">
|
|
<span class="customer-label">Loại khách hàng:</span>
|
|
<span class="customer-badge vip">Khách VIP</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Products List -->
|
|
<div class="products-card">
|
|
<h3><i class="fas fa-box"></i> Sản phẩm đặt hàng</h3>
|
|
|
|
<div class="product-list">
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="https://placehold.co/80x80/F5F5F5/005B9A/png?text=Gạch+1" alt="Gạch Eurotile MỘC LAM E03">
|
|
</div>
|
|
<div class="product-info">
|
|
<h4 class="product-name">Gạch Eurotile MỘC LAM E03</h4>
|
|
<div class="product-specs">
|
|
<span class="spec-item">Kích thước: 60x60cm</span>
|
|
<span class="spec-item">SKU: ET-ML-E03-60x60</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-quantity">
|
|
<span class="qty-label">Số lượng:</span>
|
|
<span class="qty-value">30 m²</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="unit-price">285.000đ/m²</span>
|
|
<span class="total-price">8.550.000đ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-item">
|
|
<div class="product-image">
|
|
<img src="https://placehold.co/80x80/E8E8E8/005B9A/png?text=Gạch+2" alt="Gạch Eurotile STONE GREY">
|
|
</div>
|
|
<div class="product-info">
|
|
<h4 class="product-name">Gạch Eurotile STONE GREY S02</h4>
|
|
<div class="product-specs">
|
|
<span class="spec-item">Kích thước: 80x80cm</span>
|
|
<span class="spec-item">SKU: ET-SG-S02-80x80</span>
|
|
</div>
|
|
</div>
|
|
<div class="product-quantity">
|
|
<span class="qty-label">Số lượng:</span>
|
|
<span class="qty-value">20 m²</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="unit-price">217.500đ/m²</span>
|
|
<span class="total-price">4.350.000đ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Summary -->
|
|
<div class="summary-card">
|
|
<h3><i class="fas fa-receipt"></i> Tổng kết đơn hàng</h3>
|
|
|
|
<div class="summary-details">
|
|
<div class="summary-row">
|
|
<span class="summary-label">Tạm tính:</span>
|
|
<span class="summary-value">12.900.000đ</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span class="summary-label">Phí vận chuyển:</span>
|
|
<span class="summary-value free">Miễn phí</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span class="summary-label">Giảm giá VIP:</span>
|
|
<span class="summary-value discount">-129.000đ</span>
|
|
</div>
|
|
<div class="summary-row total">
|
|
<span class="summary-label">Tổng cộng:</span>
|
|
<span class="summary-value">12.771.000đ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-method">
|
|
<div class="payment-label">
|
|
<i class="fas fa-credit-card"></i>
|
|
Phương thức thanh toán:
|
|
</div>
|
|
<div class="payment-value">Chuyển khoản ngân hàng</div>
|
|
</div>
|
|
|
|
<div class="order-notes">
|
|
<div class="notes-label">
|
|
<i class="fas fa-sticky-note"></i>
|
|
Ghi chú đơn hàng:
|
|
</div>
|
|
<div class="notes-content">
|
|
Giao hàng trong giờ hành chính. Vui lòng gọi trước 30 phút khi đến giao hàng.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="order-actions">
|
|
<button class="action-btn secondary" onclick="contactCustomer()">
|
|
<i class="fas fa-phone"></i>
|
|
Liên hệ khách hàng
|
|
</button>
|
|
<button class="action-btn primary" onclick="updateOrderStatus()">
|
|
<i class="fas fa-edit"></i>
|
|
Cập nhật trạng thái
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.order-detail-content {
|
|
padding: 0 0 100px 0;
|
|
}
|
|
|
|
.status-timeline-card,
|
|
.delivery-info-card,
|
|
.customer-info-card,
|
|
.products-card,
|
|
.summary-card {
|
|
background: var(--white);
|
|
margin: 16px;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-light);
|
|
}
|
|
|
|
.status-timeline-card h3,
|
|
.delivery-info-card h3,
|
|
.customer-info-card h3,
|
|
.products-card h3,
|
|
.summary-card h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Order Header */
|
|
.order-header-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.order-number {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
margin: 0;
|
|
}
|
|
|
|
.current-status {
|
|
padding: 6px 16px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.current-status.processing {
|
|
background: var(--warning-color);
|
|
}
|
|
|
|
.current-status.shipping {
|
|
background: var(--primary-blue);
|
|
}
|
|
|
|
.current-status.completed {
|
|
background: var(--success-color);
|
|
}
|
|
|
|
/* Status Timeline */
|
|
.status-timeline {
|
|
position: relative;
|
|
}
|
|
|
|
.status-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.timeline-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.timeline-icon {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
background: var(--border-color);
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.timeline-item.completed .timeline-icon {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.timeline-item.active .timeline-icon {
|
|
background: var(--warning-color);
|
|
color: white;
|
|
}
|
|
|
|
.timeline-title {
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.timeline-date {
|
|
color: var(--text-light);
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Delivery Information */
|
|
.delivery-method {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
background: var(--background-gray);
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.delivery-method-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.method-name {
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.method-description {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.delivery-dates {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.date-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.date-label {
|
|
color: var(--text-light);
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.date-value {
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
text-align: right;
|
|
flex: 1;
|
|
}
|
|
|
|
.date-value.confirmed {
|
|
color: var(--success-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.address-value {
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
text-align: right;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Customer Information */
|
|
.customer-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.customer-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.customer-label {
|
|
color: var(--text-light);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.customer-value {
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.customer-badge {
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.customer-badge.vip {
|
|
background: linear-gradient(135deg, #FFD700, #FFA500);
|
|
color: white;
|
|
}
|
|
|
|
/* Products List */
|
|
.product-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.product-item {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr auto auto;
|
|
gap: 12px;
|
|
align-items: start;
|
|
padding: 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.product-image img {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.product-info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin: 0 0 4px 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.product-specs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.spec-item {
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.product-quantity {
|
|
text-align: center;
|
|
}
|
|
|
|
.qty-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
color: var(--text-light);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.qty-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.product-price {
|
|
text-align: right;
|
|
}
|
|
|
|
.unit-price {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--text-light);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.total-price {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
/* Order Summary */
|
|
.summary-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.summary-row.total {
|
|
border-top: 1px solid var(--border-color);
|
|
padding-top: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.summary-label {
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.summary-row.total .summary-label {
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.summary-value {
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.summary-value.free {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.summary-value.discount {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.summary-row.total .summary-value {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.payment-method,
|
|
.order-notes {
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.payment-label,
|
|
.notes-label {
|
|
font-size: 14px;
|
|
color: var(--text-light);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.payment-value,
|
|
.notes-content {
|
|
font-weight: 500;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.notes-content {
|
|
line-height: 1.4;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.order-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--white);
|
|
padding: 16px;
|
|
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-btn.secondary {
|
|
background: var(--border-color);
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.action-btn.secondary:hover {
|
|
background: #ddd;
|
|
}
|
|
|
|
.action-btn.primary {
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
}
|
|
|
|
.action-btn.primary:hover {
|
|
background: var(--light-blue);
|
|
}
|
|
|
|
/* Mobile Responsiveness */
|
|
@media (max-width: 480px) {
|
|
.status-timeline-card,
|
|
.delivery-info-card,
|
|
.customer-info-card,
|
|
.products-card,
|
|
.summary-card {
|
|
margin: 12px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.product-item {
|
|
grid-template-columns: 50px 1fr;
|
|
grid-template-rows: auto auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.product-quantity {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.product-price {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
text-align: right;
|
|
}
|
|
|
|
.date-item,
|
|
.customer-row,
|
|
.summary-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.date-value,
|
|
.customer-value,
|
|
.summary-value,
|
|
.address-value {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function shareOrder() {
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'Đơn hàng #DH001234',
|
|
text: 'Chi tiết đơn hàng gạch Eurotile',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
alert('Đã sao chép link đơn hàng!');
|
|
}
|
|
}
|
|
|
|
function printOrder() {
|
|
window.print();
|
|
}
|
|
|
|
function contactCustomer() {
|
|
const phoneNumber = '0901234567';
|
|
if (confirm('Gọi điện cho khách hàng Nguyễn Văn A?')) {
|
|
window.location.href = `tel:${phoneNumber}`;
|
|
}
|
|
}
|
|
|
|
function updateOrderStatus() {
|
|
// In a real app, this would open a status update modal
|
|
alert('Chức năng cập nhật trạng thái đơn hàng sẽ được triển khai trong phiên bản tiếp theo.');
|
|
}
|
|
|
|
// Get order ID from URL parameters (if any)
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const orderId = urlParams.get('id') || 'DH001234';
|
|
|
|
// Update page title and order number display
|
|
document.title = `Chi tiết đơn hàng #${orderId} - EuroTile Worker`;
|
|
document.querySelector('.order-number').textContent = `#${orderId}`;
|
|
</script>
|
|
</body>
|
|
</html> |