头像

chat-list.vue

@@ -23,7 +23,7 @@
               class="chat-avatar pos-rel"
               :class="{ 'red-dot': item.unread_msg_count > 0 }"
             >
-              <fs-avatar
+              <avatar
                 shape="circle"
                 :size="36"
                 :src="item.customer_avatar_url"
@@ -72,11 +72,11 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
 import buttonThrottle from "../utils/button-throttle";
 
+import avatar from "@/customer-service/components/avatar.vue";
 import { chatStore, ChatStore } from "@/customer-service/store/model";
 // import { popupService } from "@/views/common-module/component/element-upgrades/fast-service-popup";
 import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
 import Chat from "@/customer-service/xim";
-
 export function parserMessage(type: string, rawMsg: string) {
   if (!type) return "";
   if (!rawMsg) return "";
@@ -93,7 +93,7 @@ export function parserMessage(type: string, rawMsg: string) {
 }
 type Chat = NonNullable<ChatStore.STATE_MY_CHAT_ROOM_LIST>["list"][number];
 
-@Component({ components: {} })
+@Component({ components: { avatar } })
 export default class ChatList extends Vue {
   @chatStore.Action(ChatStore.ACTION_GET_MY_CHAT_LIST)
   private readonly getMyChatList!: ChatStore.ACTION_GET_MY_CHAT_LIST;

chat-room.vue

@@ -22,7 +22,7 @@
     </div>
     <div v-if="membersPanelVisibility" class="chat-members">
       <div class="chat-member" v-for="item in chatMembers" :key="item.id">
-        <fs-avatar shape="circle" :src="item.avatar" :size="40" />
+        <avatar shape="circle" :src="item.avatar" :size="40" />
         <div class="member-name">
           {{ item.name || item.eid }}
         </div>
@@ -78,11 +78,11 @@ import {
   Component,
   Prop,
   Provide,
-  Ref,
   Vue,
   Watch,
 } from "vue-property-decorator";
 
+import avatar from "@/customer-service/components/avatar.vue";
 import MessageInput from "@/customer-service/message-input.vue";
 import messages from "@/customer-service/message-list.vue";
 // import CusomterInfo from "./customer-info.vue"
@@ -95,6 +95,7 @@ type RoomInfoTab = "customer" | "order";
   components: {
     MessageInput,
     messages,
+    avatar
     // CusomterInfo,
     // OrderInfo,
   },
@@ -144,7 +145,7 @@ export default class ChatRoom extends Vue {
   private get currentChat() {
     const chatId = this.currentChatUniplatId;
     if (this.myChatList == null) return;
-    let result = this.myChatList.list.find((k) => k.uniplatId === chatId);
+    const result = this.myChatList.list.find((k) => k.uniplatId === chatId);
     // if (result) return result;
     // result = this.allChatList.list.find((k) => k.uniplatId === chatId);
     return result ?? {};

components/avatar.vue

+<template>
+    <el-avatar class="tm-avatar" :src="hasAvatar ? src : ''" :size="size" :shape="shape" :alt="alt" :fit="fit">
+        <img class="tm-load-img" v-if="src" :src="src" @load="hasAvatar = true" />
+        <slot>
+            <img src="../imgs/default-avatar.png" :style="`width:${size}px`" />
+        </slot>
+    </el-avatar>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+
+    @Component
+    export default class Avatar extends Vue {
+        @Prop({
+            type: String,
+        })
+        private readonly src?: string;
+
+        @Prop({
+            type: [String, Number],
+            default: 30,
+            validator: value => ["large", "medium", "small"].indexOf(value) >= 0 || typeof value === "number",
+        })
+        private readonly size!: number | "large" | "medium" | "small";
+
+        @Prop({
+            type: String,
+            default: "square",
+            validator: value => ["circle", "square"].indexOf(value) >= 0,
+        })
+        private readonly shape!: "circle" | "square";
+
+        @Prop(String)
+        private readonly alt?: string;
+
+        @Prop({
+            type: String,
+            default: "cover",
+            validator: value => ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >= 0,
+        })
+        private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
+
+        private hasAvatar = false;
+    }
+</script>
+
+<style lang="scss" scoped>
+    .tm-avatar {
+        background: none;
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+    .tm-avatar .tm-svg-icon {
+        background: #d8d8d8;
+    }
+    .tm-avatar .tm-load-img {
+        display: none;
+    }
+    .tm-avatar /deep/img {
+        width: 100%;
+    }
+    .default-avatar {
+        display: inline-block;
+        color: #333;
+    }
+</style>

components/message.vue

@@ -8,7 +8,7 @@
     "
   >
     <span class="no-selection">
-      <fs-avatar :size="40" class="msg-avatar" :shape="shape" :src="avatar" />
+      <avatar :size="40" class="msg-avatar" :shape="shape" :src="avatar" />
     </span>
 
     <div class="msg-content">
@@ -152,10 +152,11 @@ import VideoPlayerIcon from "./video-player-icon.vue";
 import VoiceIcon from "./voice.vue";
 import WhoReadList from "./who-read-list.vue";
 
+import avatar from "@/customer-service/components/avatar.vue";
 import { chatStore, ChatStore } from "@/customer-service/store/model";
 
 @Component({
-  components: { FileIcon, VoiceIcon, WhoReadList, VideoPlayerIcon },
+  components: { FileIcon, VoiceIcon, WhoReadList, VideoPlayerIcon, avatar },
 })
 export default class Message extends Mixins(Filters) {
   @chatStore.State(ChatStore.STATE_CHAT_MY_ID)

components/who-read-list.vue

@@ -10,14 +10,14 @@
       <div class="list-left">
         <div class="number-count">已读 {{ readlist.length }}</div>
         <div class="member-item" v-for="item in readlist" :key="item.eid">
-          <fs-avatar class="member-avatar" :src="item.avatar" :size="30" />
+          <avatar class="member-avatar" :src="item.avatar" :size="30" />
           <span class="member-name">{{ item.name }}</span>
         </div>
       </div>
       <div class="list-right">
         <div class="number-count">未读 {{ unreadlist.length }}</div>
         <div class="member-item" v-for="item in unreadlist" :key="item.eid">
-          <fs-avatar class="member-avatar" :src="item.avatar" :size="30" />
+          <avatar class="member-avatar" :src="item.avatar" :size="30" />
           <span class="member-name">{{ item.name }}</span>
         </div>
       </div>
@@ -31,12 +31,17 @@ import { namespace } from "vuex-class";
 import * as dto from "../model";
 import { unique } from "../utils";
 
+import avatar from "@/customer-service/components/avatar.vue";
 import { ChatStore } from "@/customer-service/store/model";
 import chat from "@/customer-service/xim/index";
 import xim from "@/customer-service/xim/xim";
 
 const chatStoreNamespace = namespace("chatStore");
-@Component({ components: {} })
+@Component({
+ components: {
+  avatar
+}
+})
 export default class WhoReadList extends Vue {
   @chatStoreNamespace.State(ChatStore.STATE_CHAT_CURRENT_CHAT_ID)
   private readonly chatId!: ChatStore.STATE_CHAT_CURRENT_CHAT_ID;