人工客服

src/api/service.js

@@ -1,7 +1,14 @@
 import request from '@/utils/request';
 
+// 获取和某个好友的聊天记录
+export function getChatRecords(params) {
+  return request({
+    url: '/chat/getChatRecords',
+    params
+  });
+}
 // 给某人发送信息
-export function send(data) {
+export function sendMsg(data) {
   return request({
     url: '/chat/send',
     method: 'post',

src/views/customerService.vue

@@ -9,7 +9,7 @@
         <!-- 聊天区域 -->
         <div class="chatBox">
           <!-- 聊天窗 -->
-          <div class="chatWindow" id="chatWindow">
+          <div class="chatWindow" id="chatWindow" @scroll="scroll">
             <div class="loading" v-if="isLoading">
               <img
                 class="loadingImg"
@@ -22,55 +22,22 @@
               v-for="(item, index) in chats"
               :key="index"
             >
-              <div
+              <div class="chatBubbleTime" v-if="item.msgTime">
-                class="chatBubbleTime"
+                <span>{{ item.msgTime }}</span>
-                v-if="item.send_timestamp && item.time_show"
-              >
-                <span>{{ item.show_time }}</span>
               </div>
               <div
                 class="chatBubble"
-                :class="{ chatBubbleUser: item.sender != 0 }"
+                :class="{ chatBubbleUser: item.type != 'rightinfo' }"
               >
-                <div name="亮亮" class="avatar" v-if="item.sender == 0"></div>
+                <div class="avatar" v-if="item.type == 'rightinfo'"></div>
                 <div class="msgBox">
-                  <div class="bubbleBox" v-if="item.sender == 1">
+                  <!-- 这是自己 -->
-                    <p>{{ item.send_con }}</p>
+                  <div class="bubbleBox" v-if="item.type == 'leftinfo'">
+                    <p>{{ item.sendText }}</p>
                   </div>
-                  <div
+                  <!-- 这是客服 -->
-                    class="bubbleBox"
+                  <div class="bubbleBox" v-else-if="item.type == 'rightinfo'">
-                    v-else-if="item.sender == 0 && item.send_con[0].msgInfo"
+                    <p>{{ item.sendText }}</p>
-                  >
-                    <p
-                      v-for="(item_msg, index_msg) in item.send_con"
-                      :key="index_msg"
-                    >
-                      {{ item_msg.msgInfo }}
-                    </p>
-                  </div>
-                  <div class="bubbleBox" v-else-if="item.sender == 0">
-                    <p>{{ item.send_con }}</p>
-                  </div>
-                  <div
-                    class="bubbleBox listBox"
-                    v-if="item.sender == 0 && item.list"
-                  >
-                    <div
-                      class="bubbleList"
-                      v-for="(item_list, index_list) in item.list"
-                      :key="index_list"
-                      @click="goDetail(item_list)"
-                    >
-                      <div class="listTitle">
-                        {{
-                          item_list.title ||
-                            item_list.lawTitle ||
-                            item_list.contractName ||
-                            item_list.caseTitle
-                        }}
-                      </div>
-                      <img src="@/assets/logo/logo.png" alt="查看详情" />
-                    </div>
                   </div>
                 </div>
               </div>
@@ -93,53 +60,32 @@
 </template>
 
 <script>
-import { send } from '@/api/service';
+import { getChatRecords, sendMsg } from '@/api/service';
 export default {
   data() {
     return {
       path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
       socket: '',
-      userid: '23941',
+      numTop: 0,
+      queryParams: {
+        userId: '1385154178159804416',
+        pageNum: 1,
+        pageSize: 10,
+      },
+      msgTotal: 0,
       // 待发送信息
       message: '',
-      isEnter: false, //是否处于停止回车
+      // 聊天记录
-      // 聊天记录(假设)
+      chats: [],
-      chats: [
+      isLoading: 0, //是否正在加载中，0否1是
-        {
-          sender: 0, //发送人，0机器人 1用户
-          send_con: '你好，我是嘉策人工客服，有问题请咨询我!',
-          send_timestamp: '1607731220000' //发送时间,存时间戳好进行判断，若聊天间隔3分钟内，不重复显示时间
-        }
-      ],
-      // 答复详情
-      replyDetail: {},
-      isLoading: 0 //是否正在加载中，0否1是
     };
   },
-  created() {
+  created() {},
-    // localStorage.removeItem("chatsHistory");
-    this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
-    if (!this.chats) {
-      var chat = [
-        {
-          sender: 0, //发送人，0机器人1用户
-          send_con: '你好，我是嘉策人工客服，有问题请咨询我!'
-        }
-      ];
-      chat[0].send_timestamp = this.getTime();
-      localStorage.setItem('chatsHistory', JSON.stringify(chat));
-      this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
-      this.getIsShowTime();
-    } else {
-      this.getIsShowTime();
-    }
-  },
   mounted() {
-    this.chatWindowActive();
     this.init();
   },
   methods: {
-    init: function() {
+    init: function () {
       if (typeof WebSocket === 'undefined') {
         alert('您的浏览器不支持socket');
       } else {
@@ -154,22 +100,59 @@ export default {
         this.socket.onmessage = this.getMessage;
       }
     },
-    open: function() {
+    open() {
       console.log('socket连接成功');
+      this.getMsgList();
     },
-    error: function() {
+    error: function () {
-      console.log('连接错误');
+      if (!this.$store.state.user.userId) {
+        this.msgError('请先登录');
+      } else {
+        this.msgError('连接错误');
+      }
     },
     getMessage(msg) {
       console.log(JSON.parse(msg.data));
-      this.a = JSON.parse(msg.data);
+      const msgInfo = JSON.parse(msg.data);
+      this.chats.push(msgInfo);
     },
-    send: function(params) {
+    send: function (params) {
       this.socket.send(params);
     },
-    close: function() {
+    close: function () {
       console.log('socket已经关闭');
     },
+    scroll(e) {
+      // console.log(e.srcElement.scrollTop);
+      this.numTop = e.srcElement.scrollTop;
+      if (e.srcElement.scrollTop == 0) {
+        if (
+          this.queryParams.pageNum * this.queryParams.pageSize >=
+          this.msgTotal
+        )
+          return this.msgInfo('已经到顶了');
+        this.queryParams.pageNum++;
+        this.getMsgList();
+      }
+    },
+    getMsgList() {
+      this.isLoading = 1;
+      getChatRecords(this.queryParams).then(({ data }) => {
+        data.list.map((item) => {
+          item.sendTime = new Date(item.sendTime).getTime();
+        });
+        // 时间戳排序
+        data.list.sort(function (a, b) {
+          return a.sendTime > b.sendTime ? 1 : -1;
+        });
+        this.chats = [...data.list, ...this.chats];
+        this.msgTotal = data.total;
+        this.isLoading = 0;
+        if (this.queryParams.pageNum == 1) {
+          this.chatWindowActive();
+        }
+      });
+    },
     // 原回车键失去回车功能
     stopEnter(event) {
       if (event.keyCode === 13) {
@@ -177,90 +160,34 @@ export default {
         return false;
       }
     },
-    // 获取当前时间戳
+    getTodayTime() {
-    getTime() {
+      // 获取当前时间
-      var now_timestamp = Date.parse(new Date());
+      var day = new Date();
-      return now_timestamp;
+      let seconds = day.getSeconds();
-    },
+      if (seconds < 10) {
-    // 获取是否展示时间的标志
+        seconds = '0' + seconds;
-    getIsShowTime() {
-      var now_timestamp = Date.parse(new Date());
-      var minute_timestamp = 3 * 60 * 1000; //3分钟
-      var day_timestamp = 24 * 60 * 60 * 1000; //1天
-      var week_timestamp = day_timestamp * 7; //7天
-
-      var i = 0;
-      for (var chat of this.chats) {
-        var howlong = now_timestamp - chat.send_timestamp;
-        var time = new Date(parseInt(chat.send_timestamp));
-        var hour = time.getHours().toString();
-        if (hour.length < 2) {
-          hour = '0' + hour;
-        }
-        var minute = time.getMinutes().toString();
-        if (minute.length < 2) {
-          minute = '0' + minute;
-        }
-        // 展示时间格式
-        if (howlong > week_timestamp) {
-          //距今7天以上，显示日期
-          var year = time.getFullYear().toString();
-          var month = (time.getMonth() + 1).toString();
-          if (month.length < 2) {
-            month = '0' + month;
-          }
-          var day = time.getDate().toString();
-          if (day.length < 2) {
-            day = '0' + day;
-          }
-          chat.show_time =
-            year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
-        } else if (howlong > day_timestamp) {
-          // 距今7天以内超过1天，显示星期
-          var weekdays = [
-            '星期天',
-            '星期一',
-            '星期二',
-            '星期三',
-            '星期四',
-            '星期五',
-            '星期六'
-          ];
-          var weekday = time.getDay().toString();
-          chat.show_time = weekdays[weekday] + ' ' + hour + ':' + minute;
-        } else {
-          // 24小时内，显示今天
-          var day_now = new Date(parseInt(now_timestamp)).getDate();
-          var day_time = time.getDate();
-          if (day_now == day_time) {
-            chat.show_time = '今天 ' + hour + ':' + minute;
-          } else {
-            chat.show_time = '昨天 ' + hour + ':' + minute;
-          }
-        }
-        // 是否展示时间
-        this.chats[0].time_show = true;
-        if (i > 0) {
-          var interval = chat.send_timestamp - this.chats[i - 1].send_timestamp;
-          if (interval > minute_timestamp) {
-            chat.time_show = true;
-          } else {
-            chat.time_show = false;
-          }
-        }
-        i++;
-      }
-    },
-    // 查看详情
-    goDetail(item) {
-      if (item.contractName) {
-        //答复类型为“合同”
-        alert('程序员还在开发中...');
-        return;
       } else {
-        this.tool_show = -2;
+        seconds = seconds;
-        this.replyDetail = item;
       }
+      let minutes = day.getMinutes();
+      if (minutes < 10) {
+        minutes = '0' + minutes;
+      } else {
+        minutes = minutes;
+      }
+      let time =
+        day.getFullYear() +
+        '-' +
+        (day.getMonth() + 1) +
+        '-' +
+        day.getDate() +
+        ' ' +
+        day.getHours() +
+        ':' +
+        minutes +
+        ':' +
+        seconds;
+      return time;
     },
     // 聊天窗内容置底
     chatWindowActive() {
@@ -276,95 +203,28 @@ export default {
         return;
       }
       this.chats.push({
-        sender: 1,
+        type: 'leftinfo',
-        send_con: this.message,
+        sendText: this.message,
-        send_timestamp: this.getTime()
+        msgTime: this.getTodayTime(),
       });
-      this.getIsShowTime();
       this.chatWindowActive();
       let message = this.message;
       this.message = '';
       this.isLoading = 1; //加载中
-      send({ sendText: message, receiverUserId: '1385154178159804416' }).then(
+      sendMsg({
-        res => {
+        sendText: message,
-          console.log(res);
+        receiverUserId: '1385154178159804416',
-          var that = this;
+        type: 'leftinfo',
-          if (
+      }).then((res) => {
-            res.data.replayType == 'NEEDCONTRACTUSER' ||
+        console.log(res);
-            res.data.replayType == 'MSG' ||
+        this.isLoading = 0;
-            res.data.replayType == 'UNKNOWN'
+      });
-          ) {
-            setTimeout(function() {
-              that.chats.push({
-                sender: 0,
-                send_con: res.data.msgInfos,
-                send_timestamp: that.getTime(),
-                type: res.data.replayType
-              });
-              that.isLoading = 0;
-              that.getIsShowTime();
-              that.chatWindowActive();
-              that.updateHistory(that.chats.length);
-            }, 1000);
-          } else {
-            let all;
-            if (res.data.replayType == 'QA') {
-              //输入"你能做些什么"测试，右侧进入问答页面
-              all = res.data.replyQADatas;
-            } else if (res.data.replayType == 'CONTRACT') {
-              //输入"劳动合同"测试，跳转下载链接
-              all = res.data.replyContractDatas;
-            } else if (res.data.replayType == 'LAW') {
-              //输入"宪法"测试，右侧进入法律页面
-              all = res.data.replyLawDatas;
-            } else if (res.data.replayType == 'CASE') {
-              //输入"强奸案案例"测试，右侧进入案例页面
-              all = res.data.replyCaseDatas;
-            }
-            let list = [];
-            for (let i = 0; i < 5; i++) {
-              if (all[i]) {
-                list.push(all[i]);
-              }
-            }
-            setTimeout(function() {
-              that.chats.push({
-                sender: 0,
-                send_con: res.data.msgInfos,
-                send_timestamp: that.getTime(),
-                type: res.data.replayType,
-                list
-              });
-              that.isLoading = 0;
-              that.getIsShowTime();
-              that.chatWindowActive();
-              that.updateHistory(that.chats.length);
-            }, 1000);
-          }
-        }
-      );
     },
-    // 更新聊天记录
-    updateHistory(len) {
-      let chats = [];
-      for (let i = 1; i <= 20; i++) {
-        // unshift 将新项添加到数组起始位置
-        // 这里是倒着把this.chats的最近20条数据作为历史记录插入chats数组
-        if (this.chats[len - i]) {
-          chats.unshift(this.chats[len - i]);
-        }
-      }
-      localStorage.setItem('chatsHistory', JSON.stringify(chats));
-    },
-    // 获取工具
-    getTool(index) {
-      this.tool_show = index;
-    }
   },
   destroyed() {
     // 销毁监听
     this.socket.onclose = this.close;
-  }
+  },
 };
 </script>