337 lines
9.8 KiB
Vue
337 lines
9.8 KiB
Vue
|
<!-- 聊天记录模式+虚拟列表演示(vue)，加载更多聊天记录无闪动&支持渲染大量数据 -->
|
|||
|
|
<!-- 注意：虚拟列表缓存高度默认仅在cell初始化时获取一次，若您的聊天列表中带有图片，强烈建议给图片一个固定的高度，如果高度根据内容动态撑高，可能导致虚拟列表抖动 -->
|
|||
|
|
<!-- 如果必须实现高度根据内容动态撑高+虚拟列表功能，可监听图片加载完毕事件，并在其中调用z-paging的didUpdateVirtualListCell刷新缓存高度 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- use-chat-record-mode：开启聊天记录模式 -->
|
|||
|
|
<!-- use-virtual-list：开启虚拟列表模式 -->
|
|||
|
|
<!-- cell-height-mode：设置虚拟列表模式高度不固定 -->
|
|||
|
|
<!-- safe-area-inset-bottom：开启底部安全区域适配 -->
|
|||
|
|
<!-- bottom-bg-color：设置slot="bottom"容器的背景色，这里设置为和chat-input-bar的背景色一致 -->
|
|||
|
|
<z-paging ref="paging" v-model="dataList" :paging-style="{ paddingTop: paddingTop + 'px' }" default-page-size="20" :innerListStyle="innerListStyle" use-chat-record-mode use-virtual-list cell-height-mode="dynamic" :auto-clean-list-when-reload="false" safe-area-inset-bottom bottom-bg-color="#fafafa"
|
|||
|
|
|
|||
|
|
@query="queryList" :back-to-top-style="backToTopStyle" :auto-show-back-to-top="showNewMessageTip" @scrolltoupper="onScrollToUpper" @backToTopClick="onBackToTopClick" @keyboardHeightChange="keyboardHeightChange" @hidedKeyboard="hidedKeyboard">
|
|||
|
|
<!-- 顶部提示文字 -->
|
|||
|
|
<template #top>
|
|||
|
|
<navigation-Bar :isReconnecting="isReconnecting" :user="user" @initNav="initNav" @more="navMore">
|
|||
|
|
<template #card-swiper>
|
|||
|
|
<card-swiper v-if="navSwiper"></card-swiper>
|
|||
|
|
</template>
|
|||
|
|
<template #card-notice>
|
|||
|
|
<card-notice v-if="navNotice"></card-notice>
|
|||
|
|
</template>
|
|||
|
|
</navigation-Bar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- style="transform: scaleY(-1)"必须写，否则会导致列表倒置！！！ -->
|
|||
|
|
<!-- 注意不要直接在chat-item组件标签上设置style，因为在微信小程序中是无效的，请包一层view -->
|
|||
|
|
<template #cell="{item,index}">
|
|||
|
|
<view style="transform: scaleY(-1)">
|
|||
|
|
<view-item @playAudio="playAudio" :playId="playId" :messageList="dataList" :messageIndex="index" :item="item"></view-item>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 底部聊天输入框 -->
|
|||
|
|
<template #bottom>
|
|||
|
|
<slot name="chat-bar" :user="user" :keyboardHeight="keyboardHeight"></slot>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 查看最新消息 -->
|
|||
|
|
<template #backToTop>
|
|||
|
|
<text>有新消息</text>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</z-paging>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|||
|
|
dayjs.extend(relativeTime);
|
|||
|
|
import NavigationBar from '@/pages/im/components/navigationBar.vue';
|
|||
|
|
import cardSwiper from '@/pages/im/components/cardSwiper.vue';
|
|||
|
|
import cardNotice from '@/pages/im/components/cardNotice.vue';
|
|||
|
|
import ViewItem from '@/pages/im/components/viewItem.vue';
|
|||
|
|
import ImMessageApi from '@/sheep/api/im/memberMessage';
|
|||
|
|
import UserApi from '@/sheep/api/member/user';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
NavigationBar,
|
|||
|
|
cardSwiper,
|
|||
|
|
cardNotice,
|
|||
|
|
ViewItem,
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
groupId: 0,
|
|||
|
|
userId: 0,
|
|||
|
|
isReconnecting: false,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataList: [],
|
|||
|
|
keyboardHeight: -1,
|
|||
|
|
paddingTop: 0,
|
|||
|
|
navSwiper: false,
|
|||
|
|
navSwiperH: 80,
|
|||
|
|
navNotice: false,
|
|||
|
|
navNoticeH: 90,
|
|||
|
|
height: 0,
|
|||
|
|
|
|||
|
|
queryParams: {
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
groupId: 0,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showNewMessageTip: false,
|
|||
|
|
backToTopStyle: {
|
|||
|
|
'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',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
innerListStyle: {
|
|||
|
|
borderBottom: '20px solid #fafafa',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
audioList: [],
|
|||
|
|
voiceIndex: -1,
|
|||
|
|
playId: null,
|
|||
|
|
|
|||
|
|
user: {},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getUserInfo();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getUserInfo() {
|
|||
|
|
UserApi.getUserInfoById(this.userId).then(res => {
|
|||
|
|
this.user = res.data;
|
|||
|
|
this.user.time = this.showDayTime(this.user.updateTime);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
showDayTime(datetime) {
|
|||
|
|
if (!datetime) return "";
|
|||
|
|
return dayjs(datetime).fromNow();
|
|||
|
|
},
|
|||
|
|
initNav(e) {
|
|||
|
|
this.height = e.height;
|
|||
|
|
this.paddingTop = this.height;
|
|||
|
|
|
|||
|
|
if(this.navSwiper){
|
|||
|
|
this.paddingTop = this.paddingTop + this.navSwiperH;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(this.navNotice){
|
|||
|
|
this.paddingTop = this.paddingTop + this.navNoticeH;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
navMore() {
|
|||
|
|
this.navNotice = !this.navNotice;
|
|||
|
|
|
|||
|
|
if(this.navNotice){
|
|||
|
|
this.paddingTop = this.paddingTop + this.navNoticeH;
|
|||
|
|
}else{
|
|||
|
|
this.paddingTop = this.paddingTop - this.navNoticeH;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
queryList(pageNo, pageSize) {
|
|||
|
|
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|||
|
|
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|||
|
|
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|||
|
|
this.queryParams.pageNo = pageNo;
|
|||
|
|
this.queryParams.pageSize = pageSize;
|
|||
|
|
this.queryParams.groupId = this.groupId;
|
|||
|
|
|
|||
|
|
/* this.$refs.paging.complete([
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: false,
|
|||
|
|
src: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/laohu.png',
|
|||
|
|
position: 'left',
|
|||
|
|
isRead: true,
|
|||
|
|
src: '',
|
|||
|
|
sec: '30',
|
|||
|
|
msgType: 'voice',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'info',
|
|||
|
|
message: {
|
|||
|
|
title: '温馨提示',
|
|||
|
|
content: '请礼貌用语友好沟通，如遇骚扰等不文明行为，可以将对方屏蔽并投诉。',
|
|||
|
|
msgType: 'card',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: true,
|
|||
|
|
timeDesc: '14:52',
|
|||
|
|
src: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/laohu.png',
|
|||
|
|
position: 'right',
|
|||
|
|
isRead: true,
|
|||
|
|
msgType: 'emoji',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: true,
|
|||
|
|
timeDesc: '14:52',
|
|||
|
|
src: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20240726/98a24075202b429d9c9722df541621c6.jpg',
|
|||
|
|
position: 'right',
|
|||
|
|
isRead: true,
|
|||
|
|
msgType: 'img',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: false,
|
|||
|
|
src: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/laohu.png',
|
|||
|
|
position: 'right',
|
|||
|
|
isRead: true,
|
|||
|
|
src: '',
|
|||
|
|
sec: '130',
|
|||
|
|
msgType: 'voice',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: false,
|
|||
|
|
position: 'right',
|
|||
|
|
content: '地址：广东省广州市番禺区祈福新村129号',
|
|||
|
|
msgType: 'map',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: false,
|
|||
|
|
position: 'right',
|
|||
|
|
content: '吃饭了吗',
|
|||
|
|
msgType: 'text',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'info',
|
|||
|
|
message: {
|
|||
|
|
content: '长按图片、文字或视频，支持撤回消息哦~',
|
|||
|
|
msgType: 'text',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
dd:'2',
|
|||
|
|
msgType: 'message',
|
|||
|
|
message: {
|
|||
|
|
time: true,
|
|||
|
|
timeDesc: '14:52',
|
|||
|
|
src: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/laohu.png',
|
|||
|
|
position: 'left',
|
|||
|
|
isRead: true,
|
|||
|
|
msgType: 'emoji',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
ImMessageApi.getMemberMessagePage(this.queryParams).then(res => {
|
|||
|
|
// 将请求的结果数组传递给z-paging
|
|||
|
|
this.$refs.paging.complete(res.data.list);
|
|||
|
|
}).catch(res => {
|
|||
|
|
// 如果请求失败写this.$refs.paging.complete(false);
|
|||
|
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|||
|
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|||
|
|
this.$refs.paging.complete(false);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** 监听滚动到底部事件（因为 scroll 翻转了顶就是底） */
|
|||
|
|
onScrollToUpper() {
|
|||
|
|
// 若已是第一页则不做处理
|
|||
|
|
if (this.queryParams.pageNo === 1) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.showNewMessageTip = false;
|
|||
|
|
// 到底重置消息列表
|
|||
|
|
this.reload();
|
|||
|
|
},
|
|||
|
|
// 监听键盘高度改变，请不要直接通过uni.onKeyboardHeightChange监听，否则可能导致z-paging内置的键盘高度改变监听失效（如果不需要切换表情面板则不用写）
|
|||
|
|
keyboardHeightChange(res) {
|
|||
|
|
this.keyboardHeight = res.height;
|
|||
|
|
},
|
|||
|
|
// 用户尝试隐藏键盘，此时如果表情面板在展示中，应当通知chatInputBar隐藏表情面板（如果不需要切换表情面板则不用写）
|
|||
|
|
hidedKeyboard() {
|
|||
|
|
this.$emit('hidedKeyboard');
|
|||
|
|
},
|
|||
|
|
reload(message) {
|
|||
|
|
if(message){
|
|||
|
|
if(this.queryParams.pageNo > 1){
|
|||
|
|
this.showNewMessageTip = true;
|
|||
|
|
}
|
|||
|
|
if(message.readStatus){
|
|||
|
|
this.updateReadStatus(message);
|
|||
|
|
}else{
|
|||
|
|
this.$refs.paging.addChatRecordData([message]);
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
this.$refs.paging.reload();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
updateReadStatus(message) {
|
|||
|
|
this.dataList.forEach(item => {
|
|||
|
|
if (item.id == message.id) {
|
|||
|
|
item.readStatus = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/** 滚动到最新消息 */
|
|||
|
|
onBackToTopClick(event) {
|
|||
|
|
event(false); // 禁用默认操作
|
|||
|
|
this.$refs.paging.scrollToBottom();
|
|||
|
|
},
|
|||
|
|
playAudio(e) {
|
|||
|
|
this.playId = e.id;
|
|||
|
|
this.clearAllAudio();
|
|||
|
|
var audio = uni.createInnerAudioContext();
|
|||
|
|
this.audioList.push(audio);
|
|||
|
|
//语音自然播放结束
|
|||
|
|
audio.onEnded((res) => {
|
|||
|
|
this.playId = null;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
audio.src = e.content;
|
|||
|
|
audio.play();
|
|||
|
|
},
|
|||
|
|
clearAllAudio() {
|
|||
|
|
this.audioList.forEach(function(e){
|
|||
|
|
e.destroy();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.content {
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
height: calc(100vh);
|
|||
|
|
}
|
|||
|
|
</style>
|