Skip to content

foreign / customer-service

Go to a project
Commit 39bbc202 by Sixong.Zhu
Options

cs

parent 474ad190
Inline Side-by-side
Showing with 472 additions and 470 deletions
components/chat-list.vue
...@@ -53,198 +53,198 @@ ...@@ -53,198 +53,198 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator"; import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import Controller from "./controller/chat-list"; import Controller from "./controller/chat-list";
import { EVENTS } from "@/EventConsts"; import { EVENTS } from "@/EventConsts";
import avatar from "@/customer-service/components/avatar.vue"; import avatar from "@/customer-service/components/avatar.vue";
import { Chat as ChatType } from "@/customer-service/xim/models/chat"; import { Chat as ChatType } from "@/customer-service/xim/models/chat";
import { ServiceType } from "../model"; import { ServiceType } from "../model";
import xim from "@/customer-service/xim"; import xim from "@/customer-service/xim";
@Component({ components: { avatar } }) @Component({ components: { avatar } })
export default class ChatList extends Controller { export default class ChatList extends Controller {
private searchKeyword = ""; private searchKeyword = "";
@Prop({ type: Number, default: -1 }) @Prop({ type: Number, default: -1 })
private selected!: number; private selected!: number;
@Ref("scrollbar") @Ref("scrollbar")
private scrollbar: Vue & { update: () => void }; private readonly scrollbar!: Vue & { update: () => void };
private unReadMsgCount = 0; private unReadMsgCount = 0;
private get chatRooms() { private get chatRooms() {
if (this.chatList) { if (this.chatList) {
const list = this.chatList.list const list = this.chatList.list
.filter((chat) => chat.title.indexOf(this.searchKeyword) > -1) .filter((chat) => chat.title.indexOf(this.searchKeyword) > -1)
.sort((x, y) => y.last_msg_ts - x.last_msg_ts); .sort((x, y) => y.last_msg_ts - x.last_msg_ts);
let unReadMsgCount = 0; let unReadMsgCount = 0;
list.filter((chat) => chat.unread_msg_count > 0).forEach((chat) => { list.filter((chat) => chat.unread_msg_count > 0).forEach((chat) => {
unReadMsgCount += chat.unread_msg_count; unReadMsgCount += chat.unread_msg_count;
}); });
this.unReadMsgCount = unReadMsgCount; this.unReadMsgCount = unReadMsgCount;
this.$emit("list-count-update", this.unReadMsgCount); this.$emit("list-count-update", this.unReadMsgCount);
xim.$emit(EVENTS.NewMsg, this.unReadMsgCount); xim.$emit(EVENTS.NewMsg, this.unReadMsgCount);
return list; return list;
}
return [];
} }
return [];
}
private isSelected(item: ChatType) { private isSelected(item: ChatType) {
if (this.chatId) { if (this.chatId) {
return item.chat_id === this.chatId; return item.chat_id === this.chatId;
}
return this.selected === item.chat_id;
} }
return this.selected === item.chat_id;
}
async created() {
await this.getMyChatList();
this.setSource(ServiceType.Backend);
this.scrollbar.update();
}
mounted() { async created() {
this.saveMyId(); await this.getMyChatList();
} this.setSource(ServiceType.Backend);
this.scrollbar.update();
}
public async search(searchKeyword: string) { mounted() {
this.searchKeyword = searchKeyword.trim(); this.saveMyId();
} }
private async goToChatRoom(data: ChatType) { public async search(searchKeyword: string) {
if (this.chatId === data.chat_id) { this.searchKeyword = searchKeyword.trim();
this.showChat();
return;
} }
await this.saveChatId(data.chat_id).finally(this.raiseChatIdChanged);
this.showChat(); private async goToChatRoom(data: ChatType) {
this.close(); if (this.chatId === data.chat_id) {
this.showChat();
return;
}
await this.saveChatId(data.chat_id).finally(this.raiseChatIdChanged);
if (data.unread_msg_count > 0) { this.showChat();
data.unread_msg_count = 0; this.close();
if (data.unread_msg_count > 0) {
data.unread_msg_count = 0;
}
} }
}
private raiseChatIdChanged() { private raiseChatIdChanged() {
this.$emit("change"); this.$emit("change");
} }
private close() { private close() {
this.$emit("close"); this.$emit("close");
} }
private goToDetail(model_name: string, keyvalue: string) { private goToDetail(model_name: string, keyvalue: string) {
this.$router.push( this.$router.push(
`/${this.$route.params.project}/${this.$route.params.entrance}/detail/${model_name}/key/${keyvalue}` `/${this.$route.params.project}/${this.$route.params.entrance}/detail/${model_name}/key/${keyvalue}`
); );
this.close(); this.close();
}
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.chat-list-con { .chat-list-con {
display: inline-block; display: inline-block;
width: 25%; width: 25%;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
.title { .title {
padding-left: 20px; padding-left: 20px;
line-height: 59px; line-height: 59px;
font-size: 18px; font-size: 18px;
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
} }
}
.chat-list {
text-align: center;
}
.chat-list-scroll {
height: 100%;
.empty {
margin-top: 100%;
}
}
.keyword-input {
width: 90%;
margin: 15px;
/deep/ .el-input__inner {
font-size: 13px;
height: 30px;
line-height: 30px;
border-radius: 15px;
padding-right: 15px;
} }
/deep/ .el-icon-time { .chat-list {
background: transparent; text-align: center;
} }
/deep/ .el-input__icon { .chat-list-scroll {
line-height: 32px; height: 100%;
.empty {
margin-top: 100%;
}
} }
} .keyword-input {
.chat-list { width: 90%;
.chat-item { margin: 15px;
position: relative; /deep/ .el-input__inner {
cursor: pointer; font-size: 13px;
padding: 4px 15px 10px; height: 30px;
border-bottom: 1px solid #eee; line-height: 30px;
&:hover { border-radius: 15px;
background: #e4f0ff; padding-right: 15px;
} }
/deep/ .el-icon-time {
&.selected { background: transparent;
background: #f0f0f0;
} }
.red-dot { /deep/ .el-input__icon {
position: absolute; line-height: 32px;
min-width: 14px;
height: 14px;
line-height: 14px;
padding: 0 2px;
background: #e87005;
border-radius: 7px;
z-index: 1;
right: 10px;
bottom: 10px;
font-size: 12px;
color: #fff;
} }
.chat-info { }
display: inline-block; .chat-list {
vertical-align: middle; .chat-item {
width: calc(100% - 10px); position: relative;
.chat-name { cursor: pointer;
line-height: 35px; padding: 4px 15px 10px;
font-size: 16px; border-bottom: 1px solid #eee;
&:hover {
background: #e4f0ff;
} }
}
.chat-info-left { &.selected {
text-align: start; background: #f0f0f0;
font-size: 14px; }
line-height: 20px; .red-dot {
color: #333333; position: absolute;
margin-bottom: 10px; min-width: 14px;
height: 14px;
.chat-time { line-height: 14px;
text-align: end; padding: 0 2px;
flex: none; background: #e87005;
color: #999999; border-radius: 7px;
margin-left: 10px; z-index: 1;
right: 10px;
bottom: 10px;
font-size: 12px; font-size: 12px;
line-height: 1; color: #fff;
}
.chat-info {
display: inline-block;
vertical-align: middle;
width: calc(100% - 10px);
.chat-name {
line-height: 35px;
font-size: 16px;
}
}
.chat-info-left {
text-align: start;
font-size: 14px;
line-height: 20px;
color: #333333;
margin-bottom: 10px;
.chat-time {
text-align: end;
flex: none;
color: #999999;
margin-left: 10px;
font-size: 12px;
line-height: 1;
}
}
.chat-msg {
color: #888;
text-align: start;
font-size: 12px;
margin-top: -15px;
} }
} }
.chat-msg {
color: #888;
text-align: start;
font-size: 12px;
margin-top: -15px;
}
} }
} .chat-check-detail {
.chat-check-detail { margin-left: 10px;
margin-left: 10px; }
}
</style> </style>
components/controller/chat-list.ts
...@@ -3,6 +3,7 @@ import { parserMessage } from "."; ...@@ -3,6 +3,7 @@ import { parserMessage } from ".";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { chatStore, ChatStore } from "@/customer-service/store/model";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time"; import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
import { Chat as ChatItem } from "@/customer-service/xim/models/chat"; import { Chat as ChatItem } from "@/customer-service/xim/models/chat";
import Xim from "@/customer-service/xim";
@Component({ components: {} }) @Component({ components: {} })
export default class ChatList extends Vue { export default class ChatList extends Vue {
...@@ -48,11 +49,13 @@ export default class ChatList extends Vue { ...@@ -48,11 +49,13 @@ export default class ChatList extends Vue {
@chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA) @chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
protected readonly reset!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA; protected readonly reset!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
private readonly invoker = Xim.getSdk();
protected parseMesage(data: ChatItem) { protected parseMesage(data: ChatItem) {
if (data.last_msg_sender && data.last_msg_sender !== "0") { if (data.last_msg_sender && data.last_msg_sender !== "0") {
if (!this.userNames[data.last_msg_sender]) { if (!this.userNames[data.last_msg_sender]) {
this.updateUserName({ id: data.last_msg_sender, name: "" }); this.updateUserName({ id: data.last_msg_sender, name: "" });
this.sdk this.invoker
.model("user") .model("user")
.detail(data.last_msg_sender) .detail(data.last_msg_sender)
.query() .query()
...@@ -62,7 +65,7 @@ export default class ChatList extends Vue { ...@@ -62,7 +65,7 @@ export default class ChatList extends Vue {
name: userInfo.row.first_name.display as string, name: userInfo.row.first_name.display as string,
}); });
}) })
.catch(() => {}); .catch(() => { });
} }
} }
if (data.last_msg_content === "") { if (data.last_msg_content === "") {
......
components/message-list.vue
...@@ -38,372 +38,374 @@ ...@@ -38,372 +38,374 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
import { Message, MessageType } from "../model"; import { Message, MessageType } from "../model";
import { throttle } from "../utils"; import { throttle } from "../utils";
import { formatTime } from "../utils/time"; import { formatTime } from "../utils/time";
import ImagePreview from "./image-preview.vue"; import ImagePreview from "./image-preview.vue";
import message from "./message.vue"; import message from "./message.vue";
import VideoPreview from "./video-preview.vue"; import VideoPreview from "./video-preview.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model"; import { ChatStore, chatStore } from "@/customer-service/store/model";
import { dbController } from "../database"; import { dbController } from "../database";
@Component({ components: { message, ImagePreview, VideoPreview } }) @Component({ components: { message, ImagePreview, VideoPreview } })
export default class MessageList extends Vue { export default class MessageList extends Vue {
@chatStore.Getter(ChatStore.STATE_CHAT_MSG_HISTORY) @chatStore.Getter(ChatStore.STATE_CHAT_MSG_HISTORY)
private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY; private readonly historyMessage!: ChatStore.STATE_CHAT_MSG_HISTORY;
@chatStore.Getter(ChatStore.STATE_CHAT_SENDING_MESSAGES) @chatStore.Getter(ChatStore.STATE_CHAT_SENDING_MESSAGES)
private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES; private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING; private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING;
@chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID) @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID)
private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID; private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID;
@chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID) @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID)
private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID; private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID;
@chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA) @chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA; private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM) @chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM)
private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM; private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM;
@chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM) @chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM)
private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM; private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM;
@chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_ON_NEW_MSG) @chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_ON_NEW_MSG)
private readonly onNewMessage!: ChatStore.MUTATION_SAVE_FUNC_ON_NEW_MSG; private readonly onNewMessage!: ChatStore.MUTATION_SAVE_FUNC_ON_NEW_MSG;
@chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_ON_NEW_MSG) @chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_ON_NEW_MSG)
private readonly clearNewMessage!: ChatStore.MUTATION_CLEAR_FUNC_ON_NEW_MSG; private readonly clearNewMessage!: ChatStore.MUTATION_CLEAR_FUNC_ON_NEW_MSG;
@chatStore.Mutation(ChatStore.MUTATION_WITHDRAW) @chatStore.Mutation(ChatStore.MUTATION_WITHDRAW)
private readonly executeWithDraw!: ChatStore.MUTATION_WITHDRAW; private readonly executeWithDraw!: ChatStore.MUTATION_WITHDRAW;
@Prop({ default: "circle" }) @Prop({ default: "circle" })
private shape!: string; private shape!: string;
private get messages() {
if (this.historyMessage) {
if (this.sendingMessages) {
return [...this.historyMessage, ...this.sendingMessages].filter(
(i) => i.chat_id === this.chatId && i.id > 0
);
}
return this.historyMessage;
}
private get messages() {
if (this.historyMessage) {
if (this.sendingMessages) { if (this.sendingMessages) {
return [...this.historyMessage, ...this.sendingMessages].filter( return this.sendingMessages.filter(
(i) => i.chat_id === this.chatId (i) => i.chat_id === this.chatId && i.id > 0
); );
} }
return this.historyMessage;
}
if (this.sendingMessages) { return [];
return this.sendingMessages.filter(
(i) => i.chat_id === this.chatId
);
} }
return []; // 添加时间戳的最大间隔消息数
} private readonly timeLimit = 48;
// 添加时间戳的最大间隔消息数 private scroll2EndWhenMessageLoaded = false;
private readonly timeLimit = 48;
private scroll2EndWhenMessageLoaded = false; private preview = false;
private imagePreview = {};
private preview = false; private previewVideo = false;
private imagePreview = {}; private videoPreview = {};
private previewVideo = false; @Ref("message-scrollbar")
private videoPreview = {}; private scollbarElement!: Vue & {
update: () => void;
};
@Ref("message-scrollbar") private get scollWrapper(): HTMLElement | null {
private scollbarElement!: Vue & { return this.scollbarElement?.$el?.firstChild as HTMLElement;
update: () => void; }
};
private get scollWrapper(): HTMLElement | null { @Watch("messages")
return this.scollbarElement?.$el?.firstChild as HTMLElement; private whenHasMessages() {
} this.$nextTick(() => this.scollbarElement.update());
}
@Watch("messages") @Watch("preview")
private whenHasMessages() { private onPreviewChanged() {
this.$nextTick(() => this.scollbarElement.update()); if (!this.preview) {
} this.raiseFileOpen(false);
}
}
@Watch("preview") @Watch("previewVideo")
private onPreviewChanged() { private onVideoPreviewChanged() {
if (!this.preview) { if (!this.previewVideo) {
this.raiseFileOpen(false); this.raiseFileOpen(false);
}
} }
}
@Watch("previewVideo") private raiseFileOpen(value: boolean) {
private onVideoPreviewChanged() { this.$emit("file-open", value);
if (!this.previewVideo) {
this.raiseFileOpen(false);
} }
}
private raiseFileOpen(value: boolean) { private get messageTimestampDictionary() {
this.$emit("file-open", value); const dic = {} as { [prop: number]: boolean };
} let count = 0;
if (this.historyMessage) {
this.historyMessage.forEach((message, index, array) => {
if (
index === 0 ||
this.whetherShowTime(array[index - 1], message) ||
count === this.timeLimit - 1
) {
dic[message.id] = true;
count = 0;
} else {
count++;
}
});
}
private get messageTimestampDictionary() { return dic;
const dic = {} as { [prop: number]: boolean }; }
let count = 0;
private loading = false;
if (this.historyMessage) { private loadingOld = false;
this.historyMessage.forEach((message, index, array) => { private loadingNew = false;
if (
index === 0 || public created() {
this.whetherShowTime(array[index - 1], message) || this.handleScrollWrapper();
count === this.timeLimit - 1 this.onNewMessage((e) => {
) { if (e.type === MessageType.Withdraw) {
dic[message.id] = true; this.executeWithDraw(e.ref_id);
count = 0; dbController
} else { .removeMessage(e.chat_id, e.ref_id)
count++; .finally(() => this.refresh());
} }
}); });
} }
return dic; public mounted() {
} this.scollWrapper &&
this.scollWrapper.addEventListener("scroll", this.handleScroll);
private loading = false; this.saveScrollToBottomFunc(this.scrollToNewMsg);
private loadingOld = false; this.scrollToNewMsg();
private loadingNew = false; setTimeout(() => this.scroll2End(200));
setTimeout(() => this.scroll2End(1000), 200);
public created() { }
this.handleScrollWrapper();
this.onNewMessage((e) => {
if (e.type === MessageType.Withdraw) {
this.executeWithDraw(e.ref_id);
dbController
.removeMessage(e.chat_id, e.ref_id)
.finally(() => this.refresh());
}
});
}
public mounted() {
this.scollWrapper &&
this.scollWrapper.addEventListener("scroll", this.handleScroll);
this.saveScrollToBottomFunc(this.scrollToNewMsg);
this.scrollToNewMsg();
setTimeout(() => this.scroll2End(200));
setTimeout(() => this.scroll2End(1000), 200);
}
public beforeDestroy() { public beforeDestroy() {
this.scollWrapper && this.scollWrapper &&
this.scollWrapper.removeEventListener("scroll", this.handleScroll); this.scollWrapper.removeEventListener("scroll", this.handleScroll);
this.clearScrollToBottomFunc(); this.clearScrollToBottomFunc();
this.clearNewMessage(); this.clearNewMessage();
// this.clearChatId(); // this.clearChatId();
} }
public scroll2End(delay?: number) { public scroll2End(delay?: number) {
this.$nextTick(() => { this.$nextTick(() => {
const wrap = this.scollbarElement?.$el.querySelector( const wrap = this.scollbarElement?.$el.querySelector(
".el-scrollbar__wrap" ".el-scrollbar__wrap"
) as HTMLElement; ) as HTMLElement;
if (wrap) { if (wrap) {
if (delay) { if (delay) {
return setTimeout( return setTimeout(
() => () =>
(wrap.scrollTop = Math.max( (wrap.scrollTop = Math.max(
wrap.scrollHeight + 100, wrap.scrollHeight + 100,
10000 10000
)), )),
delay delay
); );
}
wrap.scrollTop = Math.max(wrap.scrollHeight + 100, 10000);
} }
wrap.scrollTop = Math.max(wrap.scrollHeight + 100, 10000); });
} }
});
}
private startLoading() { private startLoading() {
this.loading = true; this.loading = true;
} }
private endLoading() { private endLoading() {
this.loading = false; this.loading = false;
} }
private startLoadingOld() { private startLoadingOld() {
this.startLoading(); this.startLoading();
this.loadingOld = true; this.loadingOld = true;
} }
private endLoadingOld() { private endLoadingOld() {
this.endLoading(); this.endLoading();
this.loadingOld = false; this.loadingOld = false;
} }
private startLoadingNew() { private startLoadingNew() {
this.startLoading(); this.startLoading();
this.loadingNew = true; this.loadingNew = true;
} }
private endLoadingNew() { private endLoadingNew() {
this.endLoading(); this.endLoading();
this.loadingNew = false; this.loadingNew = false;
} }
private handleScroll!: () => void; private handleScroll!: () => void;
private handleScrollWrapper() { private handleScrollWrapper() {
let oldScrollTop = 0; let oldScrollTop = 0;
this.handleScroll = () => { this.handleScroll = () => {
const wrapper = this.scollWrapper; const wrapper = this.scollWrapper;
const gap = 150; const gap = 150;
if (wrapper == null) return; if (wrapper == null) return;
const view = wrapper.firstChild as HTMLElement; const view = wrapper.firstChild as HTMLElement;
const wrapperH = wrapper.getBoundingClientRect().height; const wrapperH = wrapper.getBoundingClientRect().height;
const viewH = view.getBoundingClientRect().height; const viewH = view.getBoundingClientRect().height;
let scrollUp = false; let scrollUp = false;
let scrollDown = false; let scrollDown = false;
if (oldScrollTop > wrapper.scrollTop) { if (oldScrollTop > wrapper.scrollTop) {
scrollUp = true; scrollUp = true;
scrollDown = false; scrollDown = false;
} else if (oldScrollTop < wrapper.scrollTop) { } else if (oldScrollTop < wrapper.scrollTop) {
scrollUp = false; scrollUp = false;
scrollDown = true; scrollDown = true;
} }
this.forbidScrollTopToZero(wrapper); this.forbidScrollTopToZero(wrapper);
if (wrapper.scrollTop <= gap) { if (wrapper.scrollTop <= gap) {
scrollUp && this.fetchOldMsg(); scrollUp && this.fetchOldMsg();
} }
if (wrapper.scrollTop - 40 - (viewH - wrapperH) >= -gap) { if (wrapper.scrollTop - 40 - (viewH - wrapperH) >= -gap) {
scrollDown && this.fetchNewMsg(); scrollDown && this.fetchNewMsg();
}
oldScrollTop = wrapper.scrollTop;
};
}
/* scrollTop为0时，新加载的消息后，滚动条也会保持在0的位置 */
private forbidScrollTopToZero(ele: HTMLElement) {
if (ele.scrollTop <= 10) {
ele.scrollTop = 10;
} }
oldScrollTop = wrapper.scrollTop; }
};
}
/* scrollTop为0时，新加载的消息后，滚动条也会保持在0的位置 */ private scrollToNewMsg() {
private forbidScrollTopToZero(ele: HTMLElement) { this.$nextTick(() => {
if (ele.scrollTop <= 10) { if (this.loading) return;
ele.scrollTop = 10; this.scroll2End();
});
} }
}
private scrollToNewMsg() { @throttle()
this.$nextTick(() => { private async fetchOldMsg() {
if (this.loading) return; if (this.loading) return;
this.scroll2End(); const msg = this.historyMessage;
}); if (msg == null) return;
} if (msg.length === 0) return;
this.startLoadingOld();
const msgId = msg[0].id;
const data = await this.getLastPageMsg(msgId);
if (data.length === 0) {
// eslint-disable-next-line no-console
console.log("没有更多老消息了");
}
this.$emit("last-page", msgId);
this.endLoadingOld();
}
@throttle() @throttle()
private async fetchOldMsg() { private async fetchNewMsg() {
if (this.loading) return; if (this.loading) return;
const msg = this.historyMessage; const msg = this.historyMessage;
if (msg == null) return; if (msg == null) return;
if (msg.length === 0) return; if (msg.length === 0) return;
this.startLoadingOld(); this.startLoadingNew();
const msgId = msg[0].id; const msgId = msg[msg.length - 1].id;
const data = await this.getLastPageMsg(msgId); const data = await this.getNextPageMsg(msgId);
if (data.length === 0) { if (data.length === 0) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log("没有更多老消息了"); console.log("没有更多新消息了");
}
this.$emit("next-page", msgId);
this.endLoadingNew();
} }
this.$emit("last-page", msgId);
this.endLoadingOld();
}
@throttle() private format2Time(time: number) {
private async fetchNewMsg() { return formatTime(time);
if (this.loading) return;
const msg = this.historyMessage;
if (msg == null) return;
if (msg.length === 0) return;
this.startLoadingNew();
const msgId = msg[msg.length - 1].id;
const data = await this.getNextPageMsg(msgId);
if (data.length === 0) {
// eslint-disable-next-line no-console
console.log("没有更多新消息了");
} }
this.$emit("next-page", msgId);
this.endLoadingNew();
}
private format2Time(time: number) { private whetherShowTime(previous: Message, current: Message) {
return formatTime(time); return current.ts - previous.ts > 180;
} }
private whetherShowTime(previous: Message, current: Message) { private open(file: {
return current.ts - previous.ts > 180; type: string;
} msg: { url: string; name: string; size: number };
}) {
if (file.type === "image") {
this.imagePreview = file.msg;
this.preview = true;
return this.raiseFileOpen(true);
}
private open(file: { if (file.type === "video") {
type: string; this.videoPreview = file.msg;
msg: { url: string; name: string; size: number }; this.previewVideo = true;
}) { return this.raiseFileOpen(true);
if (file.type === "image") { }
this.imagePreview = file.msg;
this.preview = true;
return this.raiseFileOpen(true);
} }
if (file.type === "video") { /**
this.videoPreview = file.msg; * 获取当期消息列表头尾消息的id
this.previewVideo = true; */
return this.raiseFileOpen(true); public getStart2EndMessageIds() {
const v: { start: number; end: number } = { start: 0, end: 0 };
if (this.historyMessage && this.historyMessage.length) {
const start = this.historyMessage[0];
v.start = start.id;
const end = this.historyMessage[this.historyMessage.length - 1];
v.end = end.id;
}
return v;
} }
}
/** private refresh() {
* 获取当期消息列表头尾消息的id this.fetchNewMsg();
*/
public getStart2EndMessageIds() {
const v: { start: number; end: number } = { start: 0, end: 0 };
if (this.historyMessage && this.historyMessage.length) {
const start = this.historyMessage[0];
v.start = start.id;
const end = this.historyMessage[this.historyMessage.length - 1];
v.end = end.id;
} }
return v;
}
private refresh() {
this.fetchNewMsg();
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.message-list { .message-list {
padding: 0 20px; padding: 0 20px;
padding-right: 0; padding-right: 0;
}
.loading-mask {
height: 50px;
line-height: 50px;
text-align: center;
}
.message-template {
&:first-child {
.timestamp {
margin-top: 20px;
}
} }
&:last-child { .loading-mask {
padding-bottom: 10px; height: 50px;
line-height: 50px;
text-align: center;
} }
.timestamp { .message-template {
font-size: 12px; &:first-child {
user-select: none; padding-top: 10px;
.timestamp {
margin-top: 20px;
}
}
&:last-child {
padding-bottom: 10px;
}
.timestamp {
font-size: 12px;
user-select: none;
}
} }
}
</style> </style>
service/upload.ts
import Vue from "vue"; import Chat from "@/customer-service/xim";
import { UniplatSdk } from "uniplat-sdk"
const orgId = () => Vue.prototype.global.org?.id ?? "0";
export async function uploadFile(file: File) { export async function uploadFile(file: File) {
let { url } = await (Vue.prototype.sdk as UniplatSdk).uploadFileV2(file) const sdk = Chat.getSdk();
const realUrl = `${Vue.prototype.sdk.global.baseUrl}${url}`; let { url } = await sdk.uploadFileV2(file)
return realUrl; return `${sdk.global.baseUrl}${url}`;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment