his_user_miniapp/node_modules/@tencentcloud/chat-uikit-uniapp/TUIPages/TUIChat/index.vue

<template>
  <!-- #ifdef MP-WEIXIN -->
    <tuicallkit
      ref="TUICallKit"
    ></tuicallkit>
  <!-- #endif -->
 <view class="TUIChat" v-if="conversationType === 'chat'">
   <view
     class="more-btn"
     v-if="conversation?.type === 'GROUP'"
     @click="handleGetProfile"
   >
     更多</view
   >
   <view class="TUIChat-container">
     <scroll-view
       class="TUIChat-main"
       scroll-y="true"
       :scroll-with-animation="true"
       :refresher-triggered="triggered"
       :refresher-enabled="true"
       @refresherrefresh="handleRefresher"
       :scroll-top="scrollTop"
     >
       <view
         class="TUI-message-list"
         @touchstart="handleTouchStart"
         @click="dialogID = ''"
       >
         <view class="loading-text" v-if="isCompleted">没有更多</view>
         <view
           v-for="(item, index) in messages"
           :key="item.ID"
           :id="'view' + item.ID"
         >
           <view class="time-container" v-if="item.showTime">{{
             caculateTimeago(item.time * 1000)
           }}</view>
           <MessageTip
             v-if="!item.isRevoked && item.type === types.MSG_GRP_TIP"
             :data="handleTipMessageShowContext(item)"
           />
           <!-- <MessageTip v-if="item.type === types.MSG_GRP_SYS_NOTICE" /> -->
           <MessageBubble
             v-if="!item.isRevoked && item.type !== types.MSG_GRP_TIP"
             :data="item"
           >
             <Message-Operate
               v-if="dialogID === item.ID"
               :data="item"
               class="dialog dialog-item"
               :style="{
                 top: dialogPosition.top + 'px',
                 right: dialogPosition.right + 'px',
                 left: dialogPosition.left + 'px',
               }"
             >
             </Message-Operate>
             <MessageText
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_TEXT"
               :data="handleTextMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             ></MessageText>
             <MessageImage
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_IMAGE"
               :data="handleImageMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             ></MessageImage>
             <MessageVideo
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_VIDEO"
               :data="handleVideoMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             />
             <MessageAudio
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_AUDIO"
               :data="handleAudioMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             />
             <MessageFace
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_FACE"
               :data="handleFaceMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             />
             <MessageCustom
               :id="item.flow + '-' + item.ID"
               v-if="item.type === types.MSG_CUSTOM"
               :data="handleCustomMessageShowContext(item)"
               :messageData="item"
               @longpress="handleItem($event, item)"
             />
           </MessageBubble>
           <MessageRevoked
             v-if="item.isRevoked"
             :data="item"
             @edit="handleEdit(item)"
           />
         </view>
       </view>
     </scroll-view>
   </view>
   <TUIChatInput :text="text" :conversationData="conversation"></TUIChatInput>
 </view>
 <view class="TUIChat" v-if="conversationType === 'system'">
   <MessageSystem :data="messages" :types="types" />
 </view>
</template>
<script lang="ts">
import {
 defineComponent,
 reactive,
 toRefs,
 computed,
 nextTick,
 watch,
 onMounted,
 shallowRef
} from "vue";
import {
 onReady,
 onLoad,
 onNavigationBarButtonTap,
 onUnload,
} from "@dcloudio/uni-app";

// 消息元素组件
import MessageBubble from "./components/message-elements/message-bubble.vue";
import MessageText from "./components/message-elements/message-text.vue";
import MessageImage from "./components/message-elements/message-image.vue";
import MessageOperate from "./components/message-elements/message-operate.vue";
import MessageVideo from "./components/message-elements/message-video.vue";
import MessageAudio from "./components/message-elements/message-audio.vue";
import MessageFace from "./components/message-elements/message-face.vue";
import MessageCustom from "./components/message-elements/message-custom.vue";
import MessageTip from "./components/message-elements/message-tip.vue";
import MessageRevoked from "./components/message-elements/message-revoked.vue";
import MessageSystem from "./components/message-elements/message-system.vue";
// 底部消息发送组件
import TUIChatInput from "./components/message-input";
import store from "../../TUICore/store";
import {
 handleAvatar,
 handleTextMessageShowContext,
 handleImageMessageShowContext,
 handleVideoMessageShowContext,
 handleAudioMessageShowContext,
 handleFileMessageShowContext,
 handleFaceMessageShowContext,
 handleLocationMessageShowContext,
 handleMergerMessageShowContext,
 handleTipMessageShowContext,
 handleCustomMessageShowContext,
} from "../../utils/untis";

import { caculateTimeago } from "../../utils/date";
import Vuex from "vuex";
import { TUIChatServer } from "../../TUICore/server";

export default defineComponent({
 name: "TUIChat",
 components: {
   MessageText,
   MessageImage,
   MessageVideo,
   MessageAudio,
   MessageFace,
   MessageCustom,
   MessageBubble,
   MessageTip,
   MessageRevoked,
   MessageSystem,
   TUIChatInput,
   MessageOperate,
 },

 setup(props) {
   const timStore = store.state.timStore;
   uni.$TUIKit.TUIChatServer = new TUIChatServer();
   const TUICallKit = shallowRef(null);
   const TUIServer = uni.$TUIKit.TUIChatServer;
   const left: number | null = 0;
   const right: number | null = 0;
   const defaultDialogPosition = {
     top: -70,
     left,
     right,
   };
   const data = reactive({
     messageList: computed(() => timStore.messageList),
     conversation: computed(() => timStore.conversation),
     triggered: false,
     scrollTop: 999,
     text: "",
     types: uni.$TIM.TYPES,
     currentMessage: {},
     dialogID: "",
     forwardStatus: false,
     imageFlag: false,
     isCompleted: false,
     oldMessageTime: 0,
     dialogPosition: defaultDialogPosition,
   });

   // 判断当前会话类型：无/系统会话/正常C2C、群聊
   const conversationType = computed(() => {
     const conversation: any = data.conversation;
     if (!conversation?.conversationID) {
       return "";
     }
     if (conversation?.type === uni.$TIM.TYPES.CONV_SYSTEM) {
       return "system";
     }
     return "chat";
   });

   // 不展示已删除消息
   const messages = computed(() => {
     if (data.messageList.length > 0) {
       data.oldMessageTime = data.messageList[0].time;
       return data.messageList.filter((item: any) => {
         return !item.isDeleted;
       });
     }
   });
   // 获取页面参数
   onLoad((options) => {
     uni.setNavigationBarTitle({
       title: options && options.conversationName,
     });
   });
    onUnload(() => {
     // #ifdef MP-WEIXIN
     //回收 TUICallKit
     uni.$TUICallKit.value !== null && uni.$TUICallKit.value.destroyed();
     // #endif
     TUIServer.destroyed();
    });

   // 监听数据渲染，展示最新一条消息
   watch(messages, (newVal: any, oldVal: any) => {
     // 下拉刷新不滑动 todo 优化
     nextTick(() => {
       const newLastMessage = newVal[newVal.length - 1];
       const oldLastMessage = oldVal ? oldVal[oldVal.length - 1] : {};
       data.oldMessageTime = messages.value[0].time;
       handleShowTime();
       if (oldVal && newLastMessage.ID !== oldLastMessage.ID) {
         // handleScrollBottom(); // 非从conversationList 首次进入
       }
     });
   });
   // 监听数据初次渲染，展示最新一条消息
   // TODO app 中获取不到DOM 元素
   onReady(() => {
    const options = {
      sdkAppID: uni.$chat_SDKAppID, // 开通实时音视频服务创建应用后分配的 SDKAppID
      userID: uni.$chat_userID, // 用户 ID，可以由您的帐号系统指定
      userSig: uni.$chat_userSig, // 身份签名，相当于登录密码的作用
      tim: uni.$TUIKit, //  tim 参数适用于业务中已存在 TIM 实例，为保证 TIM 实例唯一性
    }
    uni.$TUICallKit = TUICallKit;
    nextTick(() => {
     uni.$TUICallKit.value !== null && uni.$TUICallKit.value.init(options)
    });
    setTimeout(() => {
      data.scrollTop = 998;
    }, 500);
   });
   onMounted(() => {
     handleShowTime();
     // // 监听回退，已读上报
     uni.addInterceptor("navigateBack", {
       success() {
         // 小程序无效 官网链接：https://uniapp.dcloud.io/api/interceptor.html
         uni.$TUIKit.TUIConversationServer.setMessageRead(
           data.conversation.conversationID
         );
       },
     });
   });
   onNavigationBarButtonTap(() => {
     if (data.conversation?.type === uni.$TIM.TYPES.CONV_GROUP) {
       uni.navigateTo({
         url: "../TUIGroup/index",
       });
     } else {
       uni.showToast({
         title: "暂无信息",
       });
     }
   });
   const handleGetProfile = () => {
     uni.navigateTo({
       url: "../TUIGroup/index",
     });
   };
   const handleShowTime = () => {
     if (messages.value) {
       Array.from(messages.value).forEach((item) => {
         if (item.time - data.oldMessageTime > 5 * 60) {
           data.oldMessageTime = item.time;
           item.showTime = true;
         } else {
           item.showTime = false;
         }
       });
     }
   };
   const handleScrollBottom = () => {
     uni
       .createSelectorQuery()
       .select(".TUI-message-list")
       .boundingClientRect((res) => {
         const scrollH = res.height?.height;
         data.scrollTop = scrollH;
       })
       .exec();
   };

   // 需要自实现下拉加载
   const handleScroll = (e: any) => {
     data.triggered = "restore"; // 需要重置
   };

   const handleRefresher = () => {
     data.triggered = true;
     if (!data.isCompleted) {
       TUIServer.getHistoryMessageList().then((res) => {
         data.triggered = false;
         data.isCompleted = res.isCompleted;
       });
     }
     setTimeout(() => {
       data.triggered = false;
     }, 500);
   };

   // 处理需要合并的数据
   const handleSend = (emo: any) => {
     data.text += emo.name;
     // inputEle.value.focus();
   };

   // 发送消息
   const handleSendTextMessage = (e: any) => {
     if (data.text.trimEnd()) {
       TUIServer.sendTextMessage(JSON.parse(JSON.stringify(data.text)));
     }
     data.text = " ";
   };
   // 右键消息，展示处理功能
   const handleItem = (event: any, item: any) => {
     const { flow } = item;
     // const { height, top } = event.target.getBoundingClientRect();
     try {
       const query = uni.createSelectorQuery(); // .in(this)
       query
         .select(`#${item.flow + "-" + item.ID}`)
         .boundingClientRect((res: any) => {
           const { top } = res;
           // 弹框在下面显示，60--弹框高度；44--导航栏高度；20--弹框离信息间距
           if (top < 60 + 20) {
             data.dialogPosition = {
               ...data.dialogPosition,
               top: res.height?.res + 10, // 在下面展示弹框 + 10px 间隔
             };
             data.dialogPosition = {
               ...data.dialogPosition,
               right: flow === "out" ? 0 : null, // 发出去的消息（弹框 right 都是 0）
               left: flow === "in" ? 0 : null, // 接收的消息（弹框 left 都是 0）
             };
           } else {
             data.dialogPosition = {
               ...defaultDialogPosition,
               right: flow === "out" ? 0 : null, // 发出去的消息（弹框 right 都是 0）
               left: flow === "in" ? 0 : null, // 接收的消息（弹框 left 都是 0）
             };
           }
         })
         .exec((res: any) => {
           data.currentMessage = item;
           data.dialogID = item.ID;
         });
     } catch (error) {
       data.currentMessage = item;
       data.dialogID = item.ID;
     }
   };

   // 滑动触发时，失焦收起键盘
   const handleTouchStart = () => {
     uni.hideKeyboard();
   };
   // 重新编辑
   const handleEdit = (item: any) => {
     data.text = item.payload.text;
   };

   return {
     ...toRefs(data),
    TUICallKit,
     conversationType,
     messages,
     handleShowTime,
     handleTouchStart,
     handleRefresher,
     handleScroll,
     handleScrollBottom,
     handleSendTextMessage,
     handleItem,
     handleEdit,
     handleTextMessageShowContext,
     handleImageMessageShowContext,
     handleVideoMessageShowContext,
     handleAudioMessageShowContext,
     handleFileMessageShowContext,
     handleFaceMessageShowContext,
     handleLocationMessageShowContext,
     handleMergerMessageShowContext,
     handleTipMessageShowContext,
     handleCustomMessageShowContext,
     handleSend,
     caculateTimeago,
     handleGetProfile,
   };
 },
});
</script>
<style lang="scss" scoped>
@import "../styles/TUIChat.scss";
</style>