Skip to content

foreign / customer-service

Go to a project
Commit 7c3fe629 by zhousil
Options

不同类型消息样式分离

parent 55070bdd
Expand all
Inline Side-by-side
Showing with 218 additions and 128 deletions
components/message-item/audio-message.vue
...@@ -25,63 +25,87 @@ ...@@ -25,63 +25,87 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Ref } from "vue-property-decorator"; import { Component, Ref } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
import VoiceIcon from "./voice.vue"; import VoiceIcon from "./voice.vue";
@Component({ components: { VoiceIcon } }) @Component({ components: { VoiceIcon } })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
@Ref("audio") @Ref("audio")
private readonly audioRef!: HTMLAudioElement; private readonly audioRef!: HTMLAudioElement;
private playing = false; private playing = false;
private get duration() { private get duration() {
const v = this.messageBody.msg.duration as number; const v = this.messageBody.msg.duration as number;
return v || 0; return v || 0;
} }
private get durationInSecond() { private get durationInSecond() {
return Math.round(this.duration / 1000); return Math.round(this.duration / 1000);
} }
private get getVoiceMessageWidth() { private get getVoiceMessageWidth() {
if (this.fileFailed2Load) { if (this.fileFailed2Load) {
return 35; return 35;
}
const d = this.duration / 1000;
if (d <= 3) {
return 60;
}
if (d >= 60) {
return 200;
}
return 60 + d;
} }
const d = this.duration / 1000;
if (d <= 3) { private play() {
return 60; if (this.audioRef?.paused) {
this.audioRef?.load();
this.audioRef?.play();
} else {
this.audioRef?.pause();
}
} }
if (d >= 60) { private onPlay() {
return 200; this.playing = true;
} }
return 60 + d; private onPause() {
} this.playing = false;
}
private play() { mounted() {
if (this.audioRef?.paused) { this.buildMessageUrl();
this.audioRef?.load();
this.audioRef?.play();
} else {
this.audioRef?.pause();
} }
} }
</script>
private onPlay() { <style lang="less" scoped>
this.playing = true; .voice-message {
} height: 40px;
width: 200px;
private onPause() { &.can-play {
this.playing = false; cursor: pointer;
} }
mounted() { i {
this.buildMessageUrl(); font-size: 16px;
}
} }
} .my-message {
</script> .voice-message {
> div {
flex-flow: row-reverse;
}
<style lang="less" scoped></style> svg {
transform: rotateY(180deg);
}
}
}
</style>
components/message-item/file-message.vue
...@@ -30,60 +30,69 @@ ...@@ -30,60 +30,69 @@
</template> </template>
<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 FileIcon from "./file-icon.vue"; import FileIcon from "./file-icon.vue";
import { FileType, getFileType } from "./file-controller"; import { FileType, getFileType } from "./file-controller";
const k = 1024, const k = 1024,
m = 1024 * k, m = 1024 * k,
g = 1024 * m, g = 1024 * m,
t = 1024 * g; t = 1024 * g;
function formatSize(size: number) { function formatSize(size: number) {
if (size === undefined || size === null) { if (size === undefined || size === null) {
return ""; return "";
} }
if (size < k) { if (size < k) {
return size + " B"; return size + " B";
} }
if (size < m) { if (size < m) {
return Number((size / k).toFixed(2)) + " KB"; return Number((size / k).toFixed(2)) + " KB";
} }
if (size < g) { if (size < g) {
return Number((size / m).toFixed(2)) + " MB"; return Number((size / m).toFixed(2)) + " MB";
}
if (size < t) {
return Number((size / g).toFixed(2)) + " GB";
}
return Number((size / t).toFixed(2)) + " TB";
}
@Component({ components: { FileIcon } })
export default class Index extends BaseMessage {
private get getAttachment() {
if (this.messageBody) {
return this.messageBody.msg.name;
} }
return "文件下载"; if (size < t) {
return Number((size / g).toFixed(2)) + " GB";
}
return Number((size / t).toFixed(2)) + " TB";
} }
private get fileIcon() { @Component({ components: { FileIcon } })
if (this.value) { export default class Index extends BaseMessage {
return getFileType(this.messageBody.msg.name); private get getAttachment() {
if (this.messageBody) {
return this.messageBody.msg.name;
}
return "文件下载";
} }
return FileType.Others; private get fileIcon() {
} if (this.value) {
return getFileType(this.messageBody.msg.name);
}
private format(v: number) { return FileType.Others;
return formatSize(v); }
}
mounted() { private format(v: number) {
this.buildMessageUrl(); return formatSize(v);
}
mounted() {
this.buildMessageUrl();
}
} }
}
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.file-message {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
.file-message-name {
max-width: 130px;
}
}
</style>
components/message-item/image-message.vue
...@@ -16,24 +16,57 @@ ...@@ -16,24 +16,57 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import { FileType } from "./file-controller"; import { FileType } from "./file-controller";
import BaseMessage from "./index"; import BaseMessage from "./index";
import FileIcon from "./file-icon.vue"; import FileIcon from "./file-icon.vue";
@Component({ components: { FileIcon } }) @Component({ components: { FileIcon } })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private readonly image404 = FileType.Image_404; private readonly image404 = FileType.Image_404;
private onImageError() { private onImageError() {
this.fileFailed2Load = true; this.fileFailed2Load = true;
this.messageRealUrl = ""; this.messageRealUrl = "";
} }
mounted() { mounted() {
this.buildMessageUrl(); this.buildMessageUrl();
}
} }
}
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.image-message {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
line-height: 1;
max-width: 300px;
box-sizing: content-box;
img {
width: 100%;
}
&.image-404 {
background: #f7f8fa;
display: flex;
align-items: center;
justify-content: center;
.file-icon {
margin: 0;
}
}
/deep/ .file-icon {
margin-left: 0;
}
}
.my-message {
&.image-message:not(.image-404) {
background-color: transparent !important;
border-radius: 4px !important;
border: 1px solid #c5d4e5;
}
}
</style>
components/message-item/text-message.vue
...@@ -6,31 +6,34 @@ ...@@ -6,31 +6,34 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { replaceText2Link } from "@/customer-service/utils"; import { replaceText2Link } from "@/customer-service/utils";
import xim from "@/customer-service/xim"; import xim from "@/customer-service/xim";
import { Component } from "vue-property-decorator"; import { Component } from "vue-property-decorator";
import BaseMessage from "./index"; import BaseMessage from "./index";
@Component({ components: {} }) @Component({ components: {} })
export default class Index extends BaseMessage { export default class Index extends BaseMessage {
private readonly emptyText = "　"; private readonly emptyText = "　";
private format2Link(text: string) { private format2Link(text: string) {
let t = replaceText2Link(text); let t = replaceText2Link(text);
const keywords = xim.getMatchedTextKeywords(); const keywords = xim.getMatchedTextKeywords();
for (const item of keywords) { for (const item of keywords) {
const r = new RegExp(item, "g"); const r = new RegExp(item, "g");
t = t.replace(r, `<span class="highlight">${item}</span>`); t = t.replace(r, `<span class="highlight">${item}</span>`);
}
return t;
} }
return t;
} }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.inline-text { .inline-text {
/deep/ .highlight { display: inline-block;
color: #e87005; white-space: pre-wrap;
text-align: left;
/deep/ .highlight {
color: #e87005;
}
} }
} </style>
</style> \ No newline at end of file
components/message-item/video-message.vue
...@@ -25,4 +25,15 @@ export default class Index extends BaseMessage { ...@@ -25,4 +25,15 @@ export default class Index extends BaseMessage {
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.video-message {
height: 160px;
width: 200px;
background-color: #000 !important;
border-radius: 0 !important;
svg {
cursor: pointer;
}
}
</style>
components/message-item/withdraw-message.vue
...@@ -3,11 +3,20 @@ ...@@ -3,11 +3,20 @@
</template> </template>
<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";
@Component({ components: {} }) @Component({ components: {} })
export default class Index extends BaseMessage {} export default class Index extends BaseMessage {}
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.my-message {
.withdraw-message {
background-color: transparent !important;
padding: 0 4px;
font-size: 12px;
color: #999;
}
}
</style>
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