Skip to content

foreign / customer-service

Go to a project
Commit e62c8593 by zhousil
Options

福利宝客服系统消息

parent 63d6ca1c
Inline Side-by-side
Showing with 115 additions and 18 deletions
components/message-item/purchase-plan-message.vue
...@@ -8,10 +8,31 @@ ...@@ -8,10 +8,31 @@
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
import Chat from "@/customer-service/xim/index";
@Component({ components: {} }) @Component({ components: {} })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private readonly emptyText = "　"; private readonly emptyText = "　";
mounted() {
if (Chat.isBackend()) {
this.backEndPlan();
}
}
private backEndPlan() {
const productTitleDom = document.getElementsByClassName(
"plan-welfare-title"
) as any;
if (productTitleDom) {
productTitleDom.forEach((item: HTMLElement) => {
item.onclick = (e: any) => {
window.open(
window.location.host +
`/统一业务平台.福利宝管理.采购管理/detail/w_plan/key/${e.target.id}`,
"_blank"
);
};
});
}
}
} }
</script> </script>
......
components/message-item/system-message.vue 0 → 100644
<template>
<div
class="msg-detail inline-text"
v-html="format2Link(messageBody.msg.text || emptyText)"
></div>
</template>
<script lang="ts">
import { replaceText2Link } from "@/customer-service/utils";
import xim from "@/customer-service/xim";
import { Component } from "vue-property-decorator";
import BaseMessage from "./index";
@Component({ components: {} })
export default class Index extends BaseMessage {
private readonly emptyText = "　";
private format2Link(text: string) {
let t = replaceText2Link(text);
const keywords = xim.getMatchedTextKeywords();
for (const item of keywords) {
const r = new RegExp(item, "g");
t = t.replace(r, `<span class="highlight">${item}</span>`);
}
return t;
}
}
</script>
<style lang="less" scoped>
.content-chat .chat-room-con .message-template .my-message.msg-detail{
background: #f5f5f5 !important;
&::after{
border: 0;
}
}
.inline-text {
display: inline-block;
white-space: pre-wrap;
text-align: left;
}
</style>
\ No newline at end of file
components/message.vue
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
'my-message flex-row-reverse': isMyMessage, 'my-message flex-row-reverse': isMyMessage,
'justify-content-center': isWithdrawMessage, 'justify-content-center': isWithdrawMessage,
'offset-bottom': matchKeywords, 'offset-bottom': matchKeywords,
'system-message': isSystemMessage,
}" }"
> >
<div class="msg-content" :class="{ 'algin-left': !isMyMessage }"> <div class="msg-content" :class="{ 'algin-left': !isMyMessage }">
...@@ -13,23 +14,23 @@ ...@@ -13,23 +14,23 @@
:class="{ 'algin-left': !isMyMessage }" :class="{ 'algin-left': !isMyMessage }"
v-if="!isWithdrawMessage" v-if="!isWithdrawMessage"
> >
{{ userName }} {{ isSystemMessage ? "系统消息" : userName }}
</div> </div>
<div <div
class="content-avatar d-flex align-items-start" class="content-avatar d-flex align-items-start"
:class="{ 'justify-content-end': isMyMessage }" :class="{ 'justify-content-end': isMyMessage,'cs-flex-direction': chatRole!=='default' }"
> >
<img <!-- <img
src="../imgs/default-host-avatar.svg" src="../imgs/default-host-avatar.svg"
style="width: 42px" style="width: 42px"
v-if=" v-if="
!avatar &&
messageComponent && messageComponent &&
showHostAvatar && !chatRole &&
!isWithdrawMessage !isWithdrawMessage &&
!isSystemMessage
" "
class="host-avatar" class="host-avatar"
/> /> -->
<component <component
:is="messageComponent" :is="messageComponent"
:user-name="userName" :user-name="userName"
...@@ -40,7 +41,15 @@ ...@@ -40,7 +41,15 @@
v-model="data" v-model="data"
@open="openFile" @open="openFile"
/> />
<avatar v-if="avatar" :src="avatar" shape="circle" /> <avatar
v-if="!avatar && !isSystemMessage"
:src="
chatRole === 'default'
? avatar
: require('../imgs/default-host-avatar.svg')
"
shape="circle"
/>
</div> </div>
</div> </div>
...@@ -136,7 +145,9 @@ ...@@ -136,7 +145,9 @@
import WithdrawMessage from "./message-item/withdraw-message.vue"; import WithdrawMessage from "./message-item/withdraw-message.vue";
import PurchasePlanMessage from "./message-item/purchase-plan-message.vue"; import PurchasePlanMessage from "./message-item/purchase-plan-message.vue";
import MyWelfareMessage from "./message-item/my-welfare-message.vue"; import MyWelfareMessage from "./message-item/my-welfare-message.vue";
import SystemMessage from "./message-item/system-message.vue";
import xim from "./../xim"; import xim from "./../xim";
import { ChatRole } from "@/customer-service/model";
const twoMinutes = 2 * 60 * 1000; const twoMinutes = 2 * 60 * 1000;
...@@ -150,6 +161,7 @@ ...@@ -150,6 +161,7 @@
[dto.MessageType.GeneralOrderMsg, "text-message"], [dto.MessageType.GeneralOrderMsg, "text-message"],
[dto.MessageType.MyPurchasePlan, "purchase-plan-message"], [dto.MessageType.MyPurchasePlan, "purchase-plan-message"],
[dto.MessageType.MyWelfare, "my-welfare-message"], [dto.MessageType.MyWelfare, "my-welfare-message"],
[dto.MessageType.System, "system-message"],
]); ]);
@Component({ @Component({
...@@ -163,7 +175,8 @@ ...@@ -163,7 +175,8 @@
TextMessage, TextMessage,
WithdrawMessage, WithdrawMessage,
PurchasePlanMessage, PurchasePlanMessage,
MyWelfareMessage MyWelfareMessage,
SystemMessage,
}, },
}) })
export default class Message extends Vue { export default class Message extends Vue {
...@@ -222,6 +235,10 @@ ...@@ -222,6 +235,10 @@
return this.data.type === dto.MessageType.Withdraw; return this.data.type === dto.MessageType.Withdraw;
} }
private get isSystemMessage() {
return this.data.type === dto.MessageType.System;
}
private get isAllRead() { private get isAllRead() {
return this.data.read_count >= this.data.total_read_count; return this.data.read_count >= this.data.total_read_count;
} }
...@@ -277,13 +294,13 @@ ...@@ -277,13 +294,13 @@
private get avatar() { private get avatar() {
const avatar = chat.getUserMapping(); const avatar = chat.getUserMapping();
if (this.isSendingMessage) {
if (Object.getOwnPropertyNames(avatar).length > 0) { if (Object.getOwnPropertyNames(avatar).length > 0) {
this.showHostAvatar = true; this.showHostAvatar = true;
} else { } else {
this.showHostAvatar = false; this.showHostAvatar = false;
} }
if (this.isSendingMessage) {
if (avatar && this.chatMyId) { if (avatar && this.chatMyId) {
const user = avatar[this.chatMyId]; const user = avatar[this.chatMyId];
if (user && user.avatar) { if (user && user.avatar) {
...@@ -293,11 +310,6 @@ ...@@ -293,11 +310,6 @@
} }
if (avatar && this.data) { if (avatar && this.data) {
if (Object.getOwnPropertyNames(avatar).length > 0) {
this.showHostAvatar = true;
} else {
this.showHostAvatar = false;
}
const value = avatar[this.data.eid]; const value = avatar[this.data.eid];
if (value && value.avatar) { if (value && value.avatar) {
return value.avatar; return value.avatar;
...@@ -307,6 +319,16 @@ ...@@ -307,6 +319,16 @@
return ""; return "";
} }
private get chatRole() {
if (this.chatMembers) {
const t = this.chatMembers.find((i) => i.eid === this.data.eid);
if (t?.type === ChatRole.Default) {
return "default";
}
}
return "";
}
private get messageType() { private get messageType() {
const type = this.data?.type; const type = this.data?.type;
if (type === "file") { if (type === "file") {
...@@ -453,7 +475,19 @@ ...@@ -453,7 +475,19 @@
word-break: break-all; word-break: break-all;
} }
} }
&.system-message {
flex-direction: row;
.msg-content {
text-align: left;
}
.msg-name {
margin-left: 0 !important;
text-align: left;
}
.content-avatar {
justify-content: flex-start !important;
}
}
&.offset-bottom { &.offset-bottom {
margin-bottom: 30px; margin-bottom: 30px;
} }
......
model/index.ts
...@@ -100,6 +100,7 @@ export const enum MessageType { ...@@ -100,6 +100,7 @@ export const enum MessageType {
Withdraw = "withdraw", Withdraw = "withdraw",
MyPurchasePlan = "my_purchase_plan", MyPurchasePlan = "my_purchase_plan",
MyWelfare = "my_welfare", MyWelfare = "my_welfare",
System ="system"
} }
export const enum MessageHandled { export const enum MessageHandled {
......
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