首页消息提示及客户列表

src/api/service.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+// 账号管理-列表
+export function getUsers(params) {
+  return request({
+    url: '/chat/getUsers',
+    params
+  });
+}

src/layout/components/Navbar.vue

@@ -10,24 +10,31 @@
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <!-- <template v-if="device!=='mobile'">
-        <search id="header-search" class="right-menu-item" />
-
-    <el-tooltip content="源码地址" effect="dark" placement="bottom">
+      <template v-if="device!=='mobile'">
+        <!-- <search id="header-search" class="right-menu-item" /> -->
+        <router-link to="/service">
+          <span>
+            <span class="news">
+              <i class="red"></i>
+              <i class="el-icon-bell"></i>
+            </span>
+          </span>
+        </router-link>
+    <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-    <screenfull id="screenfull" class="right-menu-item hover-effect" />
+    <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
-      </template>-->
+      </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
@@ -138,12 +145,28 @@ export default {
 
   .right-menu {
     float: right;
+    display: flex;
+    align-content: center;
     height: 100%;
     line-height: 50px;
 
     &:focus {
       outline: none;
     }
+    .news{
+      position: relative;
+      font-size: 25px;
+      margin-right: 10px;
+      .red{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: red;
+      }
+    }
 
     .right-menu-item {
       display: inline-block;

src/views/service/index.vue

@@ -5,17 +5,18 @@
         <div class="box_l">
           <div
             class="user_item"
-            v-for="item in 15"
-            :key="item"
-            @click="active(item)"
-            :class="activeId === item ? 'active' : ''"
+            v-for="item in userList"
+            :key="item.id"
+            @click="active(item.id)"
+            :class="activeId === item.id ? 'active' : ''"
           >
             <div class="user_item_l">
-              <el-avatar
-                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-              ></el-avatar>
+              <div class="el-avatar">
+                <span :class="item.status?'el-avatar2':''"></span>
+                <img :src="item.icon" alt="">
+              </div>
               <div class="info">
-                <div class="phone">15679846126</div>
+                <div class="phone">{{item.username}}</div>
                 <div class="company">科大讯飞股份有限公司</div>
               </div>
             </div>
@@ -88,9 +89,17 @@
 </template>
 
 <script>
+import {getUsers} from '@/api/service'
 export default {
   data() {
     return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      a:{},
+      total:0,
+      userList:[],
       activeId: null,
       customerText: '',
       info: [
@@ -138,9 +147,20 @@ export default {
   mounted() {
     // 初始化
     this.init();
+    // getUsers(this.queryParams).then(({data})=>{
+    //   this.userList = data.list
+    //   this.total = data.total
+    // })
+    this.getUserList()
   },
   created() {},
   methods: {
+    getUserList(){
+      getUsers(this.queryParams).then(({data})=>{
+        this.userList = data.list
+        this.total = data.total
+      })
+    },
     // 用户发送消息
     sentMsg() {
       clearTimeout(this.timer);
@@ -251,8 +271,11 @@ export default {
     error: function() {
       console.log('连接错误');
     },
-    getMessage: function(msg) {
+    getMessage(msg) {
       console.log(msg.data);
+      console.log(JSON.parse(msg.data));
+      this.a = JSON.parse(msg.data)
+      // sendUserId
     },
     send: function(params) {
       this.socket.send(params);
@@ -290,6 +313,23 @@ export default {
           .user_item_l {
             display: flex;
             align-items: center;
+            .el-avatar{
+              position: relative;
+              span{
+              width: 7px;
+              height: 7px;
+              border-radius: 50%;
+              background-color: red;
+              position: absolute;
+              top: 0;
+              right: 0;
+            }
+              img{
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+              }
+            }
             .info {
               display: flex;
               flex-direction: column;