优化界面
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'] : ''; ?>";
|
var order_id = getQueryParam('id') || "<?php echo isset($detail['id']) ? $detail['id'] : ''; ?>";
|
||||||
function loadUserMessages() {
|
function loadUserMessages() {
|
||||||
if (!order_id) return;
|
if (!order_id) return;
|
||||||
fetch('/workorder/index/usermessagelist?order_id=' + order_id)
|
fetch('/workorder/index/usermessagelist?order_id=' + order_id)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
.then(res => {
|
.then(res => {
|
||||||
var html = '';
|
var html = '';
|
||||||
if (res.code === 0 && Array.isArray(res.data)) {
|
if (res.code === 0 && Array.isArray(res.data)) {
|
||||||
res.data.forEach(function (msg) {
|
res.data.forEach(function (msg) {
|
||||||
var who = '';
|
var who = '';
|
||||||
var color = '';
|
var labelClass = '';
|
||||||
var labelClass = '';
|
var avatarClass = '';
|
||||||
if (msg.msgby == 1) {
|
var avatarText = '';
|
||||||
who = '客户留言';
|
var userMsgClass = 'user-message';
|
||||||
color = '#409eff';
|
if (msg.msgby == 1) {
|
||||||
labelClass = 'msgby-customer';
|
who = '客户留言';
|
||||||
} else if (msg.msgby == 0) {
|
labelClass = 'msgby-customer';
|
||||||
who = '平台回复';
|
avatarClass = 'avatar msgby-customer';
|
||||||
color = '#67c23a';
|
avatarText = '客';
|
||||||
labelClass = 'msgby-platform';
|
// 客户留言不加 platform 类
|
||||||
} else {
|
} else if (msg.msgby == 0) {
|
||||||
who = '未知';
|
who = '平台回复';
|
||||||
color = '#aaa';
|
labelClass = 'msgby-platform';
|
||||||
labelClass = '';
|
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>';
|
fetch('/workorder/index/messageadd', {
|
||||||
html += '<div><strong>内容：</strong>' + (msg.content || '') + '</div>';
|
method: 'POST',
|
||||||
// 客户留言下方加回复按钮
|
headers: { 'Content-Type': 'application/json' },
|
||||||
if (msg.msgby == 1) {
|
body: JSON.stringify({
|
||||||
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>';
|
order_id: orderid,
|
||||||
}
|
msg_id: msgid,
|
||||||
// 平台回复下方加删除按钮
|
msgby: 0, // 平台回复
|
||||||
if (msg.msgby == 0) {
|
content: value
|
||||||
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>';
|
.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();
|
loadUserMessages();
|
||||||
@ -429,13 +439,13 @@
|
|||||||
.yhgt-content,
|
.yhgt-content,
|
||||||
.wtbz {
|
.wtbz {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f8fafc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wtjs-box h4,
|
.wtjs-box h4,
|
||||||
.yhgt-box h4 {
|
.yhgt-box h4 {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
border-bottom: 1px solid #949494;
|
border-bottom: 1px solid #ddd;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
color: #4b4b4b;
|
color: #4b4b4b;
|
||||||
}
|
}
|
||||||
@ -457,4 +467,128 @@
|
|||||||
background: #f0f9eb;
|
background: #f0f9eb;
|
||||||
color: #67c23a;
|
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>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user