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