客服中心

最近又想了一个功能客服中心,可以实现管理端和用户端之间进行交互

思路

1.客户端和管理端前端分别添加一个聊天入口

2.建立一个chat 模块整合webSocket实现聊天室的后端支持

3.持久化层选用的mongodb,存放建立一个表chat(id,发送人id,接收人id,发送内容,发送时间)存放聊天记录,同时会利用mysql表同步的功能,新建一个库yygh_chat用于同步yygh_user中的user_info,因为聊天记录需要知道是谁发送的

客户端

新建一个chat模块,负责管理我们的聊天记录和聊天室

我们的客服系统设置在帮助中心

这里我使用的是开源组件https://github.com/Coffcer/vue-chat

在一名前端大佬的支援之下我把这个聊天室做到了这样，现在有1个bug发送一次会收到两次消息

是因为这样我现在把这个删除就ok了，还要给他添加一个头像

前端页面

<template>
    <div class="page-container">
      <div class="chat-box">
      <header>聊天室 (在线:{{ count }}人)</header>
      <div class="msg-box" ref="msg-box">
        <div v-for="(i,index) in list"
             :key="index"
             class="msg"
             :style="i.token === token?'flex-direction:row-reverse':''"
        >
          <div class="user-head">
            <img :src="'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'" height="30" width="30" :title="i.username">
          </div>
          <div class="user-msg">
          <span :style="i.token === token?' float: right;':''"
                :class="i.token === token?' right':'left'">{{ i.content }}</span>
          </div>
        </div>
      </div>
      <div class="input-box">
        <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()"/>
        <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div>
      </div>
    </div>
    </div>
</template>

<script>
import cookie from "js-cookie";

export default {
  data() {
    return {
      ws: null,
      count: 0,
      token: null, // 当前用户ID
      username: null, // 当前用户昵称
      avatar: null, // 当前用户头像
      list: [], // 聊天记录的数组
      contentText: "" // input输入的值
    };
  },
  created() {
    this.showInfo()
  },
  mounted() {
    this.initWebSocket();
  },
  destroyed() {
    // 离开页面时关闭websocket连接
    this.ws.onclose(undefined);
  },
  methods: {
    // 发送聊天信息
    sendText() {
      let _this = this;
      _this.$refs["sendMsg"].focus();
      if (!_this.contentText) {
        return;
      }
      let params = {
        token: _this.token,
        username: _this.username,
        avatar: _this.avatar,
        msg: _this.contentText,
        count: _this.count
      };
      _this.ws.send(JSON.stringify(params)); //调用WebSocket send()发送信息的方法
      _this.contentText = "";
      setTimeout(() => {
        _this.scrollBottm();
      }, 500);
    },
    // 进入页面创建websocket连接
    initWebSocket() {
      let _this = this;
      // 判断页面有没有存在websocket连接
      if (window.WebSocket) {
        var serverHot = window.location.hostname;
        let sip = '1'
        // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
        let token = cookie.get('token');
        var url = 'ws://' + serverHot + ':8209' + '/api/chat/' + sip + '/' + token; // `ws://127.0.0.1:8209/api/chat/1`
        console.log(url)
        let ws = new WebSocket(url);
        _this.ws = ws;
        ws.onopen = function (e) {
          console.log("服务器连接成功: " + url);
        };
        ws.onclose = function (e) {
          console.log("服务器连接关闭: " + url);
        };
        ws.onerror = function () {
          console.log("服务器连接出错: " + url);
        };
        ws.onmessage = function (e) {
          //接收服务器返回的数据
          let resData = JSON.parse(e.data)
          _this.count = resData.count;
          _this.list = [
            ..._this.list,
            {token: resData.token, username: resData.username, avatar: resData.avatar, content: resData.msg}
          ];
        };
      }
    },
    // 滚动条到底部
    scrollBottm() {
      let el = this.$refs["msg-box"];
      el.scrollTop = el.scrollHeight;
    },
    showInfo() {
      this.token = cookie.get('token')
      if (this.token) {
        this.username = cookie.get('name')
        console.log(this.username)
        console.log(this.token)
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.page-container{
  height: 700px;
}
.chat-box {
  margin: 0 auto;
  background: #fafafa;
  position: absolute;
  height: 95%;
  width: 100%;

  header {
    width: 100%;
    height: 3rem;
    background: #409eff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 1rem;
  }

  .msg-box {
    position: absolute;
    height: calc(100% - 6.5rem);
    width: 100%;
    margin-top: 3rem;
    overflow-y: scroll;

    .msg {
      width: 95%;
      min-height: 2.5rem;
      margin: 1rem 0.5rem;
      position: relative;
      display: flex;
      justify-content: flex-start !important;

      .user-head {
        min-width: 2.5rem;
        width: 20%;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;

        .head {
          width: 1.2rem;
          height: 1.2rem;
        }

        // position: absolute;
      }

      .user-msg {
        width: 80%;
        // position: absolute;
        word-break: break-all;
        position: relative;
        z-index: 5;

        span {
          display: inline-block;
          padding: 0.5rem 0.7rem;
          border-radius: 0.5rem;
          margin-top: 0.2rem;
          font-size: 0.88rem;
        }

        .left {
          background: white;
          animation: toLeft 0.5s ease both 1;
        }

        .right {
          background: #53a8ff;
          color: white;
          animation: toright 0.5s ease both 1;
        }

        @keyframes toLeft {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
        @keyframes toright {
          0% {
            opacity: 0;
            transform: translateX(10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }
  }

  .input-box {
    padding: 0 0.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: #fafafa;
    box-shadow: 0 0 5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      height: 2.3rem;
      display: inline-block;
      width: 100%;
      padding: 0.5rem;
      border: none;
      border-radius: 0.2rem;
      font-size: 0.88rem;
    }

    .btn {
      height: 2.3rem;
      min-width: 4rem;
      background: #e0e0e0;
      padding: 0.5rem;
      font-size: 0.88rem;
      color: white;
      text-align: center;
      border-radius: 0.2rem;
      margin-left: 0.5rem;
      transition: 0.5s;
    }

    .btn-active {
      background: #409eff;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271

webSocket

@Slf4j
@Service
@ServerEndpoint(value = "/api/chat/{sid}/{token}")
public class WebSocketServerController {

    private static ApplicationContext applicationContext;

    public static void setApplicationContext(ApplicationContext applicationContext) {
        WebSocketServerController.applicationContext = applicationContext;
    }

    /**
     * 房间号 -> 组成员信息
     */
    private static ConcurrentHashMap<String, List<Session>> groupMemberInfoMap = new ConcurrentHashMap<>();
    /**
     * 房间号 -> 在线人数
     */
    private static ConcurrentHashMap<String, Set<String>> onlineUserMap = new ConcurrentHashMap<>();

    /**
     * 收到消息调用的方法，群成员发送消息
     *
     * @param sid:房间号
     * @param token：用户token
     * @param message：发送消息
     */
    @OnMessage
    public void onMessage(@PathParam("sid") String sid, @PathParam("token") String token, String message) {
        // json字符串转对象
        MsgVO msg = JSONObject.parseObject(message, MsgVO.class);

        //新建一个聊天记录
        MsgEntity msgEntity = new MsgEntity();
        Long userId;
        if (token.equals("admin")) {
            userId = 0L;
        } else {
            userId = JwtHelper.getUserId(token);
        }
        msgEntity.setUserName(msg.getUsername());
        msgEntity.setMsg(msg.getMsg());
        msgEntity.setUserId(userId);
        WebSocketService webSocketService = applicationContext.getBean(WebSocketService.class);
        webSocketService.saveMsg(msgEntity);
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        Set<String> onlineUserList = onlineUserMap.get(sid);
        // 先一个群组内的成员发送消息
        sessionList.forEach(item -> {
            try {
                msg.setCount(onlineUserList.size());
                // json对象转字符串
                String text = JSONObject.toJSONString(msg);
                item.getBasicRemote().sendText(text);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }

    /**
     * 建立连接调用的方法，群成员加入
     *
     * @param session
     * @param sid
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid, @PathParam("token") String token) {
        List<Session> sessionList = groupMemberInfoMap.computeIfAbsent(sid, k -> new ArrayList<>());
        Set<String> onlineUserList = onlineUserMap.computeIfAbsent(sid, k -> new HashSet<>());
        onlineUserList.add(token);
        sessionList.add(session);
        // 发送上线通知
        sendInfo(sid, token, onlineUserList.size(), "上线了~");
    }


    public void sendInfo(String sid, String token, Integer onlineSum, String info) {
        log.info(token);
        if (Objects.equals(token, "admin")){
            MsgVO msg = new MsgVO();
            msg.setToken(token);
            msg.setUsername("客服");
            msg.setCount(onlineSum);
            msg.setMsg("客服" + info);
            // json对象转字符串
            String text = JSONObject.toJSONString(msg);
            onMessage(sid, token, text);
            return;
        }
        Long userId = JwtHelper.getUserId(token);
        // 获取该连接用户信息
        WebSocketService webSocketService = applicationContext.getBean(WebSocketService.class);
        UserInfo userInfo = webSocketService.getUserInfo(userId);
        // 发送通知
        MsgVO msg = new MsgVO();
        msg.setToken(token);
        msg.setUsername(userInfo.getNickName());
        msg.setCount(onlineSum);
        msg.setMsg(userInfo.getNickName() + info);
        // json对象转字符串
        String text = JSONObject.toJSONString(msg);
        onMessage(sid, token, text);
    }

    /**
     * 关闭连接调用的方法，群成员退出
     *
     * @param session
     * @param sid
     */
    @OnClose
    public void onClose(Session session, @PathParam("sid") String sid, @PathParam("token") String token) {
        List<Session> sessionList = groupMemberInfoMap.get(sid);
        sessionList.remove(session);
        Set<String> onlineUserList = onlineUserMap.get(sid);
        onlineUserList.remove(token);
        // 发送离线通知
        sendInfo(sid, token, onlineUserList.size(), "下线了~");
    }

    /**
     * 传输消息错误调用的方法
     *
     * @param error
     */
    @OnError
    public void OnError(Throwable error) {
        log.info("Connection error");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
1
2
3
4
5
6
7

@Component
public class ApplicationContextProvider implements ApplicationContextAware {

    private static ApplicationContext applicationContextSpring;
    @Override
    public synchronized void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
        applicationContextSpring = applicationContext;
    }
    public static <T> T getBean(Class<T> clazz) {

        return applicationContextSpring.getBean(clazz);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

管理端

在websocket中添加了一个这样的判断

log.info(token);
if (Objects.equals(token, "admin")){
    MsgVO msg = new MsgVO();
    msg.setToken(token);
    msg.setUsername("客服");
    msg.setCount(onlineSum);
    msg.setMsg("客服" + info);
    // json对象转字符串
    String text = JSONObject.toJSONString(msg);
    onMessage(sid, token, text);
    return;
}
1
2
3
4
5
6
7
8
9
10
11
12

<template>
  <div class="page-container">
    <div class="chat-box">
      <header>聊天室 (在线:{{ count }}人)</header>
      <div class="msg-box" ref="msg-box">
        <div v-for="(i,index) in list"
             :key="index"
             class="msg"
             :style="i.token === token?'flex-direction:row-reverse':''"
        >
          <div class="user-head">
            <img :src="'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'"
                 height="30" width="30" :title="i.username">
          </div>
          <div class="user-msg">
          <span :style="i.token === token?' float: right;':''"
                :class="i.token === token?' right':'left'">{{ i.content }}</span>
          </div>
        </div>
      </div>
      <div class="input-box">
        <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()"/>
        <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      ws: null,
      count: 0,
      token: 'admin', // 当前用户ID
      username: '客服', // 当前用户昵称
      avatar: null, // 当前用户头像
      list: [], // 聊天记录的数组
      contentText: '' // input输入的值
    }
  },
  mounted() {
    this.initWebSocket()
  },
  destroyed() {
    // 离开页面时关闭websocket连接
    this.ws.onclose(undefined)
  },
  methods: {
    // 发送聊天信息
    sendText() {
      let _this = this
      _this.$refs['sendMsg'].focus()
      if (!_this.contentText) {
        return
      }
      let params = {
        token: _this.token,
        username: _this.username,
        avatar: _this.avatar,
        msg: _this.contentText,
        count: _this.count
      }
      _this.ws.send(JSON.stringify(params))
      _this.contentText = ''
      setTimeout(() => {
        _this.scrollBottm()
      }, 500)
    },
    // 进入页面创建websocket连接
    initWebSocket() {
      let _this = this
      // 判断页面有没有存在websocket连接
      if (window.WebSocket) {
        var serverHot = window.location.hostname
        let sip = '1'
        // 填写本地IP地址 此处的 :9101端口号 要与后端配置的一致！
        var url = 'ws://' + serverHot + ':8209' + '/api/chat/' + sip + '/admin';
        let ws = new WebSocket(url)
        _this.ws = ws
        ws.onopen = function(e) {
          console.log('服务器连接成功: ' + url)
        }
        ws.onclose = function(e) {
          console.log('服务器连接关闭: ' + url)
        }
        ws.onerror = function() {
          console.log('服务器连接出错: ' + url)
        }
        ws.onmessage = function(e) {
          let resData = JSON.parse(e.data)
          _this.count = resData.count
          _this.list = [
            ..._this.list,
            { token: resData.token, username: resData.username, avatar: resData.avatar, content: resData.msg }
          ]
        }
      }
    },
    // 滚动条到底部
    scrollBottm() {
      let el = this.$refs['msg-box']
      el.scrollTop = el.scrollHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 700px;
}

.chat-box {
  margin: 0 auto;
  background: #fafafa;
  position: absolute;
  height: 95%;
  width: 100%;

  header {
    width: 100%;
    height: 3rem;
    background: #409eff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-size: 1rem;
  }

  .msg-box {
    position: absolute;
    height: calc(100% - 6.5rem);
    width: 100%;
    margin-top: 3rem;
    overflow-y: scroll;

    .msg {
      width: 95%;
      min-height: 2.5rem;
      margin: 1rem 0.5rem;
      position: relative;
      display: flex;
      justify-content: flex-start !important;

      .user-head {
        min-width: 2.5rem;
        width: 20%;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: #f1f1f1;
        display: flex;
        justify-content: center;
        align-items: center;

        .head {
          width: 1.2rem;
          height: 1.2rem;
        }

        // position: absolute;
      }

      .user-msg {
        width: 80%;
        // position: absolute;
        word-break: break-all;
        position: relative;
        z-index: 5;

        span {
          display: inline-block;
          padding: 0.5rem 0.7rem;
          border-radius: 0.5rem;
          margin-top: 0.2rem;
          font-size: 0.88rem;
        }

        .left {
          background: white;
          animation: toLeft 0.5s ease both 1;
        }

        .right {
          background: #53a8ff;
          color: white;
          animation: toright 0.5s ease both 1;
        }

        @keyframes toLeft {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
        @keyframes toright {
          0% {
            opacity: 0;
            transform: translateX(10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }
  }

  .input-box {
    padding: 0 0.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: #fafafa;
    box-shadow: 0 0 5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    input {
      height: 2.3rem;
      display: inline-block;
      width: 100%;
      padding: 0.5rem;
      border: none;
      border-radius: 0.2rem;
      font-size: 0.88rem;
    }

    .btn {
      height: 2.3rem;
      min-width: 4rem;
      background: #e0e0e0;
      padding: 0.5rem;
      font-size: 0.88rem;
      color: white;
      text-align: center;
      border-radius: 0.2rem;
      margin-left: 0.5rem;
      transition: 0.5s;
    }

    .btn-active {
      background: #409eff;
    }
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258

聊天记录

聊天记录和之前规划的一样采用mongodb,现在有一个问题

@Data
@Document("Msg")
public class MsgEntity extends BaseMongoEntity {

    @ApiModelProperty(value = "用户ID")
    private Long userId;

    @ApiModelProperty(value = "用户名")
    private String userName;
 
    @ApiModelProperty(value = "消息")
    private String msg;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这是我的里面的用户名需要调用user获取用户名但是如果没保存一次就需要去user调用一次未免也太过于消耗性能,于是这里我的构想是在保存的时候不给用户名,等到管理页面需要查看的时候再统一进行查询来实现一个延迟加载,后来我发现,我的前端可以获取userid,userName

@Service
public class WebSocketServiceImpl implements WebSocketService {

    @Autowired
    private PatientFeignClient patientFeignClient;

    @Autowired
    private MsgRepository msgRepository;

    @Override
    public UserInfo getUserInfo(Long id) {
        return patientFeignClient.getUserInfo(id);
    }

    @Override
    public void saveMsg(MsgEntity msgEntity) {
        msgEntity.setCreateTime(new Date());
        msgRepository.save(msgEntity);
    }

    @Override
    public Page<MsgEntity> selectPage(Integer page, Integer limit, String userName) {
        //创建Pageable对象
        Pageable pageable = PageRequest.of(page - 1, limit);
        //创建条件匹配器
        MsgEntity msgEntity = new MsgEntity();
        msgEntity.setUserName(userName);
        Example<MsgEntity> example = Example.of(msgEntity);
        return msgRepository.findAll(example, pageable);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

@Repository
public interface MsgRepository extends MongoRepository<MsgEntity,String> {
}
1
2
3

前端页面

<template>
  <div class="app-container">
    聊天记录
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="serchObj.userName" placeholder="用户名称"/>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
    </el-form>

    <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column prop="userName" label="用户名称"/>
      <el-table-column prop="msg" label="聊天内容" width="1000"/>
      <el-table-column prop="createTime" label="聊天时间"/>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"/>
  </div>
</template>

<script>
// 引入接口定义的js文件
import chatApi from '@/api/chat'

export default {
  data() {
    return {
      current: 1, // 当前页
      limit: 3, // 一个页显示的记录数
      serchObj: {}, // 条件封装对象
      list: [], // 每页数据集合
      total: 0,
      multipleSelection: [] // 批量选择中选择的记录列表
    }
  },

  methods: {

    handleSelectionChange(selection) {
      this.multipleSelection = selection
    },
    getList(page = 1) {
      this.current = page
      chatApi.chatList(this.current, this.limit, this.serchObj)
        .then((Response) => {
          this.list = Response.data.content
          this.total = Response.data.total
        }) //请求成功
        .catch((error) => {
          console.log(error)
        })
    }

  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

export default {

  chatList(page, limit, serchObj) {
    return request({
      url: `admin/chat/list/${page}/${limit}`,
      method: 'get',
      params: serchObj
    })
  }
}
1
2
3
4
5
6
7
8
9
10

项目的地址:https://github.com/xiaozhaotongzhide/YYGH