From 53119f16e3bcd44adaaace4420c28d2dd6aec5c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Tue, 10 May 2022 17:59:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=9A=E8=AF=9D=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/chat.js |  23 ++++
 src/views/chat/index.vue   | 218 +++++++++++++++++++++++++++++++++++++
 2 files changed, 241 insertions(+)
 create mode 100644 src/router/modules/chat.js
 create mode 100644 src/views/chat/index.vue

diff --git a/src/router/modules/chat.js b/src/router/modules/chat.js
new file mode 100644
index 0000000..39b4356
--- /dev/null
+++ b/src/router/modules/chat.js
@@ -0,0 +1,23 @@
+export default [
+    {
+        path: '/chat',
+        name: 'ChatManagement',
+        component: () => import('@/layouts/default.vue'),
+        meta: {
+            title: '客服会话',
+            icon: 'wechat-2-fill',
+            layout: true,
+        },
+        children: [
+            {
+                path: 'session',
+                name: 'ChatSession',
+                component: () => import('@/views/chat/index.vue'),
+                meta: {
+                    title: '会话列表',
+                    icon: 'wechat-2-fill',
+                },
+            },
+        ],
+    },
+];
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
new file mode 100644
index 0000000..a53bb4c
--- /dev/null
+++ b/src/views/chat/index.vue
@@ -0,0 +1,218 @@
+<template>
+    <div class="chat-container">
+        <div class="header">当前客服：小爱</div>
+        <div class="body">
+            <div class="aside">
+                <div class="aside-header">近期会话</div>
+                <ul class="session-list">
+                    <li v-for="(item, index) in sessionList" :key="index" class="session-item">
+                        <el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
+                            <el-avatar circle :src="item.avatar" />
+                        </el-badge>
+                        <div class="session-info">
+                            <div class="row">
+                                <div class="session-name">{{ item.name }}</div>
+                                <div class="session-time">{{ item.time }}</div>
+                            </div>
+                            <div class="row">
+                                <div class="session-content">{{ item.content }}</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content">
+                <div class="content-header">
+                    <div class="content-header-left">
+                        <div class="name sex-1">
+                            {{ currentSession.name }}
+                        </div>
+                    </div>
+                    <div class="content-header-right">
+                        <el-button>转移会话</el-button>
+                    </div>
+                </div>
+                <div class="message-list"></div>
+                <div class="operation-bar">
+                    <el-button type="text">
+                        <el-icon name="chat-smile-3-fill" size="24" />
+                    </el-button>
+                    <el-button type="text">
+                        <el-icon name="image-fill" size="24" />
+                    </el-button>
+                    <el-button type="text">
+                        <el-icon name="movie-fill" size="24" />
+                    </el-button>
+                </div>
+                <div class="input">
+                    <el-input v-model="state.message" type="textarea" />
+                </div>
+                <div class="send">
+                    <el-button type="primary">发送</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    const sessionList = reactive([
+        {
+            name: '小可爱',
+            avatar: 'https://placem.at/people',
+            count: 1,
+            time: '2019-12-12',
+            content: '你好，请问这个能有优惠吗？',
+        },
+        {
+            name: '小可爱',
+            avatar: 'https://placem.at/people',
+            count: 0,
+            time: '2019-12-12',
+            content: '你好，请问这个能有优惠吗？',
+        },
+        {
+            name: '小可爱',
+            avatar: 'https://placem.at/people',
+            count: 0,
+            time: '2019-12-12',
+            content: '你好，请问这个能有优惠吗？',
+        },
+    ]);
+    const state = reactive({
+        currentIndex: 0,
+        message: '',
+    });
+    const currentSession = computed(() => {
+        return sessionList[state.currentIndex];
+    });
+</script>
+
+<style lang="less" scoped>
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        .header {
+            padding: @layout-space 0;
+        }
+        .body {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            border: 1px solid #eee;
+            .aside {
+                border-right: 1px solid #eee;
+                .aside-header {
+                    height: 60px;
+                    display: flex;
+                    align-items: center;
+                    padding: @layout-space;
+                    border-bottom: 1px solid #eee;
+                    font-size: @layout-h3;
+                    font-weight: bolder;
+                }
+                .session-list {
+                    display: flex;
+                    flex-direction: column;
+                    .session-item {
+                        display: flex;
+                        align-items: center;
+                        padding: @layout-space;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: #f5f5f5;
+                        }
+                        .session-count {
+                            margin-right: @layout-space;
+                            :deep(.el-badge__content) {
+                                top: calc(@layout-space / 2);
+                                right: calc(@layout-space * 1.25);
+                            }
+                        }
+                        .session-info {
+                            overflow: hidden;
+                            margin-left: @layout-space;
+                            .row {
+                                display: flex;
+                                justify-content: space-between;
+                            }
+                            .session-time,
+                            .session-content {
+                                font-size: 0.8em;
+                                color: #999;
+                            }
+                            .session-content {
+                                width: 150px;
+                                margin-top: @layout-space-small;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                            }
+                        }
+                        + .session-item {
+                            border-top: 1px solid #eee;
+                        }
+                    }
+                }
+            }
+            .content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                .content-header {
+                    height: 60px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: @layout-space;
+                    border-bottom: 1px solid #eee;
+                    .content-header-left {
+                        display: flex;
+                        align-items: center;
+                        .name {
+                            font-size: @layout-h3;
+                            font-weight: bolder;
+                            &.sex-0::before {
+                                content: '♀';
+                                color: var(--el-color-danger);
+                                font-weight: bolder;
+                                font-family: '黑体';
+                            }
+                            &.sex-1::before {
+                                content: '♂';
+                                color: var(--el-color-primary);
+                                font-weight: bolder;
+                                font-family: '黑体';
+                            }
+                        }
+                    }
+                }
+            }
+            .message-list {
+                flex: 1;
+            }
+            .operation-bar {
+                display: flex;
+                align-items: center;
+                padding: @layout-space;
+                border-top: 1px solid #eee;
+                border-bottom: 1px solid #eee;
+            }
+            .input {
+                height: 100px;
+                .el-textarea {
+                    height: 100%;
+                    :deep(textarea) {
+                        height: 100% !important;
+                        box-shadow: none;
+                    }
+                }
+            }
+            .send {
+                display: flex;
+                justify-content: flex-end;
+                padding: @layout-space-small;
+            }
+        }
+    }
+</style>