xie.bx
3 years ago
20 changed files with 397 additions and 46 deletions
@ -0,0 +1,28 @@ |
|||
package com.bx.common.serializer; |
|||
|
|||
import com.fasterxml.jackson.core.JsonGenerator; |
|||
import com.fasterxml.jackson.core.JsonToken; |
|||
import com.fasterxml.jackson.core.type.WritableTypeId; |
|||
import com.fasterxml.jackson.databind.JsonSerializer; |
|||
import com.fasterxml.jackson.databind.SerializerProvider; |
|||
import com.fasterxml.jackson.databind.jsontype.TypeSerializer; |
|||
|
|||
import java.io.IOException; |
|||
import java.util.Date; |
|||
|
|||
public class DateToLongSerializer extends JsonSerializer<Date> { |
|||
|
|||
@Override |
|||
public void serialize(Date date, JsonGenerator jsonGenerator, |
|||
SerializerProvider serializerProvider) throws IOException { |
|||
jsonGenerator.writeNumber(date.getTime()); |
|||
} |
|||
|
|||
@Override |
|||
public void serializeWithType(Date value, JsonGenerator gen, SerializerProvider serializers, TypeSerializer typeSer) throws IOException { |
|||
WritableTypeId typeIdDef = typeSer.writeTypePrefix(gen, |
|||
typeSer.typeId(value, JsonToken.VALUE_STRING)); |
|||
serialize(value, gen, serializers); |
|||
typeSer.writeTypeSuffix(gen, typeIdDef); |
|||
} |
|||
} |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<el-drawer title="聊天历史记录" size="700px" :visible.sync="visible" direction="rtl" :before-close="handleClose"> |
|||
<div class="chat-history" v-loading="loading" |
|||
element-loading-text="拼命加载中"> |
|||
<el-scrollbar class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar" > |
|||
<ul> |
|||
<li v-for="(msgInfo,idx) in messages" :key="idx"> |
|||
<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" |
|||
:msgInfo="msgInfo" :menu="false"> |
|||
</message-item> |
|||
</li> |
|||
</ul> |
|||
</el-scrollbar> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
|
|||
<script> |
|||
import MessageItem from './MessageItem.vue'; |
|||
|
|||
export default { |
|||
name: 'chatHistory', |
|||
components: { |
|||
MessageItem |
|||
}, |
|||
props: { |
|||
visible: { |
|||
type: Boolean |
|||
}, |
|||
chat: { |
|||
type: Object |
|||
}, |
|||
friend: { |
|||
type: Object |
|||
}, |
|||
group: { |
|||
type: Object |
|||
}, |
|||
groupMembers: { |
|||
type: Array, |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
page: 1, |
|||
size: 10, |
|||
messages: [], |
|||
loadAll: false, |
|||
loading: false, |
|||
lastScrollTime: new Date() |
|||
} |
|||
}, |
|||
methods: { |
|||
handleClose() { |
|||
this.page = 1; |
|||
this.messages = []; |
|||
this.loadAll = false; |
|||
this.$emit('close'); |
|||
}, |
|||
handleScroll() { |
|||
let high = this.$refs.scrollbar.$refs.wrap.scrollTop; //距离顶部的距离 |
|||
let timeDiff = new Date().getTime() - this.lastScrollTime.getTime(); |
|||
if ( high < 30 && timeDiff>500) { |
|||
this.lastScrollTime = new Date(); |
|||
this.loadMessages(); |
|||
|
|||
} |
|||
}, |
|||
loadMessages() { |
|||
if(this.loadAll){ |
|||
return this.$message.success("已到达顶部"); |
|||
} |
|||
let param = { |
|||
page: this.page++, |
|||
size: this.size |
|||
} |
|||
if (this.chat.type == 'GROUP') { |
|||
param.groupId = this.group.id; |
|||
} else { |
|||
param.friendId = this.friend.id; |
|||
} |
|||
this.loading = true; |
|||
this.$http({ |
|||
url: this.histroyAction, |
|||
method: 'get', |
|||
params: param |
|||
}).then(messages => { |
|||
messages.forEach(m => this.messages.unshift(m)); |
|||
this.loading = false; |
|||
if(messages.length <this.size){ |
|||
this.loadAll = true; |
|||
} |
|||
this.refreshScrollPos(); |
|||
}).catch(()=>{ |
|||
this.loading = false; |
|||
}) |
|||
}, |
|||
showName(msgInfo) { |
|||
if (this.chat.type == 'GROUP') { |
|||
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); |
|||
return member ? member.aliasName : ""; |
|||
} else { |
|||
return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName |
|||
} |
|||
}, |
|||
headImage(msgInfo) { |
|||
if (this.chat.type == 'GROUP') { |
|||
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId); |
|||
return member ? member.headImage : ""; |
|||
} else { |
|||
return msgInfo.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage |
|||
} |
|||
}, |
|||
refreshScrollPos(){ |
|||
let scrollWrap = this.$refs.scrollbar.$refs.wrap; |
|||
let scrollHeight = scrollWrap.scrollHeight; |
|||
let scrollTop = scrollWrap.scrollTop; |
|||
this.$nextTick(() => { |
|||
let offsetTop = scrollWrap.scrollHeight - scrollHeight; |
|||
scrollWrap.scrollTop = scrollTop + offsetTop; |
|||
// 滚动条没出来，继续加载 |
|||
if(scrollWrap.scrollHeight == scrollHeight){ |
|||
this.loadMessages(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
computed: { |
|||
mine() { |
|||
return this.$store.state.userStore.userInfo; |
|||
}, |
|||
histroyAction() { |
|||
return `/message/${this.chat.type.toLowerCase()}/history`; |
|||
} |
|||
}, |
|||
watch: { |
|||
visible: { |
|||
handler(newValue, oldValue) { |
|||
if (newValue) { |
|||
this.loadMessages(); |
|||
this.$nextTick(() => { |
|||
document.getElementById('historyScrollbar').addEventListener("mousewheel", this.handleScroll,true); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.chat-history { |
|||
display: flex; |
|||
height: 100%; |
|||
|
|||
.chat-history-scrollbar { |
|||
flex: 1; |
|||
.el-scrollbar__thumb { |
|||
background-color: #555555; |
|||
} |
|||
ul { |
|||
padding: 20px; |
|||
|
|||
li { |
|||
list-style-type: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue