【功能完善】商城客服: 客服布局样式调整

34fe09e2 · puhui999 · 1d01955b · 34fe09e2 · 34fe09e2 · 34fe09e2
Commit 34fe09e2 authored Nov 04, 2024 by puhui999
7 changed files
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
 <template>
-  <div class="kefu">
+  <el-aside class="kefu-conversation-aside p-10px h-100%" width="260px">
+    <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
    <div
      v-for="item in conversationList"
      :key="item.id"
@@ -22,7 +23,7 @@
        <div class="ml-10px w-100%">
          <div class="flex justify-between items-center w-100%">
            <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px">
+            <span class="color-[#999]" style="font-size: 13px">
              {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
            </span>
          </div>
@@ -31,7 +32,7 @@
            v-dompurify-html="
              getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
            "
-            class="last-message flex items-center color-[var(--left-menu-text-color)]"
+            class="last-message flex items-center color-[#999]"
          >
          </div>
        </div>
@@ -65,7 +66,7 @@
        取消
      </li>
    </ul>
-  </div>
+  </el-aside>
 </template>
 <script lang="ts" setup>
@@ -179,7 +180,9 @@ watch(showRightMenu, (val) => {
 </script>
 <style lang="scss" scoped>
-.kefu {
+.kefu-conversation-aside {
+  background-color: #fff;
  &-conversation {
    height: 60px;
    padding: 10px;
@@ -206,12 +209,13 @@ watch(showRightMenu, (val) => {
  }
  .active {
-    border-left: 5px #3271ff solid;
+    //border-left: 5px #96afea solid;
-    background-color: var(--login-bg-color);
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
  }
  .pinned {
-    background-color: var(--left-menu-bg-active-color);
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
  }
  .right-menu-ul {

--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
 <template>
  <el-container v-if="showKeFuMessageList" class="kefu">
-    <el-header>
+    <el-header class="kefu-header">
      <div class="kefu-title">{{ conversation.userNickname }}</div>
    </el-header>
    <el-main class="kefu-content overflow-visible">
-      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
+      <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
-        <div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
+        <div v-if="refreshContent" ref="innerRef" class="w-[100%] px-10px">
          <!-- 消息列表 -->
          <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
            <div class="flex justify-center items-center mb-20px">
@@ -43,7 +43,9 @@
                class="w-60px h-60px"
              />
              <div
-                :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
+                :class="{
+                  'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
+                }"
                class="p-10px"
              >
                <!-- 文本消息 -->
@@ -71,10 +73,10 @@
                <MessageItem :message="item">
                  <ProductItem
                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
-                    :spuId="getMessageContent(item).spuId"
                    :picUrl="getMessageContent(item).picUrl"
                    :price="getMessageContent(item).price"
                    :skuText="getMessageContent(item).introduction"
+                    :spuId="getMessageContent(item).spuId"
                    :title="getMessageContent(item).spuName"
                    :titleWidth="400"
                    class="max-w-70%"
@@ -108,8 +110,7 @@
        <Icon class="ml-5px" icon="ep:bottom" />
      </div>
    </el-main>
-    <el-footer height="230px">
+    <el-footer class="kefu-footer">
-      <div class="h-[100%]">
      <div class="chat-tools flex items-center">
        <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
        <PictureSelectUpload
@@ -117,14 +118,21 @@
          @send-picture="handleSendPicture"
        />
      </div>
-        <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
+      <el-input
-        <div class="h-45px flex justify-end">
+        v-model="message"
-          <el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
+        :rows="6"
-        </div>
+        placeholder="输入消息，Enter发送，Shift+Enter换行"
-      </div>
+        style="border-style: none"
+        type="textarea"
+        @keyup.enter.prevent="handleSendMessage"
+      />
    </el-footer>
  </el-container>
-  <el-empty v-else description="请选择左侧的一个会话后开始" />
+  <el-container v-else class="kefu">
+    <el-main>
+      <el-empty description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
 </template>
 <script lang="ts" setup>
@@ -262,7 +270,11 @@ const handleSendPicture = async (picUrl: string) => {
 }
 /** 发送文本消息 */
-const handleSendMessage = async () => {
+const handleSendMessage = async (event: any) => {
+  // shift 不发送
+  if (event.shiftKey) {
+    return
+  }
  // 1. 校验消息是否为空
  if (isEmpty(unref(message.value))) {
    messageTool.notifyWarning('请输入消息后再发送哦！')
@@ -357,14 +369,29 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 <style lang="scss" scoped>
 .kefu {
+  background-color: #fff;
+  width: calc(100% - 300px - 260px);
+  border-left: var(--el-border-color) solid 1px;
+  .kefu-header {
+    background: #fbfbfb;
+    box-shadow: 0 0 0 0 #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
    &-title {
-    border-bottom: #e4e0e0 solid 1px;
+      font-size: 18px;
-    height: 60px;
+      font-weight: bold;
-    line-height: 60px;
+    }
  }
  &-content {
+    margin: 0;
+    padding: 0;
    position: relative;
+    height: 100%;
+    width: 100%;
    .newMessageTip {
      position: absolute;
@@ -447,21 +474,36 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
      border-radius: 12rpx;
      padding: 8rpx 16rpx;
      margin-bottom: 16rpx;
-      //background-color: #e8e8e8;
      color: #999;
      font-size: 24rpx;
    }
  }
+  .kefu-footer {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border-top: var(--el-border-color) solid 1px;
    .chat-tools {
      width: 100%;
-    border: var(--el-border-color) solid 1px;
-    border-radius: 10px;
      height: 44px;
    }
+  }
  ::v-deep(textarea) {
    resize: none;
  }
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+    border-radius: 0;
+  }
+  ::v-deep(.el-textarea__inner) {
+    box-shadow: none !important;
+  }
 }
 </style>
--- a/src/views/mall/promotion/kefu/components/index.ts
+++ b/src/views/mall/promotion/kefu/components/index.ts
 import KeFuConversationList from './KeFuConversationList.vue'
 import KeFuMessageList from './KeFuMessageList.vue'
-import MemberBrowsingHistory from './history/MemberBrowsingHistory.vue'
+import MemberInfo from './member/MemberInfo.vue'
-export { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory }
+export { KeFuConversationList, KeFuMessageList, MemberInfo }
--- a/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
 <!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
 <template>
-  <div v-show="!isEmpty(conversation)" class="kefu">
+  <el-container class="kefu">
-    <div class="header-title h-60px flex justify-center items-center">他的足迹</div>
+    <el-header class="kefu-header">
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeName" class="kefu-tabs" @tab-click="handleClick">
        <el-tab-pane label="最近浏览" name="a" />
        <el-tab-pane label="订单列表" name="b" />
      </el-tabs>
-    <div>
+    </el-header>
-      <el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
+    <el-main class="kefu-content">
+      <div v-show="!isEmpty(conversation)">
+        <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
          <!-- 最近浏览 -->
          <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
          <!-- 订单列表 -->
          <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
        </el-scrollbar>
      </div>
-  </div>
      <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
 </template>
 <script lang="ts" setup>
@@ -91,6 +94,41 @@ const handleScroll = debounce(() => {
 </script>
 <style lang="scss" scoped>
+.kefu {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 300px !important;
+  background-color: #fff;
+  border-left: var(--el-border-color) solid 1px;
+  &-header {
+    background: #fbfbfb;
+    box-shadow: 0 0 0 0 #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+  &-content {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  &-tabs {
+    height: 100%;
+    width: 100%;
+  }
+}
 .header-title {
  border-bottom: #e4e0e0 solid 1px;
 }

--- a/src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue
--- a/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
 <template>
-  <el-row :gutter="10">
+  <el-container class="kefu-layout">
    <!-- 会话列表 -->
-    <el-col :span="6">
-      <ContentWrap>
    <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
-      </ContentWrap>
-    </el-col>
    <!-- 会话详情（选中会话的消息列表） -->
-    <el-col :span="12">
-      <ContentWrap>
    <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
-      </ContentWrap>
-    </el-col>
    <!-- 会员足迹（选中会话的会员足迹） -->
-    <el-col :span="6">
+    <MemberInfo ref="memberInfoRef" />
-      <ContentWrap>
+  </el-container>
-        <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
-      </ContentWrap>
-    </el-col>
-  </el-row>
 </template>
 <script lang="ts" setup>
-import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
+import { KeFuConversationList, KeFuMessageList, MemberInfo } from './components'
 import { WebSocketMessageTypeConstants } from './components/tools/constants'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { getRefreshToken } from '@/utils/auth'
@@ -91,10 +79,10 @@ const getConversationList = () => {
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
-const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
  keFuChatBoxRef.value?.getNewMessageList(conversation)
-  memberBrowsingHistoryRef.value?.initHistory(conversation)
+  memberInfoRef.value?.initHistory(conversation)
 }
 /** 初始化 */
@@ -112,9 +100,13 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss">
-.kefu {
+.kefu-layout {
-  height: calc(100vh - 165px);
+  position: absolute;
-  overflow: auto; /* 确保内容可滚动 */
+  flex: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 /* 定义滚动条样式 */