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