MessageDetail 消息详情

# MessageDetail 消息详情

IM聊天详情。

# 引入

import PressMessageDetail from '@tencent/press-plus/press-message-detail/press-message-detail';

export default {
  components: {
    PressMessageDetail,
  }
}

# 代码演示

# 基本用法

 <PressMessageDetail
  :list="list"
  @onScroll="onScroll"
/>


export default {
  data() {
    return {
      list: [],
    }
  },
  methods: {
    onScroll() {},
  }
}

# API

# Props

参数	说明	类型	默认值
list	消息详情列表	array	-
loading	是否在加载中	boolean	`false`
offset	滚动条与顶部距离小于 `offset` 时触发`load`事件	number	`300`

# Event

事件名	说明	回调参数
onScroll	`onScroll-view`滚动	`event`
clickAvatar	点击头像	`messageItem`
clickPic	点击消息中的图片	`pickUrl, messageItem`
checkDetail	点击消息中的查看详情	`link, messageItem`
reSend	重新发送	`messageItem`
agreeExchangeCard	同意交换名片	`messageItem`
goSetCardPage	跳转名片设置页面	`messageItem`
makePhoneCall	拨打电话	`phone, contactItem, messageItem`
clickCopy	点击复制	`selector, copyValue, contactItem, messageItem`
loadMore	上拉加载更多	-
agreeApply	同意加入队伍申请	`messageItem`
rejectApply	拒绝加入队伍申请	`messageItem`
argreeInvitation	同意近期队友战队邀请	`messageItem`
rejectInvitation	拒绝近期队友战队邀请	`messageItem`

# list

list 类型如下：

type IMessageItem = {
  id: string; // 唯一键
  messageType: string; // 消息类型，可选值参考下方
  text?: string; // 时间信息，或系统信息

  // 是否显示 “根据您的设置，自动同意了交换名片，”
  showAutoAgreeExchangeCardText?: boolean;

  isMine?: boolean; // 消息类型为普通消息时，代表消息是否为我发送的
  avatar?: string; // 头像
  picUrl?: string; // 发送的图片
  
  title?: string; // 标题
  textList?: Array<{value: string; key: string}>; // 详情列表
  link?: string; // 跳转链接
  linkButtonText?: string; // 跳转链接按钮文案，默认为 查看详情

  isCustomFail?: boolean; // 是否发送失败
  isPeerRead?: boolean; // 是否已读
  
  isOwner?: boolean; // 是否是主理人
  cardTip?: string; // 主理人名片提示
  cardDesc?: string; // 主理人名片描述
  nick?: string; // 名片昵称
  userGradeDesc?: string; // 段位描述

  cardContactList?: Array<{
    key: string; // 唯一键
    icon: string; // 图标名称
    tip?: string; // 提示

    showPhoneCallLink?: boolean; // 是否显示拨打按钮
    phone?: number; // 手机号

    showCopy?: boolean; // 是否显示复制按钮
    showAgreeExchangeCardButton?: boolean; // 是否显示"同意交换"按钮
    showExchangedCardButton?: boolean; // 是否显示 "已交换"
  }>
  weekScore?: number; // 战队上周战力值 
  weekUserScore?: number; // 战队上周个人贡献值 
  nationalRank?: number; // 战队上周全国排名 
  provinceName?: string, // 战队所在省名称
  provinceRank?: string, // 战队所在省排名
  cityName?: string, // 战队所在市名称
  cityRank?: string, // 战队所在市排名
  countyName?: string, // 战队所在区县名称
  countyRank?: string, // 战队所在区县排名
}
type IList = Array<IMessageItem>

# messageType

messageType 可选值如下：

// @tencent/press-plus/common/im/message-detail/config.ts
export const MESSAGE_TYPE_MAP = {
  TIME: 'TIME',
  EXCHANGE_TEXT: 'EXCHANGE_TEXT',
  MESSAGE_TEXT: 'MESSAGE_TEXT',
  EXCHANGE_CARD: 'EXCHANGE_CARD',
  TEAM_APPLY: 'TEAM_APPLY',
} as const;

# scrollToBottom

父组件可以调用press-message-detail中的scrollToBottom，使聊天消息滚动到底部。

export default {
  mounted() {
    fetchData().then((list) => {
      this.list = list;
      setTimeout(() => {
        this.$refs[this.pressMessageDetailRef].scrollToBottom();
      });
    });
  },
}

# 常见问题

# 安卓机型下页面滚动方向与手指滑动方向相反

组件后一个元素不能设置为position: absolute; top: 0;bottom: 0。

横屏

← MessageBoard MessageList →