红包功能简单化

TUIKit/assets/icon/kai-unopened-envelope.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768564293497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17931" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M788.31616 122.88H220.32384C200.4992 122.88 184.32 139.18208 184.32 158.98624v269.14816a385.51552 385.51552 0 0 0 36.49536 38.1952 404.13184 404.13184 0 0 0 127.30368 78.21312c35.08224 13.7216 171.6224 55.0912 312.40192 0a403.00544 403.00544 0 0 0 127.30368-78.21312 386.048 386.048 0 0 0 36.49536-38.1952V158.98624c0-19.80416-16.19968-36.10624-36.00384-36.10624z" fill="#FEF4E8" opacity=".5" p-id="17932"></path><path d="M802.7136 339.16928a425.65632 425.65632 0 0 1-134.18496 82.51392c-9.1136 3.4816-18.30912 6.69696-27.60704 9.60512a136.58112 136.58112 0 0 1-272.9984 0 449.98656 449.98656 0 0 1-27.60704-9.6256 424.52992 424.52992 0 0 1-134.20544-82.47296 434.3808 434.3808 0 0 1-21.58592-21.2992v540.11904c0 19.78368 16.1792 35.98336 36.00384 35.98336h567.99232c19.80416 0 36.00384-16.1792 36.00384-36.00384V317.99296c-7.10656 7.31136-14.29504 14.41792-21.8112 21.1968z" fill="#E12D38" opacity=".5" p-id="17933"></path><path d="M504.32 313.38496a113.43872 113.43872 0 0 0-113.39776 113.39776 113.43872 113.43872 0 0 0 113.39776 113.39776 113.43872 113.43872 0 0 0 113.39776-113.39776 113.43872 113.43872 0 0 0-113.39776-113.39776z m40.79616 121.20064l10.19904 34.89792a6.7584 6.7584 0 0 1-8.3968 8.3968l-34.89792-10.19904a27.27936 27.27936 0 0 0-15.50336 0l-34.816 10.19904a6.7584 6.7584 0 0 1-8.3968-8.3968l10.21952-34.89792a27.2384 27.2384 0 0 0 0-15.50336l-10.19904-34.816a6.7584 6.7584 0 0 1 8.3968-8.3968l34.89792 10.21952c4.99712 1.49504 10.40384 1.49504 15.50336 0l34.89792-10.19904a6.7584 6.7584 0 0 1 8.3968 8.3968l-10.19904 34.89792a27.79136 27.79136 0 0 0-0.1024 15.40096z" fill="#FDD041" opacity=".5" p-id="17934"></path><path d="M509.82912 397.68064l24.8832-7.31136a4.8128 4.8128 0 0 1 6.00064 6.02112l-7.29088 24.8832a19.08736 19.08736 0 0 0 0 11.10016l7.29088 24.90368a4.8128 4.8128 0 0 1-6.00064 6.00064l-24.8832-7.29088a19.0464 19.0464 0 0 0-11.10016 0l-24.90368 7.29088a4.8128 4.8128 0 0 1-6.00064-6.00064l7.29088-24.90368a19.08736 19.08736 0 0 0 0-11.10016l-7.29088-24.8832a4.8128 4.8128 0 0 1 6.00064-6.02112l24.90368 7.31136c3.6864 1.10592 7.49568 1.10592 11.10016 0z" fill="#E12D38" opacity=".5" p-id="17935"></path></svg>

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 {