From 63e6365337513d7c178fcbef7c4027efef02a696 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E5=BC=BA?= <357099073@qq.com> Date: Wed, 2 Jul 2025 17:50:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/workorder/view/index/edit.html | 362 ++++++++++++++++++++--------- 1 file changed, 248 insertions(+), 114 deletions(-) diff --git a/app/workorder/view/index/edit.html b/app/workorder/view/index/edit.html index 8e55692..da53d87 100644 --- a/app/workorder/view/index/edit.html +++ b/app/workorder/view/index/edit.html @@ -263,121 +263,131 @@ //调取用户沟通信息 var order_id = getQueryParam('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 += '
'; + html += '
'; + html += '
[' + who + ']'; + html += '' + (msg.create_time || '') + '
'; + html += '
' + (msg.content || '') + '
'; + html += '
'; + if (msg.msgby == 1) { + html += ''; + } + if (msg.msgby == 0) { + html += ''; + } + html += '
'; + html += '
'; + html += '
'; + }); + } + if (!html) html = '
暂无沟通信息
'; + 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 += '
'; - html += '
[' + who + '] 时间：' + (msg.create_time || '') + '
'; - html += '
内容：' + (msg.content || '') + '
'; - // 客户留言下方加回复按钮 - if (msg.msgby == 1) { - html += '
'; - } - // 平台回复下方加删除按钮 - if (msg.msgby == 0) { - html += '
'; - } - html += '
'; + // 调用接口提交 + 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 = '
暂无沟通信息
'; - 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 = '
加载沟通信息失败
'; + }; }); - } + + // 绑定删除按钮事件 + 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 = '
加载沟通信息失败
'; + }); +} // 页面加载时调用 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 ; +} \ No newline at end of file