Skip to content

foreign / customer-service

Go to a project
Commit 43bd9273 by 胡锦波
Options

1. feat 样式调整

parent 06599338
Inline Side-by-side
Showing with 175 additions and 174 deletions
components/chat-room.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="chat-area h-100 d-flex flex-column" ref="chatBox"> <div class="chat-area h-100 d-flex flex-column" ref="chatBox">
<div <div
ref="top" ref="top"
class="chat-messages pos-rel flex-fill" class="chat-messages pos-rel flex-fill d-flex"
:class="{ 'is-not-chat-member': !isChatMember }" :class="{ 'is-not-chat-member': !isChatMember }"
> >
<div <div
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
> >
{{ getCurrentInputingPeople }}正在输入 {{ getCurrentInputingPeople }}正在输入
</div> </div>
<messages /> <messages class="flex-fill" />
<slot name="chat-right-panel"></slot>
</div> </div>
<div <div
class="resize" class="resize"
...@@ -34,212 +35,212 @@ ...@@ -34,212 +35,212 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import {
Component, Component,
Prop, Prop,
Provide, Provide,
Ref, Ref,
Vue, Vue,
Watch, Watch,
} from "vue-property-decorator"; } from "vue-property-decorator";
import MessageInput from "@/customer-service/components/message-input.vue"; import MessageInput from "@/customer-service/components/message-input.vue";
import messages from "@/customer-service/components/message-list.vue"; import messages from "@/customer-service/components/message-list.vue";
import { ChatStore, chatStore } from "@/customer-service/store/model"; 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 {
@Ref("chatBox") chatBox!: Element; @Ref("chatBox") chatBox!: Element;
@Ref("top") refTop!: Element; @Ref("top") refTop!: Element;
@Ref("bottom") refBottom!: Element; @Ref("bottom") refBottom!: Element;
@Ref("resize") refResize!: Element; @Ref("resize") refResize!: Element;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID; private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;
@chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS) @chatStore.Getter(ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS)
private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS; private readonly chatMembers!: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS;
@chatStore.Mutation(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS) @chatStore.Mutation(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS)
private readonly clearChatMembers!: ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS; private readonly clearChatMembers!: ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_TITLE) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_TITLE)
private readonly chatTitle!: ChatStore.STATE_CURRENT_CHAT_TITLE; private readonly chatTitle!: ChatStore.STATE_CURRENT_CHAT_TITLE;
@chatStore.State(ChatStore.STATE_CURRENT_CHAT_INPUTING) @chatStore.State(ChatStore.STATE_CURRENT_CHAT_INPUTING)
private readonly currentInputPeople!: ChatStore.STATE_CURRENT_CHAT_INPUTING; private readonly currentInputPeople!: ChatStore.STATE_CURRENT_CHAT_INPUTING;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID)
private readonly currentChatUniplatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID; private readonly currentChatUniplatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID;
@chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST) @chatStore.State(ChatStore.STATE_MY_CHAT_ROOM_LIST)
private readonly myChatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST; private readonly myChatList!: ChatStore.STATE_MY_CHAT_ROOM_LIST;
@chatStore.State(ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER) @chatStore.State(ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER)
private readonly isChatMember!: ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER; private readonly isChatMember!: ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER;
private allChatList = { list: [] }; private allChatList = { list: [] };
@Prop({ type: Function }) @Prop({ type: Function })
private close?: () => void; private close?: () => void;
@Provide() showReadSummary = true; @Provide() showReadSummary = true;
@Watch("currentChatUniplatId") @Watch("currentChatUniplatId")
private whenCurrentChatIdChanged(newValue: string, oldValue: string) { private whenCurrentChatIdChanged(newValue: string, oldValue: string) {
if (Number(oldValue) === Number(newValue)) return; if (Number(oldValue) === Number(newValue)) return;
this.clearChatMembers(); this.clearChatMembers();
} }
private activeTab: RoomInfoTab = "customer"; private activeTab: RoomInfoTab = "customer";
private get getCurrentInputingPeople() { private get getCurrentInputingPeople() {
return this.currentInputPeople return this.currentInputPeople
.map(() => "" /* this.userInfo[k].name */) .map(() => "" /* this.userInfo[k].name */)
.join("、"); .join("、");
} }
private get currentChat() { private get currentChat() {
const chatId = this.chatId; const chatId = this.chatId;
if (this.myChatList == null) return; if (this.myChatList == null) return;
const result = this.myChatList.list.find((k) => k.chat_id === chatId); const result = this.myChatList.list.find((k) => k.chat_id === chatId);
return result ?? {}; return result ?? {};
} }
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) {
this.$message.error(msg); this.$message.error(msg);
} }
private dragControllerDiv(e: MouseEvent) { private dragControllerDiv(e: MouseEvent) {
const resize = this.refResize as any; const resize = this.refResize as any;
const top = this.refTop as HTMLElement; const top = this.refTop as HTMLElement;
const bottom = this.refBottom as HTMLElement; const bottom = this.refBottom as HTMLElement;
const box = this.chatBox as HTMLElement; const box = this.chatBox as HTMLElement;
const startY = e.clientY; const startY = e.clientY;
const originTop = resize.offsetTop; const originTop = resize.offsetTop;
document.onmousemove = function (e) { document.onmousemove = function (e) {
const endY = e.clientY; const endY = e.clientY;
let moveLen = originTop + (endY - startY); // (endY-startY) = 移动的距离。originTop + 移动的距离 = 顶部区域最后的高度 let moveLen = originTop + (endY - startY); // (endY-startY) = 移动的距离。originTop + 移动的距离 = 顶部区域最后的高度
if (moveLen < 300) moveLen = 300; // 上部区域的最小高度为300px if (moveLen < 300) moveLen = 300; // 上部区域的最小高度为300px
if (box.clientHeight - moveLen < 150) { if (box.clientHeight - moveLen < 150) {
moveLen = box.clientHeight - 150; moveLen = box.clientHeight - 150;
} }
const bottomHeight = box.clientHeight - moveLen; const bottomHeight = box.clientHeight - moveLen;
resize.style.top = moveLen + "px"; // 设置左侧区域的宽度 resize.style.top = moveLen + "px"; // 设置左侧区域的宽度
top.style.height = moveLen + "px"; top.style.height = moveLen + "px";
bottom.style.height = bottomHeight + "px"; bottom.style.height = bottomHeight + "px";
}; };
document.onmouseup = function () { document.onmouseup = function () {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
resize.releaseCapture && resize.releaseCapture(); resize.releaseCapture && resize.releaseCapture();
}; };
resize.setCapture && resize.setCapture(); resize.setCapture && resize.setCapture();
return false; return false;
} }
mounted() { mounted() {
this.refBottom && this.refBottom &&
((this.refBottom as HTMLElement).style.height = ((this.refBottom as HTMLElement).style.height =
this.chatBox.clientHeight - this.refTop.clientHeight + "px"); this.chatBox.clientHeight - this.refTop.clientHeight + "px");
}
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.chat-status { .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;
}
}
.chat-panel {
height: 100%;
.chat-area,
.chat-info {
display: inline-block;
vertical-align: top;
}
.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; display: inline-block;
vertical-align: top; width: 46px;
width: 50%; height: 20px;
line-height: 20px;
background: #22bd7a;
font-size: 13px;
border-radius: 2px;
color: #ffffff;
text-align: center; text-align: center;
font-size: 15px; margin-left: 10px;
color: #333; &.chat-done {
cursor: pointer; background: #c5d4e5;
}
}
&.active { .chat-panel {
font-weight: 600; height: 100%;
.chat-area,
.chat-info {
display: inline-block;
vertical-align: top;
}
.chat-info {
width: 349px;
border-left: 1px solid #e1e1e1;
} }
} }
} .info-tabs {
.chat-area { height: 40px;
position: relative; line-height: 40px;
width: 100%; border-bottom: 1px solid #f0f0f0;
overflow: hidden;
.chat-messages { .info-tab {
height: calc(100% - 130px + 1px); display: inline-block;
border-bottom: 1px solid #e1e1e1; vertical-align: top;
&.is-not-chat-member { width: 50%;
height: 100%; text-align: center;
border-bottom: none; font-size: 15px;
color: #333;
cursor: pointer;
&.active {
font-weight: 600;
}
} }
} }
.resize { .chat-area {
cursor: row-resize; position: relative;
position: absolute;
left: 0;
top: calc(100% - 130px + 1px);
height: 6px;
width: 100%; width: 100%;
overflow: hidden;
.chat-messages {
height: calc(100% - 130px + 1px);
border-bottom: 1px solid #e1e1e1;
&.is-not-chat-member {
height: 100%;
border-bottom: none;
}
}
.resize {
cursor: row-resize;
position: absolute;
left: 0;
top: calc(100% - 130px + 1px);
height: 6px;
width: 100%;
}
}
.order-info-con {
height: calc(100% - 40px);
}
.someone-inputing {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 1;
color: #c2c2c2;
} }
}
.order-info-con {
height: calc(100% - 40px);
}
.someone-inputing {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 1;
color: #c2c2c2;
}
</style> </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