|
|
|
@ -38,12 +38,7 @@ |
|
|
|
:class="{ 'self': msg.sender === 'self' }" |
|
|
|
> |
|
|
|
<!-- 对方头像在左 --> |
|
|
|
<img |
|
|
|
v-if="msg.sender === 'other'" |
|
|
|
:src="msg.avatar" |
|
|
|
class="avatar" |
|
|
|
alt="avatar" |
|
|
|
/> |
|
|
|
<div v-if="msg.msgFrom === 0" class="msg-avatar left-avatar">执</div> |
|
|
|
|
|
|
|
<div class="message-content"> |
|
|
|
<div |
|
|
|
@ -61,17 +56,19 @@ |
|
|
|
@touchend="onTouchEnd" |
|
|
|
@touchmove="onTouchMove" |
|
|
|
> |
|
|
|
{{ msg.content }} |
|
|
|
<div class="msg-sender">{{ msg.msgFrom === 0 ? (msg.bureauDeptName || useCommon.bureauUnitName || '执法单位') : msg.userName }}</div> |
|
|
|
<span>{{ msg.content }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 自己头像在右 --> |
|
|
|
<img |
|
|
|
<div v-if="msg.msgFrom === 1" class="msg-avatar right-avatar">企</div> |
|
|
|
<!-- <img |
|
|
|
v-if="msg.sender === 'self'" |
|
|
|
:src="msg.avatar" |
|
|
|
class="avatar" |
|
|
|
alt="avatar" |
|
|
|
/> |
|
|
|
/> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -133,13 +130,7 @@ const { useCommon } = $globalStore; |
|
|
|
|
|
|
|
// ========== 从路由参数获取信息 ========== |
|
|
|
const noticeId = ref(route.query.id || ''); |
|
|
|
const bureauDeptName = ref(route.query.bureauDeptName || '深圳司法局'); |
|
|
|
const contactPerson = ref(route.query.contactPerson || '付明明 周昂'); |
|
|
|
const noticeTitle = ref(route.query.title || '安全生产检查'); |
|
|
|
|
|
|
|
// ========== 头像占位 ========== |
|
|
|
const selfAvatar = 'https://placehold.co/40x40/447bf5/fff?text=我'; |
|
|
|
const otherAvatar = 'https://placehold.co/40x40/999/fff?text=官'; |
|
|
|
|
|
|
|
// ========== 消息列表 ========== |
|
|
|
const messageList = ref([]); |
|
|
|
@ -163,8 +154,10 @@ const fetchMessageList = () => { |
|
|
|
sender: isSelf ? 'self' : 'other', |
|
|
|
content: item.message, |
|
|
|
time:item.createTime|| '', |
|
|
|
avatar: isSelf ? selfAvatar : otherAvatar, |
|
|
|
isRecalled: item.isRecalled || false, |
|
|
|
msgFrom: item.msgFrom || 0, |
|
|
|
userName: item.userName || '', |
|
|
|
bureauDeptName: item.bureauDeptName || '', |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
@ -365,17 +358,17 @@ const sendMessage = () => { |
|
|
|
if (res.code === 200) { |
|
|
|
const now = new Date(); |
|
|
|
const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`; |
|
|
|
const selfAvatar=''; |
|
|
|
messageList.value.push({ |
|
|
|
id: res.data?.id || Date.now(), |
|
|
|
sender: 'self', |
|
|
|
content: text, |
|
|
|
time: timeStr, |
|
|
|
avatar: selfAvatar, |
|
|
|
msgFrom: 1, |
|
|
|
isRecalled: false, |
|
|
|
}); |
|
|
|
|
|
|
|
inputMessage.value = ''; |
|
|
|
|
|
|
|
// 滚动到底部 |
|
|
|
nextTick(() => { |
|
|
|
scrollToBottom(); |
|
|
|
@ -517,6 +510,7 @@ const onMoreClick = () => { |
|
|
|
text-align: center; |
|
|
|
border-radius: 0.08rem; |
|
|
|
} |
|
|
|
.msg-sender { color: #ccc; } |
|
|
|
} |
|
|
|
|
|
|
|
/* ===== 长按/右击菜单 ===== */ |
|
|
|
@ -635,4 +629,24 @@ const onMoreClick = () => { |
|
|
|
opacity: 0.8; |
|
|
|
} |
|
|
|
} |
|
|
|
.msg-avatar { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
|
|
color: #fff; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.left-avatar { |
|
|
|
background: linear-gradient(135deg, #f5a623, #f7c948); |
|
|
|
|
|
|
|
} |
|
|
|
.right-avatar { |
|
|
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
|
|
|
} |
|
|
|
</style> |
|
|
|
|