客服模式

chat-room.vue

 <template>
 <template>
     <div class="chat-room-con h-100 pos-rel">
     <div class="chat-room-con h-100 pos-rel">
-        {{ chatId }}
         <div class="chat-panel">
         <div class="chat-panel">
             <div class="chat-area h-100">
             <div class="chat-area h-100">
                 <template v-if="notOnlyCheck">
                 <template v-if="notOnlyCheck">

chat.vue

 <template>
 <template>
-    <div class="chat-con">
-        <ChatTitle :close="hide" />
+    <div class="chat-con" :class="{ userMode }">
+        <ChatTitle :close="hide" class="chat-title" />
         <div class="chat-area-con">
         <div class="chat-area-con">
             <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">
-                <!-- <div class="buttons">
-                <el-button class="button" @click="terminate" round
-                    >结束会话</el-button
-                >
-                <el-button class="button" @click="showAddMember" round
-                    >添加成员</el-button
-                >
-            </div> -->
+            <div class="chat-panel h-100" v-if="!userMode">
                 <el-tabs class="chat-panel" v-model="currentTab">
                 <el-tabs class="chat-panel" v-model="currentTab">
                     <el-tab-pane label="数据" name="one"
                     <el-tab-pane label="数据" name="one"
                         >model的数据，可配置。</el-tab-pane
                         >model的数据，可配置。</el-tab-pane
@@ -31,9 +23,11 @@
                         <remarkList modelName="user" />
                         <remarkList modelName="user" />
                     </el-tab-pane>
                     </el-tab-pane>
                     <el-tab-pane label="回复" name="five">
                     <el-tab-pane label="回复" name="five">
-
-                        <MsgShortCut v-for="(item, i) in shortCutMsgs" :key="i" :msg="item"/>
-
+                        <MsgShortCut
+                            v-for="(item, i) in shortCutMsgs"
+                            :key="i"
+                            :msg="item"
+                        />
                     </el-tab-pane>
                     </el-tab-pane>
                 </el-tabs>
                 </el-tabs>
             </div>
             </div>
@@ -88,14 +82,11 @@ export default class Chat extends Vue {
     @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
     @chatStore.Action(ChatStore.ACTION_CHAT_ADD_MEMBERS)
     private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
     private readonly _addMember!: ChatStore.ACTION_CHAT_ADD_MEMBERS;
 
 
+    private userMode = true;
+
     private currentTab = "one";
     private currentTab = "one";
 
 
-    private shortCutMsgs = [
-        "快捷回复1",
-        "快捷回复2",
-        "快捷回复3",
-        "快捷回复4",
-    ]
+    private shortCutMsgs = ["快捷回复1", "快捷回复2", "快捷回复3", "快捷回复4"];
 
 
     private get chatMembersId() {
     private get chatMembersId() {
         return this.chatMembers.map((k) => +k.eid);
         return this.chatMembers.map((k) => +k.eid);
@@ -122,16 +113,24 @@ export default class Chat extends Vue {
 }
 }
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
-.chat-con {
-    height:70vh;
-}
 .chat-area-con {
 .chat-area-con {
     height: calc(100% - 60px);
     height: calc(100% - 60px);
 }
 }
 .chat-con {
 .chat-con {
+    height: 70vh;
     --chat-panel-width: 350px;
     --chat-panel-width: 350px;
     font-size: 13px;
     font-size: 13px;
     color: black;
     color: black;
+    &.userMode {
+        --chat-panel-width: 0px;
+        .chat-title {
+            /deep/ .title-buttons {
+                .button {
+                    display:none
+                }
+            }
+        }
+    }
 }
 }
 .chat-area,
 .chat-area,
 .chat-panel {
 .chat-panel {
@@ -156,7 +155,7 @@ export default class Chat extends Vue {
 }
 }
 .chat-panel {
 .chat-panel {
     /deep/ .el-tabs__item {
     /deep/ .el-tabs__item {
-        padding:0 18px;
+        padding: 0 18px;
     }
     }
 }
 }
 </style>
 </style>

components/message.vue

@@ -520,6 +520,7 @@ i.msg-avatar {
     color: #888;
     color: #888;
     text-align: right;
     text-align: right;
     margin-bottom: 3px;
     margin-bottom: 3px;
+    min-height: 16px;
 }
 }
 
 
 .msg-detail {
 .msg-detail {

message-list.vue

 <template>
 <template>
   <div v-loading="chatIniting" class="message-list h-100">
   <div v-loading="chatIniting" class="message-list h-100">
-    <!-- chatId:{{ chatId }} -->
     <el-scrollbar
     <el-scrollbar
       ref="message-scrollbar"
       ref="message-scrollbar"
       class="
       class="