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