210 lines
10 KiB
HTML
210 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>留言管理 - 商家后台</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/merchant/dashboard.html">
|
|
<i class="bi bi-shop"></i> 商家后台
|
|
</a>
|
|
<div class="navbar-nav ms-auto">
|
|
<a class="nav-link" href="/merchant/dashboard.html">首页</a>
|
|
<a class="nav-link" href="/merchant/products.html">商品管理</a>
|
|
<a class="nav-link" href="/merchant/orders.html">订单管理</a>
|
|
<a class="nav-link" href="/merchant/inventory.html">库存管理</a>
|
|
<a class="nav-link" href="/merchant/statistics.html">数据统计</a>
|
|
<a class="nav-link" href="/merchant/announcements.html">公告管理</a>
|
|
<a class="nav-link active" href="/merchant/messages.html">留言管理</a>
|
|
<a class="nav-link" href="/merchant/reviews.html">评价管理</a>
|
|
<a class="nav-link" href="/merchant/users.html">用户管理</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4 mb-5">
|
|
<h2 class="mb-4"><i class="bi bi-chat-dots"></i> 留言管理</h2>
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<div id="messagesList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 回复留言模态框 -->
|
|
<div class="modal fade" id="replyModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">回复留言</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">留言内容</label>
|
|
<div class="form-control" id="messageContent" style="min-height: 60px; background-color: #f8f9fa;"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="replyContent" class="form-label">回复内容 <span class="text-danger">*</span></label>
|
|
<textarea class="form-control" id="replyContent" rows="4" required></textarea>
|
|
</div>
|
|
<input type="hidden" id="replyMessageId">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveReply()">保存回复</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/sidebar-replacer.js"></script>
|
|
<script src="/static/js/ui-enhancements.js"></script>
|
|
<script>
|
|
// 检查登录状态
|
|
async function checkLogin() {
|
|
try {
|
|
const response = await fetch('/merchant/profile', {
|
|
credentials: 'include'
|
|
});
|
|
const data = await response.json();
|
|
if (data.code !== 200 || !data.data) {
|
|
window.location.href = '/merchant/login.html';
|
|
return false;
|
|
}
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
window.location.href = '/merchant/login.html';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 加载留言列表
|
|
async function loadMessages() {
|
|
try {
|
|
const response = await fetch('/merchant/messages', {
|
|
credentials: 'include'
|
|
});
|
|
const data = await response.json();
|
|
|
|
const container = document.getElementById('messagesList');
|
|
|
|
if (data.code === 200 && data.data) {
|
|
const messages = data.data || [];
|
|
|
|
if (messages.length === 0) {
|
|
container.innerHTML = '<div class="alert alert-info">暂无留言</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = `
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>留言内容</th>
|
|
<th>订单号</th>
|
|
<th>状态</th>
|
|
<th>留言时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${messages.map(message => `
|
|
<tr>
|
|
<td>${message.content || ''}</td>
|
|
<td>${message.orderId ? '订单#' + message.orderId : '-'}</td>
|
|
<td>
|
|
<span class="badge ${message.status === 1 ? 'bg-success' : 'bg-warning'}">
|
|
${message.status === 1 ? '已回复' : '未回复'}
|
|
</span>
|
|
</td>
|
|
<td>${message.createTime ? new Date(message.createTime).toLocaleString('zh-CN') : '-'}</td>
|
|
<td>
|
|
${message.status === 0 ?
|
|
`<button class="btn btn-sm btn-primary" onclick="showReplyModal(${message.id}, '${(message.content || '').replace(/'/g, "\\'")}')">
|
|
<i class="bi bi-reply"></i> 回复
|
|
</button>` :
|
|
`<button class="btn btn-sm btn-outline-primary" onclick="showReplyModal(${message.id}, '${(message.content || '').replace(/'/g, "\\'")}', '${(message.reply || '').replace(/'/g, "\\'")}')">
|
|
<i class="bi bi-pencil"></i> 查看/编辑
|
|
</button>`
|
|
}
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
} else {
|
|
container.innerHTML = '<div class="alert alert-warning">加载留言列表失败：' + (data.message || '未知错误') + '</div>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
document.getElementById('messagesList').innerHTML = '<div class="alert alert-danger">加载留言列表失败，请刷新页面重试</div>';
|
|
}
|
|
}
|
|
|
|
// 显示回复模态框
|
|
function showReplyModal(messageId, content, reply = '') {
|
|
document.getElementById('replyMessageId').value = messageId;
|
|
document.getElementById('messageContent').textContent = content;
|
|
document.getElementById('replyContent').value = reply;
|
|
const modal = new bootstrap.Modal(document.getElementById('replyModal'));
|
|
modal.show();
|
|
}
|
|
|
|
// 保存回复
|
|
async function saveReply() {
|
|
const messageId = document.getElementById('replyMessageId').value;
|
|
const reply = document.getElementById('replyContent').value;
|
|
|
|
if (!reply.trim()) {
|
|
UIEnhancements.showWarning('请输入回复内容');
|
|
return;
|
|
}
|
|
|
|
const saveBtn = document.querySelector('#replyModal .btn-primary');
|
|
|
|
try {
|
|
const { data } = await UIEnhancements.enhancedFetch(`/merchant/messages/${messageId}/reply`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
credentials: 'include',
|
|
body: `reply=${encodeURIComponent(reply)}`,
|
|
button: saveBtn
|
|
});
|
|
|
|
if (data.code === 200) {
|
|
UIEnhancements.showSuccess('回复已保存');
|
|
const modal = bootstrap.Modal.getInstance(document.getElementById('replyModal'));
|
|
modal.hide();
|
|
loadMessages();
|
|
} else {
|
|
UIEnhancements.showError(data.message || '保存失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
UIEnhancements.showError('保存失败，请稍后重试');
|
|
}
|
|
}
|
|
|
|
// 页面加载
|
|
checkLogin().then(isLoggedIn => {
|
|
if (isLoggedIn) {
|
|
loadMessages();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|