-
+
@@ -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
+ // })
+ // })
}
})
diff --git a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
index e865164..1e37cdf 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -78,20 +78,25 @@
"
>
-
+
-
+
{{ customData.title }}
- 积分红包{{ customData.isOpen }}
+ 积分红包
@@ -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
+ }
+ })