下拉刷新、实时刷新等

src/main.js

@@ -13,6 +13,7 @@ import 'element-ui/lib/theme-chalk/index.css';
 import vViewer from 'v-viewer';
 import 'viewerjs/dist/viewer.css';
 import ClipboardJS from 'clipboard';
+// import '@/utils/directive';
 
 Vue.prototype.ClipboardJS = ClipboardJS;
 Vue.use(vViewer);

src/utils/directive.js

+import Vue from 'vue'
+
+Vue.directive('loadmore', {
+  bind (el, binding) {
+    // 获取element-ui定义好的scroll盒子
+    const SELECTWRAP_DOM = el.querySelector('.scroll-box')
+    console.log(SELECTWRAP_DOM);
+    let flag = true;
+    SELECTWRAP_DOM.addEventListener('scroll', function () {
+      console.log(this.scrollHeight, this.scrollTop, this.clientHeight);
+      const CONDITION = this.scrollTop <= 20;
+      if (CONDITION) {
+        if(flag) {
+          flag = false;
+          setTimeout( () => {
+            binding.value()
+            flag = true;
+          }, 200)
+        }
+      }
+    });
+  }
+})
\ No newline at end of file

src/views/IM/current-session/index.vue

@@ -50,7 +50,8 @@
           </div>
           <!-- <span class="close-btn">结束会话</span> -->
         </section>
-        <section class="msg-content" :style="{'height': (containerHeight - 35) + 'px'}">
+        <p class="refreshText"></p>
+        <section class="msg-content scroll-box" :style="{'height': (containerHeight - 35) + 'px'}">
           <article
             class="msg-item"
             :class="{'cr': item.sendOrReceive}"
@@ -97,7 +98,7 @@
               <el-upload
                 class="bg-uploader"
                 action="#"
-                accept=".jpg,.png,.pdf"
+                accept=".jpg, .png, .pdf"
                 :show-file-list="false"
                 :before-upload="beforeUploadFile"
               >
@@ -196,6 +197,8 @@ export default {
       currentTaskLogId: "", // 当前会话ID
       currentToAccId: "",
       picakfAccId: "",
+      historyTimestamp: 0,
+      realTimestamp: 0,
       doctorInfo: {
         name: "杨Song",
         mobilePhone: "138****7261",
@@ -212,12 +215,8 @@ export default {
       // 消息列表 showType 1: 文本; 2: 图片; 3: PDF; 4: 链接; 5: 不支持类型;
       messageList: [],
       rules: {
-        info: [
-          { required: true, message: "请输入链接文案", trigger: "blur" },
-        ],
-        url: [
-          { required: true, message: "请选择链接地址", trigger: "change" },
-        ],        
+        info: [{ required: true, message: "请输入链接文案", trigger: "blur" }],
+        url: [{ required: true, message: "请选择链接地址", trigger: "change" }]
       }
     };
   },
@@ -235,9 +234,73 @@ export default {
     this.getFiveContentList();
   },
 
-  mounted: function() {},
+  mounted: function() {
+    let _this = this;
+    (function(window) {
+      var _element = document.querySelector(".scroll-box"),
+        _refreshText = document.querySelector(".refreshText"),
+        _startPos = 0,
+        _transitionHeight = 0,
+        _isMousedown = false;
+
+      _element.addEventListener(
+        "mousedown",
+        function(e) {
+          var event = e || window.event;
+          _isMousedown = true;
+          console.log("##########", event);
+          console.log("初始位置：", event.pageX);
+          _startPos = event.pageX;
+
+          _element.style.position = "relative";
+          _element.style.transition = "transform 0s";
+        },
+        false
+      );
+
+      _element.addEventListener(
+        "mousemove",
+        function(e) {
+          if (!_isMousedown) return;
+          var event = e || window.event;
+          console.log("##########", event);
+          console.log("当前位置：", event.pageX);
+          _transitionHeight = event.pageX - _startPos;
+          if (_transitionHeight > 0 && _transitionHeight < 40) {
+            // _refreshText.innerText = "下拉刷新";
+            _refreshText.innerText = "";
+            _element.style.transform =
+              "translateY(" + _transitionHeight + "px)";
+            if (_transitionHeight > 20) {
+              // _refreshText.innerText = "释放更新";
+              _refreshText.innerText = "";
+            }
+          }
+        },
+        false
+      );
+
+      _element.addEventListener(
+        "mouseup",
+        function(e) {
+          _isMousedown = false;
+          _element.style.transition = "transform 0.5s ease 1s";
+          _element.style.transform = "translateY(0px)";
+          // _refreshText.innerText = "更新中";
+          _refreshText.innerText = "";
+          // todo...
+          _this.getOldMSGHistory();
+        },
+        false
+      );
+    })(window);
+  },
 
   methods: {
+    // 下拉刷新
+    loadmore() {
+      console.log("in loadmore...");
+    },
 
     // 查询医生和居民的消息历史(下拉刷新时调用)
     getOldMSGHistory() {
@@ -247,15 +310,16 @@ export default {
         includeFlag: 0, // 不带本条消息
         lastClientIdServer: session.lastMsgIdClient,
         lastMsgIdServer: session.lastMsgIdServer,
-        lastMsgTimestamp: session.lastMsgTime,
+        lastMsgTimestamp: this.historyTimestamp,
         limit: 20,
         patientAccId: this.picakfAccId,
         unionId: ""
       };
       this.POST("/im/msg/history", params).then(res => {
         if (res.code === "000000") {
+          console.log("res", res);
           // 将新消息合并到之前的消息中, 并且重置最后一条消息
-          // this.convertMessageList(res.data);
+          this.convertMessageList(res.data, 3);
         } else {
           this.$message({
             message: res.message,
@@ -279,7 +343,7 @@ export default {
       };
       this.POST("/im/msg/history", params).then(res => {
         if (res.code === "000000") {
-          this.convertMessageList(res.data);
+          this.convertMessageList(res.data, 1);
         } else {
           this.$message({
             message: res.message,
@@ -298,7 +362,7 @@ export default {
         includeFlag: 0,
         lastClientIdServer: session.lastMsgIdClient,
         lastMsgIdServer: session.lastMsgIdServer,
-        lastMsgTimestamp: session.lastMsgTime,
+        lastMsgTimestamp: this.realTimestamp,
         limit: 20,
         patientAccId: this.picakfAccId,
         unionId: ""
@@ -306,6 +370,7 @@ export default {
       this.POST("/im/msg/forward", params).then(res => {
         if (res.code === "000000") {
           this.convertMessageList(res.data, 2);
+          this.readAllMsg();
         } else {
           this.$message({
             message: res.message,
@@ -320,7 +385,7 @@ export default {
     // type == TEXT(showType:1)
     // type == image 或 picture(showType:2)
     // type == custom时，1 ~ 17: 不支持(showType:5); 18: PDF文件(showType:3); 19: 链接信息(showType:4);
-    // directFlag 1: 拼接历史消息(push); 2: 拼接实时消息(unshift)
+    // directFlag 1: 第一次取数据; 2: 拼接实时消息(unshift); 3: 拼接历史消息(push);
     convertMessageList(messageList, directFlag = 1) {
       messageList.sort((a, b) => {
         return a.timestamp - b.timestamp;
@@ -379,9 +444,25 @@ export default {
 
       if (directFlag === 1) {
         this.messageList = cMessageList;
-        // this.messageList.unshift(...cMessageList);
+      } else if (directFlag === 2) {
+        this.messageList.push(...cMessageList);
       } else {
-        // this.messageList.push(...cMessageList);
+        this.messageList.unshift(...cMessageList);
+      }
+
+      // 重新设置历史与实时的时间戳
+      if (this.messageList.length) {
+        this.historyTimestamp = this.messageList[0].timestamp;
+        this.realTimestamp = this.messageList[
+          this.messageList.length - 1
+        ].timestamp;
+      }
+
+      if(directFlag == 1) {
+        forwardMsgIntervalId && clearInterval(forwardMsgIntervalId);
+        forwardMsgIntervalId = setInterval(() => {
+          this.getMSGForward();
+        }, 10000);        
       }
       console.log("this.messageList", this.messageList);
     },
@@ -400,7 +481,7 @@ export default {
       this.getDoctorInfo(this.currentToAccId);
       // 调用全部已读
       if (session.unreadCount) {
-        this.readAllMsg(this.currentToAccId, this.picakfAccId);
+        this.readAllMsg();
       }
     },
 
@@ -433,22 +514,23 @@ export default {
             sessionList: [],
             waitingTaskCount: 0
           };
-          if (
-            !this.currentTaskLogId &&
-            this.sessionListData.sessionList.length
-          ) {
-            this.convertSessions(this.sessionListData.sessionList);
-            this.$forceUpdate();
+          let sLength = this.sessionListData.sessionList.length;
+          // 第一次进入页面
+          if (!this.currentTaskLogId) {
             this.currentSession = this.sessionListData.sessionList[0];
             this.currentSessionIndex = 0;
             this.currentTaskLogId = this.currentSession.id;
             this.currentToAccId = this.currentSession.toAccId;
+            // this.realTimestamp = this.sessionListData.sessionList[
+            //   sLength - 1
+            // ].lastMsgTime;
+          }
+          if (sLength) {
+            this.convertSessions(this.sessionListData.sessionList);
+            this.$forceUpdate();
             console.log("this.currentSession", this.currentSession);
             this.getMSGHistory(this.currentSession);
             this.getDoctorInfo(this.currentToAccId);
-            forwardMsgIntervalId = setInterval(() => {
-              this.getMSGForward();
-            }, 10000);
           }
         } else {
           this.$message({
@@ -525,7 +607,9 @@ export default {
     },
 
     // 设置全部消息已读
-    readAllMsg(fromAccount, toAccount) {
+    readAllMsg() {
+      let fromAccount = this.currentToAccId,
+      toAccount = this.picakfAccId;
       let params = {
         fromAccount,
         toAccount
@@ -582,7 +666,7 @@ export default {
     // 上传文件
     beforeUploadFile(file) {
       let vm = this;
-      console.log('file', file);
+      console.log("file", file);
       doUpload(
         vm,
         file,
@@ -599,7 +683,10 @@ export default {
         params.type = 2;
 
         // 如果是图片，则要获取其宽与高
-        if(params.fileExt.toLowerCase() === '.jpg' || params.fileExt.toLowerCase() === '.png') {
+        if (
+          params.fileExt.toLowerCase() === ".jpg" ||
+          params.fileExt.toLowerCase() === ".png"
+        ) {
           params.type = 1;
           let image = new Image();
           image.src = params.url;
@@ -627,22 +714,22 @@ export default {
 
     // 发送带链接消息
     sendLinkMsg() {
-      this.$refs['linkFormRef'].validate(valid => {
-        if(valid) {
+      this.$refs["linkFormRef"].validate(valid => {
+        if (valid) {
           let params = this.linkForm;
           params.url = getPhomeDemain() + `/template_v2/?id=${params.url}`;
           params.type = 3;
           this.sendCommonMsg(params);
           this.showSelectDialog = false;
         }
-      })
+      });
     },
 
     // 发送文本消息
     sendTextMsg() {
       if (!this.canSend) return;
       this.sendCommonMsg({ info: this.sendText });
-      this.sendText = '';
+      this.sendText = "";
     },
 
     // 发送通用消息
@@ -659,7 +746,7 @@ export default {
         remark: "", // 其他信息（链接中的前缀文案）
         type: 0, // 类型 0文本 1图片 2pdf 3链接
         url: "" // url地址（图片、pdf，链接）
-      }
+      };
       params = Object.assign(sendMsgParams, params);
       console.log("sendMsgParams", params);
       this.POST("/im/msg/sendMessage", params).then(res => {
@@ -674,7 +761,7 @@ export default {
           });
         }
       });
-    },    
+    }
   },
 
   beforeDestroy() {