uni-app

<template>
  <view class="page-container">
    <CustomNavbar
      position="fixed"
      :title="navigationTitle"
      :showBack="true"
      :showMenu="true"
      @back="onNavBack"
      @menuSelect="onNavMenuSelect"
    />

    <view
      class="message-list-container"
      :style="{ paddingBottom: inputToolbarHeight + 'px' }"
      @tap="closeSoftKeyboard"
    >
      <MessageList
        v-if="conversationID"
        :conversationID="conversationID"
        :locateMessage="locateMessage"
        :inputToolbarHeight="inputToolbarHeight"
        :inputPanelHeight="inputPanelHeight"
        :customMessageRender="renderCustomMessage"
        @onMessageListTap="closeSoftKeyboard"
      />
    </view>

    <MessageInput
      v-if="conversationID"
      ref="messageInputRef"
      :conversationID="conversationID"
      :toolList="toolList"
      :setOfflinePushInfo="setOfflinePushInfo"
      @height-change="onMessageInputHeightChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, shallowRef, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import MessageList from '@/uni_modules/tuikit-atomic-x/components/MessageList/MessageList.nvue'
import MessageInput, { DEFAULT_TOOLS } from '@/uni_modules/tuikit-atomic-x/components/MessageInput/MessageInput.nvue'
import CustomNavbar from '@/uni_modules/tuikit-atomic-x/components/CustomNavbar/CustomNavbar.nvue'
import { useConversationListState } from '@/uni_modules/tuikit-atomic-x/state/ConversationListState'
import { useGroupState } from '@/uni_modules/tuikit-atomic-x/state/GroupState'
import { useMessageInputState } from '@/uni_modules/tuikit-atomic-x/state/MessageInputState'
import { MessageType } from '@/uni_modules/tuikit-atomic-x/types/message'
import type { OfflinePushContext, OfflinePushInfo } from '@/uni_modules/tuikit-atomic-x/types/message'
import OrderCardMessage from './OrderCardMessage.nvue'

const { joinedGroupList, fetchJoinedGroupList } = useGroupState()

const conversationID = ref('')
const locateMessage = ref(null)
const isInGroup = ref(false)
const messageInputRef = ref(null)
const inputToolbarHeight = ref(0)
const inputPanelHeight = ref(0)
const inputState = shallowRef<ReturnType<typeof useMessageInputState> | null>(null)

const { fetchConversationInfo, conversationList } = useConversationListState('chat')

const isC2CConversation = computed(() => conversationID.value.startsWith('c2c_'))
const currentConversation = computed(() =>
  conversationList.value.find(conv => conv.conversationID === conversationID.value)
)
const navigationTitle = computed(() => currentConversation.value?.title || '聊天')

// ==================== 自定义消息：订单卡片 ====================
const toolList = [
  ...DEFAULT_TOOLS,
  {
    id: 'order',
    name: '订单',
    icon: '/uni_modules/tuikit-atomic-x/static/icon/custom.png', // 演示用工程内既有图标，业务方请替换为自己的图标
    callback: () => {
      // 实际业务一般跳订单选择页，回来后用拿到的订单数据调发送
      inputState.value?.sendCustomMessage({
        businessID: 'order_card',
        version: 1,
        orderID: 'TX20260602001',
        title: '腾讯云 IM 套餐 · 旗舰版',
        price: 2999,
        cover: 'https://web.sdk.qcloud.com/im/assets/images/tencent_rtc_logo.png' // 演示图片，业务方请替换为自己的图片
      }).catch(err => uni.showToast({ icon: 'none', title: err.message || '发送失败' }))
    }
  }
]

const renderCustomMessage = (message: any) => {
  try {
    const data = JSON.parse(message.messageBody?.customMessage?.data || '{}')
    if (data.businessID === 'order_card') return OrderCardMessage
  } catch (e) {}
  return null
}

// ==================== 导航栏 ====================
const onNavBack = () => uni.navigateBack()

const onNavMenuSelect = () => {
  if (!isC2CConversation.value) {
    isInGroup.value = joinedGroupList.value.some(
      group => group.groupID === conversationID.value?.replace('group_', '')
    )
    if (!isInGroup.value) {
      uni.showToast({ title: '您已不在群内，无法进行此操作', icon: 'none' })
      return
    }
  }
  uni.navigateTo({
    url: `/pages/scenes/chat/chatSetting/index?conversationID=${conversationID.value}&showType=0`
  })
}

// ==================== 输入框 ====================
const onMessageInputHeightChange = ({ inputToolbarHeight: toolbar, inputPanelHeight: panel }) => {
  inputToolbarHeight.value = toolbar
  inputPanelHeight.value = panel
}

const closeSoftKeyboard = () => messageInputRef.value?.collapse()

// ==================== 离线推送 ====================
const setOfflinePushInfo = (ctx: OfflinePushContext): OfflinePushInfo | null => {
  const title = currentConversation.value?.title || '新消息'
  let description = '[新消息]'
  switch (ctx.messageType) {
    case MessageType.TEXT:
      description = (ctx.messageBody as { text?: string })?.text || '[文本消息]'
      break
    case MessageType.IMAGE: description = '[图片]'; break
    case MessageType.VIDEO: description = '[视频]'; break
    case MessageType.SOUND: description = '[语音]'; break
    case MessageType.FILE:  description = '[文件]'; break
    case MessageType.CUSTOM: return null
    default: return null
  }
  return {
    title,
    description,
    extensionInfo: {
      ext: JSON.stringify({ conversationID: ctx.conversationID, messageType: ctx.messageType })
    }
  }
}

// ==================== 生命周期 ====================
onLoad((options) => {
  if (!options.conversationID) {
    console.error('未接收到 conversationID 参数')
    return
  }
  conversationID.value = options.conversationID;
  inputState.value = useMessageInputState({ conversationID: conversationID.value });
  fetchConversationInfo(conversationID.value)
  fetchJoinedGroupList()
  if (uni.$locateMessage) {
    locateMessage.value = uni.$locateMessage
    uni.$locateMessage = null
  }
})

onShow(() => fetchConversationInfo(conversationID.value))
</script>

<style>
.page-container { flex: 1; flex-direction: column; background-color: #F9FAFC; }
.message-list-container { flex: 1; flex-direction: column; background-color: #F9FAFC; }
</style>