<template> <section class="composite-page"> <div v-if="!sharedMiscState.isElectron" class="close-button-container" @click="hideCompositeMessagePage"> <i class="icon-ion-close"></i> </div> <div v-if="!compositeMessage"> {{ 'Null CompositeMessagePage' }} </div> <ul v-else> <li v-for="(message, index) in compositeMessage.messageContent.messages" :key="message.uid"> <div class="message-container"> <div class="portrait-container"> <img v-if="index === 0 || message.from !== compositeMessage.messageContent.messages[index -1].from" alt="" :src="message._from.portrait"> </div> <div class="name-time-content-container"> <div class="name-time-container"> <p class="name"> {{ message._from._displayName }}</p> <p class="time"> {{ message._timeStr }}</p> <!-- <p class="time"> 1223</p>--> </div> <div class="content"> <!--message content--> <TextMessageContentView :message="message" v-if="message.messageContent.type === 1" :style="{'--out-arrow-color':'#a8bdff', '--in-arrow-color':'white'}" v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/> <!-- <AudioMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 2"/>--> <ImageMessageContentView :message="message" :is-in-composite-view="true" v-else-if="message.messageContent.type === 3"/> <!-- v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>--> <FileMessageContentView :message="message" v-else-if="message.messageContent.type === 5" v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/> <VideoMessageContentView :message="message" :is-in-composite-view="true" v-else-if="message.messageContent.type === 6"/> <!-- v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/>--> <StickerMessageContentView :message="message" v-else-if="message.messageContent.type === 7"/> <CompositeMessageContentView :message="message" v-else-if="message.messageContent.type === 11"/> <!-- <CallStartMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 400"/>--> <!-- <ConferenceInviteMessageContentView :message="message"--> <!-- v-else-if="message.messageContent.type === 408"/>--> <UnsupportMessageContentView :message="message" v-else-if="[2, 10, 400, 408].indexOf(message.messageContent.type) >= 0"/> <UnknowntMessageContentView :message="message" v-else v-bind:class="{leftarrow:message.direction === 1, rightarrow: message.direction === 0}"/> </div> </div> </div> </li> </ul> </section> </template> <script> import TextMessageContentView from "./conversation/message/content/TextMessageContentView"; import UnsupportMessageContentView from "./conversation/message/content/UnsupportMessageContentView"; import store from "../../store"; import CompositeMessageContentView from "./conversation/message/content/CompositeMessageContentView"; import ImageMessageContentView from "./conversation/message/content/ImageMessageContentView"; import VideoMessageContentView from "./conversation/message/content/VideoMessageContentView"; import FileMessageContentView from "./conversation/message/content/FileMessageContentView"; import StickerMessageContentView from "./conversation/message/content/StickerMessageContentView"; import UnknowntMessageContentView from "./conversation/message/content/UnknownMessageContentView"; import Message from "../../wfc/messages/message"; import {stringValue} from "../../wfc/util/longUtil"; import wfc from "../../wfc/client/wfc"; import FavItem from "../../wfc/model/favItem"; import Conversation from "../../wfc/model/conversation"; import axios from "axios"; import {isElectron} from "../../platform"; export default { name: "CompositeMessagePage", props: { message: { required: false, type: Message, default: null, } }, data() { return { compositeMessage: null, sharedMiscState: store.state.misc, } }, mounted() { if (this.message) { this.compositeMessage = this.message; this.loadMediaCompositeMessage(this.compositeMessage); return; } let hash = window.location.hash; if (hash.indexOf('messageUid=') >= 0) { let messageUid = hash.substring(hash.indexOf('=') + 1); this.compositeMessage = store.getMessageByUid(messageUid); if (!this.compositeMessage) { wfc.loadRemoteMessage(messageUid, msg => { this.compositeMessage = msg if (this.compositeMessage) { store._patchMessage(this.compositeMessage, 0); document.title = this.compositeMessage.messageContent.title; this.loadMediaCompositeMessage(this.compositeMessage); } }, err => { console.error('load remote message error', err); }) } if (!this.compositeMessage) { return; } } else { let faveItemData = hash.substring(hash.indexOf('=') + 1); let favItemRaw = JSON.parse((wfc.b64_to_utf8(wfc.unescape(faveItemData)))); let favItem = Object.assign(new FavItem(), favItemRaw); favItem.conversation = new Conversation(favItem.convType, favItem.convTarget, favItem.convLine); favItem.favType = favItem.type; this.compositeMessage = favItem.toMessage(); } if (this.compositeMessage) { store._patchMessage(this.compositeMessage, 0); document.title = this.compositeMessage.messageContent.title; this.loadMediaCompositeMessage(this.compositeMessage); } }, methods: { hideCompositeMessagePage() { this.$modal.hide('show-composite-message-modal' + '-' + stringValue(this.message.messageUid)) }, loadMediaCompositeMessage(msg) { let content = msg.messageContent; if (content.remotePath) { if (isElectron()) { if (content.localPath && require('fs').existsSync(content.localPath)) { return; } } else { // web 姣忔鍔犺浇 // do nothing } axios.get(content.remotePath, {responseType: 'arraybuffer'}).then(value => { content._decodeMessages(new TextDecoder('utf-8').decode(value.data)); store._patchMessage(this.compositeMessage, 0); content.loaded = true; }) } }, previewCompositeMessage(focusMessageUid){ store.previewCompositeMessage(this.compositeMessage, focusMessageUid) } }, components: { UnknowntMessageContentView, // ConferenceInviteMessageContentView, CompositeMessageContentView, // AudioMessageContentView, // CallStartMessageContentView, UnsupportMessageContentView, TextMessageContentView, ImageMessageContentView, VideoMessageContentView, FileMessageContentView, StickerMessageContentView, } } </script> <style scoped> .composite-page { width: var(--composite-message-page-width); height: var(--composite-message-page-height); background: #f7f7f7; overflow: scroll; } .close-button-container { position: absolute; padding: 5px 10px 10px 5px; top: 0; right: 0; } .close-button-container:active { background: lightgrey; } .composite-page ul { width: 100%; height: 100%; padding: 20px 30px; list-style-position: inside; } .composite-page ul li { position: relative; padding: 10px 0; } .composite-page ul li:not(:last-child)::after { content: ""; width: calc(100% - 55px); position: absolute; margin-left: 55px; padding: 5px 0; border-bottom: 1px solid #f1f1f1; } .message-container { width: 100%; display: flex; } .name-time-content-container { width: 100%; } .name-time-container { width: 100%; padding: 5px 0; display: flex; justify-content: space-between; } .name-time-container p { font-size: 12px; color: #c2c2c2; } .name-time-content-container .content { display: inline-block; margin-left: -10px; } .portrait-container { width: 40px; height: 40px; overflow: hidden; margin: 10px; } .portrait-container img { width: 100%; height: 100%; border-radius: 3px; } >>> .text-message-container.out { background-color: #f7f7f7; } >>> .text-message-container { background-color: #f7f7f7; padding-left: 0; } >>> .rightarrow::before { display: none; } >>> .leftarrow::before { display: none; } </style>