【代码优化】客服聊天
puhui999
parent
7e6a3bbad3
commit
c149a54e83
|
|
@ -7,7 +7,11 @@
|
|||
:clearable="false"
|
||||
v-model="message"
|
||||
placeholder="请输入你要咨询的问题"
|
||||
:maxlength="maxLength"
|
||||
:focus="autoFocus"
|
||||
@focus="handleFocus"
|
||||
></uni-easyinput>
|
||||
<text v-if="showCharCount" class="char-count">{{ message.length }}/{{ maxLength }}</text>
|
||||
</view>
|
||||
<text class="sicon-basic bq" @tap.stop="onTools('emoji')"></text>
|
||||
<text
|
||||
|
|
@ -16,14 +20,21 @@
|
|||
:class="{ 'is-active': toolsMode === 'tools' }"
|
||||
@tap.stop="onTools('tools')"
|
||||
></text>
|
||||
<button v-if="message" class="ss-reset-button send-btn" @tap="sendMessage">
|
||||
发送
|
||||
<button
|
||||
v-if="message"
|
||||
class="ss-reset-button send-btn"
|
||||
@tap="sendMessage"
|
||||
:disabled="isDisabled || sending"
|
||||
:class="{ 'disabled': isDisabled || sending }"
|
||||
>
|
||||
<text v-if="sending">发送中</text>
|
||||
<text v-else>发送</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref, onUnmounted } from 'vue';
|
||||
/**
|
||||
* 消息发送组件
|
||||
*/
|
||||
|
|
@ -38,8 +49,25 @@
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 是否自动获取焦点
|
||||
autoFocus: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 最大字数限制
|
||||
maxLength: {
|
||||
type: Number,
|
||||
default: 500
|
||||
},
|
||||
// 是否显示字数统计
|
||||
showCharCount: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:modelValue', 'onTools', 'sendMessage']);
|
||||
|
||||
const message = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
|
|
@ -49,16 +77,55 @@
|
|||
}
|
||||
});
|
||||
|
||||
// 控制发送状态
|
||||
const sending = ref(false);
|
||||
|
||||
// 是否禁用发送按钮
|
||||
const isDisabled = computed(() => {
|
||||
return !message.value.trim() || message.value.length > props.maxLength;
|
||||
});
|
||||
|
||||
// 输入框获取焦点
|
||||
const handleFocus = () => {
|
||||
// 输入框获取焦点时关闭工具栏
|
||||
if (props.toolsMode !== '') {
|
||||
onTools('');
|
||||
}
|
||||
};
|
||||
|
||||
// 打开工具菜单
|
||||
function onTools(mode) {
|
||||
emits('onTools', mode);
|
||||
}
|
||||
|
||||
// 防抖处理
|
||||
let sendTimer = null;
|
||||
|
||||
// 发送消息
|
||||
function sendMessage() {
|
||||
emits('sendMessage');
|
||||
// 如果正在发送中，或者内容为空，则不处理
|
||||
if (sending.value || isDisabled.value) return;
|
||||
|
||||
// 清除可能存在的定时器
|
||||
if (sendTimer) clearTimeout(sendTimer);
|
||||
|
||||
// 设置发送状态
|
||||
sending.value = true;
|
||||
|
||||
// 执行发送，并添加防抖
|
||||
sendTimer = setTimeout(() => {
|
||||
emits('sendMessage');
|
||||
// 发送完成后重置状态
|
||||
setTimeout(() => {
|
||||
sending.value = false;
|
||||
}, 300);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
if (sendTimer) clearTimeout(sendTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -70,6 +137,16 @@
|
|||
height: 64rpx;
|
||||
border-radius: 32rpx;
|
||||
background: var(--ui-BG-1);
|
||||
position: relative;
|
||||
|
||||
.char-count {
|
||||
position: absolute;
|
||||
right: 15rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.bq {
|
||||
|
|
@ -97,6 +174,12 @@
|
|||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
margin-left: 11rpx;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
background: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,240 +1,169 @@
|
|||
<template>
|
||||
<!-- 聊天列表使用scroll-view原生组件 -->
|
||||
<scroll-view
|
||||
ref="scrollRef"
|
||||
class="chat-scroll-view"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="isTriggered"
|
||||
@scrolltolower="onScrollToLower"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<!-- 撑一下顶部导航 -->
|
||||
<view :style="{ height: sys_navBar + 'px' }"></view>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<view class="message-list" :style="{ transform: 'scaleY(-1)' }">
|
||||
<view v-for="(item, index) in messageList" :key="item.id" style="transform: scaleY(-1)">
|
||||
<!-- 消息渲染 -->
|
||||
<MessageListItem
|
||||
:message="item"
|
||||
:message-index="index"
|
||||
:message-list="messageList"
|
||||
></MessageListItem>
|
||||
<!-- 聊天列表使用scroll-view原生组件，整体倒置 -->
|
||||
<scroll-view ref="scrollRef" class="chat-scroll-view" scroll-y :refresher-enabled="false"
|
||||
@scroll="onScroll" style="transform: scaleY(-1);">
|
||||
<!-- 消息列表容器 -->
|
||||
<view class="message-container">
|
||||
<!-- 消息列表 -->
|
||||
<view class="message-list">
|
||||
<view v-for="(item, index) in messageList" :key="item.id" class="message-item"
|
||||
style="transform: scaleY(-1);">
|
||||
<!-- 消息渲染 -->
|
||||
<MessageListItem :message="item" :message-index="index"
|
||||
:message-list="messageList"></MessageListItem>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多提示 -->
|
||||
<view v-if="loadingMore" class="loading-more">加载更多...</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部聊天输入框 -->
|
||||
<su-fixed bottom>
|
||||
<slot name="bottom"></slot>
|
||||
</su-fixed>
|
||||
<!-- 查看最新消息提示 -->
|
||||
<view v-if="showNewMessageTip" class="new-message-tip" @click="scrollToBottom">
|
||||
<text>有新消息</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部聊天输入框 -->
|
||||
<su-fixed bottom>
|
||||
<view v-if="showNewMessageTip" :style="backToTopStyle">
|
||||
<text>有新消息</text>
|
||||
</view>
|
||||
<slot name="bottom"></slot>
|
||||
</su-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MessageListItem from '@/pages/chat/components/messageListItem.vue';
|
||||
import { reactive, ref, nextTick, watch } from 'vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import KeFuApi from '@/sheep/api/promotion/kefu';
|
||||
import { isEmpty } from '@/sheep/helper/utils';
|
||||
import sheep from '@/sheep';
|
||||
import { formatDate } from '@/sheep/util';
|
||||
|
||||
const sys_navBar = sheep.$platform.navbar;
|
||||
const scrollRef = ref(null); // 添加对scroll-view的引用
|
||||
const messageList = ref([]); // 消息列表
|
||||
const showNewMessageTip = ref(false); // 显示有新消息提示
|
||||
const isRefreshing = ref(false); // 是否正在刷新
|
||||
const isTriggered = ref(false); // 下拉刷新状态
|
||||
const loadingMore = ref(false); // 是否正在加载更多
|
||||
const scrollTop = ref(0); // 滚动位置
|
||||
const lastScrollTop = ref(0); // 上次滚动位置
|
||||
const hasReachedBottom = ref(true); // 是否滚动到底部
|
||||
const forceUpdate = ref(0); // 强制更新计数器
|
||||
|
||||
const refreshMessage = ref(false); // 更新消息列表
|
||||
const queryParams = reactive({
|
||||
no: 1, // 查询次数，只用于触底计算
|
||||
limit: 20,
|
||||
createTime: undefined,
|
||||
});
|
||||
|
||||
// 监听消息列表变化，自动滚动到底部
|
||||
watch(messageList, (newVal, oldVal) => {
|
||||
// 如果是添加了新消息 且 (在底部 或 列表初始加载)
|
||||
if (newVal.length > oldVal.length && (hasReachedBottom.value || oldVal.length === 0)) {
|
||||
nextTick(() => {
|
||||
scrollToBottom(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 获取消息分页列表
|
||||
const getMessageList = async (isRefresh = false) => {
|
||||
if (isRefresh) {
|
||||
queryParams.createTime = undefined;
|
||||
queryParams.no = 1;
|
||||
}
|
||||
|
||||
loadingMore.value = true;
|
||||
try {
|
||||
const { data } = await KeFuApi.getKefuMessageList(queryParams);
|
||||
if (isEmpty(data)) {
|
||||
loadingMore.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (isRefresh) {
|
||||
messageList.value = data;
|
||||
} else {
|
||||
messageList.value = [...messageList.value, ...data];
|
||||
}
|
||||
|
||||
if (data.slice(-1).length > 0) {
|
||||
// 设置最后一次历史查询的最后一条消息的 createTime
|
||||
queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
|
||||
}
|
||||
|
||||
// 刷新完成后滚动到底部
|
||||
if (isRefresh) {
|
||||
setTimeout(() => {
|
||||
scrollToBottom(true);
|
||||
}, 300);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取消息列表失败:', error);
|
||||
} finally {
|
||||
loadingMore.value = false;
|
||||
isTriggered.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = async () => {
|
||||
isTriggered.value = true;
|
||||
isRefreshing.value = true;
|
||||
await getMessageList(true);
|
||||
isRefreshing.value = false;
|
||||
setTimeout(() => {
|
||||
isTriggered.value = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// 上拉加载更多
|
||||
const onScrollToLower = async () => {
|
||||
if (loadingMore.value) return;
|
||||
queryParams.no++;
|
||||
const backToTopStyle = reactive({
|
||||
height: '30px',
|
||||
width: '100px',
|
||||
'background-color': '#fff',
|
||||
'border-radius': '30px',
|
||||
'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}); // 返回顶部样式
|
||||
// const pagingRef = ref(null); // 虚拟列表
|
||||
const queryList = async (no, limit) => {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
queryParams.no = no;
|
||||
queryParams.limit = limit;
|
||||
await getMessageList();
|
||||
};
|
||||
|
||||
// 监听滚动事件
|
||||
const onScroll = (e) => {
|
||||
lastScrollTop.value = e.detail.scrollTop;
|
||||
|
||||
// 判断是否滚动到底部 - 修正计算方法
|
||||
const scrollHeight = e.detail.scrollHeight;
|
||||
const scrollTop = e.detail.scrollTop;
|
||||
const clientHeight = e.detail.scrollHeight - scrollHeight; // 近似计算可见区域高度
|
||||
|
||||
// 如果滚动位置到顶部（反转后是底部）的距离很小，则认为已到底部
|
||||
hasReachedBottom.value = scrollTop <= 10;
|
||||
|
||||
// 如果不在底部且有未读消息，显示新消息提示
|
||||
if (!hasReachedBottom.value) {
|
||||
showNewMessageTip.value = true;
|
||||
} else {
|
||||
showNewMessageTip.value = false;
|
||||
// 获得消息分页列表
|
||||
const getMessageList = async () => {
|
||||
const { data } = await KeFuApi.getKefuMessageList(queryParams);
|
||||
if (isEmpty(data)) {
|
||||
// pagingRef.value.completeByNoMore([], true);
|
||||
return;
|
||||
}
|
||||
if (queryParams.no > 1 && refreshMessage.value) {
|
||||
const newMessageList = [];
|
||||
for (const message of data) {
|
||||
if (messageList.value.some((val) => val.id === message.id)) {
|
||||
continue;
|
||||
}
|
||||
newMessageList.push(message);
|
||||
}
|
||||
// 新消息追加到开头
|
||||
messageList.value = [...newMessageList, ...messageList.value];
|
||||
// pagingRef.value.updateCache(); // 更新缓存
|
||||
refreshMessage.value = false; // 更新好后重置状态
|
||||
return;
|
||||
}
|
||||
if (data.slice(-1).length > 0) {
|
||||
// 设置最后一次历史查询的最后一条消息的 createTime
|
||||
queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
|
||||
}
|
||||
messageList.value = data;
|
||||
// pagingRef.value.completeByNoMore(data, false);
|
||||
};
|
||||
|
||||
// 滚动到底部
|
||||
const scrollToBottom = (force = false) => {
|
||||
// 因为列表是倒置的，所以滚动到顶部就是滚动到最新消息
|
||||
if (force) {
|
||||
// 在某些情况下，直接设置scrollTop可能不会触发更新
|
||||
// 使用一个计数器强制视图更新
|
||||
forceUpdate.value++;
|
||||
setTimeout(() => {
|
||||
scrollTop.value = 0;
|
||||
}, 50);
|
||||
} else {
|
||||
scrollTop.value = 0;
|
||||
}
|
||||
|
||||
showNewMessageTip.value = false;
|
||||
hasReachedBottom.value = true;
|
||||
};
|
||||
|
||||
// 刷新消息列表 - 优化处理新消息
|
||||
/** 刷新消息列表 */
|
||||
const refreshMessageList = async (message = undefined) => {
|
||||
if (typeof message !== 'undefined') {
|
||||
// 追加新消息
|
||||
messageList.value = [message, ...messageList.value];
|
||||
|
||||
// 如果当前在底部，滚动到新消息
|
||||
if (hasReachedBottom.value) {
|
||||
// 等待DOM更新后滚动
|
||||
nextTick(() => {
|
||||
scrollToBottom(true);
|
||||
});
|
||||
} else {
|
||||
showNewMessageTip.value = true;
|
||||
}
|
||||
// 追加数据
|
||||
messageList.value.map(message);
|
||||
// pagingRef.value.addChatRecordData([message], false);
|
||||
} else {
|
||||
// 全量刷新
|
||||
await getMessageList(true);
|
||||
queryParams.createTime = undefined;
|
||||
refreshMessage.value = true;
|
||||
await getMessageList();
|
||||
}
|
||||
|
||||
// 若已是第一页则不做处理
|
||||
if (queryParams.no > 1) {
|
||||
showNewMessageTip.value = true;
|
||||
} else {
|
||||
onScrollToUpper();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化加载数据
|
||||
getMessageList(true);
|
||||
/** 滚动到最新消息 */
|
||||
const onBackToTopClick = (event) => {
|
||||
event(false); // 禁用默认操作
|
||||
// pagingRef.value.scrollToBottom();
|
||||
};
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
getMessageList,
|
||||
refreshMessageList
|
||||
/** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
|
||||
const onScrollToUpper = () => {
|
||||
// 若已是第一页则不做处理
|
||||
if (queryParams.no === 1) {
|
||||
return;
|
||||
}
|
||||
showNewMessageTip.value = false;
|
||||
};
|
||||
defineExpose({ getMessageList, refreshMessageList });
|
||||
|
||||
/** 监听消息列表滚动 */
|
||||
const onScroll = (e) => {
|
||||
const { scrollTop } = e.detail;
|
||||
console.log('scrollTop', scrollTop);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getMessageList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.chat-scroll-view {
|
||||
height: calc(100vh - 100px); /* 减去底部输入框的高度 */
|
||||
height: calc(100vh - 100px);
|
||||
/* 减去底部输入框的高度 */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #f8f8f8;
|
||||
z-index: 1;
|
||||
/* 确保层级正确 */
|
||||
}
|
||||
|
||||
.message-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
/* 确保容器至少有一屏高度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
/* 默认内容放到底部 */
|
||||
}
|
||||
|
||||
.message-list {
|
||||
transform: scaleY(-1); /* 聊天列表倒置，让最新消息在底部 */
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 20px;
|
||||
/* 底部留出一些空间 */
|
||||
}
|
||||
|
||||
.loading-more {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.new-message-tip {
|
||||
position: fixed;
|
||||
bottom: 140rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
padding: 10rpx 30rpx;
|
||||
border-radius: 30rpx;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
.message-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,11 +42,12 @@
|
|||
sheep.$url.static('/static/img/shop/chat/default.png')
|
||||
"
|
||||
mode="aspectFill"
|
||||
lazy-load
|
||||
></image>
|
||||
<!-- 内容 -->
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.TEXT">
|
||||
<view class="message-box" :class="{ admin: message.senderType === UserTypeEnum.ADMIN }">
|
||||
<mp-html :content="replaceEmoji(getMessageContent(message).text || message.content)" />
|
||||
<mp-html :content="processedContent" :domain="sheep.$url.cdn('')" lazy-load />
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="message.contentType === KeFuMessageContentTypeEnum.IMAGE">
|
||||
|
|
@ -138,7 +139,16 @@
|
|||
return false;
|
||||
});
|
||||
|
||||
// 处理表情
|
||||
// 缓存表情映射
|
||||
const emojiMap = computed(() => {
|
||||
const map = new Map();
|
||||
emojiList.forEach(emoji => {
|
||||
map.set(emoji.name, emoji.file);
|
||||
});
|
||||
return map;
|
||||
});
|
||||
|
||||
// 处理表情 - 进行缓存优化
|
||||
function replaceEmoji(data) {
|
||||
let newData = data;
|
||||
if (typeof newData !== 'object') {
|
||||
|
|
@ -146,27 +156,28 @@
|
|||
let zhEmojiName = newData.match(reg);
|
||||
if (zhEmojiName) {
|
||||
zhEmojiName.forEach((item) => {
|
||||
let emojiFile = selEmojiFile(item);
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
|
||||
'/static/img/chat/emoji/' + emojiFile,
|
||||
)}"/>`,
|
||||
);
|
||||
const emojiFile = emojiMap.value.get(item) || '';
|
||||
if (emojiFile) {
|
||||
newData = newData.replace(
|
||||
item,
|
||||
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
|
||||
'/static/img/chat/emoji/' + emojiFile,
|
||||
)}"/>`,
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return newData;
|
||||
}
|
||||
|
||||
function selEmojiFile(name) {
|
||||
for (let index in emojiList) {
|
||||
if (emojiList[index].name === name) {
|
||||
return emojiList[index].file;
|
||||
}
|
||||
// 预处理内容，避免重复计算
|
||||
const processedContent = computed(() => {
|
||||
if (props.message.contentType === KeFuMessageContentTypeEnum.TEXT) {
|
||||
return replaceEmoji(getMessageContent.value(props.message).text || props.message.content);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return props.message.content;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@
|
|||
v-model="chat.msg"
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</template>
|
||||
</MessageList>
|
||||
|
|
@ -29,6 +32,9 @@
|
|||
v-model="chat.msg"
|
||||
@on-tools="onTools"
|
||||
@send-message="onSendMessage"
|
||||
:auto-focus="false"
|
||||
:show-char-count="true"
|
||||
:max-length="500"
|
||||
></message-input>
|
||||
</tools-popup>
|
||||
<!-- 商品订单选择 -->
|
||||
|
|
@ -181,6 +187,8 @@
|
|||
// 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
|
||||
if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
|
||||
console.log('管理员已读消息');
|
||||
// 更新消息已读状态
|
||||
sheep.$helper.toast('客服已读您的消息');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue