uniIM/components/messages/MessageMultipleForward.vue

<template>
  <view
      class="im-chat-text"
      @tap="showMessageList"
  >
    <view class="title">{{ message.content }}的聊天记录</view>
    <view v-for="item in message.extend!.messageList!.slice(0, 2)" :key="item.id" class="message">
      <text class="text" v-if="item.messageType === MessageType.text">{{ userStore.getMapUser(item.fromId)?.name }}：{{ item.content }}</text>
      <text class="text" v-if="item.messageType === MessageType.image">{{ userStore.getMapUser(item.fromId)?.name }}：[图片]</text>
      <text class="text" v-if="item.messageType === MessageType.file">{{ userStore.getMapUser(item.fromId)?.name }}：[文件]</text>
      <text class="text" v-if="item.messageType === MessageType.video">{{ userStore.getMapUser(item.fromId)?.name }}：[视频]</text>
      <text class="text" v-if="item.messageType === MessageType.voice">{{ userStore.getMapUser(item.fromId)?.name }}：[语音]</text>
      <text class="text" v-if="item.messageType === MessageType.forward">{{ userStore.getMapUser(item.fromId)?.name }}：[转发]</text>
      <text class="text" v-if="item.messageType === MessageType.event">{{ userStore.getMapUser(item.fromId)?.name }}：[提示]</text>
    </view>
    <div class="footer">聊天记录</div>
  </view>
</template>
<script setup lang="ts">
import type Message from '@/mode/Message'
import {useUserStore} from '@/store/userStore'
import MessageType from '@/utils/MessageType'
import {useMessageStore} from "@/store/messageStore";

interface Props<T> {
  message: T
}

const props = defineProps<Props<Message>>()
const userStore = useUserStore()

const showMessageList = () => {
  if(props.message.extend!.messageList){
    useMessageStore().setMessage(props.message)
    uni.navigateTo({
      url:'/pages/chat/forward'
    })
  }
}
</script>
<style scoped lang="scss">
.im-chat-text {
  cursor: pointer;
  width: 400upx;
  background-color: #ffffff !important;
  padding-bottom: 5px;

  .title {
    font-weight: bold;
    font-size: 22upx;
    line-height: 2;
    color: #333333;
  }

  .text {
    display: inline-block;
    color: #cccccc;
    width: 100%;
    font-size: 22upx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-break: break-all;
  }
}

.im-chat-main .messages .im-chat-text:after {
  border-style: solid dashed dashed;
  border-color: #ffffff transparent transparent;
}

.im-chat-main .messages .im-chat-mine .im-chat-text:after {
  border-style: solid dashed dashed;
  border-color: #ffffff transparent transparent;
}

.footer {
  color: #999999;
  font-size: 20upx;
  border-top: 1px solid #f0f0f0;
  margin-top: 5px;
  line-height: 200%;
}
</style>