xs-common-plugins 1.2.3 → 1.2.5

package/src/plugins/im/components/chat/index.vue

@@ -1,144 +1,144 @@
-<!--
- * @Author: your name
- * @Date: 2021-01-15 11:24:40
- * @LastEditTime: 2021-01-16 08:50:23
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \dev\src\plugins\im\components\chat\index.vue
--->
-<template>
-  <div class="rong-chat" id="rong-chat-id" :style="{ bottom: bottom + 'px' }">
-    <div id="rong-messages" ref="rongMessageWrapEl" :class="getFixClass">
-      <div id="rong-message-wrap-el" ref="rongMessageWrapMainEl">
-        <button
-          v-if="hasMore"
-          class="rong-messages-getbtn"
-          type="primary"
-          size="mini"
-          @click="getMoreMessages"
-        >
-          加载更多
-        </button>
-        <loading v-if="!isAllowScroll"></loading>
-        <withoutmessage
-          v-if="!hasMore"
-          id="message-notify-without"
-        ></withoutmessage>
-        <div
-          v-for="(message, i) in messageList"
-          v-if="message.messageType != 'RC:ReadNtf'"
-          :key="message.uId"
-          :id="'U-' + message.uId"
-          class="rong-message uni-page-wrapper"
-        >
-          <p class="sentTime" v-if="i % 3 === 0">
-            {{ getTime(message.sentTime) }}
-          </p>
-          <div :class="['rong-message-avatar-' + message.direction]" v-if="message.name!=='XS:TextMsg'">
-            <!-- <div class="rong-message-name">{{ message.sender.name }}</div> -->
-            <img
-              v-if="message.direction !== 'sender' && message.content.userInfo && message.content.userInfo.avatarUrl"
-              class="rong-avatar rong-message-avatar"
-              :src="message.content.userInfo.avatarUrl"
-            />
-            <img
-              v-else
-              class="rong-avatar rong-message-avatar"
-              :src="
-                message.direction == 'sender'
-                  ? message.sender.avatar1
-                  : message.sender.avatar2
-              "
-            />
-          </div>
-          <div
-            :class="['rong-message-content rong-message-content-' + message.direction, ]"
-          >
-            <slot name="message" :message="message"></slot>
-          </div>
-          <TemplateMessage
-            v-if="message.name == 'XS:TextMsg'"
-            :message="message"
-          />
-          <div class="rong-clearfix"></div>
-        </div>
-      </div>
-    </div>
-    <!-- 顶部插槽 -->
-    <div class="fixed-top">
-      <slot name="slot-top" :list="messageList" />
-    </div>
-    <!-- 底部插槽 -->
-    <div class="fixed-bottom">
-      <slot name="slot-bottom"></slot>
-    </div>
-    <!-- 发送消息 -->
-    <send-msg
-      @sendMsgEvent="sendMsgEvent"
-      :targetId="targetId"
-      :type="type"
-      :targetName="targetName"
-      :userName="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.userName : ''"
-      :avatarUrl="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.avatarUrl : ''"
-      :chatObj="chatObj"
-    >
-      <div slot="slot-tool">
-        <slot name="slot-tool"></slot>
-      </div>
-    </send-msg>
-  </div>
-</template>
-<script>
-import loading from "../loading/loading.vue";
-import withoutmessage from "../without.vue";
-import SendMsg from "../send-msg/index.vue";
-import methods from "./methods";
-import TemplateMessage from "../template-message/index.vue"
-export default {
-  name: "chatCom",
-  data() {
-    return {
-      messageList: [],
-      bottom: 0,
-      adapterHeight: 0,
-      isShowEmojiSent: false,
-      hasMore: true,
-      todiv: "",
-      isAllowScroll: true,
-      isScrollTop: false,
-      isCurrent: false,
-    };
-  },
-  components: { 
-    withoutmessage, 
-    loading, 
-    SendMsg, 
-    TemplateMessage 
-  },
-  props: {
-    targetId: [String, Number],
-    type: [String, Number],
-    targetName: [String, Number],
-    chatObj: [Object],
-  },
-  methods,
-  computed: {
-    getFixClass () {
-      const goodsList = this.messageList.filter(item => item.content && item.content.OutGoodsId)
-      return goodsList.length > 0 ? 'fixedWhite' : '';
-    }
-  },
-  mounted() {
-    const timer = setInterval(() => {
-      if (this.targetId) {
-        clearInterval(timer);
-        this.onloadEvent();
-      }
-    }, 100);
-  },
-  beforeDestroy() {
-    this.isCurrent = false;
-  }
-};
-</script>
-<style lang="scss" src='./index.scss'></style>
+<!--
+ * @Author: your name
+ * @Date: 2021-01-15 11:24:40
+ * @LastEditTime: 2021-01-16 08:50:23
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \dev\src\plugins\im\components\chat\index.vue
+-->
+<template>
+  <div class="rong-chat" id="rong-chat-id" :style="{ bottom: bottom + 'px' }">
+    <div id="rong-messages" ref="rongMessageWrapEl" :class="getFixClass">
+      <div id="rong-message-wrap-el" ref="rongMessageWrapMainEl">
+        <button
+          v-if="hasMore"
+          class="rong-messages-getbtn"
+          type="primary"
+          size="mini"
+          @click="getMoreMessages"
+        >
+          加载更多
+        </button>
+        <loading v-if="!isAllowScroll"></loading>
+        <withoutmessage
+          v-if="!hasMore"
+          id="message-notify-without"
+        ></withoutmessage>
+        <div
+          v-for="(message, i) in messageList"
+          v-if="message.messageType != 'RC:ReadNtf'"
+          :key="message.uId"
+          :id="'U-' + message.uId"
+          class="rong-message uni-page-wrapper"
+        >
+          <p class="sentTime" v-if="i % 3 === 0">
+            {{ getTime(message.sentTime) }}
+          </p>
+          <div :class="['rong-message-avatar-' + message.direction]" v-if="message.name!=='XS:TextMsg'">
+            <!-- <div class="rong-message-name">{{ message.sender.name }}</div> -->
+            <img
+              v-if="message.direction !== 'sender' && message.content.userInfo && message.content.userInfo.avatarUrl"
+              class="rong-avatar rong-message-avatar"
+              :src="message.content.userInfo.avatarUrl"
+            />
+            <img
+              v-else
+              class="rong-avatar rong-message-avatar"
+              :src="
+                message.direction == 'sender'
+                  ? message.sender.avatar1
+                  : message.sender.avatar2
+              "
+            />
+          </div>
+          <div
+            :class="['rong-message-content rong-message-content-' + message.direction, ]"
+          >
+            <slot name="message" :message="message"></slot>
+          </div>
+          <TemplateMessage
+            v-if="message.name == 'XS:TextMsg'"
+            :message="message"
+          />
+          <div class="rong-clearfix"></div>
+        </div>
+      </div>
+    </div>
+    <!-- 顶部插槽 -->
+    <div class="fixed-top">
+      <slot name="slot-top" :list="messageList" />
+    </div>
+    <!-- 底部插槽 -->
+    <div class="fixed-bottom">
+      <slot name="slot-bottom"></slot>
+    </div>
+    <!-- 发送消息 -->
+    <send-msg
+      @sendMsgEvent="sendMsgEvent"
+      :targetId="targetId"
+      :type="type"
+      :targetName="targetName"
+      :userName="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.userName : ''"
+      :avatarUrl="chatObj.latestMessage.content.userInfo ? chatObj.latestMessage.content.userInfo.avatarUrl : ''"
+      :chatObj="chatObj"
+    >
+      <div slot="slot-tool">
+        <slot name="slot-tool"></slot>
+      </div>
+    </send-msg>
+  </div>
+</template>
+<script>
+import loading from "../loading/loading.vue";
+import withoutmessage from "../without.vue";
+import SendMsg from "../send-msg/index.vue";
+import methods from "./methods";
+import TemplateMessage from "../template-message/index.vue"
+export default {
+  name: "chatCom",
+  data() {
+    return {
+      messageList: [],
+      bottom: 0,
+      adapterHeight: 0,
+      isShowEmojiSent: false,
+      hasMore: true,
+      todiv: "",
+      isAllowScroll: true,
+      isScrollTop: false,
+      isCurrent: false,
+    };
+  },
+  components: { 
+    withoutmessage, 
+    loading, 
+    SendMsg, 
+    TemplateMessage 
+  },
+  props: {
+    targetId: [String, Number],
+    type: [String, Number],
+    targetName: [String, Number],
+    chatObj: [Object],
+  },
+  methods,
+  computed: {
+    getFixClass () {
+      const goodsList = this.messageList.filter(item => item.content && item.content.OutGoodsId)
+      return goodsList.length > 0 ? 'fixedWhite' : '';
+    }
+  },
+  mounted() {
+    const timer = setInterval(() => {
+      if (this.targetId) {
+        clearInterval(timer);
+        this.onloadEvent();
+      }
+    }, 100);
+  },
+  beforeDestroy() {
+    this.isCurrent = false;
+  }
+};
+</script>
+<style lang="scss" src='./index.scss'></style>

package/src/plugins/im/components/chat/methods.js

@@ -1,150 +1,150 @@
-
-const utils = require('../../utils/utils.js');
-const { adapterHeight } = 0
-
-export default {
-    onloadEvent(context) {
-        this.adapterHeight = adapterHeight
-        let type = this.type
-        let targetId = this.targetId
-        let keyboardHeight = 0;
-        this.setKeyboardPos(context, keyboardHeight, adapterHeight)
-        this.isCurrent = true
-
-
-        let position = 0;
-        let count = 8;
-        this.getMessageList(context, { type, targetId, position, count });
-
-        this.$Service.Message.watch((message) => {
-            if (message.isOffLineMessage) {
-                return;
-            }
-            if (message.type == type && message.targetId === targetId && this.isCurrent) {
-                setTimeout(() => {
-                    this.messageList.push(message)
-                    this.scrollTopEvent()
-                }, 500)
-                this.toView = message.uId
-                this.$Service.Conversation.clearUnreadCount({
-                    type, targetId
-                });
-            }
-        });
-    },
-
-    setKeyboardPos(context, keyboardHeight, adapterHeight) {
-        keyboardHeight = keyboardHeight || 0;
-        let isScroll = (keyboardHeight > 0);
-        if (isScroll) {
-            this.bottom = adapterHeight + keyboardHeight
-            this.isShowEmojiSent = false
-            this.toView = this.getToView(context)
-        } else {
-            this.bottom = adapterHeight + keyboardHeight
-            this.isShowEmojiSent = false
-        }
-    },
-    getToView() {
-        let index = this.messageList.length - 1;
-        let message = this.messageList[index] || {};
-        return message.uId || '';
-    },
-    // 获取历史消息
-    getMessageList(context, params) {
-        let { position } = params;
-        let event = params.type == 4 ? this.$Service.Message.getChatRoomMessageList : this.$Service.Message.getList;
-        return event(params).then((result) => {
-            let messages = result.messageList;
-            let hasMore = result.hasMore;
-            this.hasMore = hasMore
-            let messageList = messages.concat(this.messageList).filter(item => item.messageType !== 'RC:ReadNtf'); // 过滤 已读标识消息
-            console.log('messageList', messageList)
-
-            let toView = '';
-            if (params.position == 0) {
-                let index = messageList.length - 1;
-                let message = messageList[index] || {};
-                toView = message.uId || '';
-            }
-            let isFirst = (position == 0);
-            if (!this.hasMore && !isFirst) {
-                // 灰条提示
-                toView = 'message-notify-without';
-                this.hasMore = hasMore
-            }
-            if (isFirst) {
-                this.isAllowScroll = true
-                this.messageList = messageList
-                this.toView = toView
-            } else {
-                this.isAllowScroll = true
-                this.messageList = messageList
-            }
-            if (!this.isScrollTop) {
-                this.scrollTopEvent()
-            }
-        })
-    },
-    // 查看更多
-    getMoreMessages(context) {
-        this.isScrollTop = true
-        let messageList = this.messageList || [];
-        let firstMessage = messageList[0] || {};
-        let position = firstMessage.sentTime || 0;
-        let count = 5;
-        if (this.hasMore) {
-            this.isAllowScroll = false
-            this.getMessageList(context, { type: this.type, targetId: this.targetId, position, count });
-        }
-    },
-    // 发送消息
-    sendMsgEvent(message) {
-        this.messageList.push(message)
-        this.scrollTopEvent()
-        this.toView = message.uId
-    },
-    // 滚动到页面底部
-    scrollTopEvent() {
-        if (this.$refs.rongMessageWrapMainEl) {
-            this.$refs.rongMessageWrapEl.scrollTop = this.$refs.rongMessageWrapMainEl.scrollHeight;
-        }
-    },
-    getTime: function (time) {
-        var today = new Date(utils.dateFormat(new Date(), 'yyyy/MM/dd'));
-        var thisTime = today.getTime();
-        if (thisTime - time < 0) {
-            return utils.dateFormat(new Date(time), 'hh:mm');
-        } else if (thisTime - time < 24 * 60 * 60 * 1000) {
-            return '昨天 ' + utils.dateFormat(new Date(time), 'hh:mm');
-        } else if (thisTime - time < 6 * 24 * 60 * 60 * 1000) {
-            var week = new Date(time).getDay();
-            switch (week) {
-                case 0:
-                    week = '星期日';
-                    break;
-                case 1:
-                    week = '星期一';
-                    break;
-                case 2:
-                    week = '星期二';
-                    break;
-                case 3:
-                    week = '星期三';
-                    break;
-                case 4:
-                    week = '星期四';
-                    break;
-                case 5:
-                    week = '星期五';
-                    break;
-                case 6:
-                    week = '星期六';
-                    break;
-            }
-            return week + ' ' + utils.dateFormat(new Date(time), 'hh:mm');
-        } else {
-            return utils.dateFormat(new Date(time), 'yy/MM/dd hh:mm');
-        }
-    },
+
+const utils = require('../../utils/utils.js');
+const { adapterHeight } = 0
+
+export default {
+    onloadEvent(context) {
+        this.adapterHeight = adapterHeight
+        let type = this.type
+        let targetId = this.targetId
+        let keyboardHeight = 0;
+        this.setKeyboardPos(context, keyboardHeight, adapterHeight)
+        this.isCurrent = true
+
+
+        let position = 0;
+        let count = 8;
+        this.getMessageList(context, { type, targetId, position, count });
+
+        this.$Service.Message.watch((message) => {
+            if (message.isOffLineMessage) {
+                return;
+            }
+            if (message.type == type && message.targetId === targetId && this.isCurrent) {
+                setTimeout(() => {
+                    this.messageList.push(message)
+                    this.scrollTopEvent()
+                }, 500)
+                this.toView = message.uId
+                this.$Service.Conversation.clearUnreadCount({
+                    type, targetId
+                });
+            }
+        });
+    },
+
+    setKeyboardPos(context, keyboardHeight, adapterHeight) {
+        keyboardHeight = keyboardHeight || 0;
+        let isScroll = (keyboardHeight > 0);
+        if (isScroll) {
+            this.bottom = adapterHeight + keyboardHeight
+            this.isShowEmojiSent = false
+            this.toView = this.getToView(context)
+        } else {
+            this.bottom = adapterHeight + keyboardHeight
+            this.isShowEmojiSent = false
+        }
+    },
+    getToView() {
+        let index = this.messageList.length - 1;
+        let message = this.messageList[index] || {};
+        return message.uId || '';
+    },
+    // 获取历史消息
+    getMessageList(context, params) {
+        let { position } = params;
+        let event = params.type == 4 ? this.$Service.Message.getChatRoomMessageList : this.$Service.Message.getList;
+        return event(params).then((result) => {
+            let messages = result.messageList;
+            let hasMore = result.hasMore;
+            this.hasMore = hasMore
+            let messageList = messages.concat(this.messageList).filter(item => item.messageType !== 'RC:ReadNtf'); // 过滤 已读标识消息
+            console.log('messageList', messageList)
+
+            let toView = '';
+            if (params.position == 0) {
+                let index = messageList.length - 1;
+                let message = messageList[index] || {};
+                toView = message.uId || '';
+            }
+            let isFirst = (position == 0);
+            if (!this.hasMore && !isFirst) {
+                // 灰条提示
+                toView = 'message-notify-without';
+                this.hasMore = hasMore
+            }
+            if (isFirst) {
+                this.isAllowScroll = true
+                this.messageList = messageList
+                this.toView = toView
+            } else {
+                this.isAllowScroll = true
+                this.messageList = messageList
+            }
+            if (!this.isScrollTop) {
+                this.scrollTopEvent()
+            }
+        })
+    },
+    // 查看更多
+    getMoreMessages(context) {
+        this.isScrollTop = true
+        let messageList = this.messageList || [];
+        let firstMessage = messageList[0] || {};
+        let position = firstMessage.sentTime || 0;
+        let count = 5;
+        if (this.hasMore) {
+            this.isAllowScroll = false
+            this.getMessageList(context, { type: this.type, targetId: this.targetId, position, count });
+        }
+    },
+    // 发送消息
+    sendMsgEvent(message) {
+        this.messageList.push(message)
+        this.scrollTopEvent()
+        this.toView = message.uId
+    },
+    // 滚动到页面底部
+    scrollTopEvent() {
+        if (this.$refs.rongMessageWrapMainEl) {
+            this.$refs.rongMessageWrapEl.scrollTop = this.$refs.rongMessageWrapMainEl.scrollHeight;
+        }
+    },
+    getTime: function (time) {
+        var today = new Date(utils.dateFormat(new Date(), 'yyyy/MM/dd'));
+        var thisTime = today.getTime();
+        if (thisTime - time < 0) {
+            return utils.dateFormat(new Date(time), 'hh:mm');
+        } else if (thisTime - time < 24 * 60 * 60 * 1000) {
+            return '昨天 ' + utils.dateFormat(new Date(time), 'hh:mm');
+        } else if (thisTime - time < 6 * 24 * 60 * 60 * 1000) {
+            var week = new Date(time).getDay();
+            switch (week) {
+                case 0:
+                    week = '星期日';
+                    break;
+                case 1:
+                    week = '星期一';
+                    break;
+                case 2:
+                    week = '星期二';
+                    break;
+                case 3:
+                    week = '星期三';
+                    break;
+                case 4:
+                    week = '星期四';
+                    break;
+                case 5:
+                    week = '星期五';
+                    break;
+                case 6:
+                    week = '星期六';
+                    break;
+            }
+            return week + ' ' + utils.dateFormat(new Date(time), 'hh:mm');
+        } else {
+            return utils.dateFormat(new Date(time), 'yy/MM/dd hh:mm');
+        }
+    },
 }