456 lines
16 KiB
HTML
456 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>Thanh toán - 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="checkout.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Thanh toán</h1>
|
|
<button class="back-button" onclick="openInfoModal()">
|
|
<i class="fas fa-info-circle"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Payment Amount -->
|
|
<div class="card text-center mb-4">
|
|
<h3 class="text-2xl font-bold text-primary mb-2">14.541.120đ</h3>
|
|
<p class="text-gray-600">Số tiền cần thanh toán</p>
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 mt-3">
|
|
<p class="text-yellow-700 font-medium">
|
|
<i class="fas fa-info-circle mr-1"></i>
|
|
Thanh toán không dưới 20%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Payment -->
|
|
<div class="card text-center">
|
|
<h3 class="card-title">Quét mã QR để thanh toán</h3>
|
|
|
|
<div class="qr-container">
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://eurotile.com/payment/14195000"
|
|
alt="QR Code" class="qr-code">
|
|
</div>
|
|
|
|
<p class="text-gray-600 mb-4">
|
|
Quét mã QR bằng ứng dụng ngân hàng để thanh toán nhanh chóng
|
|
</p>
|
|
|
|
<!-- Payment Methods -->
|
|
<!--<div class="payment-methods">
|
|
<h4 class="font-semibold mb-3">Ứng dụng hỗ trợ:</h4>
|
|
<div class="app-grid">
|
|
<div class="app-item">
|
|
<div class="app-icon bg-red-100">
|
|
<i class="fas fa-university text-red-600"></i>
|
|
</div>
|
|
<span class="text-xs">Techcombank</span>
|
|
</div>
|
|
<div class="app-item">
|
|
<div class="app-icon bg-blue-100">
|
|
<i class="fas fa-credit-card text-blue-600"></i>
|
|
</div>
|
|
<span class="text-xs">Vietcombank</span>
|
|
</div>
|
|
<div class="app-item">
|
|
<div class="app-icon bg-green-100">
|
|
<i class="fas fa-mobile-alt text-green-600"></i>
|
|
</div>
|
|
<span class="text-xs">MoMo</span>
|
|
</div>
|
|
<div class="app-item">
|
|
<div class="app-icon bg-purple-100">
|
|
<i class="fas fa-wallet text-purple-600"></i>
|
|
</div>
|
|
<span class="text-xs">ZaloPay</span>
|
|
</div>
|
|
<div class="app-item">
|
|
<div class="app-icon bg-orange-100">
|
|
<i class="fas fa-coins text-orange-600"></i>
|
|
</div>
|
|
<span class="text-xs">ShopeePay</span>
|
|
</div>
|
|
<div class="app-item">
|
|
<div class="app-icon bg-indigo-100">
|
|
<i class="fas fa-money-check-alt text-indigo-600"></i>
|
|
</div>
|
|
<span class="text-xs">Banking</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>-->
|
|
|
|
<!-- Bank Transfer Info -->
|
|
<div class="card">
|
|
<h3 class="card-title">Thông tin chuyển khoản</h3>
|
|
|
|
<div class="transfer-info">
|
|
<div class="info-row">
|
|
<span class="info-label">Ngân hàng:</span>
|
|
<span class="info-value">BIDV</span>
|
|
<button class="copy-btn" onclick="copyText('Techcombank')">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">Số tài khoản:</span>
|
|
<span class="info-value">19036810704016</span>
|
|
<button class="copy-btn" onclick="copyText('19036810704016')">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">Chủ tài khoản:</span>
|
|
<span class="info-value">CÔNG TY EUROTILE</span>
|
|
<button class="copy-btn" onclick="copyText('CÔNG TY EUROTILE')">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="info-row">
|
|
<span class="info-label">Nội dung:</span>
|
|
<span class="info-value">DH001234</span>
|
|
<button class="copy-btn" onclick="copyText('DH001234 La Nguyen Quynh')">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mt-4">
|
|
<p class="text-blue-700 text-sm">
|
|
<i class="fas fa-lightbulb mr-1"></i>
|
|
<strong>Lưu ý:</strong> Vui lòng ghi đúng nội dung chuyển khoản để đơn hàng được xử lý nhanh chóng.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<!--<button class="btn btn-secondary" onclick="confirmPayment()">
|
|
<i class="fas fa-check"></i> Đã thanh toán
|
|
</button>-->
|
|
<button class="btn btn-primary" onclick="uploadProof()">
|
|
<i class="fas fa-camera"></i> Upload bill chuyển khoản
|
|
</button>
|
|
<a href="index.html" class="btn btn-secondary btn-block">
|
|
<i class="fas fa-home"></i> Quay về trang chủ
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Timer -->
|
|
<div class="timer-section">
|
|
<p class="text-center text-gray-600">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
Thời gian thanh toán: <span id="countdown" class="font-semibold text-red-600">14:59</span>
|
|
</p>
|
|
</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">Hướng dẫn thanh toán</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 Thanh toán:</p>
|
|
<ul class="list-disc ml-6 mt-3">
|
|
<li>Quét mã QR bằng app ngân hàng hoặc ví điện tử</li>
|
|
<li>Chuyển khoản theo thông tin được cung cấp</li>
|
|
<li>Ghi đúng nội dung chuyển khoản</li>
|
|
<li>Upload hóa đơn sau khi chuyển khoản</li>
|
|
<li>Thanh toán tối thiểu 20% giá trị đơn hàng</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.qr-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.qr-code {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
background: white;
|
|
}
|
|
|
|
.payment-methods {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.app-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.app-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.app-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.transfer-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.copy-btn {
|
|
background: #f3f4f6;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
color: #6b7280;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: #e5e7eb;
|
|
color: #374151;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.action-buttons .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.timer-section {
|
|
padding: 15px;
|
|
background: #fef3c7;
|
|
border: 1px solid #f59e0b;
|
|
border-radius: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.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) {
|
|
.app-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Countdown timer
|
|
let timeLeft = 15 * 60; // 15 minutes in seconds
|
|
|
|
function updateCountdown() {
|
|
const minutes = Math.floor(timeLeft / 60);
|
|
const seconds = timeLeft % 60;
|
|
|
|
document.getElementById('countdown').textContent =
|
|
`${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
if (timeLeft > 0) {
|
|
timeLeft--;
|
|
} else {
|
|
alert('Thời gian thanh toán đã hết hạn! Vui lòng đặt hàng lại.');
|
|
window.location.href = 'cart.html';
|
|
}
|
|
}
|
|
|
|
// Start countdown
|
|
setInterval(updateCountdown, 1000);
|
|
updateCountdown();
|
|
|
|
function copyText(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
// Show success feedback
|
|
const event = window.event;
|
|
const button = event.target.closest('.copy-btn');
|
|
const originalIcon = button.innerHTML;
|
|
|
|
button.innerHTML = '<i class="fas fa-check text-green-600"></i>';
|
|
setTimeout(() => {
|
|
button.innerHTML = originalIcon;
|
|
}, 1000);
|
|
|
|
// Show toast
|
|
showToast('Đã sao chép: ' + text);
|
|
}).catch(() => {
|
|
// Fallback for older browsers
|
|
alert('Đã sao chép: ' + text);
|
|
});
|
|
}
|
|
|
|
function showToast(message) {
|
|
// Create toast notification
|
|
const toast = document.createElement('div');
|
|
toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-4 py-2 rounded-lg z-50 transition-opacity';
|
|
toast.textContent = message;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.opacity = '0';
|
|
setTimeout(() => {
|
|
document.body.removeChild(toast);
|
|
}, 300);
|
|
}, 2000);
|
|
}
|
|
|
|
function confirmPayment() {
|
|
if (confirm('Xác nhận bạn đã thanh toán đơn hàng này?')) {
|
|
alert('Cảm ơn! Chúng tôi sẽ kiểm tra và xác nhận thanh toán của bạn trong vòng 15 phút.');
|
|
window.location.href = 'order-success.html';
|
|
}
|
|
}
|
|
|
|
function uploadProof() {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.accept = 'image/*';
|
|
|
|
input.onchange = function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
alert(`Đã tải lên bill chuyển khoản: ${file.name}\nChúng tôi sẽ xác nhận thanh toán trong vòng 15 phút.`);
|
|
window.location.href = 'order-success.html';
|
|
}
|
|
};
|
|
|
|
input.click();
|
|
}
|
|
|
|
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> |