vue 在线客服前端页面

以下是使用Vue搭建在线客服前端页面的基本流程：

1.安装Vue和Element-Plus

# 安装Vue
npm install vue

# 安装Element-Plus
npm install element-plus

2.创建Vue项目

# 创建Vue项目
vue create online-service

# 进入项目目录
cd online-service

# 启动项目
npm run serve

3.引入Element-Plus和axios

在`main.js`中引入Element-Plus和axios：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import axios from 'axios'

const app = createApp(App)
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.mount('#app')

4.创建在线客服页面

在`src/views`目录下创建`OnlineService.vue`组件：

<template>
  <div>
    <el-container style="height: 100%;">
      <el-header style="background-color: #f5f5f5;">
        <el-row>
          <el-col :span="12">
            <h2>在线客服</h2>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-button type="text" @click="logout">退出登录</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside style="background-color: #f5f5f5; width: 200px;">
          <el-menu :default-openeds="['1']" background-color="#f5f5f5" text-color="#666" active-text-color="#409EFF">
            <el-submenu index="1">
              <template #title>
                <i class="el-icon-message"></i>
                <span>会话列表</span>
              </template>
              <el-menu-item index="1-1">会话1</el-menu-item>
              <el-menu-item index="1-2">会话2</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="18">
              <el-card>
                <el-chat v-model="messages" :list="messages" :show-header="false" :render-message="renderMessage" />
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <el-form :model="form" label-width="60px">
                  <el-form-item label="发送给">
                    <el-input v-model="form.to" placeholder="请输入接收人" />
                  </el-form-item>
                  <el-form-item label="消息内容">
                    <el-input v-model="form.message" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入消息内容" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="sendMessage">发送</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { ElChat, ElForm, ElFormItem, ElInput, ElButton, ElCard, ElContainer, ElHeader, ElAside, ElMain, ElMenu, ElSubmenu, ElMenuItem, ElRow, ElCol } from 'element-plus'

export default {
  components: {
    ElChat,
    ElForm,
    ElFormItem,
    ElInput,
    ElButton,
    ElCard,
    ElContainer,
    ElHeader,
    ElAside,
    ElMain,
    ElMenu,
    ElSubmenu,
    ElMenuItem,
    ElRow,
    ElCol
  },
  setup() {
    const messages = reactive([
      {
        message: '你好，有什么可以帮助您的吗？',
        type: 'received'
      }
    ])
    const form = reactive({
      to: '',
      message: ''
    })
    const renderMessage = (message, index) => {
      return message.type === 'received' ? (
        <el-chat-message
          key={index}
          type="received"
          avatar="https://avatars.githubusercontent.com/u/16647115?v=4"
          :message="message.message"
        />
      ) : (
        <el-chat-message
          key={index}
          type="sent"
          avatar="https://avatars.githubusercontent.com/u/16647115?v=4"
          :message="message.message"
        />
      )
    }
    const sendMessage = () => {
      if (form.to && form.message) {
        messages.push({
          message: form.message,
          type: 'sent'
        })
        form.message = ''
      }
    }
    const logout = () => {
      // 调用后端接口退出登录
    }
    return {
      messages,
      form,
      renderMessage,
      sendMessage,
      logout
    }
  }
}
</script>

5.在路由中注册在线客服页面

在`src/router/index.js`中注册在线客服页面：

import { createRouter, createWebHistory } from 'vue-router'
import OnlineService from '../views/OnlineService.vue'

const routes = [
  {
    path: '/',
    name: 'OnlineService',
    component: OnlineService
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

6.运行项目

npm run serve