xs-common-plugins 1.2.4 → 1.2.6

package/src/plugins/im/components/conversation-list/index.css

@@ -1,92 +1,92 @@
-.rong-avatar {
-  height: 50px;
-  width: 50px;
-  border-radius: 50%;
-}
-.nodata {
-  text-align: center;
-}
-
-.conversation-wrapper {
-  width: 100%;
-  height: 100vh;
-}
-.rong-conversation {
-  width: 95%;
-  margin: 0 auto;
-  position: relative;
-  padding: 10px 0px 10px 0px;
-  border-bottom: 1px solid rgba(238, 238, 238, 1);
-  cursor: pointer;
-}
-
-.rong-conversation-messagecontent {
-  margin-top: 30px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 50%;
-  font-family: 'PingFang SC';
-  font-weight: 500;
-  color: #666666;
-  margin-left: 65px;
-  padding-bottom: 2px;
-}
-
-.rong-conversation-title {
-  color: #333;
-  position: relative;
-  top: 10px;
-  font-family: 'PingFang SC';
-  font-weight: bold;
-  color: #000000;
-}
-
-.rong-conversation-avatar {
-  float: left;
-  margin-right: 20px;
-  margin-top: 4px;
-}
-
-.rong-conversation-unreadcount {
-  position: absolute;
-  top: 5px;
-  left: 35px;
-  background-color: red;
-  border-radius: 50%;
-  color: #FFF;
-  height: 15px;
-  min-width: 15px;
-  text-align: center;
-  padding: 0 5px;
-  box-sizing: border-box;
-}
-
-.rong-conversation-senttime {
-  position: absolute;
-  top: 32px;
-  right: 20px;
-}
-
-.isTop {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  font-size: 12px;
-}
-
-.isTophover {
-  opacity: 0.9;
-  background: #f7f7f7;
-}
-
-.isDisturb {
-  position: absolute;
-  bottom: 0;
-  right: 50px;
-  border: 1px solid #ccc;
-  border-radius: 2px;
-  font-size: 12px;
+.rong-avatar {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+}
+.nodata {
+  text-align: center;
+}
+
+.conversation-wrapper {
+  width: 100%;
+  height: 100vh;
+}
+.rong-conversation {
+  width: 95%;
+  margin: 0 auto;
+  position: relative;
+  padding: 10px 0px 10px 0px;
+  border-bottom: 1px solid rgba(238, 238, 238, 1);
+  cursor: pointer;
+}
+
+.rong-conversation-messagecontent {
+  margin-top: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 50%;
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  color: #666666;
+  margin-left: 65px;
+  padding-bottom: 2px;
+}
+
+.rong-conversation-title {
+  color: #333;
+  position: relative;
+  top: 10px;
+  font-family: 'PingFang SC';
+  font-weight: bold;
+  color: #000000;
+}
+
+.rong-conversation-avatar {
+  float: left;
+  margin-right: 20px;
+  margin-top: 4px;
+}
+
+.rong-conversation-unreadcount {
+  position: absolute;
+  top: 5px;
+  left: 35px;
+  background-color: red;
+  border-radius: 50%;
+  color: #FFF;
+  height: 15px;
+  min-width: 15px;
+  text-align: center;
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.rong-conversation-senttime {
+  position: absolute;
+  top: 32px;
+  right: 20px;
+}
+
+.isTop {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  font-size: 12px;
+}
+
+.isTophover {
+  opacity: 0.9;
+  background: #f7f7f7;
+}
+
+.isDisturb {
+  position: absolute;
+  bottom: 0;
+  right: 50px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  font-size: 12px;
 }

package/src/plugins/im/components/conversation-list/index.json

@@ -1,4 +1,4 @@
-{
-  "component": true,
-  "usingComponents": {}
+{
+  "component": true,
+  "usingComponents": {}
 }

package/src/plugins/im/components/conversation-list/index.vue

@@ -1,90 +1,90 @@
-<!--
- * @Author: your name
- * @Date: 2021-01-15 11:24:40
- * @LastEditTime: 2021-01-22 10:09:50
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \dev\src\plugins\im\components\conversation-list\index.vue
--->
-<template>
-  <div class="conversation-wrapper">
-    <div
-      class="rong-conversation"
-      v-for="(conversation, i) in conversationList"
-      :key="i"
-      @click="chatroom(conversation)"
-    >
-      <img
-        v-if="conversation.avatarUrl"
-        class="rong-avatar rong-conversation-avatar"
-        :src="conversation.avatarUrl"
-      />
-      <img
-        v-else
-        class="rong-avatar rong-conversation-avatar"
-        :src="conversation.target.avatar"
-      />
-      <div
-        class="rong-conversation-title"
-        v-if="conversation.latestMessage.content.userInfo"
-      >
-        {{ conversation.latestMessage.content.userInfo  ? conversation.latestMessage.content.userInfo.userName : ''}}
-      </div>
-      <div
-        class="rong-conversation-title" v-else
-      >
-        {{ conversation.latestMessage.content.userName }}
-      </div>
-
-      <div class="rong-conversation-message">
-        <div class="rong-conversation-messagecontent">
-          {{ conversation.content }}
-        </div>
-      </div>
-      <div class="rong-conversation-senttime">{{ conversation._sentTime }}</div>
-      <div
-        v-if="conversation.unReadCount > 0"
-        class="rong-conversation-unreadcount"
-      >
-        {{ conversation.unReadCount }}
-      </div>
-    </div>
-    <p v-if="!conversationList.length" class="nodata">暂无数据</p>
-  </div>
-</template>
-<script>
-const utils = require("../../utils/utils.js");
-export default {
-  name: "ConversationList",
-  props: {},
-  data() {
-    return {};
-  },
-  props: {
-    conversationList: [Array],
-  },
-  mounted() {},
-  methods: {
-    // 进入聊天室
-    chatroom(item) {
-      let { type, targetId, target } = item;
-      let isSame = (conversation, another) => {
-        let isSaveType = conversation.type == another.type;
-        let isSaveTarget = conversation.targetId == another.targetId;
-        return isSaveType && isSaveTarget;
-      };
-      this.$emit("chatroom", item);
-      let _conversationList = this.conversationList;
-      utils.map(_conversationList, (conversation) => {
-        if (isSame(conversation, item)) {
-          conversation.unReadCount = 0;
-        }
-        return conversation;
-      });
-      this.$Service.Conversation.clearUnreadCount(item);
-      this.conversationList = _conversationList;
-    },
-  },
-};
-</script>
+<!--
+ * @Author: your name
+ * @Date: 2021-01-15 11:24:40
+ * @LastEditTime: 2021-01-22 10:09:50
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \dev\src\plugins\im\components\conversation-list\index.vue
+-->
+<template>
+  <div class="conversation-wrapper">
+    <div
+      class="rong-conversation"
+      v-for="(conversation, i) in conversationList"
+      :key="i"
+      @click="chatroom(conversation)"
+    >
+      <img
+        v-if="conversation.avatarUrl"
+        class="rong-avatar rong-conversation-avatar"
+        :src="conversation.avatarUrl"
+      />
+      <img
+        v-else
+        class="rong-avatar rong-conversation-avatar"
+        :src="conversation.target.avatar"
+      />
+      <div
+        class="rong-conversation-title"
+        v-if="conversation.latestMessage.content.userInfo"
+      >
+        {{ conversation.latestMessage.content.userInfo  ? conversation.latestMessage.content.userInfo.userName : ''}}
+      </div>
+      <div
+        class="rong-conversation-title" v-else
+      >
+        {{ conversation.latestMessage.content.userName }}
+      </div>
+
+      <div class="rong-conversation-message">
+        <div class="rong-conversation-messagecontent">
+          {{ conversation.content }}
+        </div>
+      </div>
+      <div class="rong-conversation-senttime">{{ conversation._sentTime }}</div>
+      <div
+        v-if="conversation.unReadCount > 0"
+        class="rong-conversation-unreadcount"
+      >
+        {{ conversation.unReadCount }}
+      </div>
+    </div>
+    <p v-if="!conversationList.length" class="nodata">暂无数据</p>
+  </div>
+</template>
+<script>
+const utils = require("../../utils/utils.js");
+export default {
+  name: "ConversationList",
+  props: {},
+  data() {
+    return {};
+  },
+  props: {
+    conversationList: [Array],
+  },
+  mounted() {},
+  methods: {
+    // 进入聊天室
+    chatroom(item) {
+      let { type, targetId, target } = item;
+      let isSame = (conversation, another) => {
+        let isSaveType = conversation.type == another.type;
+        let isSaveTarget = conversation.targetId == another.targetId;
+        return isSaveType && isSaveTarget;
+      };
+      this.$emit("chatroom", item);
+      let _conversationList = this.conversationList;
+      utils.map(_conversationList, (conversation) => {
+        if (isSame(conversation, item)) {
+          conversation.unReadCount = 0;
+        }
+        return conversation;
+      });
+      this.$Service.Conversation.clearUnreadCount(item);
+      this.conversationList = _conversationList;
+    },
+  },
+};
+</script>
 <style lang="css" scoped  src='./index.css'></style> 

package/src/plugins/im/components/loading/loading.css

@@ -1,70 +1,70 @@
-.rong-loading{
-  padding-top: 10px;
-}
-.rong-loading-process{
-    width: 40px;
-    height: 40px;
-    position: relative;
-    margin: 0 auto;
-}
-.rong-loading-process text{
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #767579;
-    position: absolute;
-    animation: load 1.04s ease infinite;
-}
-@keyframes load{
-    0%{
-        opacity: 1;
-    }
-    100%{
-        opacity: 0.2;
-    }
-}
-.rong-loading-process text:nth-child(1){
-    left: 3px;
-    top: 50%;
-    transform: translateY(-50%);
-    animation-delay:0.13s;
-}
- .rong-loading-process text:nth-child(2){
-    left: 6.5px;
-    top: 6.5px;
-    animation-delay:0.26s;
-} 
-.rong-loading-process text:nth-child(3){
-    left: 50%;
-    top: 1px;
-    transform: translateX(-50%);
-    animation-delay:0.39s;
-}
- .rong-loading-process text:nth-child(4){
-    top: 6.5px;
-    right:6.5px;
-    animation-delay:0.52s;
-} 
-.rong-loading-process text:nth-child(5){
-    right: 1px;
-    top: 50%;
-    transform: translateY(-50%);
-    animation-delay:0.65s;
-}
- .rong-loading-process text:nth-child(6){
-    right: 6.5px;
-    bottom:6.5px;
-    animation-delay:0.78s;
-} 
-.rong-loading-process text:nth-child(7){
-    bottom: 1px;
-    left: 50%;
-    transform: translateX(-50%);
-    animation-delay:0.91s;
-}
-.rong-loading-process text:nth-child(8){
-    bottom: 6.5px;
-    left: 6.5px;
-    animation-delay:1.04s;
+.rong-loading{
+  padding-top: 10px;
+}
+.rong-loading-process{
+    width: 40px;
+    height: 40px;
+    position: relative;
+    margin: 0 auto;
+}
+.rong-loading-process text{
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #767579;
+    position: absolute;
+    animation: load 1.04s ease infinite;
+}
+@keyframes load{
+    0%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0.2;
+    }
+}
+.rong-loading-process text:nth-child(1){
+    left: 3px;
+    top: 50%;
+    transform: translateY(-50%);
+    animation-delay:0.13s;
+}
+ .rong-loading-process text:nth-child(2){
+    left: 6.5px;
+    top: 6.5px;
+    animation-delay:0.26s;
+} 
+.rong-loading-process text:nth-child(3){
+    left: 50%;
+    top: 1px;
+    transform: translateX(-50%);
+    animation-delay:0.39s;
+}
+ .rong-loading-process text:nth-child(4){
+    top: 6.5px;
+    right:6.5px;
+    animation-delay:0.52s;
+} 
+.rong-loading-process text:nth-child(5){
+    right: 1px;
+    top: 50%;
+    transform: translateY(-50%);
+    animation-delay:0.65s;
+}
+ .rong-loading-process text:nth-child(6){
+    right: 6.5px;
+    bottom:6.5px;
+    animation-delay:0.78s;
+} 
+.rong-loading-process text:nth-child(7){
+    bottom: 1px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation-delay:0.91s;
+}
+.rong-loading-process text:nth-child(8){
+    bottom: 6.5px;
+    left: 6.5px;
+    animation-delay:1.04s;
 } 

package/src/plugins/im/components/loading/loading.json

@@ -1,4 +1,4 @@
-{
-  "component": true,
-  "usingComponents": {}
+{
+  "component": true,
+  "usingComponents": {}
 }

package/src/plugins/im/components/loading/loading.vue

@@ -1,15 +1,15 @@
-<template>
-  <div class="rong-loading">
-    <div class="rong-loading-process">
-      <text></text>
-      <text></text>
-      <text></text>
-      <text></text>
-      <text></text>
-      <text></text>
-      <text></text>
-      <text></text>
-    </div>
-  </div>
-</template>
+<template>
+  <div class="rong-loading">
+    <div class="rong-loading-process">
+      <text></text>
+      <text></text>
+      <text></text>
+      <text></text>
+      <text></text>
+      <text></text>
+      <text></text>
+      <text></text>
+    </div>
+  </div>
+</template>
 <style lang="css" src="./loading.css"></style>

package/src/plugins/im/components/msg-image/index.json

@@ -1,4 +1,4 @@
-{
-  "component": true,
-  "usingComponents": {}
+{
+  "component": true,
+  "usingComponents": {}
 }

package/src/plugins/im/components/msg-image/index.vue

@@ -1,41 +1,41 @@
-<template>
-  <el-image
-    class="rong-message-image"
-    :style="{
-      width: message.content.extra.width + 'px',
-      'max-width': '99%',
-    }"
-    :src="message.content.imageUri"
-    :preview-src-list="currentImageUrl"
-  ></el-image>
-</template>
-<script>
-const utils = require("../../utils/utils.js");
-export default {
-  name: "ImageMessage",
-  props: {
-    message: Object, //当前一条消息
-  },
-  data() {
-    return {
-      currentImageUrl: [],
-    };
-  },
-  mounted() {
-    this.currentImageUrl = [this.message.content.imageUri];
-  },
-  methods: {
-    // 图片预览
-    onPreviewImage() {
-      let currentImageUrl = this.message.content.imageUri;
-    },
-  },
-};
-</script>
-<style lang="css">
-.rong-message-image {
-  border-radius: 12px;
-  position: relative;
-  top: 3px;
-}
+<template>
+  <el-image
+    class="rong-message-image"
+    :style="{
+      width: message.content.extra.width + 'px',
+      'max-width': '99%',
+    }"
+    :src="message.content.imageUri"
+    :preview-src-list="currentImageUrl"
+  ></el-image>
+</template>
+<script>
+const utils = require("../../utils/utils.js");
+export default {
+  name: "ImageMessage",
+  props: {
+    message: Object, //当前一条消息
+  },
+  data() {
+    return {
+      currentImageUrl: [],
+    };
+  },
+  mounted() {
+    this.currentImageUrl = [this.message.content.imageUri];
+  },
+  methods: {
+    // 图片预览
+    onPreviewImage() {
+      let currentImageUrl = this.message.content.imageUri;
+    },
+  },
+};
+</script>
+<style lang="css">
+.rong-message-image {
+  border-radius: 12px;
+  position: relative;
+  top: 3px;
+}
 </style>

package/src/plugins/im/components/msg-text/index.json

@@ -1,4 +1,4 @@
-{
-  "component": true,
-  "usingComponents": {}
+{
+  "component": true,
+  "usingComponents": {}
 }