优化界面
This commit is contained in:
parent
7937db5733
commit
63e6365337
@ -263,121 +263,131 @@
|
||||
//调取用户沟通信息
|
||||
var order_id = getQueryParam('id') || "<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>";
|
||||
function loadUserMessages() {
|
||||
if (!order_id) return;
|
||||
fetch('/workorder/index/usermessagelist?order_id=' + order_id)
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var html = '';
|
||||
if (res.code === 0 && Array.isArray(res.data)) {
|
||||
res.data.forEach(function (msg) {
|
||||
var who = '';
|
||||
var color = '';
|
||||
var labelClass = '';
|
||||
if (msg.msgby == 1) {
|
||||
who = '客户留言';
|
||||
color = '#409eff';
|
||||
labelClass = 'msgby-customer';
|
||||
} else if (msg.msgby == 0) {
|
||||
who = '平台回复';
|
||||
color = '#67c23a';
|
||||
labelClass = 'msgby-platform';
|
||||
} else {
|
||||
who = '未知';
|
||||
color = '#aaa';
|
||||
labelClass = '';
|
||||
if (!order_id) return;
|
||||
fetch('/workorder/index/usermessagelist?order_id=' + order_id)
|
||||
.then(response => response.json())
|
||||
.then(res => {
|
||||
var html = '';
|
||||
if (res.code === 0 && Array.isArray(res.data)) {
|
||||
res.data.forEach(function (msg) {
|
||||
var who = '';
|
||||
var labelClass = '';
|
||||
var avatarClass = '';
|
||||
var avatarText = '';
|
||||
var userMsgClass = 'user-message';
|
||||
if (msg.msgby == 1) {
|
||||
who = '客户留言';
|
||||
labelClass = 'msgby-customer';
|
||||
avatarClass = 'avatar msgby-customer';
|
||||
avatarText = '客';
|
||||
// 客户留言不加 platform 类
|
||||
} else if (msg.msgby == 0) {
|
||||
who = '平台回复';
|
||||
labelClass = 'msgby-platform';
|
||||
avatarClass = 'avatar msgby-platform';
|
||||
avatarText = '平';
|
||||
userMsgClass += ' platform'; // 平台回复加 platform 类
|
||||
} else {
|
||||
who = '未知';
|
||||
labelClass = '';
|
||||
avatarClass = 'avatar';
|
||||
avatarText = '?';
|
||||
}
|
||||
html += '<div class="' + userMsgClass + '">';
|
||||
html += '<div class="msg-main">';
|
||||
html += '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span>';
|
||||
html += '<span class="msg-time">' + (msg.create_time || '') + '</span></div>';
|
||||
html += '<div class="msg-content">' + (msg.content || '') + '</div>';
|
||||
html += '<div class="msg-actions">';
|
||||
if (msg.msgby == 1) {
|
||||
html += '<button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button>';
|
||||
}
|
||||
if (msg.msgby == 0) {
|
||||
html += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">删除</button>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
});
|
||||
}
|
||||
if (!html) html = '<div style="color:#888;">暂无沟通信息</div>';
|
||||
document.getElementById('workorder-message').innerHTML = html;
|
||||
|
||||
// 绑定回复按钮事件
|
||||
var replyBtns = document.querySelectorAll('.reply-btn');
|
||||
replyBtns.forEach(function (btn) {
|
||||
btn.onclick = function () {
|
||||
var msgid = this.getAttribute('data-msgid');
|
||||
var orderid = this.getAttribute('data-orderid');
|
||||
layer.prompt({ title: '回复客户', formType: 2 }, function (value, index) {
|
||||
if (!value) {
|
||||
layer.msg('回复内容不能为空');
|
||||
return;
|
||||
}
|
||||
html += '<div class="user-message" style="margin-bottom:10px;padding:10px;border-bottom:1px solid #eee;">';
|
||||
html += '<div><span class="msgby-label ' + labelClass + '">[' + who + ']</span> <strong>时间：</strong>' + (msg.create_time || '') + '</div>';
|
||||
html += '<div><strong>内容：</strong>' + (msg.content || '') + '</div>';
|
||||
// 客户留言下方加回复按钮
|
||||
if (msg.msgby == 1) {
|
||||
html += '<div style="margin-top:8px;"><button type="button" class="layui-btn layui-btn-xs reply-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">回复</button></div>';
|
||||
}
|
||||
// 平台回复下方加删除按钮
|
||||
if (msg.msgby == 0) {
|
||||
html += '<div style="margin-top:8px;"><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn" data-msgid="' + msg.msg_id + '" data-orderid="' + msg.order_id + '">删除</button></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
// 调用接口提交
|
||||
fetch('/workorder/index/messageadd', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
order_id: orderid,
|
||||
msg_id: msgid,
|
||||
msgby: 0, // 平台回复
|
||||
content: value
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(resp => {
|
||||
if (resp.code === 0) {
|
||||
layer.msg('回复成功');
|
||||
layer.close(index);
|
||||
loadUserMessages();
|
||||
} else {
|
||||
layer.msg(resp.msg || '回复失败');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
layer.msg('网络错误');
|
||||
});
|
||||
});
|
||||
}
|
||||
if (!html) html = '<div style="color:#888;">暂无沟通信息</div>';
|
||||
document.getElementById('workorder-message').innerHTML = html;
|
||||
|
||||
// 绑定回复按钮事件
|
||||
var replyBtns = document.querySelectorAll('.reply-btn');
|
||||
replyBtns.forEach(function (btn) {
|
||||
btn.onclick = function () {
|
||||
var msgid = this.getAttribute('data-msgid');
|
||||
var orderid = this.getAttribute('data-orderid');
|
||||
layer.prompt({ title: '回复客户', formType: 2 }, function (value, index) {
|
||||
if (!value) {
|
||||
layer.msg('回复内容不能为空');
|
||||
return;
|
||||
}
|
||||
// 调用接口提交
|
||||
fetch('/workorder/index/messageadd', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
order_id: orderid,
|
||||
msg_id: msgid,
|
||||
msgby: 0, // 平台回复
|
||||
content: value
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(resp => {
|
||||
if (resp.code === 0) {
|
||||
layer.msg('回复成功');
|
||||
layer.close(index);
|
||||
loadUserMessages();
|
||||
} else {
|
||||
layer.msg(resp.msg || '回复失败');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
layer.msg('网络错误');
|
||||
});
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
// 绑定删除按钮事件
|
||||
var deleteBtns = document.querySelectorAll('.delete-btn');
|
||||
deleteBtns.forEach(function (btn) {
|
||||
btn.onclick = function () {
|
||||
var msgid = this.getAttribute('data-msgid');
|
||||
var order_id = this.getAttribute('data-orderid');
|
||||
layer.confirm('确定要删除这条平台回复吗？', { icon: 3, title: '提示' }, function (index) {
|
||||
fetch('/workorder/index/messagedel', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
msg_id: msgid,
|
||||
order_id: order_id
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(resp => {
|
||||
if (resp.code === 0) {
|
||||
layer.msg('删除成功');
|
||||
loadUserMessages();
|
||||
} else {
|
||||
layer.msg(resp.msg || '删除失败');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
layer.msg('网络错误');
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch(function () {
|
||||
document.getElementById('workorder-message').innerHTML = '<div style="color:#888;">加载沟通信息失败</div>';
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定删除按钮事件
|
||||
var deleteBtns = document.querySelectorAll('.delete-btn');
|
||||
deleteBtns.forEach(function (btn) {
|
||||
btn.onclick = function () {
|
||||
var msgid = this.getAttribute('data-msgid');
|
||||
var order_id = this.getAttribute('data-orderid');
|
||||
layer.confirm('确定要删除这条平台回复吗？', { icon: 3, title: '提示' }, function (index) {
|
||||
fetch('/workorder/index/messagedel', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
msg_id: msgid,
|
||||
order_id: order_id
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(resp => {
|
||||
if (resp.code === 0) {
|
||||
layer.msg('删除成功');
|
||||
loadUserMessages();
|
||||
} else {
|
||||
layer.msg(resp.msg || '删除失败');
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
layer.msg('网络错误');
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch(function () {
|
||||
document.getElementById('workorder-message').innerHTML = '<div style="color:#888;">加载沟通信息失败</div>';
|
||||
});
|
||||
}
|
||||
|
||||
// 页面加载时调用
|
||||
loadUserMessages();
|
||||
@ -429,13 +439,13 @@
|
||||
.yhgt-content,
|
||||
.wtbz {
|
||||
padding: 15px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.wtjs-box h4,
|
||||
.yhgt-box h4 {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #949494;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 15px;
|
||||
color: #4b4b4b;
|
||||
}
|
||||
@ -457,4 +467,128 @@
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
}
|
||||
/* 留言区整体背景 */
|
||||
.yhgt-content {
|
||||
background: #f8fafc;
|
||||
border-radius: 10px;
|
||||
padding: 24px;
|
||||
min-height: 120px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* 单条留言卡片 */
|
||||
.user-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 18px;
|
||||
border: none;
|
||||
position: relative;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.user-message:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
|
||||
}
|
||||
|
||||
/* 气泡箭头 */
|
||||
.user-message::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: 24px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right: 8px solid #fff;
|
||||
}
|
||||
|
||||
/* 平台回复三角标在右 */
|
||||
.user-message.platform {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.user-message.platform::before {
|
||||
left: auto;
|
||||
right: -8px;
|
||||
border-right: none;
|
||||
border-left: 8px solid #fff;
|
||||
}
|
||||
.user-message.platform .avatar {
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
box-shadow: 0 1px 4px rgba(103,194,58,0.08);
|
||||
}
|
||||
|
||||
/* 客户留言和平台回复头像 */
|
||||
.user-message .avatar {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: #e6f7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 4px rgba(64,158,255,0.08);
|
||||
}
|
||||
.user-message .msgby-platform.avatar {
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
box-shadow: 0 1px 4px rgba(103,194,58,0.08);
|
||||
}
|
||||
|
||||
/* 留言内容主体 */
|
||||
.user-message .msg-main {
|
||||
flex: 1;
|
||||
}
|
||||
.user-message .msgby-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
padding: 2px 10px;
|
||||
border-radius: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-message .msgby-customer {
|
||||
background: #e6f7ff;
|
||||
color: #409eff;
|
||||
}
|
||||
.user-message .msgby-platform {
|
||||
background: #f0f9eb;
|
||||
color: #67c23a;
|
||||
}
|
||||
.user-message .msg-time {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.user-message .msg-content {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.7;
|
||||
padding: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* 按钮区 */
|
||||
.user-message .msg-actions {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.user-message .layui-btn-xs {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layui-td-gray, .layui-td-gray-2, .layui-td-gray-3, .layui-td-gray-4{
|
||||
background-color:#f8fafc ;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user