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 @@
<div v-if="chatId != null" class="h-100 chat-area">
<chat-room />
</div>
<div class="chat-panel h-100 pos-rel" v-if="!userMode">
<el-tabs class="chat-panel-tabs h-100" v-model="currentTab">
<div class="chat-panel pos-rel" v-if="!userMode">
<el-tabs class="chat-panel-tabs h-100" v-model="currentTab" v-if="currentChat">
<el-tab-pane label="数据" name="one" class="h-100">
<ModelDetail
:model_name="currentChat.business_data.model_name"
......@@ -114,7 +114,7 @@ export default class Chat extends Vue {
height: calc(100% - 60px);
}
.chat-con {
height: 70vh;
height: 100%;
--chat-panel-width: 350px;
font-size: 13px;
color: black;
......@@ -142,6 +142,7 @@ export default class Chat extends Vue {
position: relative;
width: var(--chat-panel-width);
border-left: 1px solid #e1e1e1;
height: calc(100% - 1px);
}
.buttons {
position: absolute;
......@@ -159,5 +160,8 @@ export default class Chat extends Vue {
/deep/ .el-tabs__content {
height: calc(100% - 54px);
}
/deep/ .el-tabs__nav-wrap {
padding-left: 15px;
}
}
</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>
<div class="chat-list-con h-100">
<div class="chat-list-con">
<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">
<el-scrollbar ref="scrollbar" class="h-100 no-bottom-scrollbar">
<div
......@@ -23,11 +14,6 @@
class="chat-avatar pos-rel"
:class="{ 'red-dot': item.unread_msg_count > 0 }"
>
<avatar
shape="circle"
:size="36"
:src="item.customer_avatar_url"
/>
</div>
<div class="chat-info">
<div
......@@ -42,28 +28,11 @@
:title="item.customer_name"
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>
</div>
<div v-if="item.last_msg_ts" class="chat-time">
{{ formatTimestamp(item.last_msg_ts) }}
</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 class="chat-msg text-dot-dot-dot">
{{ parseMesage(item) }}
......@@ -84,9 +53,6 @@
<script lang="ts">
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import buttonThrottle from "../utils/button-throttle";
import avatar from "@/customer-service/components/avatar.vue";
import { chatStore, ChatStore } from "@/customer-service/store/model";
import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
......@@ -109,6 +75,8 @@ export function parserMessage(type: string, rawMsg: string) {
@Component({ components: { avatar } })
export default class ChatList extends Vue {
@Prop(String) searchKeyword;
@chatStore.Action(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 {
@Ref("scrollbar")
private scrollbar: Vue & { update: () => void };
private searchKeyword = "";
private get chatRooms() {
return this.chatList?.list || [];
}
......@@ -178,13 +144,12 @@ export default class ChatList extends Vue {
this.saveChatId(chat_id);
}
@buttonThrottle()
private async search() {
this.searchKeyword = this.searchKeyword.trim();
if (!this.searchKeyword) {
public async search() {
let searchKeyword = this.searchKeyword.trim();
if (!searchKeyword) {
await this.getMyChatList();
} else {
await this.getMyChatList(this.searchKeyword);
await this.getMyChatList(searchKeyword);
}
}
......@@ -227,6 +192,11 @@ export default class ChatList extends Vue {
<style lang="less" scoped>
.chat-list-con {
display: inline-block;
width: 25%;
box-sizing: border-box;
height: calc(100% - 60px);
border-right: 1px solid #ccc;
.title {
padding-left: 20px;
line-height: 59px;
......@@ -238,7 +208,7 @@ export default class ChatList extends Vue {
text-align: center;
}
.chat-list-scroll {
height: calc(100% - 250px);
height: 100%;
.empty {
margin-top: 100%;
......@@ -261,8 +231,8 @@ export default class ChatList extends Vue {
.chat-list {
.chat-item {
cursor: pointer;
padding: 10px 15px;
padding: 4px 15px 10px;
border-bottom: 1px solid #eee;
&:hover {
background: #e4f0ff;
}
......@@ -274,9 +244,9 @@ export default class ChatList extends Vue {
.chat-avatar {
display: inline-block;
vertical-align: middle;
width: 36px;
height: 36px;
margin-right: 15px;
width: 0;
height: 0;
margin-right: 5px;
&.red-dot::before {
content: "";
position: absolute;
......@@ -285,14 +255,18 @@ export default class ChatList extends Vue {
background: #e87005;
border-radius: 50%;
z-index: 1;
right: -4px;
right: 0px;
top: -4px;
}
}
.chat-info {
display: inline-block;
vertical-align: middle;
width: calc(100% - 51px);
width: calc(100% - 10px);
.chat-name {
line-height: 35px;
font-size: 16px;
}
}
.chat-info-left {
text-align: start;
......@@ -306,15 +280,15 @@ export default class ChatList extends Vue {
flex: none;
color: #999999;
margin-left: 10px;
font-size: 13px;
font-size: 12px;
line-height: 1;
}
}
.chat-msg {
color: #888;
text-align: start;
font-size: 13px;
margin-top: -3px;
font-size: 12px;
margin-top: -15px;
}
}
}
......
components/chat-title.vue
......@@ -23,7 +23,7 @@
<el-button class="button" @click="showAddMember" round
>添加成员</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>
<ChatCreator
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