heshanApp/pages_im/pages/conversation/chating/components/MessageItem/QuoteMessageRender.vue

<template>
 <view class="message_quote_wrap">
    <view class="message_quote_text">
      <rich-text :nodes="nodes" class="quote_content_text"></rich-text>
      <view style="margin-left: 6rpx" class="message_quote_media">
        <image
          class="message_quote_image"
          v-if="isReplyFile"
          src="@/pages_im/static/images/chating_message_file.png"
          alt="file"/>
        <image
          class="message_quote_image"
          v-if="isReplyImage"
          :src="getQuoteMessage.pictureElem.sourcePicture.url"
          alt="img"
          @click="clickImageItem"/>
        <my-avatar
          v-if="isReplyCard"
          :src="getQuoteMessage.cardElem.faceURL"
          :desc="getQuoteMessage.cardElem.nickname"
          size="26" @click="clickCardUser"/>
        <image
          class="message_quote_image"
          v-if="isReplyVideo"
          :src="getQuoteMessage.videoElem.snapshotUrl"
          alt="video"/>
        <image
          v-if="isReplyVideo"
          class="play_icon"
          src="@/pages_im/static/images/chating_message_video_play.png"
          alt=""
          srcset=""
          @click.stop="clickMediaItem"/>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
// import { checkFileIsExist } from "../../../../../util/common";
import { parseMessageByType } from "../../../../../util/imCommon";
import { MessageType } from "@/pages_im/constant/imConstants";
import MyAvatar from "../../../../../components/MyAvatar/index.vue";
import { myPreview } from "../../../../../util/preview";
import Parser from '@/uni_modules/uview-plus/components/u-parse/parser.js';
const extraTypes = [
	  MessageType.FileMessage,
	  MessageType.LocationMessage,
	  MessageType.PictureMessage,
	  MessageType.VideoMessage,
	  MessageType.CardMessage,
];
export default {
  name: "",
  components: {
    MyAvatar,
  },
  props: {
    message: Object,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters([
        "storeCacheMap",
        "storeCurrentUserID"
    ]),
    hasExtra() {
      return extraTypes.includes(this.message.quoteElem.quoteMessage.contentType);
    },
    isAtMessage() {
      return this.message.contentType === MessageType.AtTextMessage;
    },
    getQuoteMessage() {
      return this.isAtMessage
        ? this.message.atTextElem.quoteMessage
        : this.message.quoteElem.quoteMessage;
    },
    isReplyImage() {
      return this.getQuoteMessage.contentType === MessageType.PictureMessage;
    },
    isReplyVideo() {
      return this.getQuoteMessage.contentType === MessageType.VideoMessage;
    },
    isReplyFile() {
      return this.getQuoteMessage.contentType === MessageType.FileMessage;
    },
    isReplyCard() {
      return this.getQuoteMessage.contentType === MessageType.CardMessage;
    },
    isLocationMessage() {
      return this.getQuoteMessage.contentType === MessageType.LocationMessage;
    },
    isRevokedMessage() {
      return this.getQuoteMessage.contentType === MessageType.RevokeMessage;
    },
    getMessageContent() {
      if (this.isReplyImage || this.isReplyVideo) {
        return "";
      }
      if (this.isRevokedMessage) {
        return "引用内容已被撤回";
      }
      return parseMessageByType(this.getQuoteMessage, this.storeCurrentUserID);
    },
    getSenderNickname() {
      return `${this.getQuoteMessage.senderNickname}: ${this.getMessageContent}`;
    },
    nodes() {
      if (!this.getSenderNickname) return [];
      const parser = new Parser({});
      return parser.parse(this.getSenderNickname);
    },
  },
  methods: {
    clickImageItem() {
      this.$emit('enterSubPage');
      myPreview(0, [this.getQuoteMessage.pictureElem.sourcePicture.url])
    },
    async clickMediaItem() {
      if (this.isReplyVideo) {
        const message = this.getQuoteMessage
        const path = this.storeCacheMap[message.clientMsgID]?.path;
        const localPath = await this.checkFileIsExist({
          key: message.clientMsgID,
          path
        })
        const previewVideoUrl = localPath || message.videoElem.videoUrl
        this.$emit('enterSubPage');
        uni.navigateTo({
          url: `/pages_im/pages/conversation/previewVideo/index?clientMsgID=${message.clientMsgID}&previewVideoUrl=${previewVideoUrl}&snapshotUrl=${message.videoElem.snapshotUrl}`,
        });
      }
    },
	clickCardUser() {
		  this.$emit('enterSubPage');
		  uni.navigateTo({
			url: `/pages_im/pages/common/userCard/index?sourceID=${this.getQuoteMessage.cardElem.userID}`,
		  });
	},
	checkFileIsExist({ key, path }){
		return new Promise((resolve) => {
				if (!path) {
				  resolve("");
				  return;
				}
				plus.io.resolveLocalFileSystemURL(
				  path,
				  (res) => {
					resolve(path);
				  },
				  (err) => {
					console.log(err);
					getStore().dispatch("user/deleteCacheData", key);
					resolve("");
				  },
				);
		});
	}

  },
};
</script>

<style lang="scss" scoped>
.message_quote_wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 8rpx;

    .message_quote_text {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      /* width: fit-content; nvue not support, flex-direction: row in parent helps */
      padding: 16rpx 16rpx;
      border-radius: 6rpx;
      color: #666;
      font-size: 24rpx;
      background-color: #f0f0f0;
    }
    
    .quote_content_text {
      color: #666;
      font-size: 24rpx;
      lines: 3;
      text-overflow: ellipsis;
      overflow: hidden;
      flex: 1;
      /* max-width: 350rpx; */
    }

  .message_quote_media {
    position: relative;
    width: 26px;
    height: 26px;

    image {
      width: 26px;
      height: 26px;
    }

    .play_icon {
      width: 13px !important;
      height: 13px !important;
      position: absolute;
      top: 6.5px;
      left: 6.5px;
    }
  }
}
</style>