Skip to content

foreign / customer-service

Go to a project
Commit b1023188 by 吴云建
Options

会话调整

parent f86ea82a
Inline Side-by-side
Showing with 133 additions and 57 deletions
chat.vue
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<div v-if="chatId != null" class="h-100 chat-area"> <div v-if="chatId != null" class="h-100 chat-area">
<chat-room /> <chat-room />
</div> </div>
<div class="chat-panel h-100 pos-rel" v-if="!userMode"> <div class="chat-panel pos-rel" v-if="!userMode">
<el-tabs class="chat-panel-tabs h-100" v-model="currentTab"> <el-tabs class="chat-panel-tabs h-100" v-model="currentTab" v-if="currentChat">
<el-tab-pane label="数据" name="one" class="h-100"> <el-tab-pane label="数据" name="one" class="h-100">
<ModelDetail <ModelDetail
:model_name="currentChat.business_data.model_name" :model_name="currentChat.business_data.model_name"
...@@ -114,7 +114,7 @@ export default class Chat extends Vue { ...@@ -114,7 +114,7 @@ export default class Chat extends Vue {
height: calc(100% - 60px); height: calc(100% - 60px);
} }
.chat-con { .chat-con {
height: 70vh; height: 100%;
--chat-panel-width: 350px; --chat-panel-width: 350px;
font-size: 13px; font-size: 13px;
color: black; color: black;
...@@ -142,6 +142,7 @@ export default class Chat extends Vue { ...@@ -142,6 +142,7 @@ export default class Chat extends Vue {
position: relative; position: relative;
width: var(--chat-panel-width); width: var(--chat-panel-width);
border-left: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1;
height: calc(100% - 1px);
} }
.buttons { .buttons {
position: absolute; position: absolute;
...@@ -159,5 +160,8 @@ export default class Chat extends Vue { ...@@ -159,5 +160,8 @@ export default class Chat extends Vue {
/deep/ .el-tabs__content { /deep/ .el-tabs__content {
height: calc(100% - 54px); height: calc(100% - 54px);
} }
/deep/ .el-tabs__nav-wrap {
padding-left: 15px;
}
} }
</style> </style>
components/chat-container.vue 0 → 100644
<template>
<div class="chat-container">
<div class="search-wrap">
<el-input
class="keyword-input"
placeholder="昵称、手机、Email、备注"
prefix-icon="el-icon-search"
v-model="searchKeyword"
v-on:keyup.enter.native="search"
clearable
@clear="search"
></el-input>
<i class="close-btn el-icon-close" @click="$emit('close')"></i>
</div>
<chat-list :searchKeyword="searchKeyword" ref="chatListComp" />
<div class="chat-content-wrap">
<chat v-if="chatVisible" />
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import ChatList from "@/customer-service/components/chat-list.vue";
import chat from "@/customer-service/chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
import buttonThrottle from "../utils/button-throttle";
@Component({
name: "ChatContainer",
components: {
chat,
ChatList
}
})
export default class ChatContainer extends Vue {
@chatStore.State(ChatStore.STATE_CHAT_DIALOG_VISIBLE)
private readonly chatVisible!: ChatStore.STATE_CHAT_DIALOG_VISIBLE;
@chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT
@Ref("chatListComp") chatListComp: ChatList;
private searchKeyword = "";
@buttonThrottle()
private search() {
this.chatListComp.search()
}
private onChatDrawerClose(){
this.hideChat()
}
}
</script>
<style lang="less">
.chat-container {
height: 70vh;
}
.keyword-input {
width: 300px;
margin: 15px 0 14px 20px;
/deep/ .el-input__inner {
font-size: 13px;
height: 30px;
line-height: 28px;
border-radius: 15px;
padding-right: 15px;
}
/deep/ .el-icon-time {
background: transparent;
}
/deep/ .el-input__icon {
line-height: 32px;
}
}
.search-wrap {
height: 59px;
border-bottom: 1px solid #ccc;
}
.close-btn {
float: right;
font-size: 20px;
color: #aaa;
padding: 5px;
cursor: pointer;
margin: 15px 10px 0;
}
.chat-content-wrap {
display: inline-block;
width: 75%;
height: calc(100% - 60px);
box-sizing: border-box;
vertical-align: top;
}
</style>
\ No newline at end of file
components/chat-list.vue
<template> <template>
<div class="chat-list-con h-100"> <div class="chat-list-con">
<div class="chat-list h-100"> <div class="chat-list h-100">
<el-input
class="keyword-input"
placeholder="昵称、手机、Email、备注"
prefix-icon="el-icon-search"
v-model="searchKeyword"
v-on:keyup.enter.native="search"
clearable
@clear="search"
></el-input>
<div class="chat-list-scroll"> <div class="chat-list-scroll">
<el-scrollbar ref="scrollbar" class="h-100 no-bottom-scrollbar"> <el-scrollbar ref="scrollbar" class="h-100 no-bottom-scrollbar">
<div <div
...@@ -23,11 +14,6 @@ ...@@ -23,11 +14,6 @@
class="chat-avatar pos-rel" class="chat-avatar pos-rel"
:class="{ 'red-dot': item.unread_msg_count > 0 }" :class="{ 'red-dot': item.unread_msg_count > 0 }"
> >
<avatar
shape="circle"
:size="36"
:src="item.customer_avatar_url"
/>
</div> </div>
<div class="chat-info"> <div class="chat-info">
<div <div
...@@ -42,28 +28,11 @@ ...@@ -42,28 +28,11 @@
:title="item.customer_name" :title="item.customer_name"
class="chat-name flex-fill text-dot-dot-dot" class="chat-name flex-fill text-dot-dot-dot"
> >
<!-- <span>{{
item.customer_name ||
item.customer_mobile ||
item.customer_eid
}}</span> -->
<span>{{ item.chat_id }}</span> <span>{{ item.chat_id }}</span>
</div> </div>
<div v-if="item.last_msg_ts" class="chat-time"> <div v-if="item.last_msg_ts" class="chat-time">
{{ formatTimestamp(item.last_msg_ts) }} {{ formatTimestamp(item.last_msg_ts) }}
</div> </div>
<el-button
type="text"
class="chat-check-detail"
v-if="item.business_data"
@click.native.stop="
goToDetail(
item.business_data.model_name,
item.business_data.obj_id
)
"
>查看</el-button
>
</div> </div>
<div class="chat-msg text-dot-dot-dot"> <div class="chat-msg text-dot-dot-dot">
{{ parseMesage(item) }} {{ parseMesage(item) }}
...@@ -84,9 +53,6 @@ ...@@ -84,9 +53,6 @@
<script lang="ts"> <script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator"; import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import buttonThrottle from "../utils/button-throttle";
import avatar from "@/customer-service/components/avatar.vue"; import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model"; import { chatStore, ChatStore } from "@/customer-service/store/model";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time"; import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
...@@ -109,6 +75,8 @@ export function parserMessage(type: string, rawMsg: string) { ...@@ -109,6 +75,8 @@ export function parserMessage(type: string, rawMsg: string) {
@Component({ components: { avatar } }) @Component({ components: { avatar } })
export default class ChatList extends Vue { export default class ChatList extends Vue {
@Prop(String) searchKeyword;
@chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST) @chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
private readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST; private readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;
...@@ -139,8 +107,6 @@ export default class ChatList extends Vue { ...@@ -139,8 +107,6 @@ export default class ChatList extends Vue {
@Ref("scrollbar") @Ref("scrollbar")
private scrollbar: Vue & { update: () => void }; private scrollbar: Vue & { update: () => void };
private searchKeyword = "";
private get chatRooms() { private get chatRooms() {
return this.chatList?.list || []; return this.chatList?.list || [];
} }
...@@ -178,13 +144,12 @@ export default class ChatList extends Vue { ...@@ -178,13 +144,12 @@ export default class ChatList extends Vue {
this.saveChatId(chat_id); this.saveChatId(chat_id);
} }
@buttonThrottle() public async search() {
private async search() { let searchKeyword = this.searchKeyword.trim();
this.searchKeyword = this.searchKeyword.trim(); if (!searchKeyword) {
if (!this.searchKeyword) {
await this.getMyChatList(); await this.getMyChatList();
} else { } else {
await this.getMyChatList(this.searchKeyword); await this.getMyChatList(searchKeyword);
} }
} }
...@@ -227,6 +192,11 @@ export default class ChatList extends Vue { ...@@ -227,6 +192,11 @@ export default class ChatList extends Vue {
<style lang="less" scoped> <style lang="less" scoped>
.chat-list-con { .chat-list-con {
display: inline-block;
width: 25%;
box-sizing: border-box;
height: calc(100% - 60px);
border-right: 1px solid #ccc;
.title { .title {
padding-left: 20px; padding-left: 20px;
line-height: 59px; line-height: 59px;
...@@ -238,7 +208,7 @@ export default class ChatList extends Vue { ...@@ -238,7 +208,7 @@ export default class ChatList extends Vue {
text-align: center; text-align: center;
} }
.chat-list-scroll { .chat-list-scroll {
height: calc(100% - 250px); height: 100%;
.empty { .empty {
margin-top: 100%; margin-top: 100%;
...@@ -261,8 +231,8 @@ export default class ChatList extends Vue { ...@@ -261,8 +231,8 @@ export default class ChatList extends Vue {
.chat-list { .chat-list {
.chat-item { .chat-item {
cursor: pointer; cursor: pointer;
padding: 10px 15px; padding: 4px 15px 10px;
border-bottom: 1px solid #eee;
&:hover { &:hover {
background: #e4f0ff; background: #e4f0ff;
} }
...@@ -274,9 +244,9 @@ export default class ChatList extends Vue { ...@@ -274,9 +244,9 @@ export default class ChatList extends Vue {
.chat-avatar { .chat-avatar {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: 36px; width: 0;
height: 36px; height: 0;
margin-right: 15px; margin-right: 5px;
&.red-dot::before { &.red-dot::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -285,14 +255,18 @@ export default class ChatList extends Vue { ...@@ -285,14 +255,18 @@ export default class ChatList extends Vue {
background: #e87005; background: #e87005;
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
right: -4px; right: 0px;
top: -4px; top: -4px;
} }
} }
.chat-info { .chat-info {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: calc(100% - 51px); width: calc(100% - 10px);
.chat-name {
line-height: 35px;
font-size: 16px;
}
} }
.chat-info-left { .chat-info-left {
text-align: start; text-align: start;
...@@ -306,15 +280,15 @@ export default class ChatList extends Vue { ...@@ -306,15 +280,15 @@ export default class ChatList extends Vue {
flex: none; flex: none;
color: #999999; color: #999999;
margin-left: 10px; margin-left: 10px;
font-size: 13px; font-size: 12px;
line-height: 1; line-height: 1;
} }
} }
.chat-msg { .chat-msg {
color: #888; color: #888;
text-align: start; text-align: start;
font-size: 13px; font-size: 12px;
margin-top: -3px; margin-top: -15px;
} }
} }
} }
......
components/chat-title.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<el-button class="button" @click="showAddMember" round <el-button class="button" @click="showAddMember" round
>添加成员</el-button >添加成员</el-button
> >
<i v-if="close" @click="close" class="title-close el-icon-close" /> <!-- <i v-if="close" @click="close" class="title-close el-icon-close" /> -->
</div> </div>
<ChatCreator <ChatCreator
v-if="visible" v-if="visible"
......
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