uniIM/pages/chat/forward.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
        <text class="text-black">{{ displayName }}的聊天记录</text>
      </template>
    </cu-custom>

    <view v-if="message" class='cu-chat' style="height: calc(100vh - 45px);padding-top: 10px">
      <view v-for='(item,index) in message.extend?.messageList' :id="`z-paging-${index}`" :key="item.id">
        <view class='cu-item' :id="'m-'+index">
          <view class='flex flex-direction'>
            <image class='cu-avatar radius' :src='userStore.getMapUser(item.fromId)?.avatar'></image>
          </view>
          <view class='main' style='display: block;'>
            <view class='text-gray text-sm padding-bottom-sm'>
              <text>{{ userStore.getMapUser(item!.fromId)!.name }}</text>
              <view class='margin-left inline'>
                <Time :time='item.timestamp'></Time>
              </view>
            </view>
            <view class='content shadow'>
              <message-view :item='item'></message-view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import MessageView from '@/components/MessageView.vue';
import Time from '@/components/Time.vue';
import CuCustom from '@/colorui/components/cu-custom.vue';
import {useUserStore} from "@/store/userStore";
import {useMessageStore} from "@/store/messageStore";
import {storeToRefs} from "pinia";
import ChatType from "@/utils/ChatType";
import Auth from "@/api/Auth";
const fontValue=ref(Auth.getfontSize());

const userStore = useUserStore();
const {message} = storeToRefs(useMessageStore())
const displayName = ref()
const message0 = message.value.extend?.messageList![0];
const fromId = message0?.fromId
const toId = message0?.chatId
if(message0?.type === ChatType.FRIEND && fromId && toId){
  displayName.value = computed(
      () => userStore.getMapUser(fromId)?.name + '和' + userStore.getMapUser(toId)?.name
  )
}else {
  displayName.value = '群聊'
}

</script>
<style scoped>
.inline {
  display: inline-block;
}

.cu-chat {
  background-color: #eeeeee;
}

.cu-chat .cu-item {
  padding: 0 0.625rem;
}
</style>