获取到红包信息后更新UI

TUIKit/components/TUIChat/message-list/index.vue

@@ -142,10 +142,12 @@
                   v-else-if="item.type === TYPES.MSG_LOCATION"
                   :content="item.getMessageContent()"
                 />
+                <!-- 自定义消息，目前只支持【红包】 -->
                 <MessageCustom
                   v-else-if="item.type === TYPES.MSG_CUSTOM"
                   :content="item.getMessageContent()"
                   :messageItem="item"
+                  @claim="onClaim(item)"
                 />
               </MessageBubble>
             </div>
@@ -277,6 +279,7 @@
   import chatStorage from '../utils/chatStorage'
   import { IAudioContext } from '../../../interface'
   import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
+  import { receiveRedEnvelope } from '../../../../api/tui-kit'
 
   interface IEmits {
     (e: 'closeInputToolBar'): void
@@ -601,6 +604,37 @@
     })
   }
 
+  /** 领取红包 */
+  const onClaim = (item: IMessageModel) => {
+    const { conversationType, flow, payload } = item
+    const data = JSON.parse(payload.data)
+    // 群聊
+    if (conversationType === TYPES.value.CONV_GROUP) {
+      console.log(item)
+      console.log(data)
+      receiveRedEnvelope({
+        redPacketId: data.id
+      })
+    } else {
+      // 个人红包
+      // 只能对方领取
+      if (flow === 'in') {
+        // 修改后的消息
+        const newMessage = {
+          ...data,
+          isOpen: true
+        }
+        item.modifyMessage({
+          cloudCustomData: JSON.stringify(newMessage)
+        })
+        return
+        receiveRedEnvelope({
+          redPacketId: data.id
+        })
+      }
+    }
+  }
+
   const resendMessageConfirm = () => {
     reSendDialogShow.value = !reSendDialogShow.value
     const messageModel = resendMessageData.value