头像

7de792a3 · panjiangyi · 2b03cd77 · 7de792a3 · 7de792a3 · 7de792a3
Commit 7de792a3 authored Jul 13, 2021 by panjiangyi
Showing with 85 additions and 11 deletions
chat-list.vue
chat-room.vue
components/avatar.vue
components/message.vue
components/who-read-list.vue
--- a/chat-list.vue
+++ b/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;

--- a/chat-room.vue
+++ b/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 ?? {};

--- a/components/avatar.vue
+++ b/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>
--- a/components/message.vue
+++ b/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)

--- a/components/who-read-list.vue
+++ b/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;