庄锐波
6 months ago
16 changed files with 826 additions and 350 deletions
|
Before Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 456 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 46 KiB |
@ -0,0 +1,596 @@ |
|||
<template> |
|||
<div class="chat-page"> |
|||
<!-- 顶部导航栏 --> |
|||
<van-nav-bar |
|||
title="在线联系" |
|||
left-text="关闭" |
|||
left-arrow |
|||
@click-left="onClickLeft" |
|||
> |
|||
<template #right> |
|||
<van-icon name="ellipsis" size="20" @click="onMoreClick" /> |
|||
</template> |
|||
</van-nav-bar> |
|||
|
|||
<!-- 聊天对象信息 --> |
|||
<div class="chat-header"> |
|||
<div class="chat-target">{{ bureauDeptName }} · {{ contactPerson }}</div> |
|||
</div> |
|||
|
|||
<!-- 消息列表 --> |
|||
<div class="message-list" ref="messageListRef"> |
|||
<div |
|||
v-for="(msg, index) in messageList" |
|||
:key="msg.id" |
|||
class="message-group" |
|||
> |
|||
<!-- 时间分割线 --> |
|||
<div |
|||
v-if="shouldShowTime(index)" |
|||
class="time-divider" |
|||
> |
|||
{{ msg.time }} |
|||
</div> |
|||
|
|||
<!-- 消息行 --> |
|||
<div |
|||
class="message-row" |
|||
:class="{ 'self': msg.sender === 'self' }" |
|||
> |
|||
<!-- 对方头像在左 --> |
|||
<img |
|||
v-if="msg.sender === 'other'" |
|||
:src="msg.avatar" |
|||
class="avatar" |
|||
alt="avatar" |
|||
/> |
|||
|
|||
<div class="message-content"> |
|||
<div |
|||
v-if="msg.isRecalled" |
|||
class="message-bubble recalled" |
|||
> |
|||
{{ msg.sender === 'self' ? '你撤回了一条消息' : '对方撤回了一条消息' }} |
|||
</div> |
|||
<div |
|||
v-else |
|||
class="message-bubble" |
|||
:class="msg.sender" |
|||
@contextmenu.prevent="onBubbleContextMenu($event, msg, index)" |
|||
@touchstart="onTouchStart($event, msg, index)" |
|||
@touchend="onTouchEnd" |
|||
@touchmove="onTouchMove" |
|||
> |
|||
{{ msg.content }} |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 自己头像在右 --> |
|||
<img |
|||
v-if="msg.sender === 'self'" |
|||
:src="msg.avatar" |
|||
class="avatar" |
|||
alt="avatar" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 长按/右击菜单 --> |
|||
<div |
|||
v-if="menuVisible" |
|||
class="menu-overlay" |
|||
@click="closeMenu" |
|||
@contextmenu.prevent |
|||
> |
|||
<div |
|||
class="context-menu" |
|||
:style="{ top: menuPosition.y + 'px', left: menuPosition.x + 'px' }" |
|||
> |
|||
<div class="menu-item" @click.stop="onEdit"> |
|||
<van-icon name="edit" size="16" /> |
|||
<span>编辑</span> |
|||
</div> |
|||
<div class="menu-divider"></div> |
|||
<div class="menu-item" @click.stop="onRecall"> |
|||
<van-icon name="revoke" size="16" /> |
|||
<span>撤回</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部输入区域 --> |
|||
<div class="chat-input-area"> |
|||
<div v-if="editMode" class="edit-tip"> |
|||
正在编辑消息 |
|||
<span class="edit-cancel" @click="cancelEdit">取消</span> |
|||
</div> |
|||
<div class="input-wrapper"> |
|||
<input |
|||
v-model="inputMessage" |
|||
type="text" |
|||
class="chat-input" |
|||
:placeholder="editMode ? '编辑消息...' : '请输入消息...'" |
|||
@keyup.enter="sendMessage" |
|||
/> |
|||
<div class="send-btn" @click="sendMessage"> |
|||
<van-icon :name="editMode ? 'success' : 'arrow-up'" size="18" color="#fff" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="enforcementChat"> |
|||
import { ref, nextTick } from 'vue'; |
|||
import { showToast } from 'vant'; |
|||
import 'vant/es/toast/style'; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
// ========== 从路由参数获取信息 ========== |
|||
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([ |
|||
{ |
|||
id: 1, |
|||
sender: 'self', |
|||
content: `你好，预告的执法时间${route.query.enforcementTime || '2026-04-07'}检查，无法正常迎检，可否调整到2026-04-10下午？`, |
|||
time: '2026-03-31 10:20', |
|||
avatar: selfAvatar, |
|||
isRecalled: false, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
sender: 'other', |
|||
content: '好的', |
|||
time: '2026-03-31 18:32', |
|||
avatar: otherAvatar, |
|||
isRecalled: false, |
|||
}, |
|||
]); |
|||
|
|||
const inputMessage = ref(''); |
|||
const messageListRef = ref(null); |
|||
|
|||
// ========== 菜单相关 ========== |
|||
const menuVisible = ref(false); |
|||
const menuPosition = ref({ x: 0, y: 0 }); |
|||
const selectedMsg = ref(null); |
|||
const selectedIndex = ref(-1); |
|||
|
|||
// ========== 编辑模式 ========== |
|||
const editMode = ref(false); |
|||
const editingMsgId = ref(null); |
|||
|
|||
// ========== 长按计时器 ========== |
|||
let touchTimer = null; |
|||
let touchMoved = false; |
|||
|
|||
// ========== 是否显示时间分割线 ========== |
|||
const shouldShowTime = (index) => { |
|||
if (index === 0) return true; |
|||
const prev = messageList.value[index - 1]; |
|||
const curr = messageList.value[index]; |
|||
return prev.time !== curr.time; |
|||
}; |
|||
|
|||
// ========== 判断消息是否可编辑/撤回 ========== |
|||
const canEditOrRecall = (msg, index) => { |
|||
// 1. 必须是自己发的消息 |
|||
if (msg.sender !== 'self') return false; |
|||
|
|||
// 2. 消息已撤回则不可再次操作 |
|||
if (msg.isRecalled) return false; |
|||
|
|||
// 3. 时间不超过3分钟 |
|||
const msgTime = new Date(msg.time.replace(/-/g, '/')); |
|||
const now = new Date(); |
|||
const diffMinutes = (now - msgTime) / (1000 * 60); |
|||
if (diffMinutes > 3) return false; |
|||
|
|||
// 4. 之后没有对方的消息 |
|||
const hasOtherReply = messageList.value.slice(index + 1).some(m => m.sender === 'other'); |
|||
if (hasOtherReply) return false; |
|||
|
|||
return true; |
|||
}; |
|||
|
|||
// ========== PC端右击 ========== |
|||
const onBubbleContextMenu = (event, msg, index) => { |
|||
if (!canEditOrRecall(msg, index)) { |
|||
showToast('该消息无法编辑或撤回'); |
|||
return; |
|||
} |
|||
selectedMsg.value = msg; |
|||
selectedIndex.value = index; |
|||
const rect = event.currentTarget.getBoundingClientRect(); |
|||
menuPosition.value = { |
|||
x: rect.left + rect.width / 2, |
|||
y: rect.top - 10, |
|||
}; |
|||
menuVisible.value = true; |
|||
}; |
|||
|
|||
// ========== 移动端长按 ========== |
|||
const onTouchStart = (event, msg, index) => { |
|||
touchMoved = false; |
|||
const target = event.currentTarget; |
|||
touchTimer = setTimeout(() => { |
|||
if (!touchMoved) { |
|||
if (!canEditOrRecall(msg, index)) { |
|||
showToast('该消息无法编辑或撤回'); |
|||
return; |
|||
} |
|||
selectedMsg.value = msg; |
|||
selectedIndex.value = index; |
|||
const rect = target.getBoundingClientRect(); |
|||
menuPosition.value = { |
|||
x: rect.left + rect.width / 2, |
|||
y: rect.top - 10, |
|||
}; |
|||
menuVisible.value = true; |
|||
} |
|||
}, 600); |
|||
}; |
|||
|
|||
const onTouchEnd = () => { |
|||
if (touchTimer) { |
|||
clearTimeout(touchTimer); |
|||
touchTimer = null; |
|||
} |
|||
}; |
|||
|
|||
const onTouchMove = () => { |
|||
touchMoved = true; |
|||
if (touchTimer) { |
|||
clearTimeout(touchTimer); |
|||
touchTimer = null; |
|||
} |
|||
}; |
|||
|
|||
// ========== 关闭菜单 ========== |
|||
const closeMenu = () => { |
|||
menuVisible.value = false; |
|||
selectedMsg.value = null; |
|||
selectedIndex.value = -1; |
|||
}; |
|||
|
|||
// ========== 编辑消息 ========== |
|||
const onEdit = () => { |
|||
if (!selectedMsg.value) return; |
|||
editMode.value = true; |
|||
editingMsgId.value = selectedMsg.value.id; |
|||
inputMessage.value = selectedMsg.value.content; |
|||
closeMenu(); |
|||
nextTick(() => { |
|||
const input = document.querySelector('.chat-input'); |
|||
if (input) input.focus(); |
|||
}); |
|||
}; |
|||
|
|||
// ========== 撤回消息 ========== |
|||
const onRecall = () => { |
|||
if (selectedIndex.value === -1) return; |
|||
messageList.value[selectedIndex.value].isRecalled = true; |
|||
showToast('消息已撤回'); |
|||
closeMenu(); |
|||
}; |
|||
|
|||
// ========== 取消编辑 ========== |
|||
const cancelEdit = () => { |
|||
editMode.value = false; |
|||
editingMsgId.value = null; |
|||
inputMessage.value = ''; |
|||
}; |
|||
|
|||
// ========== 发送/更新消息 ========== |
|||
const sendMessage = () => { |
|||
const text = inputMessage.value.trim(); |
|||
if (!text) { |
|||
showToast('请输入消息内容'); |
|||
return; |
|||
} |
|||
|
|||
// 编辑模式：更新已有消息 |
|||
if (editMode.value && editingMsgId.value !== null) { |
|||
const msg = messageList.value.find(m => m.id === editingMsgId.value); |
|||
if (msg) { |
|||
msg.content = text; |
|||
showToast('消息已修改'); |
|||
} |
|||
cancelEdit(); |
|||
return; |
|||
} |
|||
|
|||
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')}`; |
|||
|
|||
messageList.value.push({ |
|||
id: Date.now(), |
|||
sender: 'self', |
|||
content: text, |
|||
time: timeStr, |
|||
avatar: selfAvatar, |
|||
isRecalled: false, |
|||
}); |
|||
|
|||
inputMessage.value = ''; |
|||
|
|||
// 滚动到底部 |
|||
nextTick(() => { |
|||
scrollToBottom(); |
|||
}); |
|||
|
|||
// 模拟对方回复 |
|||
// setTimeout(() => { |
|||
// messageList.value.push({ |
|||
// id: Date.now() + 1, |
|||
// sender: 'other', |
|||
// content: '收到，我们会尽快安排并与您确认具体时间。', |
|||
// time: timeStr, |
|||
// avatar: otherAvatar, |
|||
// isRecalled: false, |
|||
// }); |
|||
// nextTick(() => { |
|||
// scrollToBottom(); |
|||
// }); |
|||
// }, 1500); |
|||
}; |
|||
|
|||
// ========== 滚动到底部 ========== |
|||
const scrollToBottom = () => { |
|||
const el = messageListRef.value; |
|||
if (el) { |
|||
el.scrollTop = el.scrollHeight; |
|||
} |
|||
}; |
|||
|
|||
// ========== 返回上一页 ========== |
|||
const onClickLeft = () => { |
|||
router.back(); |
|||
}; |
|||
|
|||
// ========== 更多点击 ========== |
|||
const onMoreClick = () => { |
|||
showToast('更多功能开发中'); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.chat-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background-color: #e8f0f8; |
|||
position: relative; |
|||
} |
|||
|
|||
/* ===== 导航栏样式覆盖 ===== */ |
|||
:deep(.van-nav-bar) { |
|||
background-color: #fff; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__title) { |
|||
font-size: 0.45rem; |
|||
font-weight: 600; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar__text) { |
|||
font-size: 0.35rem; |
|||
color: #333; |
|||
} |
|||
|
|||
:deep(.van-nav-bar .van-icon) { |
|||
color: #333; |
|||
} |
|||
|
|||
/* ===== 聊天对象信息 ===== */ |
|||
.chat-header { |
|||
padding: 0.2rem 0; |
|||
text-align: center; |
|||
background-color: #e8f0f8; |
|||
|
|||
.chat-target { |
|||
font-size: 0.32rem; |
|||
color: #2d6fd5; |
|||
} |
|||
} |
|||
|
|||
/* ===== 消息列表 ===== */ |
|||
.message-list { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0 0.3rem 0.3rem; |
|||
} |
|||
|
|||
.message-group { |
|||
margin-bottom: 0.1rem; |
|||
} |
|||
|
|||
.time-divider { |
|||
text-align: center; |
|||
font-size: 0.24rem; |
|||
color: #999; |
|||
padding: 0.2rem 0; |
|||
} |
|||
|
|||
.message-row { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 0.2rem; |
|||
|
|||
&.self { |
|||
justify-content: flex-end; |
|||
} |
|||
} |
|||
|
|||
.avatar { |
|||
width: 0.8rem; |
|||
height: 0.8rem; |
|||
border-radius: 50%; |
|||
flex-shrink: 0; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.message-content { |
|||
max-width: 70%; |
|||
margin: 0 0.2rem; |
|||
} |
|||
|
|||
.message-bubble { |
|||
padding: 0.22rem 0.28rem; |
|||
border-radius: 0.16rem; |
|||
font-size: 0.32rem; |
|||
line-height: 1.5; |
|||
word-break: break-word; |
|||
user-select: none; |
|||
-webkit-user-select: none; |
|||
|
|||
&.self { |
|||
background-color: #4485f5; |
|||
color: #fff; |
|||
border-bottom-right-radius: 0.04rem; |
|||
} |
|||
|
|||
&.other { |
|||
background-color: #fff; |
|||
color: #333; |
|||
border-bottom-left-radius: 0.04rem; |
|||
} |
|||
|
|||
&.recalled { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
color: #999; |
|||
font-size: 0.28rem; |
|||
text-align: center; |
|||
border-radius: 0.08rem; |
|||
} |
|||
} |
|||
|
|||
/* ===== 长按/右击菜单 ===== */ |
|||
.menu-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 999; |
|||
} |
|||
|
|||
.context-menu { |
|||
position: absolute; |
|||
background: rgba(50, 50, 50, 0.9); |
|||
border-radius: 0.12rem; |
|||
padding: 0.1rem 0; |
|||
min-width: 2rem; |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); |
|||
transform: translate(-50%, -100%); |
|||
|
|||
/* 底部三角形箭头 */ |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -0.12rem; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 0.12rem solid transparent; |
|||
border-right: 0.12rem solid transparent; |
|||
border-top: 0.12rem solid rgba(50, 50, 50, 0.9); |
|||
} |
|||
} |
|||
|
|||
.menu-item { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 0.1rem; |
|||
padding: 0.2rem 0.3rem; |
|||
color: #fff; |
|||
font-size: 0.3rem; |
|||
cursor: pointer; |
|||
|
|||
&:active { |
|||
background: rgba(255, 255, 255, 0.1); |
|||
} |
|||
|
|||
:deep(.van-icon) { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.menu-divider { |
|||
height: 1px; |
|||
background: rgba(255, 255, 255, 0.2); |
|||
margin: 0 0.2rem; |
|||
} |
|||
|
|||
/* ===== 底部输入区域 ===== */ |
|||
.chat-input-area { |
|||
background-color: #fff; |
|||
padding: 0.2rem 0.3rem; |
|||
border-top: 1px solid #e5e5e5; |
|||
} |
|||
|
|||
.edit-tip { |
|||
font-size: 0.26rem; |
|||
color: #4485f5; |
|||
margin-bottom: 0.1rem; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.edit-cancel { |
|||
color: #999; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.input-wrapper { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 0.2rem; |
|||
} |
|||
|
|||
.chat-input { |
|||
flex: 1; |
|||
height: 0.8rem; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 0.4rem; |
|||
padding: 0 0.3rem; |
|||
font-size: 0.32rem; |
|||
outline: none; |
|||
background-color: #fff; |
|||
|
|||
&:focus { |
|||
border-color: #4485f5; |
|||
} |
|||
} |
|||
|
|||
.send-btn { |
|||
width: 0.8rem; |
|||
height: 0.8rem; |
|||
border-radius: 50%; |
|||
background-color: #4485f5; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex-shrink: 0; |
|||
cursor: pointer; |
|||
|
|||
&:active { |
|||
opacity: 0.8; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue