消息通知（未完成）

src/views/equip/detail.vue

@@ -138,6 +138,7 @@
                                 type="primary"
                                 class="primary-lease"
                                 icon="ChatDotRound"
+                                @click="onChat"
                                 >在线聊</el-button
                             >
                         </div>
@@ -446,6 +447,47 @@
                 </span>
             </template>
         </el-dialog>
+
+        <!-- 在线聊  -->
+        <el-dialog
+        title="在线聊"
+        v-model="dialogChatVisible"
+        width="80%"
+        :before-close="handleClose"
+      >
+        <div class="chat-container" style="height: 700px; display: flex;">
+          <div class="contact-list" style="width: 20%; height: 100%;">
+            <div class="contact-list-header">聊天列表</div>
+            <el-menu default-active="1"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+              <el-menu-item v-for="(contact, index) in contacts" :key="index" :index="index.toString()">
+                <el-avatar :src="contact.avatar" />
+                {{ contact.name }}
+                <el-badge :value="contact.unreadCount" class="custom-badge" v-if="contact.unreadCount > 0"></el-badge>
+              </el-menu-item>
+              <!-- 其他联系人 -->
+            </el-menu>
+          </div>
+          <div class="chat-content" style="width: 70%; height: 100%; display: flex; flex-direction: column;">
+            <!-- 聊天内容框，占右侧高度的80% -->
+            <div class="message-box" style="flex: 8; overflow-y: auto;">
+                <!-- 聊天消息 -->
+               <div class="chat-content-header" style="text-align: left;">{{ "聊天人" }}</div>
+                <div class="message" v-for="message in messages" :key="message.id">
+                <el-avatar :src="message.avatar" />
+                <div class="message-text">{{ message.text }}</div>
+              </div>
+            </div>
+            <!-- 发送消息的输入框，占右侧高度的20% -->
+            <div class="input-box" style="flex: 1;display: flex;">
+                <el-input
+                v-model="newMessage"
+                class="chat-input"
+                ></el-input>
+                <el-button type="primary" @click="sendMessage">发送</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
     </div>
 </template>
 <script lang="ts" setup>
@@ -1043,6 +1085,41 @@ const onAddCart = async () => {
         })
         .catch(() => {})
 }
+const contacts = ref([
+    {
+        name: '张三',
+        phone: '12345678901',
+        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+        unreadCount: 2,
+    },
+    {
+        name: '李四',
+        phone: '12345678902',
+        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+        unreadCount: 1,
+    },
+    {
+        name: '王五',
+        phone: '12345678903',
+        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+        unreadCount: 0,
+    },
+])
+const unreadCount = ref(1)
+const messages = ref([
+        { id: 1, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', text: '你好，欢迎来到在线聊！' },
+        // 其他消息
+      ],)
+const dialogChatVisible = ref(false)
+const onChat = () => {
+    dialogChatVisible.value = true
+
+}
+
+
+onMounted(() => {
+    // getUnreadCount()
+})
 </script>
 <style scoped lang="scss">
 :deep(.dialoglease) {
@@ -1488,4 +1565,54 @@ const onAddCart = async () => {
         }
     }
 }
+.chat-container {
+  display: flex;
+}
+.contact-list {
+  width: 200px;
+  /* border-right: 1px solid #ccc; */
+}
+.chat-content {
+  flex: 1;
+  padding: 10px;
+  overflow-y: auto;
+  background-color: #f8f8f8;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.message-text {
+  margin-left: 10px;
+}
+
+.chat-input {
+  width: 100%;
+}
+
+.custom-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  margin-right: 10px;
+}
+.contact-list-header {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: left;
+  padding: 10px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.chat-content-header {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+  padding: 10px;
+  background-color: #f8f8f8;
+  border-bottom: 1px solid #e5e5e5;
+}
 </style>