获取到红包信息后更新UI

TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue

@@ -20,8 +20,9 @@
   import { useUI } from '@/utils/use-ui'
   import { navigateTo } from '@/utils/router'
   import { sendRedEnvelope } from '../../../../../api/tui-kit'
+  import { useUserStore } from '../../../../../stores/user'
 
-  const { showDialog } = useUI()
+  const { showDialog, showToast } = useUI()
 
   const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #a9a9a9; font-size: 32rpx; font-style: normal; text-transform: none;`
   const evaluateIcon = custom
@@ -169,8 +170,25 @@
   const pwdModalSubmit = async (e: number[]) => {
     // 默认文本
     const text = `${formData.title || '恭喜发财，大吉大利'}`
+    const isGroup = currentConversation?.value?.type === 'GROUP'
+    const data = {
+      password: e.join(''),
+      title: text,
+      packetType: isGroup ? 2 : 3,
+      receiverType: isGroup ? 2 : 1,
+      receiverIMIds: isGroup
+        ? []
+        : [currentConversation?.value?.userProfile.userID],
+      totalAmount: Number(formData.integral),
+      totalCount: Number(formData.num || '1')
+    }
+    try {
+      tixian.value.close()
+      const res = await sendRedEnvelope(data)
+
       const payload = {
         data: JSON.stringify({
+          id: res.data.id,
           businessID: CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE,
           version: 1,
           // 积分
@@ -179,6 +197,8 @@
           num: Number(formData.num || '1'),
           // 发送类型
           type: currentConversation?.value?.type,
+          // 是否打开红包
+          isOpen: false,
           title: text
         }),
         description: text,
@@ -203,23 +223,12 @@
           offlinePushInfoCreateParams
         )
       }
-    const isGroup = currentConversation?.value?.type === 'GROUP'
-    const data = {
-      password: e.join(''),
-      title: text,
-      packetType: isGroup ? 2 : 1,
-      receiverType: isGroup ? 2 : 1,
-      totalAmount: Number(formData.integral),
-      totalCount: Number(formData.num || '1')
-    }
-    try {
-      tixian.value.close()
-      await sendRedEnvelope(data)
       TUIChatService.sendCustomMessage(
         options as SendMessageParams,
         sendMessageOptions
       )
       container?.value?.toggleDialogDisplay(false)
+      await showToast('发送成功', 'success')
     } catch (error) {
       tixian.value.close()
     }

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

TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

@@ -78,14 +78,14 @@
       "
     >
       <!-- 红包 -->
-      <view class="red-envelope">
+      <view class="red-envelope" @click="onClaim">
         <view class="top-title">
           <Icon :file="unopenedEnvelope" width="78rpx" height="80rpx" />
           <text class="title">
             {{ customData.title }}
           </text>
         </view>
-        <text class="bottom-text">积分红包</text>
+        <text class="bottom-text">积分红包{{ customData.isOpen }}</text>
       </view>
     </template>
     <template v-else>
@@ -112,11 +112,19 @@
     content: any
   }
 
+  interface IEmit {
+    (key: 'claim'): void
+  }
+
+  const emits = defineEmits<IEmit>()
+
   const props = withDefaults(defineProps<Props>(), {
     messageItem: undefined,
     content: undefined
   })
 
+  console.log(props.messageItem, '获取到红包信息后更新UI')
+
   const custom = ref()
   const message = ref<IMessageModel>()
   const extension = ref()
@@ -137,6 +145,12 @@
   const openLink = (url: any) => {
     window.open(url)
   }
+
+  /** 红包领取 */
+  const onClaim = () => {
+    // console.log(customData.value)
+    emits('claim')
+  }
 </script>
 <style lang="scss" scoped>
   @import '../../../../assets/styles/common';

api/tui-kit.js

@@ -49,3 +49,12 @@ export const sendRedEnvelope = data => {
     data
   })
 }
+
+/** 领取红包 */
+export const receiveRedEnvelope = data => {
+  return http({
+    url: `/api/system/pointsRedPacket/receive`,
+    method: 'post',
+    data
+  })
+}