红包功能简单化

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

@@ -8,7 +8,7 @@
   >
     <!-- <JoinGroupCard /> -->
     <div class="tui-chat-main">
-      <div v-if="isOfficial" class="tui-chat-safe-tips">
+      <!-- <div v-if="isOfficial" class="tui-chat-safe-tips">
         <span>
           {{
             TUITranslateService.t(
@@ -19,7 +19,7 @@
         <a @click="openComplaintLink(Link.complaint)">
           {{ TUITranslateService.t('TUIChat.点此投诉') }}
         </a>
-      </div>
+      </div> -->
       <MessageGroupApplication
         v-if="isGroup"
         :key="props.groupID"
@@ -145,9 +145,10 @@
                 <!-- 自定义消息，目前只支持【红包】 -->
                 <MessageCustom
                   v-else-if="item.type === TYPES.MSG_CUSTOM"
+                  ref="customRefMessage"
                   :content="item.getMessageContent()"
                   :messageItem="item"
-                  @claim="onClaim(item)"
+                  @claim="onClaim(item, index)"
                 />
               </MessageBubble>
             </div>
@@ -610,8 +611,9 @@
   }
 
   const { showDialog } = useUI()
+  const customRefMessage = ref(null)
   /** 领取红包 */
-  const onClaim = (item: IMessageModel) => {
+  const onClaim = (item: IMessageModel, index: number) => {
     const { conversationType, cloudCustomData, flow, payload } = item
     const data = JSON.parse(payload.data)
     // 群聊
@@ -641,21 +643,25 @@
             const show = await showDialog('提示', '是否领取该红包？')
             if (show) {
               newMessage.in = true
-
+              customRefMessage.value[index].updateClaimStatus(newMessage)
               item.modifyMessage({
                 cloudCustomData: JSON.stringify(newMessage)
               })
             }
           }
         } else {
+      
           newMessage.out = true
+          customRefMessage.value[index].updateClaimStatus(newMessage)
           item.modifyMessage({
             cloudCustomData: JSON.stringify(newMessage)
           })
-          navigateTo('/pages/red-packet/details', {
-            id: data.id,
-            type: conversationType
-          })
+          // .then(() => {
+          //   navigateTo('/pages/red-packet/details', {
+          //     id: data.id,
+          //     type: conversationType
+          //   })
+          // })
         }
       })
 

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

@@ -78,20 +78,25 @@
       "
     >
       <!-- 红包 -->
-      <view class="red-envelope" @click="onClaim">
+      <view
+        :style="{ background: isBackground }"
+        class="red-envelope"
+        @click="onClaim"
+      >
         <view class="top-title">
-          <Icon :file="unopenedEnvelope" width="78rpx" height="80rpx" />
+          <Icon
+            :file="isOpen ? kaiEnvelope : unopenedEnvelope"
+            width="78rpx"
+            height="80rpx"
+          />
           <text class="title">
             {{ customData.title }}
           </text>
         </view>
-        <text class="bottom-text">积分红包{{ customData.isOpen }}</text>
+        <text class="bottom-text">积分红包</text>
         <!-- 需要处理报错 -->
         <!-- <text>
-          {{
-            props.messageItem?.cloudCustomData &&
-            JSON.parse(props.messageItem?.cloudCustomData)
-          }}
+          {{ claimStatus }}
         </text> -->
       </view>
     </template>
@@ -119,6 +124,7 @@
   import Icon from '../../../common/Icon.vue'
   import star from '../../../../assets/icon/star-light.png'
   import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
+  import kaiEnvelope from '../../../../assets/icon/kai-unopened-envelope.svg'
 
   interface Props {
     messageItem: IMessageModel
@@ -145,6 +151,28 @@
     businessID: ''
   })
 
+  props.messageItem?.cloudCustomData &&
+    JSON.parse(props.messageItem?.cloudCustomData)
+  // 红包领取状态
+  const claimStatus = reactive({
+    in: props.messageItem?.cloudCustomData
+      ? JSON.parse(props.messageItem?.cloudCustomData).in
+      : false,
+    out: props.messageItem?.cloudCustomData
+      ? JSON.parse(props.messageItem?.cloudCustomData).out
+      : false
+  })
+
+  /** 红包样式 */
+  const isOpen = computed(() => claimStatus.in || claimStatus.out)
+  const isBackground = computed(() => {
+    if (props.messageItem.type === 'in') {
+      return claimStatus.in ? '#ffaf55' : '#f3901f'
+    } else {
+      return claimStatus.out ? '#ffaf55' : '#f3901f'
+    }
+  })
+
   watchEffect(() => {
     custom.value = props.content
     message.value = props.messageItem
@@ -165,6 +193,16 @@
     // console.log(customData.value)
     emits('claim')
   }
+
+  // Vue3组件抛出方法
+  defineExpose({
+    // 修改领取红包后状态
+    updateClaimStatus(data: any) {
+      // console.log('更新红包领取状态')
+      claimStatus.in = data.in
+      claimStatus.out = data.out
+    }
+  })
 </script>
 <style lang="scss" scoped>
   @import '../../../../assets/styles/common';
@@ -237,7 +275,6 @@
   .red-envelope {
     display: flex;
     flex-direction: column;
-    background: #f3901f;
     border-radius: 16rpx;
     padding: 20rpx;
     .top-title {