红包功能简单化

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 {