10 changed files with 719 additions and 200 deletions
@ -0,0 +1,312 @@ |
|||||
|
<template> |
||||
|
<div class="notice-message-page app_content"> |
||||
|
<!-- 保留一份反馈记录 --> |
||||
|
<!-- 顶部导航 --> |
||||
|
<!-- <van-nav-bar |
||||
|
title="预告留言" |
||||
|
left-arrow |
||||
|
@click-left="onBack" |
||||
|
/> --> |
||||
|
|
||||
|
<!-- 消息列表区域 --> |
||||
|
<div class="message-area" ref="messageAreaRef"> |
||||
|
<div v-if="loading" class="loading-wrap"> |
||||
|
<van-loading size="18" /> 加载中... |
||||
|
</div> |
||||
|
<template v-else> |
||||
|
<van-empty v-if="!messageList.length" description="暂无留言" image-size="100" /> |
||||
|
<div |
||||
|
v-for="(msg, idx) in messageList" |
||||
|
:key="msg.id || idx" |
||||
|
class="message-item" |
||||
|
:class="{ 'message-right': msg.msgFrom === 0, 'message-left': msg.msgFrom === 1 }" |
||||
|
> |
||||
|
<!-- 左侧（企业消息） --> |
||||
|
<div v-if="msg.msgFrom === 1" class="msg-avatar left-avatar">企</div> |
||||
|
<div class="msg-bubble" :class="{ 'bubble-left': msg.msgFrom === 1, 'bubble-right': msg.msgFrom === 0 }"> |
||||
|
<div class="msg-sender">{{ msg.msgFrom === 0 ? (msg.bureauDeptName || useCommon.bureauUnitName || '执法单位') : msg.userName }}</div> |
||||
|
<div class="msg-content">{{ msg.message }}</div> |
||||
|
<div class="msg-time">{{ formatTime(msg.createTime) }}</div> |
||||
|
</div> |
||||
|
<!-- 右侧（执法单位消息） --> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 底部输入区域（非只读时显示） --> |
||||
|
<div v-if="!isReadonly" class="input-area"> |
||||
|
<van-field |
||||
|
v-model="inputMessage" |
||||
|
type="textarea" |
||||
|
placeholder="输入留言内容..." |
||||
|
rows="1" |
||||
|
autosize |
||||
|
class="input-field" |
||||
|
/> |
||||
|
<van-button |
||||
|
type="primary" |
||||
|
size="small" |
||||
|
class="send-btn" |
||||
|
:disabled="!inputMessage.trim()" |
||||
|
:loading="sending" |
||||
|
@click="onSend" |
||||
|
> |
||||
|
留言 |
||||
|
</van-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="cpNoticeMessage"> |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { showToast } from 'vant'; |
||||
|
import { getNoticeMessages, addNoticeMessage } from '@/api/enforcement/notice'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
const { useCommon } = $globalStore; |
||||
|
|
||||
|
const noticeId = computed(() => route.query.id || ''); |
||||
|
const isReadonly = computed(() => route.query.readonly === '1'); |
||||
|
|
||||
|
const messageList = ref([]); |
||||
|
const loading = ref(false); |
||||
|
const inputMessage = ref(''); |
||||
|
const sending = ref(false); |
||||
|
const messageAreaRef = ref(null); |
||||
|
let pollTimer = null; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
loadMessages(); |
||||
|
startPolling(); |
||||
|
}); |
||||
|
|
||||
|
onUnmounted(() => { |
||||
|
stopPolling(); |
||||
|
}); |
||||
|
|
||||
|
const startPolling = () => { |
||||
|
stopPolling(); |
||||
|
pollTimer = setInterval(() => { |
||||
|
pollMessages(); |
||||
|
}, 16000); |
||||
|
}; |
||||
|
|
||||
|
const stopPolling = () => { |
||||
|
if (pollTimer) { |
||||
|
clearInterval(pollTimer); |
||||
|
pollTimer = null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 轮询加载新消息（静默，不显示loading） |
||||
|
const pollMessages = () => { |
||||
|
if (!noticeId.value) return; |
||||
|
getNoticeMessages(noticeId.value, (res) => { |
||||
|
if (res.code === 200 && Array.isArray(res.data)) { |
||||
|
const oldCount = messageList.value.length; |
||||
|
messageList.value = res.data; |
||||
|
if (res.data.length > oldCount) { |
||||
|
scrollToBottom(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const loadMessages = () => { |
||||
|
if (!noticeId.value) return; |
||||
|
loading.value = true; |
||||
|
getNoticeMessages(noticeId.value, (res) => { |
||||
|
loading.value = false; |
||||
|
if (res.code === 200 && Array.isArray(res.data)) { |
||||
|
messageList.value = res.data; |
||||
|
scrollToBottom(); |
||||
|
} |
||||
|
}, () => { |
||||
|
loading.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const onSend = () => { |
||||
|
const text = inputMessage.value.trim(); |
||||
|
if (!text) return; |
||||
|
sending.value = true; |
||||
|
addNoticeMessage({ |
||||
|
noticeId: noticeId.value, |
||||
|
userId: String(useCommon.userId || ''), |
||||
|
userName: useCommon.nickName || useCommon.userName || '', |
||||
|
bureauDeptName: useCommon.bureauUnitName || '', |
||||
|
msgFrom: 0, // 执法单位=0 |
||||
|
message: text, |
||||
|
}, (res) => { |
||||
|
sending.value = false; |
||||
|
if (res.code === 200) { |
||||
|
inputMessage.value = ''; |
||||
|
loadMessages(); |
||||
|
} else { |
||||
|
showToast(res.msg || '发送失败'); |
||||
|
} |
||||
|
}, () => { |
||||
|
sending.value = false; |
||||
|
showToast('发送失败，请重试'); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const scrollToBottom = () => { |
||||
|
nextTick(() => { |
||||
|
if (messageAreaRef.value) { |
||||
|
messageAreaRef.value.scrollTop = messageAreaRef.value.scrollHeight; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const formatTime = (dateStr) => { |
||||
|
if (!dateStr) return ''; |
||||
|
return String(dateStr).substring(0, 16).replace('T', ' '); |
||||
|
}; |
||||
|
|
||||
|
const onBack = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.notice-message-page { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
background: #fbfdff; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-nav-bar) { |
||||
|
background: #347bc3; |
||||
|
flex-shrink: 0; |
||||
|
.van-nav-bar__title { color: #fff; font-size: 18px; font-weight: 600; } |
||||
|
.van-icon { color: #fff; } |
||||
|
} |
||||
|
|
||||
|
.message-area { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
padding: 16px 12px; |
||||
|
} |
||||
|
|
||||
|
.loading-wrap { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 30px 0; |
||||
|
color: #999; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.message-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.message-left { |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
.message-right { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.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); |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.right-avatar { |
||||
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.msg-bubble { |
||||
|
max-width: 70%; |
||||
|
padding: 10px 14px; |
||||
|
border-radius: 12px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.bubble-left { |
||||
|
background: #fff; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); |
||||
|
border-top-left-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.bubble-right { |
||||
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
||||
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2); |
||||
|
border-top-right-radius: 4px; |
||||
|
.msg-sender { color: rgba(255, 255, 255, 0.8); } |
||||
|
.msg-content { color: #fff; } |
||||
|
.msg-time { color: rgba(255, 255, 255, 0.6); } |
||||
|
} |
||||
|
|
||||
|
.msg-sender { |
||||
|
font-size: 12px; |
||||
|
color: #999; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.msg-content { |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
line-height: 1.5; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.msg-time { |
||||
|
font-size: 11px; |
||||
|
color: #bbb; |
||||
|
margin-top: 4px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.input-area { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
gap: 10px; |
||||
|
padding: 10px 12px; |
||||
|
background: #fff; |
||||
|
border-top: 1px solid #e4edf7; |
||||
|
flex-shrink: 0; |
||||
|
|
||||
|
.input-field { |
||||
|
flex: 1; |
||||
|
background: #fbfdff; |
||||
|
border-radius: 20px; |
||||
|
padding: 8px 14px; |
||||
|
|
||||
|
:deep(.van-field__control) { |
||||
|
min-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.send-btn { |
||||
|
height: 36px; |
||||
|
border-radius: 18px; |
||||
|
padding: 0 18px; |
||||
|
font-size: 14px; |
||||
|
background: linear-gradient(135deg, #1890ff, #0b63d1); |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue