renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update point

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-12-04 11:43:27 +07:00
parent d4de557662
commit b9b6d91a87
6 changed files with 1724 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

417
html/points-history.html
View File

@@ -8,78 +8,6 @@
<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 -->
@@ -88,15 +16,12 @@
<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 style="width: 32px;"></div>
</div>
<div class="container">
<!-- Filter Section -->
<!--<div class="card mb-3">
<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>
@@ -104,185 +29,222 @@
<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>-->
</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>
<!-- Transaction Card 1 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">GD-00083</span>
<span class="transaction-date">28/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
<div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00083</div>
</div>
<div class="transaction-points positive">
+3 điểm
</div>
</div>
<div class="card-footer">
<span class="balance-after">Số dư sau: <strong>604 điểm</strong></span>
</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>
<!-- Transaction Card 2 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">GD-00081</span>
<span class="transaction-date">27/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
<div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00081</div>
</div>
<div class="transaction-points neutral">
0 điểm
</div>
</div>
<div class="card-footer">
<span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
</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>
<!-- Transaction Card 3 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">EXP-2023-001</span>
<span class="transaction-date">20/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Điểm thưởng hết hạn</div>
<div style="font-size: 13px; color: #999;">Hết hạn sử dụng</div>
</div>
<div class="transaction-points negative">
-5 điểm
</div>
</div>
<div class="card-footer">
<span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
</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>
<!-- Transaction Card 4 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">RDM-2023-042</span>
<span class="transaction-date">19/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi Voucher giảm giá</div>
<div style="font-size: 13px; color: #999;">Voucher 5.000.000đ - HSG</div>
</div>
<div class="transaction-points negative">
-500 điểm
</div>
</div>
<div class="card-footer">
<span class="balance-after">Số dư sau: <strong>606 điểm</strong></span>
</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>
<!-- Transaction Card 5 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">REF-2023-128</span>
<span class="transaction-date">10/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giới thiệu thành công</div>
<div style="font-size: 13px; color: #999;">Giới thiệu: Nguyễn Văn A</div>
</div>
<div class="transaction-points positive">
+5 điểm
</div>
</div>
<div class="card-footer">
<span class="balance-after">Số dư sau: <strong>1.106 điểm</strong></span>
</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>
<!-- Transaction Card 6 -->
<div class="transaction-card">
<div class="card-header">
<span class="transaction-code">RDM-2023-038</span>
<span class="transaction-date">05/09/2023</span>
</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 class="card-content">
<div class="transaction-desc">
<div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi quà tặng</div>
<div style="font-size: 13px; color: #999;">Tai nghe Bluetooth Sony WH-1000XM4</div>
</div>
<div class="transaction-points negative">
-200 điểm
</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 class="card-footer">
<span class="balance-after">Số dư sau: <strong>1.101 điểm</strong></span>
</div>
</div>
</div>
</div>
</div>
<style>
/* Modern Transaction Card Styles */
.transaction-card {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
overflow: hidden;
transition: all 0.2s;
}
.transaction-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.transaction-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
}
.transaction-code {
font-weight: 700;
font-size: 14px;
color: #005B9A;
}
.transaction-date {
font-size: 12px;
color: #9ca3af;
}
.transaction-card .card-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
}
.transaction-desc {
flex: 1;
}
.transaction-points {
font-size: 24px;
font-weight: 700;
text-align: right;
margin-left: 16px;
}
.transaction-points.positive {
color: #059669;
}
.transaction-points.negative {
color: #dc2626;
}
.transaction-points.neutral {
color: #6b7280;
}
.transaction-card .card-footer {
padding: 10px 16px;
background: #fafafa;
border-top: 1px solid #f0f0f0;
}
.balance-after {
font-size: 13px;
color: #666;
}
.balance-after strong {
color: #005B9A;
font-weight: 600;
}
@media (max-width: 480px) {
.transaction-points {
font-size: 20px;
}
}
</style>
<script>
function openComplaint(buttonElement) {
// Get transaction info from the card
@@ -302,21 +264,6 @@
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>