chat-app/src/pages/forwardRecord/index.vue

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ServeGetForwardRecords } from '@/api/chat'
import { MessageComponents } from '@/constant/message'
import { ITalkRecord } from '@/types/chat'
import WdLoading from "@/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue";
import { useInject } from '@/hooks'

const emit = defineEmits(['close'])

const msgId = ref(null)
const { showUserInfoModal } = useInject()
const isShow = ref(true)
const items = ref<ITalkRecord[]>([])
const title = ref('会话记录')

const onMaskClick = () => {
  emit('close')
}

const onLoadData = () => {
  ServeGetForwardRecords({
    msg_id: msgId.value
  }).then((res) => {
    if (res.code == 200) {
      items.value = res.data.items || []
      // 修复标题逻辑
      const uniqueNames = [...new Set(items.value.map(v => v.nickname))];
      if (uniqueNames.length <= 2) {
        title.value = uniqueNames.join('和');
      } else {
        title.value = uniqueNames.slice(0, 2).join('和') + '等';
      }
    }
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const options = page.$page.options
  msgId.value = options.msgId
  console.log(msgId.value,'msgId.value');

  onLoadData()
})
</script>

<template>
  <div class="outer-layer">
    <div>
      <tm-navbar :hideBack="false" hideHome :title="`${title}的会话记录`" >
      </tm-navbar>
    </div>
    <div class="main-box">
      <div v-if="items.length === 0" class="flex justify-center items-center w-full mt-[200rpx]">
        <wd-loading  />
      </div>
      <div v-else v-for="item in items" :key="item.msg_id" class="message-item">
        <div class="left-box" @click="showUserInfoModal(item.user_id)">
          <tm-image v-if="item.avatar !==''" :width="80" :height="80" :round="12" :src="item.avatar"></tm-image>
          <div v-else class="w-[80rpx] h-[80rpx] text-[28rpx] text-[#fff] bg-[#46299D] leading-[40rpx] rounded-[40rpx] flex justify-center items-center">{{ item.nickname.slice(-2) }}</div>
        </div>

        <div class="right-box">
          <div class="msg-header">
            <span class="name">{{ item.nickname }}</span>
            <span class="time"> {{ item.created_at }}</span>
          </div>

          <component
            :is="MessageComponents[item.msg_type] || 'unknown-message'"
            :extra="item.extra"
            :data="item"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.outer-layer {
  overflow-y: auto;
  flex: 1;
  background-image: url("@/static/image/clockIn/z3280@3x.png");
  background-size: cover;
  padding: 0 66rpx 20rpx 50rpx;
  display: flex;
  flex-direction: column;
}
.main-box {
  flex:1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-top: 28rpx;
}

.message-item {
  min-height: 60rpx;
  display: flex;
  margin-bottom: 44rpx;

  .left-box {
    width: 80rpx;
    display: flex;
    user-select: none;
  }

  .right-box {
    width: 100%;
    overflow-x: auto;
    padding-left: 22rpx;
    box-sizing: border-box;
    height: fit-content;

    .msg-header {
      height: 34rpx;
      line-height: 34rpx;
      width: 526rpx;
      font-size: 24rpx;
      color: #999999;
      position: relative;
      user-select: none;
      display: flex;
      justify-content: space-between;
      margin-bottom: 6rpx;
    }
  }
}
</style>