293 lines
14 KiB
PHP
293 lines
14 KiB
PHP
<?php
|
|
include 'header.php';
|
|
if (!isset($_SESSION['user_id'])) {
|
|
echo "<script>location.href='login.php';</script>";
|
|
exit;
|
|
}
|
|
|
|
$user_id = $_SESSION['user_id'];
|
|
$pdo = db();
|
|
|
|
// Check for active recharge order to force stay
|
|
$stmt = $pdo->prepare("SELECT id, status, bank_account_info, proof_image FROM fiat_orders WHERE user_id = ? AND status IN ('matching', 'matched', 'submitting') ORDER BY id DESC LIMIT 1");
|
|
$stmt->execute([$user_id]);
|
|
$active_recharge = $stmt->fetch();
|
|
$is_forced = !!$active_recharge;
|
|
|
|
// Fetch user info
|
|
$stmt = $pdo->prepare("SELECT uid, username FROM users WHERE id = ?");
|
|
$stmt->execute([$user_id]);
|
|
$user = $stmt->fetch();
|
|
|
|
// Get user IP
|
|
$user_ip = $_SERVER['REMOTE_ADDR'];
|
|
if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) {
|
|
$user_ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
|
|
}
|
|
|
|
// Fetch greeting message
|
|
$stmt = $pdo->prepare("SELECT value FROM settings WHERE name = 'chat_greeting'");
|
|
$stmt->execute();
|
|
$greeting = $stmt->fetchColumn() ?: '您好！欢迎咨询 NovaEx 官方客服，请问有什么可以帮您？';
|
|
|
|
// Fetch messages
|
|
$stmt = $pdo->prepare("SELECT * FROM messages WHERE user_id = ? ORDER BY created_at ASC");
|
|
$stmt->execute([$user_id]);
|
|
$messages = $stmt->fetchAll();
|
|
|
|
// Mark admin messages as read
|
|
$stmt = $pdo->prepare("UPDATE messages SET is_read = 1 WHERE user_id = ? AND sender = 'admin'");
|
|
$stmt->execute([$user_id]);
|
|
?>
|
|
|
|
<style>
|
|
<?php if ($is_forced): ?>
|
|
/* Forced state: Hide navbar and floating chat, full screen mode */
|
|
.navbar, .floating-service, footer { display: none !important; }
|
|
body { padding-top: 0 !important; overflow: hidden; background: #0b0e11; }
|
|
#chat-container { height: 100vh !important; width: 100vw !important; max-width: none !important; margin: 0 !important; }
|
|
#chat-card { border-radius: 0 !important; height: 100vh !important; border: none !important; }
|
|
<?php endif; ?>
|
|
|
|
#chat-box::-webkit-scrollbar { width: 6px; }
|
|
#chat-box::-webkit-scrollbar-track { background: transparent; }
|
|
#chat-box::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }
|
|
|
|
/* Account Matching Modal */
|
|
#account-modal {
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.85);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 99999;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.account-card {
|
|
background: #1e2329;
|
|
width: 90%;
|
|
max-width: 450px;
|
|
border-radius: 24px;
|
|
border: 1px solid #2b3139;
|
|
overflow: hidden;
|
|
box-shadow: 0 25px 50px rgba(0,0,0,0.6);
|
|
}
|
|
</style>
|
|
|
|
<div id="chat-container" class="container" style="max-width: 850px; margin: 30px auto; padding: 0; height: 75vh;">
|
|
<div id="chat-card" class="card" style="background: #1e2329; border: 1px solid #2b3139; border-radius: 20px; display: flex; flex-direction: column; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
<!-- Header -->
|
|
<div style="padding: 20px 25px; border-bottom: 1px solid #2b3139; display: flex; align-items: center; justify-content: space-between;">
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<div style="width: 45px; height: 45px; background: #f0b90b; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: black;">
|
|
<i class="fas fa-headset fa-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h3 style="margin: 0; font-size: 18px; color: white;">NovaEx 官方客服</h3>
|
|
<div style="display: flex; align-items: center; gap: 5px; font-size: 12px; color: #00c087;">
|
|
<span style="width: 8px; height: 8px; background: #00c087; border-radius: 50%; display: inline-block;"></span> 在线 (Online)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right; font-size: 12px; color: #848e9c;">
|
|
<div>UID: <?php echo $user['uid']; ?></div>
|
|
<div>IP: <?php echo $user_ip; ?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Body -->
|
|
<div id="chat-box" style="flex: 1; overflow-y: auto; padding: 25px; display: flex; flex-direction: column; gap: 20px; background: #161a1e;">
|
|
|
|
<!-- System Greeting -->
|
|
<div style="display: flex; flex-direction: column; align-items: flex-start;">
|
|
<div style="max-width: 80%; padding: 15px 20px; border-radius: 18px; border-bottom-left-radius: 4px; font-size: 14px; line-height: 1.6; background: #2b3139; color: white; border: 1px solid #3b424d;">
|
|
<?php echo nl2br(htmlspecialchars($greeting)); ?>
|
|
</div>
|
|
<span style="font-size: 10px; color: #5e6673; margin-top: 6px;">系统消息</span>
|
|
</div>
|
|
|
|
<?php foreach ($messages as $m):
|
|
if (strpos($m['message'], '[RECHARGE_NOTIFICATION]') !== false) continue;
|
|
?>
|
|
<div class="msg-container" data-id="<?php echo $m['id']; ?>" data-sender="<?php echo $m['sender']; ?>" style="display: flex; flex-direction: column; align-items: <?php echo $m['sender'] === 'user' ? 'flex-end' : 'flex-start'; ?>;">
|
|
<div class="msg-content" style="max-width: 75%; padding: 12px 18px; border-radius: 18px; font-size: 14px; line-height: 1.6;
|
|
<?php echo $m['sender'] === 'user' ? 'background: #f0b90b; color: black; border-bottom-right-radius: 4px;' : 'background: #2b3139; color: white; border-bottom-left-radius: 4px; border: 1px solid #3b424d;'; ?>">
|
|
<?php if ($m['type'] === 'image'): ?>
|
|
<img src="<?php echo $m['message']; ?>" style="max-width: 100%; border-radius: 8px; cursor: pointer;" onclick="window.open(this.src)">
|
|
<?php else: ?>
|
|
<?php echo nl2br(htmlspecialchars($m['message'])); ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
<span style="font-size: 10px; color: #5e6673; margin-top: 6px;"><?php echo date('H:i', strtotime($m['created_at'])); ?></span>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Input Area -->
|
|
<div style="padding: 20px; background: #1e2329; border-top: 1px solid #2b3139;">
|
|
<?php if ($active_recharge && $active_recharge['status'] === 'matched'): ?>
|
|
<div style="background: rgba(240, 185, 11, 0.1); border: 1px dashed #f0b90b; border-radius: 12px; padding: 15px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between;">
|
|
<div style="font-size: 13px; color: #f0b90b;">
|
|
<i class="fas fa-info-circle"></i> 已匹配账户，请在转账后上传凭证并点击确认完成。
|
|
</div>
|
|
<button onclick="document.getElementById('account-modal').style.display='flex'" style="background: #f0b90b; border: none; color: black; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer;">查看账户</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form id="chat-form" style="display: flex; gap: 12px; align-items: center;">
|
|
<div style="position: relative; display: flex; align-items: center; justify-content: center;">
|
|
<button type="button" onclick="document.getElementById('image-input').click()" style="background: #2b3139; border: 1px solid #3b424d; color: #f0b90b; width: 45px; height: 45px; border-radius: 12px; cursor: pointer; transition: 0.2s;" title="上传凭证">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<input type="file" id="image-input" accept="image/*" style="display: none;" onchange="uploadImage(this)">
|
|
</div>
|
|
|
|
<input type="text" id="chat-input" placeholder="请输入消息内容..."
|
|
style="flex: 1; background: #161a1e; border: 1px solid #2b3139; border-radius: 12px; padding: 14px 20px; color: white; outline: none; font-size: 14px;">
|
|
|
|
<button type="submit" style="background: #f0b90b; border: none; color: black; width: 50px; height: 50px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s;">
|
|
<i class="fas fa-paper-plane fa-lg"></i>
|
|
</button>
|
|
</form>
|
|
|
|
<?php if ($active_recharge && $active_recharge['status'] === 'matched'): ?>
|
|
<button id="confirm-pay-btn" onclick="confirmPayment()" style="width: 100%; margin-top: 15px; padding: 15px; background: #00c087; border: none; color: white; border-radius: 12px; font-weight: bold; cursor: pointer; <?php echo $active_recharge['proof_image'] ? '' : 'display: none;'; ?>">
|
|
<i class="fas fa-check-circle"></i> 我已完成支付 (凭证已上传)
|
|
</button>
|
|
<?php elseif ($active_recharge && $active_recharge['status'] === 'submitting'): ?>
|
|
<div style="width: 100%; margin-top: 15px; padding: 15px; background: rgba(0, 192, 135, 0.1); border: 1px solid #00c087; color: #00c087; border-radius: 12px; font-weight: bold; text-align: center;">
|
|
<i class="fas fa-clock"></i> 凭证已上传，等待客服审核...
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Matching Modal -->
|
|
<div id="account-modal">
|
|
<div class="account-card">
|
|
<div style="padding: 20px; background: #2b3139; display: flex; align-items: center; justify-content: space-between;">
|
|
<div style="font-weight: bold; color: #f0b90b;"><i class="fas fa-university"></i> 收款账户信息</div>
|
|
<i class="fas fa-times" onclick="document.getElementById('account-modal').style.display='none'" style="cursor: pointer;"></i>
|
|
</div>
|
|
<div style="padding: 25px;">
|
|
<div style="background: rgba(0, 192, 135, 0.1); color: #00c087; padding: 15px; border-radius: 12px; font-size: 13px; margin-bottom: 20px; border: 1px solid rgba(0, 192, 135, 0.2);">
|
|
<i class="fas fa-shield-check"></i> 请向以下账户进行汇款，转账成功后请回传截图。
|
|
</div>
|
|
<div id="account-info-display" style="color: white; font-size: 14px; line-height: 1.8; background: #161a1e; padding: 20px; border-radius: 12px; border: 1px solid #2b3139; white-space: pre-wrap;">
|
|
<?php echo $active_recharge['bank_account_info'] ?: '正在匹配收款账户，请稍等...'; ?>
|
|
</div>
|
|
<button onclick="document.getElementById('account-modal').style.display='none'" style="width: 100%; margin-top: 20px; padding: 15px; background: #f0b90b; border: none; color: black; border-radius: 12px; font-weight: bold; cursor: pointer;">知道了</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const chatBox = document.getElementById('chat-box');
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
|
|
document.getElementById('chat-form').onsubmit = function(e) {
|
|
e.preventDefault();
|
|
const input = document.getElementById('chat-input');
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('message', msg);
|
|
|
|
fetch('chat.php', {
|
|
method: 'POST',
|
|
body: new URLSearchParams(formData)
|
|
}).then(() => {
|
|
input.value = '';
|
|
location.reload();
|
|
});
|
|
};
|
|
|
|
function uploadImage(input) {
|
|
if (!input.files || !input.files[0]) return;
|
|
|
|
const formData = new FormData();
|
|
formData.append('image', input.files[0]);
|
|
|
|
const btn = input.parentElement.querySelector('button');
|
|
const originalHtml = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
btn.disabled = true;
|
|
|
|
fetch('api/upload_chat_image.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('上传失败: ' + data.error);
|
|
btn.innerHTML = originalHtml;
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirmPayment() {
|
|
if(!confirm('确定已完成转账并上传凭证了吗？')) return;
|
|
|
|
fetch('api/upload_chat_image.php?action=confirm_payment', {
|
|
method: 'POST'
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert(data.error || '操作失败');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Auto refresh chat and detect account matching
|
|
let lastCount = <?php echo count($messages); ?>;
|
|
let currentStatus = '<?php echo $active_recharge['status'] ?? ''; ?>';
|
|
|
|
setInterval(() => {
|
|
fetch('api/get_messages.php')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.count > lastCount) {
|
|
location.reload();
|
|
}
|
|
});
|
|
|
|
<?php if ($is_forced): ?>
|
|
fetch('api/check_order_status.php')
|
|
.then(r => r.json())
|
|
.then(order => {
|
|
if (order.status !== currentStatus) {
|
|
location.reload();
|
|
}
|
|
if (order.status === 'matched' && order.account_info) {
|
|
const display = document.getElementById('account-info-display');
|
|
if(display.innerText.includes('正在匹配')) {
|
|
display.innerText = order.account_info;
|
|
document.getElementById('account-modal').style.display = 'flex';
|
|
}
|
|
}
|
|
});
|
|
<?php endif; ?>
|
|
}, 4000);
|
|
|
|
<?php if ($is_forced): ?>
|
|
window.onbeforeunload = function() {
|
|
return "您有正在处理的订单，请在当前页面等待客服完成。";
|
|
};
|
|
history.pushState(null, null, location.href);
|
|
window.onpopstate = function() {
|
|
history.pushState(null, null, location.href);
|
|
};
|
|
<?php endif; ?>
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|