322 lines
14 KiB
HTML
322 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>Lịch sử điểm - 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;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.document-card {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.download-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.tab-item.active {
|
|
background: var(--primary-blue);
|
|
color: var(--white);
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="loyalty.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Lịch sử điểm</h1>
|
|
<!--<div style="width: 32px;"></div>-->
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Filter Section -->
|
|
<!--<div class="card mb-3">
|
|
<div class="d-flex justify-between align-center">
|
|
<h3 class="card-title">Bộ lọc</h3>
|
|
<i class="fas fa-filter" style="color: var(--primary-blue);"></i>
|
|
</div>
|
|
<p class="text-muted" style="font-size: 12px; margin-top: 8px;">
|
|
Thời gian hiệu lực: 01/01/2023 - 31/12/2023
|
|
</p>
|
|
</div>-->
|
|
|
|
<!-- Points History List -->
|
|
<div class="points-history-list">
|
|
<!-- Transaction Item 1 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Giao dịch mua hàng 00083
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 28/09/2023 17:23:18
|
|
</p>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Giao dịch: 100.000.000 VND
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--success-color); font-weight: 500;">+3</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Item 2 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Giao dịch mua hàng 00081
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 27/09/2023 17:23:18
|
|
</p>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Giao dịch: 200.000.000 VND
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--text-dark); font-weight: 500;">0</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Item 3 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Điểm thưởng hết hạn
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 20/09/2023 17:23:18
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--danger-color); font-weight: 500;">-5</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Item 4 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Đổi Voucher HSG
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 19/09/2023 17:23:18
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--danger-color); font-weight: 500;">-500</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Item 5 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Giới thiệu người dùng
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 10/09/2023 17:23:18
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--success-color); font-weight: 500;">+5</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction Item 6 -->
|
|
<div class="card mb-3">
|
|
<div class="d-flex justify-between align-start mb-2">
|
|
<div style="flex: 1;">
|
|
<h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
|
|
Đổi quà
|
|
</h4>
|
|
<p class="text-muted" style="font-size: 12px;">
|
|
Thời gian: 19/09/2023 17:23:18
|
|
</p>
|
|
</div>
|
|
<button class="btn-complaint" onclick="openComplaint(this)">
|
|
Khiếu nại
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-end align-center" style="margin-top: 12px;">
|
|
<div style="text-align: right;">
|
|
<div style="color: var(--danger-color); font-weight: 500;">-200</div>
|
|
<div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 Lịch sử điểm:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Đây là sao kê chi tiết tất cả các giao dịch cộng/trừ điểm của bạn.</li>
|
|
<li>Bạn có thể kiểm tra điểm được cộng từ đơn hàng, từ việc đăng ký công trình, hoặc điểm bị trừ khi đổi quà.</li>
|
|
<li>Nếu phát hiện giao dịch bị sai sót, hãy bấm nút "Khiếu nại" trên dòng giao dịch đó để gửi yêu cầu hỗ trợ.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openComplaint(buttonElement) {
|
|
// Get transaction info from the card
|
|
const card = buttonElement.closest('.card');
|
|
const transactionTitle = card.querySelector('h4').textContent.trim();
|
|
const transactionDate = card.querySelector('.text-muted').textContent.replace('Thời gian: ', '').trim();
|
|
|
|
// Generate a transaction ID (in real app this would be from data attributes)
|
|
const transactionId = 'TXN' + Math.floor(Math.random() * 1000000);
|
|
|
|
// Navigate to complaint page with transaction details
|
|
const params = new URLSearchParams({
|
|
id: transactionId,
|
|
title: transactionTitle,
|
|
date: transactionDate
|
|
});
|
|
|
|
window.location.href = `point-complaint.html?${params.toString()}`;
|
|
}
|
|
|
|
function openInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('infoModal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('modal-overlay')) {
|
|
e.target.style.display = 'none';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |