Skip to content

foreign / customer-service

Go to a project
Commit 2b02de5c by panjiangyi
Options

成员名字

parent 803da04e
Inline Side-by-side
Showing with 496 additions and 478 deletions
components/message.vue
<template> <template>
<div <div
class="message-con d-flex" class="message-con d-flex align-items-center"
:class=" :class="isMyMessage ? 'my-message flex-row-reverse' : ''"
isMyMessage >
? 'my-message align-items-start flex-row-reverse' <div class="msg-content">
: 'align-items-start' <div class="msg-name no-selection">{{ senderName }}</div>
" <!-- Image -->
> <div
<span class="no-selection"> class="msg-detail image-message"
<avatar :size="40" class="msg-avatar" :shape="shape" :src="avatar" /> :class="{ 'image-404': fileFailed2Load }"
</span> v-if="messageType === 'image'"
@dblclick="openFile"
<div class="msg-content"> >
<div class="msg-name no-selection">{{ username }}</div> <img
<!-- Image --> v-if="messageRealUrl"
<div :src="messageRealUrl"
class="msg-detail image-message" :title="messageBody.msg.name"
:class="{ 'image-404': fileFailed2Load }" :alt="messageBody.msg.name"
v-if="messageType === 'image'" />
@dblclick="openFile" <file-icon
> v-else-if="fileFailed2Load"
<img :value="image404"
v-if="messageRealUrl" ></file-icon>
:src="messageRealUrl" </div>
:title="messageBody.msg.name" <!-- File -->
:alt="messageBody.msg.name" <div
/> class="msg-detail file-message d-flex"
<file-icon v-else-if="fileFailed2Load" :value="image404"></file-icon> v-else-if="messageType === 'file'"
</div> @dblclick="openFile"
<!-- File --> >
<div <div class="file-message-info">
class="msg-detail file-message d-flex" <div
v-else-if="messageType === 'file'" class="text-nowrap text-truncate file-message-name"
@dblclick="openFile" :title="messageBody.msg.name"
> >
<div class="file-message-info"> {{ messageBody.msg.name }}
<div </div>
class="text-nowrap text-truncate file-message-name" <div class="text-hint">
:title="messageBody.msg.name" {{ messageBody.msg.size | formatSize }}
> </div>
{{ messageBody.msg.name }} </div>
</div> <file-icon :value="fileIcon"></file-icon>
<div class="text-hint"> </div>
{{ messageBody.msg.size | formatSize }} <!-- Audio -->
</div> <div
</div> class="msg-detail voice-message d-flex align-items-center"
<file-icon :value="fileIcon"></file-icon> :class="{ playing: playing, 'can-play': messageRealUrl }"
</div> v-else-if="messageType === 'voice'"
<!-- Audio --> @click.stop="play"
<div :style="{ width: getVoiceMessageWidth + 'px' }"
class="msg-detail voice-message d-flex align-items-center" >
:class="{ playing: playing, 'can-play': messageRealUrl }" <div class="d-flex align-items-center" v-if="messageRealUrl">
v-else-if="messageType === 'voice'" <voice-icon :loading="playing"></voice-icon>
@click.stop="play" <audio ref="audio" @play="onPlay" @pause="onPause">
:style="{ width: getVoiceMessageWidth + 'px' }" <source type="audio/aac" :src="messageRealUrl" />
> </audio>
<div class="d-flex align-items-center" v-if="messageRealUrl"> <span v-if="duration" class="duration text-nowrap text-hint"
<voice-icon :loading="playing"></voice-icon> >{{ durationInSecond }}s</span
<audio ref="audio" @play="onPlay" @pause="onPause"> >
<source type="audio/aac" :src="messageRealUrl" /> </div>
</audio>
<span v-if="duration" class="duration text-nowrap text-hint" <i
>{{ durationInSecond }}s</span class="el-icon-warning-outline"
> v-else-if="fileFailed2Load"
</div> title="[语音加载失败]"
></i>
<i </div>
class="el-icon-warning-outline" <!-- Video -->
v-else-if="fileFailed2Load" <div
title="[语音加载失败]" class="
></i>
</div>
<!-- Video -->
<div
class="
msg-detail msg-detail
video-message video-message
d-flex d-flex
align-items-center align-items-center
justify-content-center justify-content-center
" "
v-else-if="messageType === 'video'" v-else-if="messageType === 'video'"
> >
<video-player-icon @click.native="openFile"></video-player-icon> <video-player-icon @click.native="openFile"></video-player-icon>
</div> </div>
<!-- Text --> <!-- Text -->
<div <div
class="msg-detail inline-text" class="msg-detail inline-text"
v-else v-else
v-html="format2Link(messageBody.msg.text || emptyText)" v-html="format2Link(messageBody.msg.text || emptyText)"
></div> ></div>
</div> </div>
<a <a
v-if="!isSendingMessage && messageType === 'file'" v-if="!isSendingMessage && messageType === 'file'"
class=" class="
d-flex d-flex
align-items-center align-items-center
justify-content-center justify-content-center
download-icon download-icon
" "
:href="messageRealUrl | downloadUrl(getAttachment)" :href="messageRealUrl | downloadUrl(getAttachment)"
:download="getAttachment" :download="getAttachment"
title="下载文件" title="下载文件"
> >
<img src="~@/customer-service/imgs/download.png" alt="Download" /> <img src="~@/customer-service/imgs/download.png" alt="Download" />
</a> </a>
<i class="el-icon-warning text-danger" v-if="failed" title="发送失败"></i> <i
<i class="el-icon-loading" v-else-if="isSendingMessage"></i> class="el-icon-warning text-danger"
v-if="failed"
<template v-if="showReadSummary"> title="发送失败"
<div v-if="isMyMessage" class="msg-read pos-rel"> ></i>
<span @click="readListVisibility = true" class="pointer"> <i class="el-icon-loading" v-else-if="isSendingMessage"></i>
<template v-if="isAllRead">全部已读</template>
<template v-else-if="data.read_count > 0" <template v-if="showReadSummary">
>{{ data.read_count }}人已读</template <div v-if="isMyMessage" class="msg-read pos-rel">
> <span @click="readListVisibility = true" class="pointer">
<template v-else>未读</template> <template v-if="isAllRead">全部已读</template>
</span> <template v-else-if="data.read_count > 0"
<who-read-list >{{ data.read_count }}人已读</template
v-if="readListVisibility" >
@blur="readListVisibility = false" <template v-else>未读</template>
:msgId="data.id" </span>
/> <who-read-list
</div> v-if="readListVisibility"
</template> @blur="readListVisibility = false"
</div> :msgId="data.id"
/>
</div>
</template>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Inject, Mixins, Prop, Ref } from "vue-property-decorator"; import { Component, Inject, Mixins, Prop, Ref } from "vue-property-decorator";
import { Filters } from '../mixin/filter'; import { Filters } from "../mixin/filter";
import * as dto from "../model"; import * as dto from "../model";
import { isAccessibleUrl } from "../service/tools"; import { isAccessibleUrl } from "../service/tools";
import { replaceText2Link } from "../utils"; import { replaceText2Link } from "../utils";
import { getUserInfo } from "../utils/user-info";
import chat from "./../xim"; import chat from "./../xim";
import { import {
FileType, FileType,
getFileType, getFileType,
isAudio, isAudio,
isImage, isImage,
isVideo, isVideo,
MAX_FILE_SIZE, MAX_FILE_SIZE,
MAX_IMAGE_SIZE, MAX_IMAGE_SIZE,
} from "./file-controller"; } from "./file-controller";
import FileIcon from "./file-icon.vue"; import FileIcon from "./file-icon.vue";
import VideoPlayerIcon from "./video-player-icon.vue"; import VideoPlayerIcon from "./video-player-icon.vue";
...@@ -156,460 +156,459 @@ import avatar from "@/customer-service/components/avatar.vue"; ...@@ -156,460 +156,459 @@ import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { chatStore, ChatStore } from "@/customer-service/store/model";
@Component({ @Component({
components: { FileIcon, VoiceIcon, WhoReadList, VideoPlayerIcon, avatar }, components: { FileIcon, VoiceIcon, WhoReadList, VideoPlayerIcon, avatar },
}) })
export default class Message extends Mixins(Filters) { export default class Message extends Mixins(Filters) {
@chatStore.State(ChatStore.STATE_CHAT_MY_ID) @chatStore.State(ChatStore.STATE_CHAT_MY_ID)
private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID; private readonly chatMyId!: ChatStore.STATE_CHAT_MY_ID;
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS) @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS; private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@chatStore.State(ChatStore.STATE_CHAT_SOURCE) @chatStore.State(ChatStore.STATE_CHAT_SOURCE)
private readonly chatSource!: ChatStore.STATE_CHAT_SOURCE; private readonly chatSource!: ChatStore.STATE_CHAT_SOURCE;
@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;
/** /**
* tbd: 文件消息所在的域名的url，逻辑需要补充 * tbd: 文件消息所在的域名的url，逻辑需要补充
*/ */
private messageRealUrl = ""; private messageRealUrl = "";
private fileFailed2Load = false; private fileFailed2Load = false;
private image404 = FileType.Image_404; private image404 = FileType.Image_404;
private loadingRealUrl = false; private loadingRealUrl = false;
private senderName = "";
@Prop({ type: Object, default: () => Object.create(null) }) @Prop({ type: Object, default: () => Object.create(null) })
private data!: dto.Message; private data!: dto.Message;
@Prop() @Prop()
private isSendingMessage!: boolean; private isSendingMessage!: boolean;
@Prop() @Prop()
private failed!: boolean; private failed!: boolean;
@Prop({ default: "circle" }) @Prop({ default: "circle" })
private shape!: string; private shape!: string;
@Ref("audio") @Ref("audio")
private readonly audioRef!: HTMLAudioElement; private readonly audioRef!: HTMLAudioElement;
private playing = false; private playing = false;
@Inject({ default: false }) readonly showReadSummary!: boolean; @Inject({ default: false }) readonly showReadSummary!: boolean;
private emptyText = "　"; private emptyText = "　";
private readListVisibility = false; private readListVisibility = false;
private org = ""; private org = "";
private get isAllRead() { private get isAllRead() {
return this.data.read_count >= this.data.total_read_count; return this.data.read_count >= this.data.total_read_count;
}
private get messageBody(): { eid?: string; oid?: string; msg: any } {
if (this.data) {
try {
return { ...this.data, msg: JSON.parse(this.data.msg) };
} catch {
return {
...this.data,
msg: JSON.parse(this.data.msg.replace(/\n/g, "\\n")),
};
}
} }
return { msg: { text: "" } }; private get messageBody(): { eid?: string; oid?: string; msg: any } {
} if (this.data) {
try {
return { ...this.data, msg: JSON.parse(this.data.msg) };
} catch {
return {
...this.data,
msg: JSON.parse(this.data.msg.replace(/\n/g, "\\n")),
};
}
}
private get getAttachment() { return { msg: { text: "" } };
if (this.messageBody) {
return this.messageBody.msg.name;
} }
return "文件下载";
}
private get isMyMessage() { private get getAttachment() {
if (this.isSendingMessage) { if (this.messageBody) {
return true; return this.messageBody.msg.name;
}
return "文件下载";
} }
const senderEid = this.messageBody.eid; private get isMyMessage() {
if (this.isSendingMessage) {
if (this.messageBody) { return true;
const msg = this.messageBody;
if (this.chatSource) {
const source = msg.msg.source;
if (source) {
return (
source === this.chatSource && senderEid === this.chatMyId
);
} }
if (this.org && this.messageBody.oid) { const senderEid = this.messageBody.eid;
return (
this.messageBody.oid === this.org && if (this.messageBody) {
senderEid === this.chatMyId const msg = this.messageBody;
); if (this.chatSource) {
const source = msg.msg.source;
if (source) {
return (
source === this.chatSource &&
senderEid === this.chatMyId
);
}
if (this.org && this.messageBody.oid) {
return (
this.messageBody.oid === this.org &&
senderEid === this.chatMyId
);
}
return false;
}
return senderEid === this.chatMyId;
} }
return false; return false;
} }
return senderEid === this.chatMyId; public created() {
this.getUserName(this.data.eid);
} }
return false; private async getUserName(eid: string) {
} const data = await getUserInfo(eid);
this.senderName = data.name;
private get username() {
const avatar: any = chat.getUserMapping();
if (this.data == null) return "";
if (avatar == null) return this.data.id;
const value = avatar[this.data.eid];
if (value == null) return "";
if (value.name == null) return "";
return value.name;
}
private get avatar() {
const avatar = chat.getUserMapping();
if (this.isSendingMessage) {
if (avatar && this.chatMyId) {
const user = avatar[this.chatMyId];
if (user && user.avatar) {
return user.avatar;
}
}
} }
if (avatar && this.data) { private get avatar() {
const value = avatar[this.data.eid]; const avatar = chat.getUserMapping();
if (value && value.avatar) {
return value.avatar; if (this.isSendingMessage) {
} if (avatar && this.chatMyId) {
const user = avatar[this.chatMyId];
if (user && user.avatar) {
return user.avatar;
}
}
}
if (avatar && this.data) {
const value = avatar[this.data.eid];
if (value && value.avatar) {
return value.avatar;
}
}
return "";
} }
return ""; private get fileIcon() {
} if (this.data) {
return getFileType(this.messageBody.msg.name);
}
private get fileIcon() { return FileType.Others;
if (this.data) {
return getFileType(this.messageBody.msg.name);
} }
return FileType.Others; private get messageType() {
} const type = this.data?.type;
if (type === "file") {
private get messageType() { const name = this.messageBody?.msg.name;
const type = this.data?.type; if (name) {
if (type === "file") { const size = this.messageBody?.msg.size;
const name = this.messageBody?.msg.name; if (size) {
if (name) { const outImageSize = size > MAX_IMAGE_SIZE;
const size = this.messageBody?.msg.size; if (!outImageSize && isImage(name)) {
if (size) { return "image";
const outImageSize = size > MAX_IMAGE_SIZE; }
if (!outImageSize && isImage(name)) { const outSize = size > MAX_FILE_SIZE;
return "image"; if (!outSize) {
} if (isAudio(name)) {
const outSize = size > MAX_FILE_SIZE; return "voice";
if (!outSize) { }
if (isAudio(name)) { if (isVideo(name)) {
return "voice"; return "video";
} }
if (isVideo(name)) { }
return "video"; }
} }
}
} }
} return this.data?.type;
}
return this.data?.type;
}
// 图片的样式设置,通过js偶尔会有高度计算不准确, 直接通过css的处理目前看可以达到对应效果
// private get imageStyle() {
// if (this.messageBody == null) return {};
// if (this.messageBody.msg.w == null) return {};
// if (this.messageBody.msg.h == null) return {};
// const w = this.messageBody.msg.w;
// const h = this.messageBody.msg.h;
// const maxWidth = 300;
// const maxHeight = maxWidth * (h / w);
// return { width: `${w}px`, height: `${h}px`, maxHeight: `${maxHeight}px` };
// }
private get duration() {
const v = this.messageBody.msg.duration as number;
return v || 0;
}
private get durationInSecond() {
return Math.round(this.duration / 1000);
}
private get getVoiceMessageWidth() {
if (this.fileFailed2Load) {
return 35;
} }
const d = this.duration / 1000;
if (d <= 3) { // 图片的样式设置,通过js偶尔会有高度计算不准确, 直接通过css的处理目前看可以达到对应效果
return 60; // private get imageStyle() {
// if (this.messageBody == null) return {};
// if (this.messageBody.msg.w == null) return {};
// if (this.messageBody.msg.h == null) return {};
// const w = this.messageBody.msg.w;
// const h = this.messageBody.msg.h;
// const maxWidth = 300;
// const maxHeight = maxWidth * (h / w);
// return { width: `${w}px`, height: `${h}px`, maxHeight: `${maxHeight}px` };
// }
private get duration() {
const v = this.messageBody.msg.duration as number;
return v || 0;
} }
if (d >= 60) { private get durationInSecond() {
return 200; return Math.round(this.duration / 1000);
} }
return 60 + d; private get getVoiceMessageWidth() {
} if (this.fileFailed2Load) {
return 35;
}
const d = this.duration / 1000;
if (d <= 3) {
return 60;
}
private isCustomer() { if (d >= 60) {
return !this.showReadSummary; return 200;
} }
private buildMessageUrl() { return 60 + d;
if (this.messageRealUrl || this.loadingRealUrl) {
return;
}
const url = this.messageBody.msg.url as string;
if (url) {
// const service = XimService.getInstance()
if (isAccessibleUrl(url)) {
return (this.messageRealUrl = url);
}
this.loadingRealUrl = true;
// service
// .getFileUrlById(url, this.chatId || 0, this.isCustomer())
// .then((data) => {
// if (data && data.itemList) {
// this.messageRealUrl = data.itemList[0].url
// } else {
// this.fileFailed2Load = true
// }
// })
// .catch(() => (this.fileFailed2Load = true))
// .finally(() => (this.loadingRealUrl = false))
} else {
this.fileFailed2Load = true;
} }
}
private openFile() { private isCustomer() {
if (this.isSendingMessage) { return !this.showReadSummary;
return;
} }
if (this.failed || this.fileFailed2Load) {
return; private buildMessageUrl() {
if (this.messageRealUrl || this.loadingRealUrl) {
return;
}
const url = this.messageBody.msg.url as string;
if (url) {
// const service = XimService.getInstance()
if (isAccessibleUrl(url)) {
return (this.messageRealUrl = url);
}
this.loadingRealUrl = true;
// service
// .getFileUrlById(url, this.chatId || 0, this.isCustomer())
// .then((data) => {
// if (data && data.itemList) {
// this.messageRealUrl = data.itemList[0].url
// } else {
// this.fileFailed2Load = true
// }
// })
// .catch(() => (this.fileFailed2Load = true))
// .finally(() => (this.loadingRealUrl = false))
} else {
this.fileFailed2Load = true;
}
} }
const copy = { ...this.messageBody.msg };
if (this.messageRealUrl) { private openFile() {
copy.url = this.messageRealUrl; if (this.isSendingMessage) {
return;
}
if (this.failed || this.fileFailed2Load) {
return;
}
const copy = { ...this.messageBody.msg };
if (this.messageRealUrl) {
copy.url = this.messageRealUrl;
}
this.$emit("open", { type: this.messageType, msg: copy });
} }
this.$emit("open", { type: this.messageType, msg: copy });
} private play() {
if (this.audioRef?.paused) {
private play() { this.audioRef?.load();
if (this.audioRef?.paused) { this.audioRef?.play();
this.audioRef?.load(); } else {
this.audioRef?.play(); this.audioRef?.pause();
} else { }
this.audioRef?.pause();
} }
}
private onPlay() { private onPlay() {
this.playing = true; this.playing = true;
} }
private onPause() { private onPause() {
this.playing = false; this.playing = false;
} }
private format2Link(text: string) { private format2Link(text: string) {
return replaceText2Link(text); return replaceText2Link(text);
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.message-con { .message-con {
margin: 20px 0; margin: 20px 0;
&.my-message { &.my-message {
.msg-avatar { .msg-avatar {
margin-right: 0; margin-right: 0;
margin-left: 10px; margin-left: 10px;
} }
.msg-name { .msg-detail {
display: none; margin-top: 0;
} background-color: #dbf2ff;
border-radius: 8px 0 8px 8px;
.msg-detail { &.image-message:not(.image-404),
margin-top: 0; &.file-message {
background-color: #dbf2ff; background-color: transparent;
border-radius: 8px 0 8px 8px; border-radius: 4px;
border: 1px solid #c5d4e5;
}
&.image-message:not(.image-404), &.voice-message {
&.file-message { > div {
background-color: transparent; flex-flow: row-reverse;
border-radius: 4px; }
border: 1px solid #c5d4e5;
}
&.voice-message { svg {
> div { transform: rotateY(180deg);
flex-flow: row-reverse; }
} }
svg { &.video-message {
transform: rotateY(180deg); background-color: #000;
border-radius: 0;
}
} }
}
&.video-message { .msg-read {
background-color: #000; display: inline-block;
border-radius: 0; color: #bfe1ff;
} margin-right: 15px;
} user-select: none;
flex: none;
}
.msg-read { .download-icon {
display: inline-block; margin-right: 15px;
color: #bfe1ff; margin-left: 0;
margin-right: 15px; margin-top: 0;
user-select: none; }
flex: none;
} }
.download-icon { > i {
margin-right: 15px; height: 16px;
margin-left: 0; font-size: 16px;
margin-top: 0; margin-right: 10px;
} }
}
> i {
height: 16px;
font-size: 16px;
margin-right: 10px;
}
} }
.msg-avatar { .msg-avatar {
margin-right: 10px; margin-right: 10px;
flex: 40px 0 0; flex: 40px 0 0;
} }
i.msg-avatar { i.msg-avatar {
font-size: 30px; font-size: 30px;
background-color: #c0c4cc; background-color: #c0c4cc;
border-radius: 4px; border-radius: 4px;
width: 40px; width: 40px;
height: 40px; height: 40px;
&:before { &:before {
position: relative; position: relative;
left: 5px; left: 5px;
top: 5px; top: 5px;
color: #fff; color: #fff;
} }
} }
.msg-name { .msg-name {
font-size: 12px; font-size: 14px;
color: #888; color: #888;
text-align: right;
margin-bottom: 3px;
} }
.msg-detail { .msg-detail {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
background: #f5f6fa; background: #f5f6fa;
border-radius: 0px 8px 8px; border-radius: 0px 8px 8px;
padding: 10px; padding: 10px;
word-break: break-word; word-break: break-word;
&.image-message, &.image-message,
&.file-message { &.file-message {
background-color: transparent; background-color: transparent;
border-radius: 4px; border-radius: 4px;
border: 1px solid #c5d4e5; border: 1px solid #c5d4e5;
} }
&.image-message { &.image-message {
line-height: 1; line-height: 1;
&.image-404 { &.image-404 {
background: #f7f8fa; background: #f7f8fa;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.file-icon { .file-icon {
margin: 0; margin: 0;
} }
}
} }
}
&.voice-message { &.voice-message {
height: 40px; height: 40px;
width: 200px; width: 200px;
&.can-play { &.can-play {
cursor: pointer; cursor: pointer;
} }
i { i {
font-size: 16px; font-size: 16px;
}
} }
}
&.video-message { &.video-message {
height: 160px; height: 160px;
width: 200px; width: 200px;
background-color: #000; background-color: #000;
border-radius: 0; border-radius: 0;
svg { svg {
cursor: pointer; cursor: pointer;
}
} }
}
&.inline-text { &.inline-text {
display: inline-block; display: inline-block;
} }
.file-message-name { .file-message-name {
max-width: 130px; max-width: 130px;
} }
img { img {
max-width: 300px; max-width: 300px;
} }
} }
.download-icon { .download-icon {
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
margin-left: 15px; margin-left: 15px;
margin-top: 42px; margin-top: 42px;
i { i {
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
} }
} }
.no-selection { .no-selection {
user-select: none; user-select: none;
} }
.image-message { .image-message {
max-width: 300px; max-width: 300px;
box-sizing: content-box; box-sizing: content-box;
img { img {
width: 100%; width: 100%;
} }
} }
</style> </style>
store/index.ts
...@@ -5,6 +5,7 @@ import { ChatMember } from "../model"; ...@@ -5,6 +5,7 @@ import { ChatMember } from "../model";
import { isAccessibleUrl } from "../service/tools"; import { isAccessibleUrl } from "../service/tools";
import { unique } from "../utils"; import { unique } from "../utils";
import { decode } from "../utils/jwt"; import { decode } from "../utils/jwt";
import { getUserInfo } from "../utils/user-info";
import Chat from "../xim"; import Chat from "../xim";
import chatType from "../xim/chat-type"; import chatType from "../xim/chat-type";
import xim, { ChatNotifyListener } from "../xim/xim"; import xim, { ChatNotifyListener } from "../xim/xim";
...@@ -548,14 +549,10 @@ export default { ...@@ -548,14 +549,10 @@ export default {
chatMembers.map(async (member) => { chatMembers.map(async (member) => {
let result: NonNullable<ChatStore.STATE_CURRENT_CHAT_MEMBERS>[number]; let result: NonNullable<ChatStore.STATE_CURRENT_CHAT_MEMBERS>[number];
try { try {
const info = await sdk() const data = await getUserInfo(member.eid);
.model("user")
.detail(member.eid)
.query();
result = { result = {
...member, ...member,
name: info.row.first_name.value as string, ...data,
phone: info.row.last_name.value as string,
}; };
} catch (error) { } catch (error) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
...@@ -621,7 +618,7 @@ export default { ...@@ -621,7 +618,7 @@ export default {
}); });
detailManager.done(); detailManager.done();
await action.execute(); await action.execute();
await new Promise(resolve => setTimeout(resolve, 500)); await new Promise((resolve) => setTimeout(resolve, 500));
await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS); await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
}, },
}, },
......
utils/user-info.ts 0 → 100644
import Chat from "../xim";
export type UserMapping = {
[eid: string]: {
name: string;
phone: string;
};
};
const userMapping: UserMapping = {};
export const getUserMapping = () => userMapping;
export async function getUserInfo(eid: string) {
if (userMapping[eid] != null) return userMapping[eid];
const info = await Chat.getSdk().model("user").detail(eid).query();
const data = {
name: info.row.first_name.value as string,
phone: info.row.last_name.value as string,
};
userMapping[eid] = data;
return data;
}
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