Skip to content

foreign / customer-service

Go to a project
Commit 1f1dc90c by panjiangyi
Options

Merge branch 'master' of http://gitlab.corp.qinqinxiaobao.com:9880/uniplat/customer-service

parents 15b87e11 1afba5a5
Inline Side-by-side
Showing with 547 additions and 548 deletions
chat-list.vue
...@@ -207,7 +207,7 @@ export default class ChatList extends Vue { ...@@ -207,7 +207,7 @@ export default class ChatList extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.chat-list-con { .chat-list-con {
.title { .title {
padding-left: 20px; padding-left: 20px;
......
chat-room.vue
...@@ -178,7 +178,7 @@ export default class ChatRoom extends Vue { ...@@ -178,7 +178,7 @@ export default class ChatRoom extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.room-title { .room-title {
font-size: 16px; font-size: 16px;
padding: 0 20px; padding: 0 20px;
...@@ -270,7 +270,7 @@ export default class ChatRoom extends Vue { ...@@ -270,7 +270,7 @@ export default class ChatRoom extends Vue {
} }
} }
.chat-area { .chat-area {
$input-height: 130px; --input-height: 130px;
.chat-messages { .chat-messages {
height: calc(100% - 130px + 1px); height: calc(100% - 130px + 1px);
...@@ -278,7 +278,7 @@ export default class ChatRoom extends Vue { ...@@ -278,7 +278,7 @@ export default class ChatRoom extends Vue {
} }
.chat-input { .chat-input {
height: $input-height; height: var(--input-height);
} }
} }
.order-info-con { .order-info-con {
......
chat.vue
...@@ -46,7 +46,7 @@ export default class Chat extends Vue { ...@@ -46,7 +46,7 @@ export default class Chat extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.chat-dialog-con { .chat-dialog-con {
/deep/ .el-dialog__header { /deep/ .el-dialog__header {
display: none; display: none;
......
components/file-icon.vue
<template> <template>
<span class="file-icon" :title="value" v-html="html"></span> <span class="file-icon" :title="value" v-html="html"></span>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Model, Vue } from "vue-property-decorator" import { Component, Model, Vue } from "vue-property-decorator";
;
import { FileType, getSvg } from "./file-controller"; import { FileType, getSvg } from "./file-controller";
@Component({ components: {} }) @Component({ components: {} })
export default class FileIcon extends Vue { export default class FileIcon extends Vue {
@Model("update") @Model("update")
private value!: FileType private value!: FileType;
private get audio() { private get audio() {
return this.value === FileType.Audio; return this.value === FileType.Audio;
} }
private get excel() { private get excel() {
return this.value === FileType.Excel; return this.value === FileType.Excel;
} }
private get image() { private get image() {
return this.value === FileType.Image; return this.value === FileType.Image;
} }
private get others() { private get others() {
return this.value === FileType.Others; return this.value === FileType.Others;
} }
private get pdf() { private get pdf() {
return this.value === FileType.Pdf; return this.value === FileType.Pdf;
} }
private get ppt() { private get ppt() {
return this.value === FileType.Ppt; return this.value === FileType.Ppt;
} }
private get rp() { private get rp() {
return this.value === FileType.Rp; return this.value === FileType.Rp;
} }
private get txt() { private get txt() {
return this.value === FileType.Txt; return this.value === FileType.Txt;
} }
private get video() { private get video() {
return this.value === FileType.Video; return this.value === FileType.Video;
} }
private get word() { private get word() {
return this.value === FileType.Word; return this.value === FileType.Word;
} }
private get xmid() { private get xmid() {
return this.value === FileType.Xmind; return this.value === FileType.Xmind;
} }
private get zip() { private get zip() {
return this.value === FileType.Zip; return this.value === FileType.Zip;
} }
private get html() { private get html() {
return getSvg(this.value); return getSvg(this.value);
} }
} }
</script> </script>
<style lang="scss"> <style lang="less" scoped>
.file-icon { .file-icon {
margin-left: 10px; margin-left: 10px;
svg { svg {
max-width: 36px; max-width: 36px;
max-height: 36px; max-height: 36px;
} }
} }
</style> </style>
components/image-preview.vue
<template> <template>
<el-dialog <el-dialog
:modal="false" :modal="false"
:before-close="close" :before-close="close"
:visible="value" :visible="value"
custom-class="hide-header show-close padding-0 width-auto" custom-class="hide-header show-close padding-0 width-auto"
> >
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="preview-title text-center">图片预览</div> <div class="preview-title text-center">图片预览</div>
<div class="d-flex justify-content-center" style="min-width: 300px"> <div class="d-flex justify-content-center" style="min-width: 300px">
<img v-if="file" :src="file.url" :style="style" /> <img v-if="file" :src="file.url" :style="style" />
</div> </div>
<div class="d-flex justify-content-center actions"> <div class="d-flex justify-content-center actions">
<span <span
class="d-flex align-items-center justify-content-center" class="d-flex align-items-center justify-content-center"
@click="set2Default" @click="set2Default"
>1:1</span >1:1</span
> >
<a <a
class="d-flex align-items-center justify-content-center" class="d-flex align-items-center justify-content-center"
:href="file.url | downloadUrl(getAttachment)" :href="file.url | downloadUrl(getAttachment)"
:download="getAttachment" :download="getAttachment"
> >
<i class="el-icon-download"></i> <i class="el-icon-download"></i>
</a> </a>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -35,73 +35,72 @@ import { Component, Model, Prop, Vue } from "vue-property-decorator"; ...@@ -35,73 +35,72 @@ import { Component, Model, Prop, Vue } from "vue-property-decorator";
@Component({ components: {} }) @Component({ components: {} })
export default class ImagePreview extends Vue { export default class ImagePreview extends Vue {
@Model("update") @Model("update")
private value!: boolean private value!: boolean;
@Prop() @Prop()
private file!: { name: string; url: string } private file!: { name: string; url: string };
private style: { private style: {
"max-height": number | string; "max-height": number | string;
"max-width": number | string; "max-width": number | string;
} = { } = {
"max-height": "300px", "max-height": "300px",
"max-width": "600px", "max-width": "600px",
} };
private close() { private close() {
setTimeout( setTimeout(
() => () => (this.style = { "max-height": "300px", "max-width": "600px" }),
(this.style = { "max-height": "300px", "max-width": "600px" }), 300
300 );
); this.$emit("update", false);
this.$emit("update", false); }
}
private set2Default() { private set2Default() {
this.style = { "max-height": "1600px", "max-width": "1600px" }; this.style = { "max-height": "1600px", "max-width": "1600px" };
} }
private get getAttachment() { private get getAttachment() {
if (this.file) { if (this.file) {
return this.file.name; return this.file.name;
}
return "文件下载";
} }
return "文件下载";
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.preview-title { .preview-title {
font-size: 18px; font-size: 18px;
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
} }
.actions { .actions {
margin: 15px 0; margin: 15px 0;
> span, > span,
a { a {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: #7a7b7d; background-color: #7a7b7d;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
i { i {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
}
& + span {
margin-left: 15px;
}
} }
> a { & + span {
margin-left: 15px; margin-left: 15px;
} }
}
> a {
margin-left: 15px;
}
} }
</style> </style>
components/message.vue
...@@ -430,7 +430,7 @@ export default class Message extends Vue { ...@@ -430,7 +430,7 @@ export default class Message extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.message-con { .message-con {
margin: 20px 0; margin: 20px 0;
......
components/video-preview.vue
<template> <template>
<el-dialog <el-dialog
:modal="false" :modal="false"
:before-close="close" :before-close="close"
:visible="value" :visible="value"
custom-class="hide-header show-close padding-0 width-auto" custom-class="hide-header show-close padding-0 width-auto"
> >
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="preview-title text-center">视频预览</div> <div class="preview-title text-center">视频预览</div>
<div class="d-flex justify-content-center" style="min-width: 300px"> <div class="d-flex justify-content-center" style="min-width: 300px">
<video <video
ref="video" ref="video"
v-if="file" v-if="file"
:src="file.url" :src="file.url"
controls controls
:style="style" :style="style"
></video> ></video>
</div> </div>
<div class="d-flex justify-content-center actions"> <div class="d-flex justify-content-center actions">
<span <span
class="d-flex align-items-center justify-content-center" class="d-flex align-items-center justify-content-center"
@click="set2Default" @click="set2Default"
>1:1</span >1:1</span
> >
<a <a
class="d-flex align-items-center justify-content-center" class="d-flex align-items-center justify-content-center"
:href="file.url | downloadUrl(getAttachment)" :href="file.url | downloadUrl(getAttachment)"
:download="getAttachment" :download="getAttachment"
> >
<i class="el-icon-download"></i> <i class="el-icon-download"></i>
</a> </a>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Model, Prop, Ref, Vue, Watch } from "vue-property-decorator"; import {
Component,
Model,
Prop,
Ref,
Vue,
Watch,
} from "vue-property-decorator";
@Component({ components: {} }) @Component({ components: {} })
export default class VideoPreview extends Vue { export default class VideoPreview extends Vue {
@Model("update") @Model("update")
private value!: boolean private value!: boolean;
@Prop() @Prop()
private file!: { name: string; url: string } private file!: { name: string; url: string };
@Ref("video") @Ref("video")
private video!: HTMLVideoElement private video!: HTMLVideoElement;
private style: { private style: {
"max-height": number | string; "max-height": number | string;
"max-width": number | string; "max-width": number | string;
} = { } = {
"max-height": "800px", "max-height": "800px",
"max-width": "800px", "max-width": "800px",
};
private close() {
setTimeout(
() => (this.style = { "max-height": "300px", "max-width": "600px" }),
300
);
this.$emit("update", false);
}
private set2Default() {
this.style = { "max-height": "1600px", "max-width": "1600px" };
}
private get getAttachment() {
if (this.file) {
return this.file.name;
} }
return "视频下载";
private close() { }
setTimeout(
() => @Watch("value")
(this.style = { "max-height": "300px", "max-width": "600px" }), private onOpen() {
300 if (this.value) {
); this.video?.load();
this.$emit("update", false); setTimeout(() => this.video?.play(), 100);
} } else {
this.video?.pause();
private set2Default() {
this.style = { "max-height": "1600px", "max-width": "1600px" };
}
private get getAttachment() {
if (this.file) {
return this.file.name;
}
return "视频下载";
}
@Watch("value")
private onOpen() {
if (this.value) {
this.video?.load();
setTimeout(() => this.video?.play(), 100);
} else {
this.video?.pause();
}
} }
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.preview-title { .preview-title {
font-size: 18px; font-size: 18px;
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
} }
.actions { .actions {
margin: 15px 0; margin: 15px 0;
> span, > span,
a { a {
width: 30px; width: 30px;
height: 30px; height: 30px;
background-color: #7a7b7d; background-color: #7a7b7d;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
i { i {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
}
& + span {
margin-left: 15px;
}
} }
> a { & + span {
margin-left: 15px; margin-left: 15px;
} }
}
> a {
margin-left: 15px;
}
} }
</style> </style>
components/who-read-list.vue
...@@ -138,7 +138,7 @@ export default class WhoReadList extends Vue { ...@@ -138,7 +138,7 @@ export default class WhoReadList extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.who-read-list { .who-read-list {
::before { ::before {
content: ""; content: "";
......
create-chat.vue
...@@ -88,4 +88,4 @@ export default class ChatCreator extends Vue { ...@@ -88,4 +88,4 @@ export default class ChatCreator extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="less" scoped></style>
hybrid-input/index.vue
...@@ -512,7 +512,7 @@ export default class Input extends Vue { ...@@ -512,7 +512,7 @@ export default class Input extends Vue {
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.input-wrap { .input-wrap {
position: relative; position: relative;
padding-left: 20px; padding-left: 20px;
......
message-list.vue
<template> <template>
<div v-loading="chatIniting" class="message-list h-100"> <div v-loading="chatIniting" class="message-list h-100">
<!-- chatId:{{ chatId }} --> <!-- chatId:{{ chatId }} -->
<el-scrollbar <el-scrollbar
ref="message-scrollbar" ref="message-scrollbar"
class=" class="
message-list-scrollbar message-list-scrollbar
no-bottom-scrollbar no-bottom-scrollbar
adjust-el-scroll-right-bar adjust-el-scroll-right-bar
h-100 h-100
" "
> >
<template v-for="item in messages"> <template v-for="item in messages">
<div :key="item.id" class="message-template"> <div :key="item.id" class="message-template">
<div <div
v-if=" v-if="
item.id > 0 && item.id > 0 && messageTimestampDictionary[item.id] && item.msg
messageTimestampDictionary[item.id] && "
item.msg class="text-center text-hint timestamp"
" >
class="text-center text-hint timestamp" {{ format2Time(item.ts) }}
> </div>
{{ format2Time(item.ts) }} <message
</div> :is-sending-message="item.id < 0"
<message :failed="item.status === -1"
:is-sending-message="item.id < 0" :key="item.id"
:failed="item.status === -1" :data="item"
:key="item.id" :shape="shape"
:data="item" @open="open"
:shape="shape" />
@open="open" </div>
/> </template>
</div> </el-scrollbar>
</template>
</el-scrollbar> <image-preview v-model="preview" :file="imagePreview"></image-preview>
<video-preview v-model="previewVideo" :file="videoPreview"></video-preview>
<image-preview v-model="preview" :file="imagePreview"></image-preview> </div>
<video-preview
v-model="previewVideo"
:file="videoPreview"
></video-preview>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -56,324 +51,324 @@ import { ChatStore, chatStore } from "@/customer-service/store/model"; ...@@ -56,324 +51,324 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
@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)
private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING
@chatStore.Action(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)
private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID
@chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA
@chatStore.Mutation(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)
private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM
@Prop({ default: "circle" })
private shape!: string
private get messages() {
if (this.historyMessage) {
if (this.sendingMessages) {
return [...this.historyMessage, ...this.sendingMessages].filter(
(i) => i.chat_id === this.chatId
);
}
return this.historyMessage;
}
if (this.sendingMessages) {
return this.sendingMessages.filter((i) => i.chat_id === this.chatId);
}
return []; @chatStore.Getter(ChatStore.STATE_CHAT_SENDING_MESSAGES)
} private readonly sendingMessages!: ChatStore.STATE_CHAT_SENDING_MESSAGES;
// 添加时间戳的最大间隔消息数 @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly timeLimit = 48 private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
private scroll2EndWhenMessageLoaded = false @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INITING)
private readonly chatIniting!: ChatStore.STATE_CURRENT_CHAT_INITING;
private preview = false @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID)
private imagePreview = {} private readonly getLastPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID;
private previewVideo = false @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID)
private videoPreview = {} private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID;
@Ref("message-scrollbar") @chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
private scollbarElement!: Vue & { private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
update: () => void;
}
private get scollWrapper(): HTMLElement | null { @chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM)
return this.scollbarElement?.$el?.firstChild as HTMLElement; private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM;
}
@Watch("messages") @chatStore.Mutation(ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM)
private whenHasMessages() { private readonly clearScrollToBottomFunc!: ChatStore.MUTATION_CLEAR_FUNC_SCROLL_TO_BOTTOM;
this.$nextTick(() => this.scollbarElement.update());
}
@Watch("preview")
private onPreviewChanged() {
if (!this.preview) {
this.raiseFileOpen(false);
}
}
@Watch("previewVideo")
private onVideoPreviewChanged() {
if (!this.previewVideo) {
this.raiseFileOpen(false);
}
}
private raiseFileOpen(value: boolean) {
this.$emit("file-open", value);
}
private get messageTimestampDictionary() { @Prop({ default: "circle" })
const dic = {} as { [prop: number]: boolean }; private shape!: string;
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++;
}
});
}
return dic; private get messages() {
if (this.historyMessage) {
if (this.sendingMessages) {
return [...this.historyMessage, ...this.sendingMessages].filter(
(i) => i.chat_id === this.chatId
);
}
return this.historyMessage;
} }
private loading = false if (this.sendingMessages) {
private loadingOld = false return this.sendingMessages.filter((i) => i.chat_id === this.chatId);
private loadingNew = false
public created() {
this.handleScrollWrapper();
} }
public mounted() { return [];
this.scollWrapper && }
this.scollWrapper.addEventListener("scroll", this.handleScroll);
this.saveScrollToBottomFunc(this.scrollToNewMsg);
}
public beforeDestroy() { // 添加时间戳的最大间隔消息数
this.scollWrapper && private readonly timeLimit = 48;
this.scollWrapper.removeEventListener("scroll", this.handleScroll);
this.clearScrollToBottomFunc();
this.clearChatId();
}
public scroll2End(delay?: number) { private scroll2EndWhenMessageLoaded = false;
this.$nextTick(() => {
const wrap = this.scollbarElement?.$el.querySelector(
".el-scrollbar__wrap"
) as HTMLElement;
if (wrap) {
if (delay) {
setTimeout(() => {
wrap.scrollTop = 10000;
}, delay);
return;
}
wrap.scrollTop = 10000;
}
});
}
private startLoading() { private preview = false;
this.loading = true; private imagePreview = {};
}
private endLoading() { private previewVideo = false;
this.loading = false; private videoPreview = {};
}
private startLoadingOld() { @Ref("message-scrollbar")
this.startLoading(); private scollbarElement!: Vue & {
this.loadingOld = true; update: () => void;
} };
private endLoadingOld() { private get scollWrapper(): HTMLElement | null {
this.endLoading(); return this.scollbarElement?.$el?.firstChild as HTMLElement;
this.loadingOld = false; }
}
private startLoadingNew() { @Watch("messages")
this.startLoading(); private whenHasMessages() {
this.loadingNew = true; this.$nextTick(() => this.scollbarElement.update());
} }
private endLoadingNew() { @Watch("preview")
this.endLoading(); private onPreviewChanged() {
this.loadingNew = false; if (!this.preview) {
this.raiseFileOpen(false);
} }
}
private handleScroll!: () => void @Watch("previewVideo")
private handleScrollWrapper() { private onVideoPreviewChanged() {
let oldScrollTop = 0; if (!this.previewVideo) {
this.handleScroll = () => { this.raiseFileOpen(false);
const wrapper = this.scollWrapper;
const gap = 150;
if (wrapper == null) return;
const view = wrapper.firstChild as HTMLElement;
const wrapperH = wrapper.getBoundingClientRect().height;
const viewH = view.getBoundingClientRect().height;
let scrollUp = false;
let scrollDown = false;
if (oldScrollTop > wrapper.scrollTop) {
scrollUp = true;
scrollDown = false;
} else if (oldScrollTop < wrapper.scrollTop) {
scrollUp = false;
scrollDown = true;
}
this.forbidScrollTopToZero(wrapper);
if (wrapper.scrollTop <= gap) {
scrollUp && this.fetchOldMsg();
}
if (wrapper.scrollTop - 40 - (viewH - wrapperH) >= -gap) {
scrollDown && this.fetchNewMsg();
}
oldScrollTop = wrapper.scrollTop;
};
} }
}
/* scrollTop为0时，新加载的消息后，滚动条也会保持在0的位置 */
private forbidScrollTopToZero(ele: HTMLElement) { private raiseFileOpen(value: boolean) {
if (ele.scrollTop <= 10) { this.$emit("file-open", value);
ele.scrollTop = 10; }
private get messageTimestampDictionary() {
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 scrollToNewMsg() { return dic;
this.$nextTick(() => { }
if (this.loading) return;
this.scroll2End(); private loading = false;
}); private loadingOld = false;
} private loadingNew = false;
@throttle() public created() {
private async fetchOldMsg() { this.handleScrollWrapper();
if (this.loading) return; }
const msg = this.historyMessage;
if (msg == null) return; public mounted() {
if (msg.length === 0) return; this.scollWrapper &&
this.startLoadingOld(); this.scollWrapper.addEventListener("scroll", this.handleScroll);
const msgId = msg[0].id; this.saveScrollToBottomFunc(this.scrollToNewMsg);
const data = await this.getLastPageMsg(msgId); }
if (data.length === 0) {
// eslint-disable-next-line no-console public beforeDestroy() {
console.log("没有更多老消息了"); this.scollWrapper &&
this.scollWrapper.removeEventListener("scroll", this.handleScroll);
this.clearScrollToBottomFunc();
this.clearChatId();
}
public scroll2End(delay?: number) {
this.$nextTick(() => {
const wrap = this.scollbarElement?.$el.querySelector(
".el-scrollbar__wrap"
) as HTMLElement;
if (wrap) {
if (delay) {
setTimeout(() => {
wrap.scrollTop = 10000;
}, delay);
return;
} }
this.$emit("last-page", msgId); wrap.scrollTop = 10000;
this.endLoadingOld(); }
});
}
private startLoading() {
this.loading = true;
}
private endLoading() {
this.loading = false;
}
private startLoadingOld() {
this.startLoading();
this.loadingOld = true;
}
private endLoadingOld() {
this.endLoading();
this.loadingOld = false;
}
private startLoadingNew() {
this.startLoading();
this.loadingNew = true;
}
private endLoadingNew() {
this.endLoading();
this.loadingNew = false;
}
private handleScroll!: () => void;
private handleScrollWrapper() {
let oldScrollTop = 0;
this.handleScroll = () => {
const wrapper = this.scollWrapper;
const gap = 150;
if (wrapper == null) return;
const view = wrapper.firstChild as HTMLElement;
const wrapperH = wrapper.getBoundingClientRect().height;
const viewH = view.getBoundingClientRect().height;
let scrollUp = false;
let scrollDown = false;
if (oldScrollTop > wrapper.scrollTop) {
scrollUp = true;
scrollDown = false;
} else if (oldScrollTop < wrapper.scrollTop) {
scrollUp = false;
scrollDown = true;
}
this.forbidScrollTopToZero(wrapper);
if (wrapper.scrollTop <= gap) {
scrollUp && this.fetchOldMsg();
}
if (wrapper.scrollTop - 40 - (viewH - wrapperH) >= -gap) {
scrollDown && this.fetchNewMsg();
}
oldScrollTop = wrapper.scrollTop;
};
}
/* scrollTop为0时，新加载的消息后，滚动条也会保持在0的位置 */
private forbidScrollTopToZero(ele: HTMLElement) {
if (ele.scrollTop <= 10) {
ele.scrollTop = 10;
} }
}
@throttle()
private async fetchNewMsg() { private scrollToNewMsg() {
if (this.loading) return; this.$nextTick(() => {
const msg = this.historyMessage; if (this.loading) return;
if (msg == null) return; this.scroll2End();
if (msg.length === 0) return; });
this.startLoadingNew(); }
const msgId = msg[msg.length - 1].id;
const data = await this.getNextPageMsg(msgId); @throttle()
if (data.length === 0) { private async fetchOldMsg() {
// eslint-disable-next-line no-console if (this.loading) return;
console.log("没有更多新消息了"); const msg = this.historyMessage;
} if (msg == null) return;
this.$emit("next-page", msgId); if (msg.length === 0) return;
this.endLoadingNew(); 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);
private format2Time(time: number) { this.endLoadingOld();
return formatTime(time); }
@throttle()
private async fetchNewMsg() {
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);
private whetherShowTime(previous: Message, current: Message) { this.endLoadingNew();
return current.ts - previous.ts > 180; }
private format2Time(time: number) {
return formatTime(time);
}
private whetherShowTime(previous: Message, current: Message) {
return current.ts - previous.ts > 180;
}
private open(file: {
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;
this.previewVideo = true;
return this.raiseFileOpen(true);
}
} }
}
/**
* 获取当期消息列表头尾消息的id /**
*/ * 获取当期消息列表头尾消息的id
public getStart2EndMessageIds() { */
const v: { start: number; end: number } = { start: 0, end: 0 }; public getStart2EndMessageIds() {
if (this.historyMessage && this.historyMessage.length) { const v: { start: number; end: number } = { start: 0, end: 0 };
const start = this.historyMessage[0]; if (this.historyMessage && this.historyMessage.length) {
v.start = start.id; const start = this.historyMessage[0];
const end = this.historyMessage[this.historyMessage.length - 1]; v.start = start.id;
v.end = end.id; const end = this.historyMessage[this.historyMessage.length - 1];
} v.end = end.id;
return v;
} }
return v;
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
.message-list { .message-list {
padding: 0 20px; padding: 0 20px;
} }
.loading-mask { .loading-mask {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
} }
.message-template { .message-template {
&:first-child { &:first-child {
.timestamp {
margin-top: 20px;
}
}
.timestamp { .timestamp {
font-size: 12px; margin-top: 20px;
user-select: none;
} }
}
.timestamp {
font-size: 12px;
user-select: none;
}
} }
</style> </style>
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