Skip to content

foreign / customer-service

Go to a project
Commit 6e9fbd6b by Sixong.Zhu
Options

调整消息机制，调整图片显示机制

parent 6711c5df
Inline Side-by-side
Showing with 93 additions and 87 deletions
components/image-preview.vue
......@@ -4,20 +4,20 @@
:before-close="close"
:visible="value"
:show-close="false"
custom-class="transparent"
custom-class="transparent flex"
width="90%"
top="60px"
>
<div class="d-flex flex-column">
<div class="d-flex justify-content-center align-items-start">
<img v-if="file" :src="file.url" />
<img v-if="file" :src="file.url" :style="imgStyle" />
<i class="el-icon-close" @click="close"></i>
</div>
<div class="d-flex justify-content-center actions">
<a
class="d-flex align-items-center justify-content-center"
:href="file.url"
:download="getAttachment"
target="_blank"
>
<i class="el-icon-download"></i>
</a>
......@@ -37,6 +37,13 @@
@Prop()
private file!: { name: string; url: string };
private get imgStyle() {
return {
"max-width": `${document.body.scrollWidth * 0.8}px`,
"max-height": `${document.body.scrollHeight * 0.8}px`,
};
}
private close() {
this.$emit("update", false);
}
......@@ -70,25 +77,19 @@
}
}
.actions {
margin: 15px 0;
a {
padding: 10px;
background-color: #7a7b7d;
border-radius: 50%;
position: absolute;
left: 50%;
bottom: -65px;
margin-left: -50px;
a {
width: 50px;
height: 50px;
background-color: #7a7b7d;
i {
color: #fff;
border-radius: 50%;
font-size: 30px;
cursor: pointer;
i {
color: #fff;
font-size: 30px;
}
& + span {
margin-left: 15px;
}
}
}
</style>
components/message-item/image-message.vue
......@@ -6,8 +6,8 @@
@click="open"
>
<img
v-if="messageRealUrl"
:src="messageRealUrl"
v-if="mini"
:src="mini"
:title="messageBody.msg.name"
:alt="messageBody.msg.name"
@error="onImageError"
......@@ -22,6 +22,7 @@
import BaseMessage from "./index";
import FileIcon from "./file-icon.vue";
import { UserAgentHelper } from "@/customer-service/third-party/user-agent";
import Chat from "@/customer-service/xim/";
@Component({ components: { FileIcon } })
export default class Index extends BaseMessage {
......@@ -31,6 +32,21 @@
window.navigator.userAgent
);
private get mini() {
if (this.messageRealUrl) {
const sdk = Chat.getSdk();
const s = sdk.mediaController.buildThumbnail;
if (this.messageRealUrl.startsWith("http")) {
return (
sdk.global.baseUrl +
s(this.messageRealUrl.replace(sdk.global.baseUrl, ""), 300)
);
}
return s(this.messageRealUrl, 300);
}
return "";
}
private onImageError() {
this.fileFailed2Load = true;
this.messageRealUrl = "";
......
store/index.ts
......@@ -45,7 +45,7 @@ function combineMessages(
items.push(item);
}
}
return items.sort((x, y) => (x.id - y.id ? 1 : -1));
return items.sort((x, y) => x.id - y.id);
}
let removeRegisterChatEvents: (() => void)[] = [];
......@@ -56,8 +56,8 @@ async function preCacheImgs(msgs?: any[]) {
}
await Promise.all(
msgs
.filter(i => i.id > 0)
.map(k => {
.filter((i) => i.id > 0)
.map((k) => {
return new Promise((resolve: (p: void) => void) => {
if (k.type === "image") {
const msg = JSON.parse(k.msg);
......@@ -110,7 +110,7 @@ const allowedChatTypes = [chatType, "notify"];
export const filterActiveChats = (items: RawChatItem[]) => {
return items
.filter(
i =>
(i) =>
!i.is_finish &&
!i.is_exited &&
!i.is_remove &&
......@@ -228,15 +228,15 @@ export default {
// 移除撤回的消息
const newItems = data || [];
const hasWithdraw = newItems.find(
i => i.type === MessageType.Withdraw
(i) => i.type === MessageType.Withdraw
);
const withdraw = hasWithdraw
? newItems
.filter(i => i.type === MessageType.Withdraw)
.map(i => +i.msg)
.filter((i) => i.type === MessageType.Withdraw)
.map((i) => +i.msg)
: [];
const filterout = withdraw.length
? newItems.filter(i => !withdraw.includes(i.id))
? newItems.filter((i) => !withdraw.includes(i.id))
: newItems;
state[ChatStore.STATE_CHAT_MSG_HISTORY] = Object.freeze(
combineMessages(old, filterout, chatid)
......@@ -245,11 +245,10 @@ export default {
},
[ChatStore.MUTATION_SAVE_MYSELF_ID](state) {
if (!state[ChatStore.STATE_CHAT_MY_ID]) {
Chat.getToken().then(token => {
Chat.getToken().then((token) => {
if (token) {
const eid = decodeJwt<{ user_id: string; sub: string }>(
token
);
const eid =
decodeJwt<{ user_id: string; sub: string }>(token);
state[ChatStore.STATE_CHAT_MY_ID] = String(eid.user_id);
state[ChatStore.STATE_CHAT_MY_UID] = eid.sub;
}
......@@ -354,7 +353,7 @@ export default {
ChatStore.STATE_CHAT_SENDING_MESSAGES
] as ChatStore.STATE_CHAT_SENDING_MESSAGE[];
if (current) {
const target = current.find(i => i.id === payload);
const target = current.find((i) => i.id === payload);
if (target) {
const index = current.indexOf(target);
current.splice(index, 1);
......@@ -369,7 +368,7 @@ export default {
ChatStore.STATE_CHAT_SENDING_MESSAGES
] as ChatStore.STATE_CHAT_SENDING_MESSAGE[];
if (current) {
const target = current.find(i => i.id === payload);
const target = current.find((i) => i.id === payload);
if (target) {
target.status = -1;
}
......@@ -377,13 +376,11 @@ export default {
state[ChatStore.STATE_CHAT_SENDING_MESSAGES] = [...current];
}
},
[ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING]: (function() {
[ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING]: (function () {
const setTimeoutId: { [key: string]: number } = {};
return (
state: ChatStoreState,
payload: Parameters<
ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING
>[0]
payload: Parameters<ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING>[0]
) => {
const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
if (!chatId) return;
......@@ -402,13 +399,13 @@ export default {
);
};
})(),
[ChatStore.MUTATION_CLEAR_CURRENT_CHAT_INPUTING]: state => {
[ChatStore.MUTATION_CLEAR_CURRENT_CHAT_INPUTING]: (state) => {
state[ChatStore.STATE_CURRENT_CHAT_INPUTING] = [];
},
[ChatStore.MUTATION_INITING_CHAT]: state => {
[ChatStore.MUTATION_INITING_CHAT]: (state) => {
state[ChatStore.STATE_CURRENT_CHAT_INITING] = true;
},
[ChatStore.MUTATION_INITING_CHAT_DONE]: state => {
[ChatStore.MUTATION_INITING_CHAT_DONE]: (state) => {
state[ChatStore.STATE_CURRENT_CHAT_INITING] = false;
},
[ChatStore.MUTATION_CHAT_UPDATE_IS_MEMBER]: (state, v: boolean) => {
......@@ -431,7 +428,7 @@ export default {
const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
if (!chatId) return;
state[ChatStore.STATE_CHAT_MSG_HISTORY] = old.filter(
i => !ids.includes(i.id)
(i) => !ids.includes(i.id)
);
},
},
......@@ -440,7 +437,7 @@ export default {
commit(ChatStore.MUTATION_SAVE_MYSELF_ID);
if (loadingChatList) {
return new Promise<ChatType[]>(resolve =>
return new Promise<ChatType[]>((resolve) =>
cachedLoadingChatListAction.push(resolve)
);
}
......@@ -451,14 +448,14 @@ export default {
new Promise<ChatType[]>((resolve, reject) => {
Chat.onReady(() => {
xim.fetchChatList()
.then(data => {
.then((data) => {
if (!data) {
return resolve([]);
}
const chatList = filterActiveChats(
data.args[0] as RawChatItem[]
);
const items = chatList.map(chat =>
const items = chatList.map((chat) =>
buildChatItem(chat)
);
dbController.saveChatList(items);
......@@ -475,13 +472,13 @@ export default {
});
}).finally(() => (loadingChatList = false));
return await execute().then(d => clearAction(d));
return await execute().then((d) => clearAction(d));
},
[ChatStore.ACTION_REBUILD_UNREAD_MESSAGE_COUNT]({ state }) {
const items = state[ChatStore.STATE_MY_CHAT_ROOM_LIST];
if (items) {
let sum = 0;
items.forEach(i => (sum += i.unread_msg_count));
items.forEach((i) => (sum += i.unread_msg_count));
state[ChatStore.STATE_CURRENT_UNREAD_MESSAGE_COUNT] = sum;
}
},
......@@ -490,7 +487,7 @@ export default {
p: { chat: number; unread: number }
) {
const list = state[ChatStore.STATE_MY_CHAT_ROOM_LIST] as ChatType[];
const t = list.find(i => i.id === p.chat);
const t = list.find((i) => i.id === p.chat);
t && (t.unread_msg_count = p.unread);
return dbController
.updateChat4UnreadCount(p.chat, p.unread)
......@@ -544,9 +541,7 @@ export default {
},
async [ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID](
{ state, commit, getters },
msgId: Parameters<
ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID
>[0]
msgId: Parameters<ChatStore.ACTION_GET_CHAT_MESSAGES_BEFORE_SPECIFIC_ID>[0]
) {
const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
if (!chatId) return;
......@@ -571,9 +566,7 @@ export default {
},
async [ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID](
{ state, commit, getters },
msgId: Parameters<
ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID
>[0]
msgId: Parameters<ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID>[0]
) {
const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
if (!chatId) return;
......@@ -646,9 +639,7 @@ export default {
},
async [ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN](
{ commit, dispatch },
params: Parameters<
ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN
>[0]
params: Parameters<ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN>[0]
) {
const { imChatId, catalog } = await Chat.getSdk()
.model(params.modelName)
......@@ -704,9 +695,9 @@ export default {
const scroll = () =>
state[ChatStore.STATE_FUNC_ON_NEW_MSG](e);
if (e.chat_id === chatId) {
dispatch(
ChatStore.ACTION_GET_FRESH_MESSAGE
).finally(() => scroll());
dispatch(ChatStore.ACTION_GET_FRESH_MESSAGE).finally(
() => scroll()
);
} else {
scroll();
}
......@@ -724,7 +715,7 @@ export default {
xim.on("msg", onNewMsg);
return;
}
const onMsgRead: ChatNotifyListener = async e => {
const onMsgRead: ChatNotifyListener = async (e) => {
if (chatId !== e.chat_id) return;
const msgs = state[ChatStore.STATE_CHAT_MSG_HISTORY];
if (msgs == null) return;
......@@ -756,10 +747,10 @@ export default {
commit(ChatStore.MUTATION_CLEAR_CHAT_MSG_HISTORY);
commit(
ChatStore.MUTATION_PUSH_CHAT_MSG_HISTORY,
msgs.map(msg => {
msgs.map((msg) => {
msg = { ...msg };
const newMsg = freshMsgs.find(
freshMsg => freshMsg.id === msg.id
(freshMsg) => freshMsg.id === msg.id
);
if (newMsg != null) {
msg.read_count = newMsg.read_count;
......@@ -768,7 +759,7 @@ export default {
})
);
};
const onInputing: ChatNotifyListener = e => {
const onInputing: ChatNotifyListener = (e) => {
commit(ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING, e);
};
removeRegisterChatEvents.push(() => {
......@@ -788,7 +779,7 @@ export default {
return;
}
const chatList = state[ChatStore.STATE_MY_CHAT_ROOM_LIST];
let wantedChatRoom = chatList.find(k => k.chat_id === chatId);
let wantedChatRoom = chatList.find((k) => k.chat_id === chatId);
if (!wantedChatRoom) {
const data = await xim.fetchChat(chatId);
......@@ -817,7 +808,7 @@ export default {
wantedChatRoom.obj_id,
wantedChatRoom.detail_name
)
.then(info => {
.then((info) => {
commit(
ChatStore.MUTATION_SAVE_CURRENT_CHAT_VERSION,
info.uniplat_version
......@@ -829,7 +820,7 @@ export default {
})
.catch(console.error);
commit(ChatStore.MUTATION_INITING_CHAT);
removeRegisterChatEvents.forEach(k => k());
removeRegisterChatEvents.forEach((k) => k());
removeRegisterChatEvents = [];
await dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS);
try {
......@@ -869,10 +860,8 @@ export default {
if (!getChatMembersResult) return;
const chatMembers = getChatMembersResult.args[0] as ChatMember[];
const all = await Promise.all(
chatMembers.map(async member => {
let result: NonNullable<
ChatStore.STATE_CURRENT_CHAT_MEMBERS
>[number];
chatMembers.map(async (member) => {
let result: NonNullable<ChatStore.STATE_CURRENT_CHAT_MEMBERS>[number];
try {
const data = await ChatUserInfoService.getUserInfo(
member.eid
......@@ -890,9 +879,9 @@ export default {
})
);
(<any>state)[ChatStore.STATE_ALL_HISTORY_CHAT_MEMBERS] = all;
const newChatMembers = all.filter(it => !it.is_exited);
const newChatMembers = all.filter((it) => !it.is_exited);
const member = newChatMembers.find(
it =>
(it) =>
it.eid ===
String(state[ChatStore.STATE_CHAT_CURRENT_USER_UID])
);
......@@ -906,8 +895,8 @@ export default {
commit(
ChatStore.MUTATION_SAVE_CURRENT_CHAT_MEMBERS,
unique(newChatMembers, function(item, all) {
return all.findIndex(k => k.eid === item.eid);
unique(newChatMembers, function (item, all) {
return all.findIndex((k) => k.eid === item.eid);
})
);
},
......@@ -1033,7 +1022,7 @@ export default {
return await Chat.getSdk()
.model(currentChat.model_name)
.chat(currentChat.obj_id, orgId())
.addMember(uids.map(id => +id))
.addMember(uids.map((id) => +id))
.finally(() => dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS));
},
async [ChatStore.ACTION_CHAT_REMOVE_MEMBER](
......@@ -1053,7 +1042,7 @@ export default {
return await Chat.getSdk()
.model(currentChat.model_name)
.chat(currentChat.obj_id, currentChat.org_id)
.removeMember(uids.map(id => +id))
.removeMember(uids.map((id) => +id))
.finally(() => dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS));
},
async [ChatStore.ACTION_CHAT_ADD_CS](
......@@ -1073,7 +1062,7 @@ export default {
return await Chat.getSdk()
.model(currentChat.model_name)
.chat(currentChat.obj_id, orgId())
.addCs(uids.map(id => Number(id)))
.addCs(uids.map((id) => Number(id)))
.finally(() => dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS));
},
async [ChatStore.ACTION_CHAT_REMOVE_CS](
......@@ -1093,7 +1082,7 @@ export default {
return await Chat.getSdk()
.model(currentChat.model_name)
.chat(currentChat.obj_id, orgId())
.removeCs(uids.map(id => Number(id)))
.removeCs(uids.map((id) => Number(id)))
.finally(() => dispatch(ChatStore.ACTION_GET_CHAT_MEMBERS));
},
[ChatStore.ACTION_SET_HANDLED](
......@@ -1105,7 +1094,7 @@ export default {
) {
const msgs = state[ChatStore.STATE_CHAT_MSG_HISTORY];
if (msgs) {
const t = msgs.find(i => i.id === p.id);
const t = msgs.find((i) => i.id === p.id);
if (t) {
t.handled = p.value;
const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
......@@ -1133,7 +1122,7 @@ export default {
return new Promise<{ id: string; name: string }>(
(resolve, reject) =>
ChatUserInfoService.getUserInfo(id)
.then(d => {
.then((d) => {
Vue.set(
state[ChatStore.STATE_CHAT_USERNAME],
id,
......@@ -1158,7 +1147,7 @@ export default {
if (items) {
if (option.end && option.end > option.start) {
for (let i = option.start; i <= option.end; i++) {
const p = items.find(m => m.id === i);
const p = items.find((m) => m.id === i);
if (p) {
p.read_count = option.all
? p.total_read_count
......@@ -1168,7 +1157,7 @@ export default {
}
}
} else {
const p = items.find(i => i.id === option.start);
const p = items.find((i) => i.id === option.start);
if (p) {
p.read_count = option.all
? p.total_read_count
......@@ -1198,7 +1187,7 @@ export default {
},
[ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS](state) {
return (state[ChatStore.STATE_CURRENT_CHAT_MEMBERS] ?? []).filter(
member => !member.is_exited
(member) => !member.is_exited
);
},
[ChatStore.STATE_CURRENT_CHAT_TITLE](state) {
......@@ -1214,7 +1203,7 @@ export default {
return singleChat;
}
const chatList = state[ChatStore.STATE_MY_CHAT_ROOM_LIST];
return chatList.find(chat => chat.chat_id === chatId);
return chatList.find((chat) => chat.chat_id === chatId);
},
},
} as Module<ChatStoreState, RootStoreState>;
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