Commit 73f1b850 by panjiangyi

update ui

parent e567fc6f
......@@ -182,6 +182,7 @@ export default class ChatList extends Vue {
private goToChatRoom(data: Chat) {
if (this.currentChatUniplatId === data.uniplatId) {
this.showChat();
return;
}
const wantedChatRoom = this.chatRooms.find(
......
<template>
<div class="chat-room-con h-100 pos-rel">
<div class="room-title d-flex justify-content-between align-items-center">
<div class="title" @click="showMembers">
<div class="title">
{{ chatTitle }}
<template v-if="chatMembers.length">
<span class="members-count">(成员{{ chatMembers.length }}人)</span>
<i
v-if="membersPanelVisibility"
class="title-right-arrow fast-service-icon-arrow-up"
/>
<i v-else class="title-right-arrow fast-service-icon-arrow-down" />
</template>
<template v-if="!notOnlyCheck">
<div v-if="currentChat.is_finish" class="chat-status chat-done">
......@@ -20,14 +15,6 @@
</div>
<i v-if="close" @click="close" class="title-close el-icon-close" />
</div>
<div v-if="membersPanelVisibility" class="chat-members">
<div class="chat-member" v-for="item in chatMembers" :key="item.id">
<avatar shape="circle" :src="item.avatar" :size="40" />
<div class="member-name">
{{ item.name || item.eid }}
</div>
</div>
</div>
<div class="chat-panel">
<div class="chat-area h-100">
<template v-if="notOnlyCheck">
......@@ -48,28 +35,6 @@
<messages />
</template>
</div>
<!-- <div class="chat-info h-100 pos-rel">
<div class="info-tabs">
<div
@click="activeTab = 'customer'"
:class="{ active: customerInfoTabShow }"
class="info-tab"
>
资料
</div>
<div
@click="activeTab = 'order'"
:class="{ active: orderInfoTabShow }"
class="info-tab"
>
订单
</div>
</div> -->
<!-- <cusomter-info v-if="customerInfoTabShow" /> -->
<!-- <div v-else class="order-info-con">
<order-info />
</div> -->
<!-- </div> -->
</div>
</div>
</template>
......@@ -82,11 +47,8 @@ import {
Watch,
} from "vue-property-decorator";
import avatar from "@/customer-service/components/avatar.vue";
import MessageInput from "@/customer-service/message-input.vue";
import messages from "@/customer-service/message-list.vue";
// import CusomterInfo from "./customer-info.vue"
// import OrderInfo from "./order-info.vue"
import { ChatStore, chatStore } from "@/customer-service/store/model";
type RoomInfoTab = "customer" | "order";
......@@ -95,9 +57,6 @@ type RoomInfoTab = "customer" | "order";
components: {
MessageInput,
messages,
avatar
// CusomterInfo,
// OrderInfo,
},
})
export default class ChatRoom extends Vue {
......@@ -129,12 +88,10 @@ export default class ChatRoom extends Vue {
@Watch("currentChatUniplatId")
private whenCurrentChatIdChanged(newValue: string, oldValue: string) {
if (Number(oldValue) === Number(newValue)) return;
this.hideMembers();
this.clearChatMembers();
}
private activeTab: RoomInfoTab = "customer";
private membersPanelVisibility = false;
private get getCurrentInputingPeople() {
return this.currentInputPeople
......@@ -163,14 +120,6 @@ export default class ChatRoom extends Vue {
return this.activeTab === "order";
}
private showMembers() {
this.membersPanelVisibility = !this.membersPanelVisibility;
}
private hideMembers() {
this.membersPanelVisibility = false;
}
private onError(msg: string) {
// eslint-disable-next-line no-console
console.error(msg);
......@@ -217,27 +166,7 @@ export default class ChatRoom extends Vue {
background: #c5d4e5;
}
}
.chat-members {
position: absolute;
// width: calc(100% - 350px);
left:0;
right:0;
padding: 30px;
padding-bottom: 0;
background: #fff;
z-index: 1;
border-bottom: 1px solid #f0f0f0;
.chat-member {
text-align: center;
display: inline-block;
vertical-align: top;
margin-bottom: 30px;
margin-right: 30px;
}
.member-name {
margin-top: 10px;
}
}
.chat-panel {
height: calc(100% - 60px);
.chat-area,
......
......@@ -4,14 +4,23 @@
<chat-room :close="hide" />
</div>
<div class="chat-panel h-100">
<div class="buttons">
<!-- <div class="buttons">
<el-button class="button" @click="terminate" round
>结束会话</el-button
>
<el-button class="button" @click="showAddMember" round
>添加成员</el-button
>
</div>
</div> -->
<el-tabs v-model="currentTab">
<el-tab-pane label="数据" name="one">model的数据,可配置。</el-tab-pane>
<el-tab-pane :label="`成员${chatMembers.length}人`" name="two">
<ChatMembers />
</el-tab-pane>
<el-tab-pane label="工作流" name="three">工作流</el-tab-pane>
<el-tab-pane label="备注" name="four">备注</el-tab-pane>
<el-tab-pane label="回复" name="five">回复</el-tab-pane>
</el-tabs>
</div>
<ChatCreator
v-if="visible"
......@@ -25,13 +34,14 @@
import { Component, Vue } from "vue-property-decorator";
import ChatRoom from "./chat-room.vue";
import ChatMembers from "./components/chat-members.vue";
import MessageList from "./message-list.vue";
import buttonThrottle from "./utils/button-throttle";
import ChatCreator from "@/customer-service/create-chat.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model";
@Component({ components: { MessageList, ChatRoom, ChatCreator } })
@Component({ components: { MessageList, ChatRoom, ChatCreator, ChatMembers } })
export default class Chat extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
......@@ -48,6 +58,8 @@ export default class Chat extends Vue {
@chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
private currentTab = "one"
private get chatMembersId() {
return this.chatMembers.map(k => +k.eid);
}
......
<template>
<div class="chat-members">
<div class="chat-member" v-for="item in chatMembers" :key="item.id">
<avatar shape="circle" :src="item.avatar" :size="40" />
<div class="member-name">
{{ item.name || item.eid }}
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ChatStore, chatStore } from "../store/model";
import avatar from "@/customer-service/components/avatar.vue";
@Component({ components: { avatar } })
export default class ChatMembers extends Vue {
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
}
</script>
<style lang="less" scoped>
.chat-members {
padding: 30px;
padding-bottom: 0;
background: #fff;
white-space: pre-line;
.chat-member {
width:33.33%;
text-align: center;
display: inline-block;
vertical-align: top;
margin-bottom: 30px;
}
.member-name {
margin-top: 10px;
}
}
</style>
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