Skip to content

foreign / customer-service

Go to a project
Commit 585e1c18 by panjiangyi
Options

从im拿会话列表

parent c102ba83
Expand all
Inline Side-by-side
Showing with 145 additions and 158 deletions
chat-room.vue
<template> <template>
<div class="chat-room-con h-100 pos-rel"> <div class="chat-room-con h-100 pos-rel">
<div class="chat-panel"> {{ chatId }}-{{ uniplatId }}
<div class="chat-area h-100"> <div class="chat-panel">
<template v-if="notOnlyCheck"> <div class="chat-area h-100">
<div class="chat-messages pos-rel"> <template v-if="notOnlyCheck">
<div <div class="chat-messages pos-rel">
v-if="getCurrentInputingPeople.length" <div
class="someone-inputing" v-if="getCurrentInputingPeople.length"
> class="someone-inputing"
{{ getCurrentInputingPeople }}正在输入 >
{{ getCurrentInputingPeople }}正在输入
</div>
<messages />
</div>
<div class="chat-input">
<message-input @error="onError" />
</div>
</template>
<template v-else>
<messages />
</template>
</div> </div>
<messages /> </div>
</div>
<div class="chat-input">
<message-input @error="onError" />
</div>
</template>
<template v-else>
<messages />
</template>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { Component, Prop, Provide, Vue, Watch } from "vue-property-decorator";
Component,
Prop,
Provide,
Vue,
Watch,
} from "vue-property-decorator";
import MessageInput from "@/customer-service/message-input.vue"; import MessageInput from "@/customer-service/message-input.vue";
import messages from "@/customer-service/message-list.vue"; import messages from "@/customer-service/message-list.vue";
...@@ -39,152 +34,157 @@ import { ChatStore, chatStore } from "@/customer-service/store/model"; ...@@ -39,152 +34,157 @@ import { ChatStore, chatStore } from "@/customer-service/store/model";
type RoomInfoTab = "customer" | "order"; type RoomInfoTab = "customer" | "order";
@Component({ @Component({
components: { components: {
MessageInput, MessageInput,
messages, messages,
}, },
}) })
export default class ChatRoom extends Vue { export default class ChatRoom extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.Mutation(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_VERSION)
private readonly clearChatMembers!: ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS; private readonly uniplatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_VERSION;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_TITLE) @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatTitle!: ChatStore.STATE_CURRENT_CHAT_TITLE; private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INPUTING) @chatStore.Mutation(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS)
private readonly currentInputPeople!: ChatStore.STATE_CURRENT_CHAT_INPUTING; private readonly clearChatMembers!: ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_TITLE)
private readonly currentChatUniplatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID; private readonly chatTitle!: ChatStore.STATE_CURRENT_CHAT_TITLE;
@chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INPUTING)
private readonly myChatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST; private readonly currentInputPeople!: ChatStore.STATE_CURRENT_CHAT_INPUTING;
private allChatList = { list: [] }; @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID)
private readonly currentChatUniplatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID;
@Prop({ type: Function }) @chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST)
private close?: () => void; private readonly myChatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST;
@Provide() showReadSummary = true; private allChatList = { list: [] };
@Watch("currentChatUniplatId") @Prop({ type: Function })
private whenCurrentChatIdChanged(newValue: string, oldValue: string) { private close?: () => void;
if (Number(oldValue) === Number(newValue)) return;
this.clearChatMembers();
}
private activeTab: RoomInfoTab = "customer"; @Provide() showReadSummary = true;
private get getCurrentInputingPeople() { @Watch("currentChatUniplatId")
return this.currentInputPeople private whenCurrentChatIdChanged(newValue: string, oldValue: string) {
.map(() => "" /* this.userInfo[k].name */) if (Number(oldValue) === Number(newValue)) return;
.join("、"); this.clearChatMembers();
} }
private activeTab: RoomInfoTab = "customer";
private get getCurrentInputingPeople() {
return this.currentInputPeople
.map(() => "" /* this.userInfo[k].name */)
.join("、");
}
private get currentChat() { private get currentChat() {
const chatId = this.currentChatUniplatId; const chatId = this.currentChatUniplatId;
if (this.myChatList == null) return; if (this.myChatList == null) return;
const result = this.myChatList.list.find((k) => k.uniplatId === chatId); const result = this.myChatList.list.find((k) => k.uniplatId === chatId);
// if (result) return result; // if (result) return result;
// result = this.allChatList.list.find((k) => k.uniplatId === chatId); // result = this.allChatList.list.find((k) => k.uniplatId === chatId);
return result ?? {}; return result ?? {};
} }
private get notOnlyCheck(): boolean { private get notOnlyCheck(): boolean {
return true; return true;
} }
private get customerInfoTabShow() { private get customerInfoTabShow() {
return this.activeTab === "customer"; return this.activeTab === "customer";
} }
private get orderInfoTabShow() { private get orderInfoTabShow() {
return this.activeTab === "order"; return this.activeTab === "order";
} }
private onError(msg: string) { private onError(msg: string) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(msg); console.error(msg);
this.$message.error(msg); this.$message.error(msg);
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.chat-status { .chat-status {
display: inline-block; display: inline-block;
width: 46px; width: 46px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
background: #22bd7a; background: #22bd7a;
font-size: 13px; font-size: 13px;
border-radius: 2px; border-radius: 2px;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
margin-left: 10px; margin-left: 10px;
&.chat-done { &.chat-done {
background: #c5d4e5; background: #c5d4e5;
} }
} }
.chat-panel { .chat-panel {
height: 100%; height: 100%;
.chat-area, .chat-area,
.chat-info { .chat-info {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.chat-area { .chat-area {
width: 100%; width: 100%;
} }
.chat-info { .chat-info {
width: 349px; width: 349px;
border-left: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1;
} }
} }
.info-tabs { .info-tabs {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
.info-tab { .info-tab {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 50%; width: 50%;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 600; font-weight: 600;
}
} }
}
} }
.chat-area { .chat-area {
--input-height: 130px; --input-height: 130px;
.chat-messages { .chat-messages {
height: calc(100% - 130px + 1px); height: calc(100% - 130px + 1px);
border-bottom: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
} }
.chat-input { .chat-input {
height: var(--input-height); height: var(--input-height);
} }
} }
.order-info-con { .order-info-con {
height: calc(100% - 40px); height: calc(100% - 40px);
} }
.someone-inputing { .someone-inputing {
position: absolute; position: absolute;
left: 20px; left: 20px;
bottom: 20px; bottom: 20px;
z-index: 1; z-index: 1;
color: #c2c2c2; color: #c2c2c2;
} }
</style> </style>
store/index.ts
...@@ -285,28 +285,15 @@ export default { ...@@ -285,28 +285,15 @@ export default {
commit, commit,
}) /* ...params: Parameters<ChatStore.ACTION_GET_MY_CHAT_LIST> */ { }) /* ...params: Parameters<ChatStore.ACTION_GET_MY_CHAT_LIST> */ {
const data = await xim.fetchChatList(); const data = await xim.fetchChatList();
console.log("debugg", data); const chatList = data.args[0];
const { pageData } = await model().list().query({ commit(ChatStore.MUTATION_SAVE_CHAT_LIST, {
pageIndex: 1, list: chatList.map(chat => {
item_size: 50,
});
const result = pageData.rows
.map((row) => {
return { return {
uniplatId: row.id.value, ...chat,
chat_id: Number(row.ImChatId.value), chat_id: chat.id,
msg: row.LastMsgContent.value,
customer_name: row.id.value,
customer_avatar_url: "",
uniplat_version: Number(row.uniplat_version.value),
msg_type: row.LastMsgType.value,
is_finish: row.Status.value,
}; };
}) }),
.filter((k) => !k.is_finish); total: 9999,
commit(ChatStore.MUTATION_SAVE_CHAT_LIST, {
list: result,
total: pageData.record_count,
}); });
}, },
// async [ChatStore.ACTION_JOIN_CHAT]( // async [ChatStore.ACTION_JOIN_CHAT](
......
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