Skip to content

foreign / customer-service

Go to a project
Commit e997f302 by Sixong.Zhu
Options

icon

parent 55070bdd
Inline Side-by-side
Showing with 90 additions and 80 deletions
components/avatar.vue
<template> <template>
<el-avatar class="tm-avatar" :src="hasAvatar ? src : ''" :size="size" :shape="shape" :alt="alt" :fit="fit"> <el-avatar
<img class="tm-load-img" v-if="src" :src="src" @load="hasAvatar = true" /> 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> <slot>
<img src="../imgs/default-avatar.png" :style="`width:${size}px`" /> <img src="../imgs/default-avatar.png" :style="`width:${size}px`" />
</slot> </slot>
...@@ -8,60 +20,62 @@ ...@@ -8,60 +20,62 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue } from "vue-property-decorator";
@Component @Component
export default class Avatar extends Vue { export default class Avatar extends Vue {
@Prop({ @Prop()
type: String, private readonly src?: string;
})
private readonly src?: string;
@Prop({ @Prop({
type: [String, Number], type: [String, Number],
default: 30, default: 30,
validator: value => ["large", "medium", "small"].indexOf(value) >= 0 || typeof value === "number", validator: (value) =>
}) ["large", "medium", "small"].indexOf(value) >= 0 ||
private readonly size!: number | "large" | "medium" | "small"; typeof value === "number",
})
private readonly size!: number | "large" | "medium" | "small";
@Prop({ @Prop({
type: String, type: String,
default: "square", default: "square",
validator: value => ["circle", "square"].indexOf(value) >= 0, validator: (value) => ["circle", "square"].indexOf(value) >= 0,
}) })
private readonly shape!: "circle" | "square"; private readonly shape!: "circle" | "square";
@Prop(String) @Prop(String)
private readonly alt?: string; private readonly alt?: string;
@Prop({ @Prop({
type: String, type: String,
default: "cover", default: "cover",
validator: value => ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >= 0, validator: (value) =>
}) ["fill", "contain", "cover", "none", "scale-down"].indexOf(value) >=
private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down"; 0,
})
private readonly fit!: "fill" | "contain" | "cover" | "none" | "scale-down";
private hasAvatar = false; private hasAvatar = false;
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tm-avatar { .tm-avatar {
background: none; background: none;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
} }
.tm-avatar .tm-svg-icon { .tm-avatar .tm-svg-icon {
background: #d8d8d8; background: #d8d8d8;
} }
.tm-avatar .tm-load-img { .tm-avatar .tm-load-img {
display: none; display: none;
} }
.tm-avatar /deep/img { .tm-avatar /deep/img {
width: 100%; width: 100%;
} }
.default-avatar { .default-avatar {
display: inline-block; display: inline-block;
color: #333; color: #333;
} }
</style> </style>
components/message.vue
...@@ -9,11 +9,14 @@ ...@@ -9,11 +9,14 @@
> >
<div class="msg-content" :class="{ 'algin-left': !isMyMessage }"> <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
<div <div
class="msg-name no-selection" class="msg-name no-selection d-flex align-items-center"
:class="{ 'algin-left': !isMyMessage }" :class="{
'flex-row-reverse justify-content-end': !isMyMessage,
}"
v-if="!isWithdrawMessage" v-if="!isWithdrawMessage"
> >
{{ userName }} {{ userName }}
<avatar v-if="avatar" :src="avatar" shape="circle" />
</div> </div>
<component <component
...@@ -376,13 +379,7 @@ export default class Message extends Mixins(Filters) { ...@@ -376,13 +379,7 @@ export default class Message extends Mixins(Filters) {
position: relative; position: relative;
&.my-message { &.my-message {
.msg-avatar {
margin-right: 0;
margin-left: 10px;
}
.msg-detail { .msg-detail {
margin-top: 0;
background-color: #dbf2ff; background-color: #dbf2ff;
border-radius: 8px 0 8px 8px; border-radius: 8px 0 8px 8px;
...@@ -459,34 +456,22 @@ export default class Message extends Mixins(Filters) { ...@@ -459,34 +456,22 @@ export default class Message extends Mixins(Filters) {
} }
} }
.msg-avatar {
margin-right: 10px;
flex: 40px 0 0;
}
i.msg-avatar {
font-size: 30px;
background-color: #c0c4cc;
border-radius: 4px;
width: 40px;
height: 40px;
&:before {
position: relative;
left: 5px;
top: 5px;
color: #fff;
}
}
.msg-name { .msg-name {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
text-align: right; text-align: right;
margin-bottom: 3px; margin-bottom: 3px;
min-height: 16px; min-height: 16px;
&.algin-left {
text-align: left; .el-avatar {
margin-left: 10px;
}
&.flex-row-reverse {
.el-avatar {
margin-left: 0;
margin-right: 10px;
}
} }
} }
......
model/index.ts
...@@ -64,6 +64,11 @@ export interface ChatOption { ...@@ -64,6 +64,11 @@ export interface ChatOption {
serviceType?: ServiceType; serviceType?: ServiceType;
eventHub?: Vue; eventHub?: Vue;
/**
* 用户信息(头像，别名)可选
*/
user?: { icon?: string; username?: string };
} }
export interface ChatServiceLogger { export interface ChatServiceLogger {
......
xim/index.ts
...@@ -40,6 +40,12 @@ class Chat { ...@@ -40,6 +40,12 @@ class Chat {
option.serviceType && (this.serviceType = option.serviceType); option.serviceType && (this.serviceType = option.serviceType);
option.product && (this.product = option.product); option.product && (this.product = option.product);
this.eventHub = option.eventHub; this.eventHub = option.eventHub;
if (option.user) {
this.userMapping[this._sdk().global.uid] = {
name: option.user.username,
avatar: option.user.icon,
};
}
dbController.setup(this._sdk().global.uid); dbController.setup(this._sdk().global.uid);
...@@ -124,7 +130,7 @@ class Chat { ...@@ -124,7 +130,7 @@ class Chat {
} }
public getUserMapping() { public getUserMapping() {
return {} as any; return this.userMapping;
} }
private debug(message: string) { private debug(message: string) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment