cnhis-design-vue 2.1.29 → 2.1.30

package/packages/multi-chat/chat/scrollList.vue

@@ -47,7 +47,8 @@ export default {
       'clientParams',
       'serviceId',
       'msgList',
-      'queueItem'
+      'queueItem',
+      'sdkInfo'
     ]),
     foldTheme() {
       return this.theme === 'fold';
@@ -823,7 +824,10 @@ export default {
       // if (item.type == 2) {
       //   return item.toName;
       // }
-      const name = JSON.parse(item.params || {})?.name || "";
+      let name = ''
+      if (item.params) {
+        name = JSON.parse(item.params || {})?.name || "";
+      }
       return item.titleSetting || item.name || name;
     },
     formatTime(item) {
@@ -910,8 +914,10 @@ export default {
         value: handleInfiniteOnLoad
       }
     ];
+    const _this = this
+    // 默认不显示在线状态，只有南通瑞慈显示
     function getAvatar(item) {
-      return <Avatar className="avatar" src={item.portrait} name={item.name || item.toName || item.title || item.titleSetting} len={2} />;
+      return <Avatar className="avatar" src={item.portrait} name={item.name || item.toName || item.title || item.titleSetting} len={2} status={item.onlineStatus} isShowStatus={_this.currentTab === 'session' && _this.sdkInfo?.vendor == 3} />;
     }
     function getContent(item, filters, fold, classifyIcon) {
       const { formatName, formatCount } = filters;

package/packages/multi-chat/components/avatar.vue

@@ -25,6 +25,14 @@ export default {
     name: {
       type: String,
       default: ''
+    },
+    status: {
+      type: String,
+      default: ''
+    },
+    isShowStatus: {
+      type: Boolean,
+      default: false
     }
   },
   render(_h, { props }) {
@@ -32,45 +40,75 @@ export default {
     const size = props.size + 'px';
     const className = props.className;
     const customStyle = props.customStyle;
+    const isShowStatus = props.isShowStatus;
+    const onlineStatus = props.status === 'ON-LINE' ? 'online' : 'offline';
     let name = '';
     if (!src) {
       name = (props.name || '').slice(-1 * props.len);
     }
     return src ? (
-      <img class={['avatar-logo', className]} src={src} style={`width:${size};height:${size};${customStyle}`}></img>
+      <div class="avatar-wrap">
+        <img class={['avatar-logo', className]} src={src} style={`width:${size};height:${size};${customStyle}`}></img>
+        {isShowStatus ? <span class={['user-status', onlineStatus]}></span> : ''}
+      </div>
     ) : (
-      <div class={['avatar-logo', className]} style={`width:${size};${customStyle}`}>
-        <div class="avatar-logo-content" data-name={name}></div>
+      <div class="avatar-wrap">
+        <div class={['avatar-logo', className]} style={`width:${size};${customStyle}`}>
+          <div class="avatar-logo-content" data-name={name}></div>
+        </div>
+        {isShowStatus ? <span class={['user-status', onlineStatus]}></span> : ''}
       </div>
     );
   }
 };
 </script>
 <style lang="less" scoped>
-.avatar-logo {
-  width: 50px;
-  border-radius: 50%;
-  font-size: 18px;
-  line-height: 1;
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: middle;
-  &-content {
-    width: 100%;
-    padding-top: 100%;
-    height: 0;
-    text-align: center;
-    position: relative;
-    color: #fff;
-    background-color: #5585f5;
-    &::after {
-      content: attr(data-name);
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      white-space: nowrap;
+.avatar-wrap {
+  position: relative;
+  .user-status {
+    // display: inline-block;
+    display: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid #fff;
+    position: absolute;
+    background-color: #ccc;
+    right: 22px;
+    bottom: 2px;
+    &.online {
+      background-color: rgb(12, 198, 133);
+    }
+    &.offline {
+      background-color: rgb(217, 0, 27);
+    }
+  }
+  .avatar-logo {
+    width: 50px;
+    border-radius: 50%;
+    font-size: 18px;
+    line-height: 1;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    &-content {
+      width: 100%;
+      padding-top: 100%;
+      height: 0;
+      text-align: center;
+      position: relative;
+      color: #fff;
+      background-color: #5585f5;
+      &::after {
+        content: attr(data-name);
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        white-space: nowrap;
+      }
     }
   }
 }
+
 </style>