发送红包接口有问题，添加群恢复

TUIKit/assets/icon/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="1767794579271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17300" width="80" height="80" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M792.7 960.2H232.6c-22.1 0-40-17.9-40-40v-816c0-22.1 17.9-40 40-40h560.1c22.1 0 40 17.9 40 40v816c0 22.1-17.9 40-40 40z" fill="#CE302F" p-id="17301"></path><path d="M792.7 965.2H232.6c-24.8 0-45-20.2-45-45v-816c0-24.8 20.2-45 45-45h560.1c24.8 0 45 20.2 45 45v816c0 24.8-20.2 45-45 45z m-560.1-896c-19.3 0-35 15.7-35 35v816c0 19.3 15.7 35 35 35h560.1c19.3 0 35-15.7 35-35v-816c0-19.3-15.7-35-35-35H232.6z" fill="#333333" p-id="17302"></path><path d="M827.1 336.5S640 403.9 511.9 404.1c-125.7 0.2-313.3-67.6-313.3-67.6V87c0-12.6 9.4-22.7 21-22.7h586.5c11.6 0 21 10.2 21 22.7v249.5z" fill="#C12727" p-id="17303"></path><path d="M832.7 320.2s-190.6 63.4-321.1 63.6c-128 0.2-319.1-63.6-319.1-63.6V85.6c0-11.8 9.6-21.4 21.4-21.4h597.4c11.8 0 21.4 9.6 21.4 21.4v234.6z" fill="#CE302F" p-id="17304"></path><path d="M511 388.8c-127.3 0-318.1-63.2-320-63.8l-3.4-1.1V85.6c0-14.5 11.8-26.4 26.4-26.4h597.4c14.5 0 26.4 11.8 26.4 26.4v238.2l-3.4 1.1c-1.9 0.6-192.8 63.6-322.6 63.8-0.3 0.1-0.6 0.1-0.8 0.1z m-313.4-72.2c26.2 8.5 197.1 62.2 313.4 62.2h0.6c118.7-0.2 289.8-53.7 316.1-62.2v-231c0-9-7.3-16.4-16.4-16.4H214c-9 0-16.4 7.3-16.4 16.4v231z" fill="#333333" p-id="17305"></path><path d="M512.7 394.8m-97.1 0a97.1 97.1 0 1 0 194.2 0 97.1 97.1 0 1 0-194.2 0Z" fill="#C12727" p-id="17306"></path><path d="M512.7 383.8m-90.7 0a90.7 90.7 0 1 0 181.4 0 90.7 90.7 0 1 0-181.4 0Z" fill="#F8B739" p-id="17307"></path><path d="M512.7 479.5c-52.8 0-95.7-42.9-95.7-95.7s42.9-95.7 95.7-95.7c52.8 0 95.7 42.9 95.7 95.7s-43 95.7-95.7 95.7z m0-181.4c-47.2 0-85.7 38.4-85.7 85.7s38.4 85.7 85.7 85.7c47.2 0 85.7-38.4 85.7-85.7s-38.5-85.7-85.7-85.7z" fill="#333333" p-id="17308"></path><path d="M512.7 372.8m-74.3 0a74.3 74.3 0 1 0 148.6 0 74.3 74.3 0 1 0-148.6 0Z" fill="#F7B034" p-id="17309"></path></svg>

TUIKit/components/TUIChat/index.vue

@@ -288,14 +288,15 @@
     if (!conversation) {
       return
     }
+
     // return when currentConversationID.value is the same as conversation.conversationID.
     if (currentConversationID.value === conversation?.conversationID) {
       return
     }
-
     isGroup.value = false
     let conversationType = TUIChatEngine.TYPES.CONV_C2C
     const conversationID = conversation.conversationID
+
     if (conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP)) {
       conversationType = TUIChatEngine.TYPES.CONV_GROUP
       isGroup.value = true
@@ -304,7 +305,6 @@
         ''
       )
     }
-
     headerExtensionList.value = []
     isMultipleSelectMode.value = false
     // Initialize chatType
@@ -350,6 +350,4 @@
   }
 </script>
 
-<style scoped lang="scss" src="./style/index.scss">
+<style scoped lang="scss" src="./style/index.scss"></style>
-
-</style>

TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue

@@ -213,7 +213,6 @@
       )
     }
 
-
     TUIChatService.sendCustomMessage(
       options as SendMessageParams,
       sendMessageOptions

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

@@ -59,10 +59,10 @@
             v-if="featureConfig.InputQuickReplies"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
           />
-          <Evaluate
+          <!-- <Evaluate
             v-if="featureConfig.InputEvaluation"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
-          />
+          /> -->
           <!-- 红包 -->
           <RedEnvelope />
         </template>

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

@@ -3,17 +3,50 @@
   import ToolbarItemContainer from '../toolbar-item-container/index.vue'
   import custom from '../../../../assets/icon/red-packet.svg'
   import { isUniFrameWork } from '../../../../utils/env'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import TUIChatEngine, {
+    type IConversationModel,
+    type SendMessageParams,
+    SendMessageOptions,
+    StoreName,
+    TUIChatService,
+    TUIStore
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
+  import OfflinePushInfoManager, {
+    type IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager'
+  import { getUserPayPwd } from '@/api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateTo } from '@/utils/router'
+  import { sendRedEnvelope } from '../../../../../api/tui-kit'
 
-  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+  const { showDialog } = 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
 
-  /** 提示框 */
+  const currentConversation = ref<IConversationModel>()
-  const message = ref()
+
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: (conversation: IConversationModel) => {
+      currentConversation.value = conversation
+    }
+  })
+
+  const tixian = ref()
+  /** 错误提示 */
+  const errorData = reactive({
+    integralShow: false,
+    numShow: false,
+    color: '#f56c6c'
+  })
   const container = ref()
   const formData = reactive({
     //  积分
     integral: '',
+    // 红包数量
+    num: '',
     // 红包标题
     title: ''
   })
@@ -27,16 +60,49 @@
     if (!formData.integral) {
       data.valid = true
       data.message = '请输入积分'
-      message.value.open()
       return data
     }
     if (Number(formData.integral) > 2000) {
       data.valid = true
       data.message = '积分不能大于2000'
-      message.value.open()
+
+      return data
+    }
+    return data
+  })
+
+  /** 监听是否是群组 */
+  const isGroup = computed(
+    () => currentConversation?.value?.type === 'GROUP'
+  )
+  /** 监听群人数 */
+  const memberCount = computed(
+    () => currentConversation?.value?.groupProfile?.memberCount
+  )
+
+  /** 监听红包个数 */
+  const monitorNum = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    if (!formData.num) {
+      data.valid = true
+      data.message = '请输入红包个数'
       return data
     }
 
+    if (Number(formData.num) === 0) {
+      data.valid = true
+      data.message = '红包个数不能为 0'
+      return data
+    }
+
+    if (Number(formData.num) > memberCount.value) {
+      data.valid = true
+      data.message = '红包个数不能大于群人数'
+      return data
+    }
     return data
   })
 
@@ -44,6 +110,9 @@
     console.log('弹出窗口')
     formData.integral = ''
     formData.title = ''
+    formData.num = ''
+    errorData.integralShow = false
+    errorData.numShow = false
   }
 
   const onDialogClose = () => {
@@ -54,9 +123,106 @@
     container?.value?.toggleDialogDisplay(false)
   }
 
-  const onSubmit = () => {
+  /** 监听输入 */
-    if (!formData.integral) return
+  const monitorInput = () => {
-    console.log('确认')
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    errorData.integralShow = false
+  }
+
+  /** 监听红包个数输入值 */
+  const numInput = () => {
+    if (monitorNum.value.valid) {
+      errorData.numShow = true
+      return
+    }
+    errorData.numShow = false
+  }
+
+  const onSubmit = async () => {
+    if (isGroup.value) {
+      if (monitorNum.value.valid) {
+        errorData.numShow = true
+        return
+      }
+    }
+
+    if (monitorPoints.value.valid) {
+      errorData.integralShow = true
+      return
+    }
+
+    const res = await getUserPayPwd()
+    if (res?.data) {
+      tixian.value.open()
+    } else {
+      const show = await showDialog('提示', '请先设置支付密码')
+      if (show) {
+        navigateTo('/pages/my-index/wallet/edit-password', { type: 0 })
+      }
+    }
+  }
+
+  const pwdModalSubmit = async (e: number[]) => {
+    // 默认文本
+    const text = `${formData.title || '恭喜发财，大吉大利'}`
+    const payload = {
+      data: JSON.stringify({
+        businessID: CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE,
+        version: 1,
+        // 积分
+        integral: Number(formData.integral),
+        // 红包个数
+        num: Number(formData.num || '1'),
+        // 发送类型
+        type: currentConversation?.value?.type,
+        title: text
+      }),
+      description: text,
+      extension: text
+    }
+    const options = {
+      to:
+        currentConversation?.value?.groupProfile?.groupID ||
+        currentConversation?.value?.userProfile?.userID,
+      conversationType: currentConversation?.value?.type,
+      payload,
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
+    }
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation: currentConversation.value as IConversationModel,
+      payload: options.payload,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
+    }
+
+    const sendMessageOptions: SendMessageOptions = {
+      offlinePushInfo: OfflinePushInfoManager.create(
+        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)
+    } catch (error) {
+      tixian.value.close()
+    }
   }
 </script>
 
@@ -71,6 +237,11 @@
     @onDialogShow="onDialogShow"
     @onDialogClose="onDialogClose"
   >
+    <uu-pwdModal
+      ref="tixian"
+      class="pwd-modal"
+      @success="pwdModalSubmit"
+    ></uu-pwdModal>
     <view class="red-envelope">
       <view class="top-title">
         <text class="title">发红包</text>
@@ -81,22 +252,59 @@
           @click.stop="closeDialog"
         ></uni-icons>
       </view>
-      <!-- 输入框 -->
+      <!-- 红包个数 -->
-      <view
+      <view v-if="isGroup" class="group-box">
-        :class="{ 'on-reminder': monitorPoints.valid }"
+        <view
-        class="input-box"
+          :class="{ 'on-reminder': errorData.numShow }"
-      >
+          class="input-box"
-        <text>积分</text>
+        >
-        <input
+          <view class="form-box">
-          v-model="formData.integral"
+            <text>红包个数</text>
-          :placeholder-style="placeholderStyle"
+            <view class="num-box">
-          confirm-type="done"
+              <input
-          type="number"
+                v-model="formData.num"
-          placeholder="0.00"
+                :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
-          @confirm="onSubmit"
+                  errorData.numShow ? '#f56c6c' : '#a9a9a9'
-        />
+                }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+                confirm-type="done"
+                type="number"
+                placeholder="填写红包个数"
+                @input="numInput"
+                @confirm="onSubmit"
+              />
+              <text>个</text>
+            </view>
+          </view>
+          <text v-if="errorData.numShow" class="error-text">
+            {{ monitorNum.message }}
+          </text>
+        </view>
+        <text class="num">本群共{{ memberCount }}人</text>
       </view>
 
+      <!-- 输入框 -->
+      <view
+        :class="{ 'on-reminder': errorData.integralShow }"
+        class="input-box"
+      >
+        <view class="form-box">
+          <text>积分</text>
+          <input
+            v-model="formData.integral"
+            :placeholder-style="`font-family: PingFang SC, PingFang SC; font-weight: 500; color: ${
+              errorData.integralShow ? '#f56c6c' : '#a9a9a9'
+            }; font-size: 32rpx; font-style: normal; text-transform: none;`"
+            confirm-type="done"
+            type="digit"
+            placeholder="0.00"
+            @input="monitorInput"
+            @confirm="onSubmit"
+          />
+        </view>
+        <text v-if="errorData.integralShow" class="error-text">
+          {{ monitorPoints.message }}
+        </text>
+      </view>
       <view class="input-box title-box">
         <input
           v-model="formData.title"
@@ -115,15 +323,6 @@
         <button class="btn" @click.stop="onSubmit">塞进红包</button>
       </view>
     </view>
-
-    <!-- 提示框 -->
-    <uni-popup ref="message" type="message">
-      <uni-popup-message
-        type="error"
-        :message="monitorPoints.message"
-        :duration="2000"
-      ></uni-popup-message>
-    </uni-popup>
   </ToolbarItemContainer>
 </template>
 

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

@@ -5,7 +5,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 26rpx;
+    margin-bottom: 30rpx;
     .title {
       font-size: 32rpx;
       color: #1c1c1c;
@@ -13,13 +13,19 @@
   }
 
   .input-box {
-    margin-bottom: 26rpx;
+    margin-bottom: 60rpx;
     background: #ffffff;
     border-radius: 16rpx;
     padding: 24rpx 34rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    .form-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
     text {
       font-size: 32rpx;
       color: #1c1c1c;
@@ -30,6 +36,16 @@
       color: #1c1c1c;
       text-align: right;
     }
+    .num-box {
+      display: flex;
+      align-items: center;
+      justify-content: right;
+      text {
+        margin-left: 10rpx;
+        margin-bottom: 1rpx;
+        color: #1c1c1c;
+      }
+    }
   }
 
   .title-box {
@@ -73,11 +89,40 @@
 
   // 警告提现
   .on-reminder {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     text {
-      color: #f56c6c;
+      color: #f56c6c !important;
     }
     input {
       color: #f56c6c;
     }
+    .error-text {
+      margin-top: 10rpx;
+      font-size: 24rpx;
+    }
+  }
+
+  // 群红包个数
+  .group-box {
+    display: flex;
+    flex-direction: column;
+    .input-box {
+      margin-bottom: 10rpx;
+    }
+    .num {
+      margin-bottom: 30rpx;
+      margin-left: 34rpx;
+      font-size: 28rpx;
+      color: #5e5e5e;
+    }
+  }
+}
+
+.pwd-modal {
+  :deep(.modal) {
+    position: relative;
+    right: 20rpx;
   }
 }

TUIKit/components/TUIChat/message-input-toolbar/toolbar-item-container/index.vue

@@ -4,13 +4,13 @@
     :class="[
       'toolbar-item-container',
       !isPC && 'toolbar-item-container-h5',
-      isUniFrameWork && 'toolbar-item-container-uni',
+      isUniFrameWork && 'toolbar-item-container-uni'
     ]"
   >
     <div
       :class="[
         'toolbar-item-container-icon',
-        isUniFrameWork && 'toolbar-item-container-uni-icon',
+        isUniFrameWork && 'toolbar-item-container-uni-icon'
       ]"
       @click="toggleToolbarItem"
     >
@@ -34,7 +34,7 @@
         'toolbar-item-container-dialog',
         isDark && 'toolbar-item-container-dialog-dark',
         !isPC && 'toolbar-item-container-h5-dialog',
-        isUniFrameWork && 'toolbar-item-container-uni-dialog',
+        isUniFrameWork && 'toolbar-item-container-uni-dialog'
       ]"
     >
       <BottomPopup
@@ -51,88 +51,95 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from '../../../../adapter-vue';
+  import { ref, watch } from '../../../../adapter-vue'
-import { outsideClick } from '@tencentcloud/universal-api';
+  import { outsideClick } from '@tencentcloud/universal-api'
-import Icon from '../../../common/Icon.vue';
+  import Icon from '../../../common/Icon.vue'
-import BottomPopup from '../../../common/BottomPopup/index.vue';
+  import BottomPopup from '../../../common/BottomPopup/index.vue'
-import { isPC, isUniFrameWork } from '../../../../utils/env';
+  import { isPC, isUniFrameWork } from '../../../../utils/env'
-import TUIChatConfig from '../../config';
+  import TUIChatConfig from '../../config'
 
-const props = defineProps({
+  const props = defineProps({
-  iconFile: {
+    iconFile: {
-    type: String,
+      type: String,
-    required: true,
+      required: true
-  },
+    },
-  title: {
+    title: {
-    type: String,
+      type: String,
-    default: '',
+      default: ''
-  },
+    },
-  needDialog: {
+    needDialog: {
-    type: Boolean,
+      type: Boolean,
-    default: true,
+      default: true
-  },
+    },
-  iconWidth: {
+    iconWidth: {
-    type: String,
+      type: String,
-    default: '20px',
+      default: '20px'
-  },
+    },
-  iconHeight: {
+    iconHeight: {
-    type: String,
+      type: String,
-    default: '20px',
+      default: '20px'
-  },
+    },
-  // Whether to display the bottom popup dialog on mobile devices
+    // Whether to display the bottom popup dialog on mobile devices
-  // Invalid on PC
+    // Invalid on PC
-  needBottomPopup: {
+    needBottomPopup: {
-    type: Boolean,
+      type: Boolean,
-    default: false,
+      default: false
-  },
+    }
-});
+  })
 
-const emits = defineEmits(['onIconClick', 'onDialogClose', 'onDialogShow']);
+  const emits = defineEmits([
+    'onIconClick',
+    'onDialogClose',
+    'onDialogShow'
+  ])
 
-const isDark = ref(TUIChatConfig.getTheme() === 'dark');
+  const isDark = ref(TUIChatConfig.getTheme() === 'dark')
-const showDialog = ref(false);
+  const showDialog = ref(false)
-const toolbarItemRef = ref();
+  const toolbarItemRef = ref()
-const dialogRef = ref();
+  const dialogRef = ref()
 
-watch(() => showDialog.value, (newVal) => {
+  watch(
-  if (!newVal) {
+    () => showDialog.value,
-    emits('onDialogClose', dialogRef);
+    newVal => {
-  } else {
+      if (!newVal) {
-    emits('onDialogShow', dialogRef);
+        emits('onDialogClose', dialogRef)
+      } else {
+        emits('onDialogShow', dialogRef)
+      }
+    }
+  )
+
+  const toggleToolbarItem = () => {
+    emits('onIconClick', dialogRef)
+    if (isPC) {
+      outsideClick.listen({
+        domRefs: toolbarItemRef.value,
+        handler: closeToolbarItem
+      })
+    }
+    if (!props.needDialog) {
+      return
+    }
+    toggleDialogDisplay(!showDialog.value)
   }
-});
 
-const toggleToolbarItem = () => {
+  const closeToolbarItem = () => {
-  emits('onIconClick', dialogRef);
+    showDialog.value = false
-  if (isPC) {
-    outsideClick.listen({
-      domRefs: toolbarItemRef.value,
-      handler: closeToolbarItem,
-    });
   }
-  if (!props.needDialog) {
+
-    return;
+  const toggleDialogDisplay = (showStatus: boolean) => {
+    if (showDialog.value === showStatus) {
+      return
+    }
+    showDialog.value = showStatus
   }
-  toggleDialogDisplay(!showDialog.value);
-};
 
-const closeToolbarItem = () => {
+  const onPopupClose = () => {
-  showDialog.value = false;
+    showDialog.value = false
-};
-
-const toggleDialogDisplay = (showStatus: boolean) => {
-  if (showDialog.value === showStatus) {
-    return;
   }
-  showDialog.value = showStatus;
-};
 
-const onPopupClose = () => {
+  defineExpose({
-  showDialog.value = false;
+    toggleDialogDisplay
-};
+  })
-
-defineExpose({
-  toggleDialogDisplay,
-});
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>

TUIKit/components/TUIChat/message-input/message-input-quote/index.vue

@@ -4,13 +4,20 @@
     :class="{
       'input-quote-container': true,
       'input-quote-container-uni': isUniFrameWork,
-      'input-quote-container-h5': isH5,
+      'input-quote-container-h5': isH5
     }"
   >
     <div class="input-quote-content">
       <div class="max-one-line">
-        {{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
+        {{ quoteMessage.nick || quoteMessage.from }}:
+        {{ quoteContentText }}
       </div>
+      <Icon
+        v-if="isRedEnvelope"
+        :file="unopenedEnvelope"
+        width="44rpx"
+        height="55rpx"
+      />
       <Icon
         class="input-quote-close-icon"
         :file="closeIcon"
@@ -23,135 +30,174 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
+  import {
-import TUIChatEngine, {
+    ref,
-  TUIStore,
+    computed,
-  StoreName,
+    onMounted,
-  TUITranslateService,
+    onUnmounted
-  IMessageModel,
+  } from '../../../../adapter-vue'
-} from '@tencentcloud/chat-uikit-engine-lite';
+  import TUIChatEngine, {
-import Icon from '../../../common/Icon.vue';
+    TUIStore,
-import closeIcon from '../../../../assets/icon/icon-close.svg';
+    StoreName,
-import { isH5, isUniFrameWork } from '../../../../utils/env';
+    TUITranslateService,
-import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
+    IMessageModel
-import { InputDisplayType } from '../../../../interface';
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import Icon from '../../../common/Icon.vue'
+  import closeIcon from '../../../../assets/icon/icon-close.svg'
+  import { isH5, isUniFrameWork } from '../../../../utils/env'
+  import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
+  import { InputDisplayType } from '../../../../interface'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
 
-interface IProps {
+  interface IProps {
-  displayType?: InputDisplayType;
+    displayType?: InputDisplayType
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-  displayType: 'editor',
-});
-
-const TYPES = TUIChatEngine.TYPES;
-const quoteMessage = ref<IMessageModel>();
-
-onMounted(() => {
-  TUIStore.watch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
-  });
-});
-
-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.CHAT, {
-    quoteMessage: onQuoteMessageUpdated,
-  });
-});
-
-const quoteContentText = computed(() => {
-  let _quoteContentText;
-  switch (quoteMessage.value?.type) {
-    case TYPES.MSG_TEXT:
-      _quoteContentText = transformTextWithKeysToEmojiNames(quoteMessage.value.payload?.text);
-      break;
-    case TYPES.MSG_IMAGE:
-      _quoteContentText = TUITranslateService.t('TUIChat.图片');
-      break;
-    case TYPES.MSG_AUDIO:
-      _quoteContentText = TUITranslateService.t('TUIChat.语音');
-      break;
-    case TYPES.MSG_VIDEO:
-      _quoteContentText = TUITranslateService.t('TUIChat.视频');
-      break;
-    case TYPES.MSG_FILE:
-      _quoteContentText = TUITranslateService.t('TUIChat.文件');
-      break;
-    case TYPES.MSG_CUSTOM:
-      _quoteContentText = TUITranslateService.t('TUIChat.自定义');
-      break;
-    case TYPES.MSG_FACE:
-      _quoteContentText = TUITranslateService.t('TUIChat.表情');
-      break;
-    case TYPES.MSG_MERGER:
-      _quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
-      break;
-    default:
-      _quoteContentText = TUITranslateService.t('TUIChat.消息');
-      break;
   }
-  return _quoteContentText;
-});
 
-function cancelQuote() {
+  const props = withDefaults(defineProps<IProps>(), {
-  TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
+    displayType: 'editor'
-}
+  })
 
-function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
+  const TYPES = TUIChatEngine.TYPES
-  if (options?.message && options?.type === 'quote') {
+  const quoteMessage = ref<IMessageModel>()
-    quoteMessage.value = options.message;
+
-  } else {
+  onMounted(() => {
-    quoteMessage.value = undefined;
+    TUIStore.watch(StoreName.CHAT, {
+      quoteMessage: onQuoteMessageUpdated
+    })
+  })
+
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.CHAT, {
+      quoteMessage: onQuoteMessageUpdated
+    })
+  })
+
+  /** 是否是红包 */
+  const isRedEnvelope = computed(() => {
+    if (quoteMessage.value?.payload?.data) {
+      const businessID = JSON?.parse(
+        quoteMessage.value?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  })
+  /** 红包内容 */
+  const quoteRedEnvelopeContentText = computed(() => {
+    if (isRedEnvelope.value) {
+      const data = JSON.parse(quoteMessage.value?.payload?.data)
+      return `${data.title}`
+    }
+    return ''
+  })
+
+  const quoteContentText = computed(() => {
+    let _quoteContentText
+    if (isRedEnvelope.value) {
+      _quoteContentText = `${quoteRedEnvelopeContentText.value}`
+    } else {
+      switch (quoteMessage.value?.type) {
+        case TYPES.MSG_TEXT:
+          _quoteContentText = transformTextWithKeysToEmojiNames(
+            quoteMessage.value.payload?.text
+          )
+          break
+        case TYPES.MSG_IMAGE:
+          _quoteContentText = TUITranslateService.t('TUIChat.图片')
+          break
+        case TYPES.MSG_AUDIO:
+          _quoteContentText = TUITranslateService.t('TUIChat.语音')
+          break
+        case TYPES.MSG_VIDEO:
+          _quoteContentText = TUITranslateService.t('TUIChat.视频')
+          break
+        case TYPES.MSG_FILE:
+          _quoteContentText = TUITranslateService.t('TUIChat.文件')
+          break
+        case TYPES.MSG_CUSTOM:
+          _quoteContentText = TUITranslateService.t('TUIChat.自定义')
+          break
+        case TYPES.MSG_FACE:
+          _quoteContentText = TUITranslateService.t('TUIChat.表情')
+          break
+        case TYPES.MSG_MERGER:
+          _quoteContentText = TUITranslateService.t('TUIChat.聊天记录')
+          break
+        default:
+          _quoteContentText = TUITranslateService.t('TUIChat.消息')
+          break
+      }
+    }
+
+    return _quoteContentText
+  })
+
+  function cancelQuote() {
+    TUIStore.update(StoreName.CHAT, 'quoteMessage', {
+      message: undefined,
+      type: 'quote'
+    })
+  }
+
+  function onQuoteMessageUpdated(options?: {
+    message: IMessageModel
+    type: string
+  }) {
+    if (options?.message && options?.type === 'quote') {
+      quoteMessage.value = options.message
+    } else {
+      quoteMessage.value = undefined
+    }
   }
-}
 </script>
 
 <style lang="scss" scoped>
-%common-container-style {
+  %common-container-style {
-  margin: 5px 100px 5px 8px;
+    margin: 5px 100px 5px 8px;
-  display: flex;
-  flex: 0 1 auto;
-
-  .input-quote-content {
     display: flex;
     flex: 0 1 auto;
-    background-color: #fafafa;
-    border-radius: 8px;
-    padding: 12px;
-    font-size: 12px;
-    align-items: center;
-    line-height: 16px;
-    max-width: 100%;
-    box-sizing: border-box;
-    min-width: 0;
 
-    .max-one-line {
+    .input-quote-content {
+      display: flex;
       flex: 0 1 auto;
-      overflow: hidden;
+      background-color: #fafafa;
-      text-overflow: ellipsis;
+      border-radius: 8px;
-      white-space: nowrap;
+      padding: 12px;
+      font-size: 12px;
+      align-items: center;
+      line-height: 16px;
+      max-width: 100%;
+      box-sizing: border-box;
+      min-width: 0;
+
+      .max-one-line {
+        flex: 0 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .input-quote-close-icon {
+      margin-left: 5px;
+      padding: 5px;
     }
   }
 
-  .input-quote-close-icon {
+  .input-quote-container {
-    margin-left: 5px;
+    @extend %common-container-style;
-    padding: 5px;
   }
-}
 
-.input-quote-container {
+  .input-quote-container-uni {
-  @extend %common-container-style;
+    @extend %common-container-style;
-}
 
-.input-quote-container-uni {
+    margin: 5px 60px 0 30px;
-  @extend %common-container-style;
+  }
 
-  margin: 5px 60px 0 30px;
+  .input-quote-container-h5 {
-}
+    @extend %common-container-style;
 
-.input-quote-container-h5 {
+    margin: 5px 0 0;
-  @extend %common-container-style;
+  }
-
-  margin: 5px 0 0;
-}
 </style>

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

@@ -72,6 +72,22 @@
         </a>
       </div>
     </template>
+    <template
+      v-else-if="
+        customData.businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+      "
+    >
+      <!-- 红包 -->
+      <view class="red-envelope">
+        <view class="top-title">
+          <Icon :file="unopenedEnvelope" width="78rpx" height="80rpx" />
+          <text class="title">
+            {{ customData.title }}
+          </text>
+        </view>
+        <text class="bottom-text">积分红包</text>
+      </view>
+    </template>
     <template v-else>
       <span v-html="content.custom" />
     </template>
@@ -89,6 +105,8 @@
   import { ICustomMessagePayload } from '../../../../interface'
   import Icon from '../../../common/Icon.vue'
   import star from '../../../../assets/icon/star-light.png'
+  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
+
   interface Props {
     messageItem: IMessageModel
     content: any
@@ -187,4 +205,32 @@
       }
     }
   }
+
+  .red-envelope {
+    display: flex;
+    flex-direction: column;
+    background: #f3901f;
+    border-radius: 16rpx;
+    padding: 20rpx;
+    .top-title {
+      display: flex;
+      align-items: center;
+      padding-bottom: 10rpx;
+      margin-bottom: 10rpx;
+      border-bottom: 2rpx solid #ffffff;
+      .title {
+        width: 40vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .bottom-text {
+      font-size: 24rpx;
+      color: #ffffff;
+    }
+  }
 </style>

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

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="image-container" @click="handleImagePreview">
-    class="image-container"
-    @click="handleImagePreview"
-  >
     <image
       class="message-image"
       mode="aspectFit"
@@ -14,72 +11,72 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, ref } from '../../../../adapter-vue';
+  import { watchEffect, ref } from '../../../../adapter-vue'
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
+  import type { IMessageModel } from '@tencentcloud/chat-uikit-engine-lite'
-import type { IImageMessageContent } from '../../../../interface';
+  import type { IImageMessageContent } from '../../../../interface'
 
-interface IProps {
+  interface IProps {
-  content: IImageMessageContent;
+    content: IImageMessageContent
-  messageItem: IMessageModel;
+    messageItem: IMessageModel
-}
+  }
-interface IEmit {
+  interface IEmit {
-  (key: 'previewImage'): void;
+    (key: 'previewImage'): void
-}
+  }
 
-const emits = defineEmits<IEmit>();
+  const emits = defineEmits<IEmit>()
-const props = withDefaults(
+  const props = withDefaults(defineProps<IProps>(), {
-  defineProps<IProps>(),
-  {
     content: () => ({}),
-    messageItem: () => ({} as IMessageModel),
+    messageItem: () => ({} as IMessageModel)
-  },
+  })
-);
 
-const DEFAULT_MAX_SIZE = 155;
+  const DEFAULT_MAX_SIZE = 155
-const imageStyles = ref({ width: 'auto', height: 'auto' });
+  const imageStyles = ref({ width: 'auto', height: 'auto' })
 
-const genImageStyles = (value: { width?: any; height?: any }) => {
+  const genImageStyles = (value: { width?: any; height?: any }) => {
-  const { width, height } = value;
+    const { width, height } = value
-  if (width === 0 || height === 0) {
+    if (width === 0 || height === 0) {
-    return;
+      return
+    }
+
+    let imageWidth = 0
+    let imageHeight = 0
+    if (width >= height) {
+      imageWidth = DEFAULT_MAX_SIZE
+      imageHeight = (DEFAULT_MAX_SIZE * height) / width
+    } else {
+      imageWidth = (DEFAULT_MAX_SIZE * width) / height
+      imageHeight = DEFAULT_MAX_SIZE
+    }
+    imageStyles.value.width = imageWidth + 'px'
+    imageStyles.value.height = imageHeight + 'px'
   }
 
-  let imageWidth = 0;
+  watchEffect(() => {
-  let imageHeight = 0;
+    genImageStyles(props.content)
-  if (width >= height) {
+  })
-    imageWidth = DEFAULT_MAX_SIZE;
+
-    imageHeight = (DEFAULT_MAX_SIZE * height) / width;
+  const imageLoad = (event: Event) => {
-  } else {
+    genImageStyles(event.detail)
-    imageWidth = (DEFAULT_MAX_SIZE * width) / height;
-    imageHeight = DEFAULT_MAX_SIZE;
   }
-  imageStyles.value.width = imageWidth + 'px';
-  imageStyles.value.height = imageHeight + 'px';
-};
 
-watchEffect(() => {
+  const handleImagePreview = () => {
-  genImageStyles(props.content);
+    if (
-});
+      props.messageItem?.status === 'success' ||
-
+      props.messageItem.progress === 1
-const imageLoad = (event: Event) => {
+    ) {
-  genImageStyles(event.detail);
+      emits('previewImage')
-};
+    }
-
-const handleImagePreview = () => {
-  if (props.messageItem?.status === 'success' || props.messageItem.progress === 1) {
-    emits('previewImage');
   }
-};
 </script>
 
 <style lang="scss" scoped>
-.image-container {
+  .image-container {
-  position: relative;
+    position: relative;
-  background-color: #f4f4f4;
+    background-color: #f4f4f4;
-  font-size: 0;
+    font-size: 0;
 
-  .message-image {
+    .message-image {
-    max-width: 150px;
+      max-width: 150px;
+    }
   }
-}
 </style>

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

@@ -1,21 +1,20 @@
 <template>
   <div>
-    <div
+    <div class="message-record-container" @click="openMergeDetail">
-      class="message-record-container"
+      <div class="record-title">
-      @click="openMergeDetail"
-    >
-      <div
-        class="record-title"
-      >
         {{ props.renderData.title }}
       </div>
       <div class="record-abstract-container">
         <div
-          v-for="(item, index) in props.renderData.abstractList.slice(0, 7)"
+          v-for="(item, index) in props.renderData.abstractList.slice(
+            0,
+            7
+          )"
           :key="index"
           class="record-abstract-item"
         >
-          {{ transformTextWithKeysToEmojiNames(item) }}
+          <!-- {{ transformTextWithKeysToEmojiNames(item) }} -->
+          {{ topName(item) }}
         </div>
       </div>
       <div class="record-footer">
@@ -52,86 +51,98 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, withDefaults } from '../../../../../adapter-vue';
+  import { ref, computed, withDefaults } from '../../../../../adapter-vue'
-import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
+  import {
-import Overlay from '../../../../common/Overlay/index.vue';
+    TUITranslateService,
-import Drawer from '../../../../common/Drawer/index.vue';
+    IMessageModel
-import SimpleMessageList from '../simple-message-list/index.vue';
+  } from '@tencentcloud/chat-uikit-engine-lite'
-import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env';
+  import Overlay from '../../../../common/Overlay/index.vue'
-import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index';
+  import Drawer from '../../../../common/Drawer/index.vue'
-import { IMergeMessageContent } from '../../../../../interface';
+  import SimpleMessageList from '../simple-message-list/index.vue'
+  import { isH5, isPC, isUniFrameWork } from '../../../../../utils/env'
+  import { transformTextWithKeysToEmojiNames } from '../../../emoji-config/index'
+  import { IMergeMessageContent } from '../../../../../interface'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
 
-interface IEmits {
+  interface IEmits {
-  (e: 'assignMessageIDInUniapp', messageID: string): void;
+    (e: 'assignMessageIDInUniapp', messageID: string): void
-}
-
-interface IProps {
-  // Core data for rendering message record card and message list
-  renderData: IMergeMessageContent;
-  /**
-   * The MessageRecord component has two main functions:
-   * 1. display message record cards primarily.
-   * 2. clicking on it and show the simple message list.
-   * When used as a nested component with the disabled prop
-   * it is only need renderData to render message record cards.
-   * Therefore, 'messageItem' and 'disabled' is not a required prop.
-   */
-  disabled?: boolean;
-  messageItem?: IMessageModel;
-}
-
-const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  messageItem: () => ({}) as IMessageModel,
-  disabled: false,
-});
-
-const isMessageListVisible = ref(false);
-
-function openMergeDetail() {
-  if (props.disabled) {
-    return;
   }
-  if (!isUniFrameWork) {
-    isMessageListVisible.value = true;
-  } else {
-    emits('assignMessageIDInUniapp', props.messageItem.ID);
-  }
-}
 
-function closeMergeDetail() {
+  interface IProps {
-  isMessageListVisible.value = false;
+    // Core data for rendering message record card and message list
-}
+    renderData: IMergeMessageContent
+    /**
+     * The MessageRecord component has two main functions:
+     * 1. display message record cards primarily.
+     * 2. clicking on it and show the simple message list.
+     * When used as a nested component with the disabled prop
+     * it is only need renderData to render message record cards.
+     * Therefore, 'messageItem' and 'disabled' is not a required prop.
+     */
+    disabled?: boolean
+    messageItem?: IMessageModel
+  }
+
+  const emits = defineEmits<IEmits>()
+  const props = withDefaults(defineProps<IProps>(), {
+    messageItem: () => ({} as IMessageModel),
+    disabled: false
+  })
+
+  const isMessageListVisible = ref(false)
+
+  // 把替[自定义消息]替换为积分红包
+  const topName = (str: string) => {
+    if (str.includes('[自定义消息]')) {
+      return str.replace('[自定义消息]', '[积分红包]')
+    } else {
+      return transformTextWithKeysToEmojiNames(str)
+    }
+  }
+
+  function openMergeDetail() {
+    if (props.disabled) {
+      return
+    }
+    if (!isUniFrameWork) {
+      isMessageListVisible.value = true
+    } else {
+      emits('assignMessageIDInUniapp', props.messageItem.ID)
+    }
+  }
+  function closeMergeDetail() {
+    isMessageListVisible.value = false
+  }
 </script>
 <style lang="scss" scoped>
-:not(not) {
+  :not(not) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  min-width: 0;
+    min-width: 0;
-}
-
-.message-record-container {
-  padding: 10px 15px;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  cursor: pointer;
-  background-color: #fff;
-  max-width: 400px;
-  min-width: 180px;
-  overflow: hidden;
-
-  .record-abstract-container {
-    color: #bbb;
-    font-size: 12px;
-    margin: 8px 0;
   }
 
-  .record-footer {
+  .message-record-container {
-    color: #888;
+    padding: 10px 15px;
-    font-size: 11px;
+    border: 1px solid #ddd;
-    padding-top: 5px;
+    border-radius: 10px;
-    border-top: 1px solid #eee;
+    cursor: pointer;
+    background-color: #fff;
+    max-width: 400px;
+    min-width: 180px;
+    overflow: hidden;
+
+    .record-abstract-container {
+      color: #bbb;
+      font-size: 12px;
+      margin: 8px 0;
+    }
+
+    .record-footer {
+      color: #888;
+      font-size: 11px;
+      padding-top: 5px;
+      border-top: 1px solid #eee;
+    }
   }
-}
 </style>

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

@@ -2,20 +2,15 @@
   <div
     :class="{
       'simple-message-list-container': true,
-      'simple-message-list-container-mobile': isMobile,
+      'simple-message-list-container-mobile': isMobile
     }"
   >
     <div class="header-container">
-      <span
+      <span class="back" @click="backPreviousLevel">
-        class="back"
+        <Icon class="close-icon" :file="addIcon" :size="'18px'" />
-        @click="backPreviousLevel"
+        <span v-if="isReturn">
-      >
+          {{ TUITranslateService.t('TUIChat.返回') }}
-        <Icon
+        </span>
-          class="close-icon"
-          :file="addIcon"
-          :size="'18px'"
-        />
-        <span v-if="isReturn">{{ TUITranslateService.t('TUIChat.返回') }}</span>
         <span v-else>{{ TUITranslateService.t('TUIChat.关闭') }}</span>
       </span>
 
@@ -23,9 +18,7 @@
         {{ currentMergeMessageInfo.title }}
       </span>
     </div>
-    <div v-if="isDownloadOccurError">
+    <div v-if="isDownloadOccurError">Load Merge Message Error</div>
-      Load Merge Message Error
-    </div>
     <div
       v-else-if="isMergeMessageInfoLoaded"
       ref="simpleMessageListRef"
@@ -35,7 +28,7 @@
         v-for="item in currentMergeMessageInfo.messageList"
         :key="item.ID"
         :class="{
-          'message-item': true,
+          'message-item': true
         }"
       >
         <MessageContainer
@@ -50,20 +43,21 @@
             class="message-text"
           >
             <span
-              v-for="(textInfo, index) in parseTextToRenderArray(item.messageBody[0].payload['text'])"
+              v-for="(textInfo, index) in parseTextToRenderArray(
+                item.messageBody[0].payload['text']
+              )"
               :key="index"
               class="message-text-container"
             >
-              <span
+              <span v-if="textInfo.type === 'text'" class="text">
-                v-if="textInfo.type === 'text'"
+                {{ textInfo.content }}
-                class="text"
+              </span>
-              >{{ textInfo.content }}</span>
               <img
                 v-else
                 class="simple-emoji"
                 :src="textInfo.content"
                 alt="small-face"
-              >
+              />
             </span>
           </div>
           <!-- image -->
@@ -73,10 +67,12 @@
           >
             <img
               class="image"
-              :src="(item.messageBody[0].payload)['imageInfoArray'][2]['url']"
+              :src="
+                item.messageBody[0].payload['imageInfoArray'][2]['url']
+              "
               mode="widthFix"
               alt="image"
-            >
+            />
           </div>
           <!-- video -->
           <div
@@ -85,29 +81,30 @@
           >
             <div
               v-if="isUniFrameWork"
-              @click="previewVideoInUniapp((item.messageBody[0].payload)['remoteVideoUrl'])"
+              @click="
+                previewVideoInUniapp(
+                  item.messageBody[0].payload['remoteVideoUrl']
+                )
+              "
             >
               <image
                 class="image"
-                :src="(item.messageBody[0].payload)['thumbUrl']"
+                :src="item.messageBody[0].payload['thumbUrl']"
                 mode="widthFix"
                 alt="image"
               />
-              <Icon
+              <Icon class="video-play-icon" :file="playIcon" />
-                class="video-play-icon"
-                :file="playIcon"
-              />
             </div>
             <video
               v-else
               class="video"
               controls
-              :poster="(item.messageBody[0].payload)['thumbUrl']"
+              :poster="item.messageBody[0].payload['thumbUrl']"
             >
               <source
-                :src="(item.messageBody[0].payload)['remoteVideoUrl']"
+                :src="item.messageBody[0].payload['remoteVideoUrl']"
                 type="video/mp4"
-              >
+              />
             </video>
           </div>
           <!-- audio -->
@@ -115,7 +112,7 @@
             v-else-if="item.messageBody[0].type === TYPES.MSG_AUDIO"
             class="message-audio"
           >
-            <span>{{ TUITranslateService.t("TUIChat.语音") }}&nbsp;</span>
+            <span>{{ TUITranslateService.t('TUIChat.语音') }}&nbsp;</span>
             <span>{{ item.messageBody[0].payload.second }}s</span>
           </div>
           <!-- big face -->
@@ -127,7 +124,7 @@
               class="image"
               :src="resolveBigFaceUrl(item.messageBody[0].payload.data)"
               alt="face"
-            >
+            />
           </div>
           <!-- file -->
           <div
@@ -153,6 +150,10 @@
               :renderData="item.messageBody[0].payload"
             />
           </div>
+          <!-- 红包 -->
+          <div v-else-if="isRedEnvelope(item)">
+            {{ redEnvelopeText(item) }}
+          </div>
           <!-- custom -->
           <div v-else-if="item.messageBody[0].type === TYPES.MSG_CUSTOM">
             {{ TUITranslateService.t('TUIChat.[自定义消息]') }}
@@ -164,270 +165,309 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from '../../../../../adapter-vue';
+  import { computed, ref, watch } from '../../../../../adapter-vue'
-import TUIChatEngine, {
+  import TUIChatEngine, {
-  TUIStore,
+    TUIStore,
-  TUIChatService,
+    TUIChatService,
-  TUITranslateService,
+    TUITranslateService
-} from '@tencentcloud/chat-uikit-engine-lite';
+  } from '@tencentcloud/chat-uikit-engine-lite'
-import addIcon from '../../../../../assets/icon/back.svg';
+  import addIcon from '../../../../../assets/icon/back.svg'
-import playIcon from '../../../../../assets/icon/video-play.png';
+  import playIcon from '../../../../../assets/icon/video-play.png'
-import Icon from '../../../../common/Icon.vue';
+  import Icon from '../../../../common/Icon.vue'
-import MessageContainer from './message-container.vue';
+  import MessageContainer from './message-container.vue'
-import MessageRecord from '../message-record/index.vue';
+  import MessageRecord from '../message-record/index.vue'
-import { parseTextToRenderArray, DEFAULT_BIG_EMOJI_URL, CUSTOM_BIG_EMOJI_URL } from '../../../emoji-config/index';
+  import {
-import { isMobile, isUniFrameWork } from '../../../../../utils/env';
+    parseTextToRenderArray,
-import { IMergeMessageContent } from '../../../../../interface';
+    DEFAULT_BIG_EMOJI_URL,
+    CUSTOM_BIG_EMOJI_URL
+  } from '../../../emoji-config/index'
+  import { isMobile, isUniFrameWork } from '../../../../../utils/env'
+  import { IMergeMessageContent } from '../../../../../interface'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant'
 
-interface IProps {
+  interface IProps {
-  /**
+    /**
-   * only use messageID when first render of simple-message-list
+     * only use messageID when first render of simple-message-list
-   * because the nested simple-message-list do not have corresponding message object
+     * because the nested simple-message-list do not have corresponding message object
-   * need to download message from sdk by constructed message
+     * need to download message from sdk by constructed message
-   * and use downloaded message object to render nested simple-message-list
+     * and use downloaded message object to render nested simple-message-list
-   */
+     */
-  messageID?: string;
+    messageID?: string
-  isMounted?: boolean;
+    isMounted?: boolean
-}
-
-interface IEmits {
-  (e: 'closeOverlay'): void;
-}
-
-const emits = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  messageID: '',
-  isMounted: false,
-});
-
-const TYPES = TUIChatEngine.TYPES;
-const isDownloadOccurError = ref(false);
-const messageListStack = ref<IMergeMessageContent[]>([]);
-const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
-  title: '',
-  messageList: [],
-});
-const simpleMessageListRef = ref<HTMLElement>();
-
-watch(() => messageListStack.value.length, async (newValue) => {
-  isDownloadOccurError.value = false;
-  if (newValue < 1) {
-    return;
   }
-  const stackTopMessageInfo = messageListStack.value[messageListStack.value.length - 1];
+
-  if (stackTopMessageInfo.downloadKey && stackTopMessageInfo.messageList.length === 0) {
+  interface IEmits {
-    try {
+    (e: 'closeOverlay'): void
-      const res = await TUIChatService.downloadMergedMessages({
+  }
-        payload: stackTopMessageInfo,
+
-        type: TUIChatEngine.TYPES.MSG_MERGER,
+  const emits = defineEmits<IEmits>()
-      } as any);
+  const props = withDefaults(defineProps<IProps>(), {
-      // if download complete message, cover the original message in stack top
+    messageID: '',
-      messageListStack.value[messageListStack.value.length - 1] = res.payload;
+    isMounted: false
-    } catch (error) {
+  })
-      isDownloadOccurError.value = true;
+
+  const TYPES = TUIChatEngine.TYPES
+  const isDownloadOccurError = ref(false)
+  const messageListStack = ref<IMergeMessageContent[]>([])
+  const currentMergeMessageInfo = ref<Partial<IMergeMessageContent>>({
+    title: '',
+    messageList: []
+  })
+  const simpleMessageListRef = ref<HTMLElement>()
+
+  watch(
+    () => messageListStack.value.length,
+    async newValue => {
+      isDownloadOccurError.value = false
+      if (newValue < 1) {
+        return
+      }
+      const stackTopMessageInfo =
+        messageListStack.value[messageListStack.value.length - 1]
+      if (
+        stackTopMessageInfo.downloadKey &&
+        stackTopMessageInfo.messageList.length === 0
+      ) {
+        try {
+          const res = await TUIChatService.downloadMergedMessages({
+            payload: stackTopMessageInfo,
+            type: TUIChatEngine.TYPES.MSG_MERGER
+          } as any)
+          // if download complete message, cover the original message in stack top
+          messageListStack.value[messageListStack.value.length - 1] =
+            res.payload
+        } catch (error) {
+          isDownloadOccurError.value = true
+        }
+      }
+      currentMergeMessageInfo.value =
+        messageListStack.value[messageListStack.value.length - 1]
+    }
+  )
+
+  watch(
+    () => props.isMounted,
+    newValue => {
+      // For compatibility with uniapp, use watch to implement onMounted
+      if (newValue) {
+        if (!props.messageID) {
+          throw new Error(
+            'messageID is required when first render of simple-message-list.'
+          )
+        }
+        const sdkMessagePayload = TUIStore.getMessageModel(
+          props.messageID
+        ).getMessage().payload
+        messageListStack.value = [sdkMessagePayload]
+      } else {
+        messageListStack.value = []
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
+  const isReturn = computed(() => {
+    return messageListStack.value.length > 1
+  })
+
+  const isMergeMessageInfoLoaded = computed(() => {
+    return currentMergeMessageInfo.value?.messageList
+      ? currentMergeMessageInfo.value.messageList.length > 0
+      : false
+  })
+
+  function entryNextLevel(e, sdkMessage: any) {
+    messageListStack.value.push(sdkMessage.messageBody[0].payload)
+    e.stopPropagation()
+  }
+
+  function backPreviousLevel() {
+    messageListStack.value.pop()
+    if (messageListStack.value.length < 1) {
+      emits('closeOverlay')
     }
   }
-  currentMergeMessageInfo.value = messageListStack.value[messageListStack.value.length - 1];
-});
 
-watch(() => props.isMounted, (newValue) => {
+  function previewVideoInUniapp(url: string) {
-  // For compatibility with uniapp, use watch to implement onMounted
+    if (isUniFrameWork) {
-  if (newValue) {
+      const encodedUrl = encodeURIComponent(url)
-    if (!props.messageID) {
+      uni.navigateTo({
-      throw new Error('messageID is required when first render of simple-message-list.');
+        url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`
+      })
     }
-    const sdkMessagePayload = TUIStore.getMessageModel(props.messageID).getMessage().payload;
-    messageListStack.value = [sdkMessagePayload];
-  } else {
-    messageListStack.value = [];
   }
-}, {
-  immediate: true,
-});
 
-const isReturn = computed(() => {
+  function resolveBigFaceUrl(bigFaceKey: string): string {
-  return messageListStack.value.length > 1;
+    let url = ''
-});
+    if (bigFaceKey.indexOf('@custom') > -1) {
-
+      url = CUSTOM_BIG_EMOJI_URL + bigFaceKey
-const isMergeMessageInfoLoaded = computed(() => {
-  return currentMergeMessageInfo.value?.messageList ? currentMergeMessageInfo.value.messageList.length > 0 : false;
-});
-
-function entryNextLevel(e, sdkMessage: any) {
-  messageListStack.value.push(sdkMessage.messageBody[0].payload);
-  e.stopPropagation();
-}
-
-function backPreviousLevel() {
-  messageListStack.value.pop();
-  if (messageListStack.value.length < 1) {
-    emits('closeOverlay');
-  }
-}
-
-function previewVideoInUniapp(url: string) {
-  if (isUniFrameWork) {
-    const encodedUrl = encodeURIComponent(url);
-    uni.navigateTo({
-      url: `/TUIKit/components/TUIChat/video-play?videoUrl=${encodedUrl}`,
-    });
-  }
-}
-
-function resolveBigFaceUrl(bigFaceKey: string): string {
-  let url = '';
-  if (bigFaceKey.indexOf('@custom') > -1) {
-    url = CUSTOM_BIG_EMOJI_URL + bigFaceKey;
-  } else {
-    url = DEFAULT_BIG_EMOJI_URL + bigFaceKey;
-    if (url.indexOf('@2x') === -1) {
-      url += '@2x.png';
     } else {
-      url += '.png';
+      url = DEFAULT_BIG_EMOJI_URL + bigFaceKey
+      if (url.indexOf('@2x') === -1) {
+        url += '@2x.png'
+      } else {
+        url += '.png'
+      }
     }
+    return url
+  }
+
+  /** 是否红包 */
+  const isRedEnvelope = (item: any) => {
+    if (item.messageBody[0]?.payload?.data) {
+      const businessID = JSON?.parse(
+        item.messageBody[0]?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  }
+  /** 红包文案 */
+  const redEnvelopeText = (item: any) => {
+    const payload = JSON.parse(item.messageBody[0]?.payload?.data)
+    return `[积分红包] ${payload.title}`
   }
-  return url;
-}
 </script>
 
 <style scoped lang="scss">
-:not(not){
+  :not(not) {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  min-width: 0;
+    min-width: 0;
-  box-sizing: border-box;
+    box-sizing: border-box;
-}
-
-.simple-message-list-container {
-  position: relative;
-  overflow: hidden;
-  width: calc(40vw);
-  min-width: 550px;
-  height: calc(100vh - 200px);
-  background-color: #fff;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-
-  &-mobile {
-    width: 100vw;
-    height: 100vh;
-    min-width: auto;
-    border-radius: 0;
   }
 
-  .header-container {
+  .simple-message-list-container {
-    width: 100%;
+    position: relative;
-    text-align: center;
+    overflow: hidden;
-    font-weight: bold;
+    width: calc(40vw);
-    position: absolute;
+    min-width: 550px;
-    top: 0;
+    height: calc(100vh - 200px);
-    left: 0;
-    z-index: 1;
-    height: 60px;
-    justify-content: center;
-    align-items: center;
-    padding: 0 70px;
     background-color: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
 
-    .back {
+    &-mobile {
-      flex-direction: row;
+      width: 100vw;
-      align-items: center;
+      height: 100vh;
-      position: absolute;
+      min-width: auto;
-      left: 10px;
+      border-radius: 0;
-      cursor: pointer;
     }
 
-    .title {
+    .header-container {
       width: 100%;
-      display: block;
+      text-align: center;
-      overflow: hidden;
+      font-weight: bold;
-      text-overflow: ellipsis;
+      position: absolute;
-      white-space: nowrap;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      height: 60px;
+      justify-content: center;
+      align-items: center;
+      padding: 0 70px;
+      background-color: #fff;
+
+      .back {
+        flex-direction: row;
+        align-items: center;
+        position: absolute;
+        left: 10px;
+        cursor: pointer;
+      }
+
+      .title {
+        width: 100%;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
+    .message-list {
+      padding: 60px 20px 20px;
+      flex: 1 1 auto;
+      overflow: hidden auto;
+    }
   }
 
-  .message-list {
+  .message-item {
-    padding: 60px 20px 20px;
-    flex: 1 1 auto;
-    overflow: hidden auto;
-  }
-}
-
-.message-item {
-  flex-direction: row;
-  margin: 10px 0;
-}
-
-.message-text {
-  flex-flow: row wrap;
-  display: inline;
-
-  &-container {
-    display: inline;
-    flex: 0 0 auto;
     flex-direction: row;
+    margin: 10px 0;
+  }
 
-    .text {
+  .message-text {
-      vertical-align: bottom;
+    flex-flow: row wrap;
+    display: inline;
+
+    &-container {
       display: inline;
-      word-break: break-all;
+      flex: 0 0 auto;
-    }
+      flex-direction: row;
 
-    .simple-emoji {
+      .text {
-      display: inline-flex;
+        vertical-align: bottom;
-      width: 20px;
+        display: inline;
-      height: 20px;
+        word-break: break-all;
+      }
+
+      .simple-emoji {
+        display: inline-flex;
+        width: 20px;
+        height: 20px;
+      }
     }
   }
-}
 
-.message-image {
+  .message-image {
-  max-width: 180px;
-  border-radius: 10px;
-  overflow: hidden;
-
-  .image {
     max-width: 180px;
-  }
-}
-
-.message-face {
-  max-width: 100px;
-
-  .image {
-    width: 80px;
-    height: 80px;
-  }
-}
-
-.message-audio {
-  flex-direction: row;
-}
-
-.message-video {
-  position: relative;
-
-  .image {
-    max-width: 180px;
-  }
-
-  .video-play-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .video {
-    max-width: 150px;
-    width: inherit;
-    height: inherit;
     border-radius: 10px;
-  }
+    overflow: hidden;
-}
 
-.message-combine {
+    .image {
-  max-width: 300px;
+      max-width: 180px;
-}
+    }
+  }
+
+  .message-face {
+    max-width: 100px;
+
+    .image {
+      width: 80px;
+      height: 80px;
+    }
+  }
+
+  .message-audio {
+    flex-direction: row;
+  }
+
+  .message-video {
+    position: relative;
+
+    .image {
+      max-width: 180px;
+    }
+
+    .video-play-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .video {
+      max-width: 150px;
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+  }
+
+  .message-combine {
+    max-width: 300px;
+  }
 </style>

TUIKit/components/TUIContact/utils/index.ts

@@ -250,7 +250,23 @@ export const refuseFriendApplication = (userID: string) => {
 
 // Dismiss group
 export const dismissGroup = (groupID: string) => {
-  deleteImGroup(groupID)
+  // deleteImGroup(groupID)
+  //   .then(() => {
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.解散群聊成功'),
+  //       type: TOAST_TYPE.SUCCESS
+  //     })
+  //     TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch()
+  //     switchTab('/TUIKit/components/TUIConversation/index')
+  //   })
+  //   .catch((error: any) => {
+  //     console.warn('dismiss group failed:', error)
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.解散群聊失败'),
+  //       type: TOAST_TYPE.ERROR
+  //     })
+  //   })
+  TUIGroupService.dismissGroup(groupID)
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.解散群聊成功'),
@@ -266,33 +282,34 @@ export const dismissGroup = (groupID: string) => {
         type: TOAST_TYPE.ERROR
       })
     })
-  // TUIGroupService.dismissGroup(groupID)
-  //   .then(() => {
-  //     Toast({
-  //       message: TUITranslateService.t('TUIContact.解散群聊成功'),
-  //       type: TOAST_TYPE.SUCCESS,
-  //     });
-  //     TUIGlobal?.updateContactSearch && TUIGlobal?.updateContactSearch();
-  //   })
-  //   .catch((error: any) => {
-  //     console.warn('dismiss group failed:', error);
-  //     Toast({
-  //       message: TUITranslateService.t('TUIContact.解散群聊失败'),
-  //       type: TOAST_TYPE.ERROR,
-  //     });
-  //   });
 }
 
 // Quit group
 export const quitGroup = (groupID: string) => {
-  console.log('222')
+  // console.log('222')
-  quitImGroup(groupID)
+  // quitImGroup(groupID)
+  //   .then(() => {
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.退出群组成功'),
+  //       type: TOAST_TYPE.SUCCESS
+  //     })
+
+  //     switchTab('/TUIKit/components/TUIConversation/index')
+  //   })
+  //   .catch((error: any) => {
+  //     console.warn('quit group failed:', error)
+  //     Toast({
+  //       message: TUITranslateService.t('TUIContact.退出群组失败'),
+  //       type: TOAST_TYPE.ERROR
+  //     })
+  //   })
+
+  TUIGroupService.quitGroup(groupID)
     .then(() => {
       Toast({
         message: TUITranslateService.t('TUIContact.退出群组成功'),
         type: TOAST_TYPE.SUCCESS
       })
-
       switchTab('/TUIKit/components/TUIConversation/index')
     })
     .catch((error: any) => {
@@ -302,21 +319,6 @@ export const quitGroup = (groupID: string) => {
         type: TOAST_TYPE.ERROR
       })
     })
-
-  // TUIGroupService.quitGroup(groupID)
-  //   .then(() => {
-  //     Toast({
-  //       message: TUITranslateService.t('TUIContact.退出群组成功'),
-  //       type: TOAST_TYPE.SUCCESS,
-  //     });
-  //   })
-  //   .catch((error: any) => {
-  //     console.warn('quit group failed:', error);
-  //     Toast({
-  //       message: TUITranslateService.t('TUIContact.退出群组失败'),
-  //       type: TOAST_TYPE.ERROR,
-  //     });
-  //   });
 }
 
 // Join group

TUIKit/components/TUIConversation/conversation-list/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div ref="conversationListInnerDomRef" class="tui-conversation-list">
-    ref="conversationListInnerDomRef"
-    class="tui-conversation-list"
-  >
     <ActionsMenu
       v-if="isShowOverlay"
       :selectedConversation="currentConversation"
@@ -16,7 +13,7 @@
       :key="index"
       :class="[
         'tui-conversation-content',
-        isMobile && 'tui-conversation-content-h5 disable-select',
+        isMobile && 'tui-conversation-content-h5 disable-select'
       ]"
     >
       <div
@@ -25,11 +22,15 @@
           'tui-conversation-item',
           currentConversationID === conversation.conversationID &&
             'tui-conversation-item-selected',
-          conversation.isPinned && 'tui-conversation-item-pinned',
+          conversation.isPinned && 'tui-conversation-item-pinned'
         ]"
         @click="enterConversationChat(conversation.conversationID)"
-        @longpress="showConversationActionMenu($event, conversation, index)"
+        @longpress="
-        @contextmenu="showConversationActionMenu($event, conversation, index, true)"
+          showConversationActionMenu($event, conversation, index)
+        "
+        @contextmenu="
+          showConversationActionMenu($event, conversation, index, true)
+        "
       >
         <aside class="left">
           <Avatar
@@ -38,17 +39,19 @@
             size="40px"
           />
           <div
-            v-if="userOnlineStatusMap && isShowUserOnlineStatus(conversation)"
+            v-if="
+              userOnlineStatusMap && isShowUserOnlineStatus(conversation)
+            "
             :class="[
               'online-status',
               Object.keys(userOnlineStatusMap).length > 0 &&
-                Object.keys(userOnlineStatusMap).includes(
+              Object.keys(userOnlineStatusMap).includes(
-                  conversation.userProfile.userID
+                conversation.userProfile.userID
-                ) &&
+              ) &&
-                userOnlineStatusMap[conversation.userProfile.userID]
+              userOnlineStatusMap[conversation.userProfile.userID]
-                  .statusType === 1
+                .statusType === 1
                 ? 'online-status-online'
-                : 'online-status-offline',
+                : 'online-status-offline'
             ]"
           />
           <span
@@ -56,7 +59,9 @@
             class="num"
           >
             {{
-              conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
+              conversation.unreadCount > 99
+                ? '99+'
+                : conversation.unreadCount
             }}
           </span>
           <span
@@ -69,26 +74,40 @@
             <label class="content-header-label">
               <p class="name">{{ conversation.getShowName() }}</p>
             </label>
-            <div class="middle-box">
+            <div v-if="isRedEnvelope(conversation)" class="middle-box">
+              <div class="middle-box-content">
+                {{ redEnvelopeText(conversation) }}
+              </div>
+            </div>
+            <div v-else class="middle-box">
               <span
-                v-if="conversation.draftText && conversation.conversationID !== currentConversationID"
+                v-if="
+                  conversation.draftText &&
+                  conversation.conversationID !== currentConversationID
+                "
                 class="middle-box-draft"
-              >{{ TUITranslateService.t('TUIChat.[草稿]') }}</span>
+              >
+                {{ TUITranslateService.t('TUIChat.[草稿]') }}
+              </span>
               <span
                 v-else-if="
                   conversation.type === 'GROUP' &&
-                    conversation.groupAtInfoList &&
+                  conversation.groupAtInfoList &&
-                    conversation.groupAtInfoList.length > 0
+                  conversation.groupAtInfoList.length > 0
                 "
                 class="middle-box-at"
-              >{{ conversation.getGroupAtInfo() }}</span>
+              >
+                {{ conversation.getGroupAtInfo() }}
+              </span>
               <div class="middle-box-content">
-                {{ conversation.getLastMessage("text") }}
+                {{ conversation.getLastMessage('text') }}
               </div>
             </div>
           </div>
           <div class="content-footer">
-            <span class="time">{{ conversation.getLastMessage("time") }}</span>
+            <span class="time">
+              {{ conversation.getLastMessage('time') }}
+            </span>
             <Icon
               v-if="conversation.isMuted"
               :file="muteIcon"
@@ -102,210 +121,262 @@
 </template>
 
 <script lang="ts" setup>
-interface IUserStatus {
+  interface IUserStatus {
-  statusType: number;
+    statusType: number
-  customStatus: string;
+    customStatus: string
-}
-
-interface IUserStatusMap {
-  [userID: string]: IUserStatus;
-}
-
-import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-  TUIConversationService,
-  TUITranslateService,
-  IConversationModel,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal, isIOS, addLongPressListener } from '@tencentcloud/universal-api';
-import Icon from '../../common/Icon.vue';
-import Avatar from '../../common/Avatar/index.vue';
-import ActionsMenu from '../actions-menu/index.vue';
-import muteIcon from '../../../assets/icon/mute.svg';
-import { isPC, isH5, isUniFrameWork, isMobile } from '../../../utils/env';
-
-const emits = defineEmits(['handleSwitchConversation', 'getPassingRef']);
-const currentConversation = ref<IConversationModel>();
-const currentConversationID = ref<string>();
-const currentConversationDomRect = ref<DOMRect>();
-const isShowOverlay = ref<boolean>(false);
-const conversationList = ref<IConversationModel[]>([]);
-const conversationListDomRef = ref<HTMLElement | undefined>();
-const conversationListInnerDomRef = ref<HTMLElement | undefined>();
-const actionsMenuPosition = ref<{
-  top: number;
-  left: number | undefined;
-  conversationHeight: number | undefined;
-}>({
-  top: 0,
-  left: undefined,
-  conversationHeight: undefined,
-});
-const displayOnlineStatus = ref(false);
-const userOnlineStatusMap = ref<IUserStatusMap>();
-
-let lastestOpenActionsMenuTime: number | null = null;
-
-onMounted(() => {
-  TUIStore.watch(StoreName.CONV, {
-    currentConversationID: onCurrentConversationIDUpdated,
-    conversationList: onConversationListUpdated,
-    currentConversation: onCurrentConversationUpdated,
-  });
-
-  TUIStore.watch(StoreName.USER, {
-    displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    userStatusList: onUserStatusListUpdated,
-  });
-
-  if (!isUniFrameWork && isIOS && !isPC) {
-    addLongPressHandler();
   }
-});
 
-onUnmounted(() => {
+  interface IUserStatusMap {
-  TUIStore.unwatch(StoreName.CONV, {
+    [userID: string]: IUserStatus
-    currentConversationID: onCurrentConversationIDUpdated,
+  }
-    conversationList: onConversationListUpdated,
-    currentConversation: onCurrentConversationUpdated,
-  });
 
-  TUIStore.unwatch(StoreName.USER, {
+  import { ref, onMounted, onUnmounted } from '../../../adapter-vue'
-    displayOnlineStatus: onDisplayOnlineStatusUpdated,
+  import TUIChatEngine, {
-    userStatusList: onUserStatusListUpdated,
+    TUIStore,
-  });
+    StoreName,
-});
+    TUIConversationService,
+    TUITranslateService,
+    IConversationModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import {
+    TUIGlobal,
+    isIOS,
+    addLongPressListener
+  } from '@tencentcloud/universal-api'
+  import Icon from '../../common/Icon.vue'
+  import Avatar from '../../common/Avatar/index.vue'
+  import ActionsMenu from '../actions-menu/index.vue'
+  import muteIcon from '../../../assets/icon/mute.svg'
+  import {
+    isPC,
+    isH5,
+    isUniFrameWork,
+    isMobile
+  } from '../../../utils/env'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
 
-const isShowUserOnlineStatus = (conversation: IConversationModel): boolean => {
+  const emits = defineEmits(['handleSwitchConversation', 'getPassingRef'])
-  return (
+  const currentConversation = ref<IConversationModel>()
-    displayOnlineStatus.value
+  const currentConversationID = ref<string>()
-    && conversation.type === TUIChatEngine.TYPES.CONV_C2C
+  const currentConversationDomRect = ref<DOMRect>()
-  );
+  const isShowOverlay = ref<boolean>(false)
-};
+  const conversationList = ref<IConversationModel[]>([])
+  const conversationListDomRef = ref<HTMLElement | undefined>()
+  const conversationListInnerDomRef = ref<HTMLElement | undefined>()
+  const actionsMenuPosition = ref<{
+    top: number
+    left: number | undefined
+    conversationHeight: number | undefined
+  }>({
+    top: 0,
+    left: undefined,
+    conversationHeight: undefined
+  })
+  const displayOnlineStatus = ref(false)
+  const userOnlineStatusMap = ref<IUserStatusMap>()
 
-const showConversationActionMenu = (
+  let lastestOpenActionsMenuTime: number | null = null
-  event: Event,
+
-  conversation: IConversationModel,
+  onMounted(() => {
-  index: number,
+    TUIStore.watch(StoreName.CONV, {
-  isContextMenuEvent?: boolean,
+      currentConversationID: onCurrentConversationIDUpdated,
-) => {
+      conversationList: onConversationListUpdated,
-  if (isContextMenuEvent) {
+      currentConversation: onCurrentConversationUpdated
-    event.preventDefault();
+    })
-    if (isUniFrameWork) {
+
-      return;
+    TUIStore.watch(StoreName.USER, {
+      displayOnlineStatus: onDisplayOnlineStatusUpdated,
+      userStatusList: onUserStatusListUpdated
+    })
+
+    if (!isUniFrameWork && isIOS && !isPC) {
+      addLongPressHandler()
     }
-  }
+  })
-  currentConversation.value = conversation;
-  lastestOpenActionsMenuTime = Date.now();
-  getActionsMenuPosition(event, index);
-};
 
-const closeConversationActionMenu = () => {
+  onUnmounted(() => {
-  // Prevent continuous triggering of overlay tap events
+    TUIStore.unwatch(StoreName.CONV, {
-  if (
+      currentConversationID: onCurrentConversationIDUpdated,
-    lastestOpenActionsMenuTime
+      conversationList: onConversationListUpdated,
-    && Date.now() - lastestOpenActionsMenuTime > 300
+      currentConversation: onCurrentConversationUpdated
-  ) {
+    })
-    currentConversation.value = undefined;
-    isShowOverlay.value = false;
-  }
-};
 
-const getActionsMenuPosition = (event: Event, index: number) => {
+    TUIStore.unwatch(StoreName.USER, {
-  if (isUniFrameWork) {
+      displayOnlineStatus: onDisplayOnlineStatusUpdated,
-    if (typeof conversationListDomRef.value === 'undefined') {
+      userStatusList: onUserStatusListUpdated
-      emits('getPassingRef', conversationListDomRef);
+    })
-    }
+  })
-    const query = TUIGlobal?.createSelectorQuery().in(conversationListDomRef.value);
+
-    query.select(`#convlistitem-${index}`).boundingClientRect((data) => {
+  const isShowUserOnlineStatus = (
-      if (data) {
+    conversation: IConversationModel
-        actionsMenuPosition.value = {
+  ): boolean => {
-          // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
+    return (
-          top: data.bottom - 44,
+      displayOnlineStatus.value &&
-          // @ts-expect-error in uniapp event has touches property
+      conversation.type === TUIChatEngine.TYPES.CONV_C2C
-          left: event.touches[0].pageX,
+    )
-          conversationHeight: data.height,
+  }
-        };
+
-        isShowOverlay.value = true;
+  const showConversationActionMenu = (
+    event: Event,
+    conversation: IConversationModel,
+    index: number,
+    isContextMenuEvent?: boolean
+  ) => {
+    if (isContextMenuEvent) {
+      event.preventDefault()
+      if (isUniFrameWork) {
+        return
       }
-    }).exec();
-  } else {
-    const rect = ((event.currentTarget || event.target) as HTMLElement)?.getBoundingClientRect() || {};
-    if (rect) {
-      actionsMenuPosition.value = {
-        top: rect.bottom,
-        left: isPC ? (event as MouseEvent).clientX : undefined,
-        conversationHeight: rect.height,
-      };
     }
-    isShowOverlay.value = true;
+    currentConversation.value = conversation
+    lastestOpenActionsMenuTime = Date.now()
+    getActionsMenuPosition(event, index)
   }
-};
 
-const enterConversationChat = (conversationID: string) => {
+  const closeConversationActionMenu = () => {
-  emits('handleSwitchConversation', conversationID);
+    // Prevent continuous triggering of overlay tap events
-  TUIConversationService.switchConversation(conversationID);
+    if (
-};
+      lastestOpenActionsMenuTime &&
-
+      Date.now() - lastestOpenActionsMenuTime > 300
-function addLongPressHandler() {
+    ) {
-  if (!conversationListInnerDomRef.value) {
+      currentConversation.value = undefined
-    return;
+      isShowOverlay.value = false
+    }
   }
-  addLongPressListener({
+
-    element: conversationListInnerDomRef.value,
+  const getActionsMenuPosition = (event: Event, index: number) => {
-    onLongPress: (event, target) => {
+    if (isUniFrameWork) {
-      const index = (Array.from(conversationListInnerDomRef.value!.children) as HTMLElement[]).indexOf(target!);
+      if (typeof conversationListDomRef.value === 'undefined') {
-      showConversationActionMenu(event, conversationList.value[index], index);
+        emits('getPassingRef', conversationListDomRef)
-    },
+      }
-    options: {
+      const query = TUIGlobal?.createSelectorQuery().in(
-      eventDelegation: {
+        conversationListDomRef.value
-        subSelector: '.tui-conversation-content',
+      )
+      query
+        .select(`#convlistitem-${index}`)
+        .boundingClientRect(data => {
+          if (data) {
+            actionsMenuPosition.value = {
+              // The uni-page-head of uni-h5 is not considered a member of the viewport, so the height of the head is manually increased.
+              top: data.bottom - 44,
+              // @ts-expect-error in uniapp event has touches property
+              left: event.touches[0].pageX,
+              conversationHeight: data.height
+            }
+            isShowOverlay.value = true
+          }
+        })
+        .exec()
+    } else {
+      const rect =
+        (
+          (event.currentTarget || event.target) as HTMLElement
+        )?.getBoundingClientRect() || {}
+      if (rect) {
+        actionsMenuPosition.value = {
+          top: rect.bottom,
+          left: isPC ? (event as MouseEvent).clientX : undefined,
+          conversationHeight: rect.height
+        }
+      }
+      isShowOverlay.value = true
+    }
+  }
+
+  const enterConversationChat = (conversationID: string) => {
+    emits('handleSwitchConversation', conversationID)
+    TUIConversationService.switchConversation(conversationID)
+  }
+
+  function addLongPressHandler() {
+    if (!conversationListInnerDomRef.value) {
+      return
+    }
+    addLongPressListener({
+      element: conversationListInnerDomRef.value,
+      onLongPress: (event, target) => {
+        const index = (
+          Array.from(
+            conversationListInnerDomRef.value!.children
+          ) as HTMLElement[]
+        ).indexOf(target!)
+        showConversationActionMenu(
+          event,
+          conversationList.value[index],
+          index
+        )
       },
-    },
+      options: {
-  });
+        eventDelegation: {
-}
+          subSelector: '.tui-conversation-content'
-
+        }
-function onCurrentConversationUpdated(conversation: IConversationModel) {
+      }
-  currentConversation.value = conversation;
+    })
-}
-
-function onConversationListUpdated(list: IConversationModel[]) {
-  conversationList.value = list;
-}
-
-function onCurrentConversationIDUpdated(id: string) {
-  currentConversationID.value = id;
-}
-
-function onDisplayOnlineStatusUpdated(status: boolean) {
-  displayOnlineStatus.value = status;
-}
-
-function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
-  if (list.size !== 0) {
-    userOnlineStatusMap.value = [...list.entries()].reduce(
-      (obj, [key, value]) => {
-        obj[key] = value;
-        return obj;
-      },
-      {} as IUserStatusMap,
-    );
   }
-}
+
-// Expose to the parent component and close actionsMenu when a sliding event is detected
+  function onCurrentConversationUpdated(
-defineExpose({ closeChildren: closeConversationActionMenu });
+    conversation: IConversationModel
+  ) {
+    currentConversation.value = conversation
+  }
+
+  /** 是否红包 */
+  const isRedEnvelope = (item: IConversationModel) => {
+    if (item?.lastMessage?.payload?.data) {
+      const businessID = JSON?.parse(
+        item?.lastMessage?.payload?.data
+      )?.businessID
+      return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
+    }
+    return false
+  }
+  /** 红包文案 */
+  const redEnvelopeText = (item: IConversationModel) => {
+    const payload = JSON.parse(item.lastMessage?.payload?.data)
+    const text = item.getLastMessage('text')?.split(':')
+    console.log(text)
+    if (text && text.length > 1) {
+      return `${text[0]}:[积分红包] ${payload.title}`
+    } else {
+      return `[积分红包] ${payload.title}`
+    }
+  }
+
+  function onConversationListUpdated(list: IConversationModel[]) {
+    conversationList.value = list
+  }
+
+  function onCurrentConversationIDUpdated(id: string) {
+    currentConversationID.value = id
+  }
+
+  function onDisplayOnlineStatusUpdated(status: boolean) {
+    displayOnlineStatus.value = status
+  }
+
+  function onUserStatusListUpdated(list: Map<string, IUserStatus>) {
+    if (list.size !== 0) {
+      userOnlineStatusMap.value = [...list.entries()].reduce(
+        (obj, [key, value]) => {
+          obj[key] = value
+          return obj
+        },
+        {} as IUserStatusMap
+      )
+    }
+  }
+  // Expose to the parent component and close actionsMenu when a sliding event is detected
+  defineExpose({ closeChildren: closeConversationActionMenu })
 </script>
 
 <style lang="scss" scoped src="./style/index.scss"></style>
 <style lang="scss" scoped>
-.disable-select {
+  .disable-select {
-  -webkit-touch-callout:none;
+    -webkit-touch-callout: none;
-  -webkit-user-select:none;
+    -webkit-user-select: none;
-  -khtml-user-select:none;
+    -khtml-user-select: none;
-  -moz-user-select:none;
+    -moz-user-select: none;
-  -ms-user-select:none;
+    -ms-user-select: none;
-  user-select:none;
+    user-select: none;
-}
+  }
 </style>

TUIKit/components/TUIGroup/create-group/index.vue

@@ -30,13 +30,13 @@
               <Icon :file="rightIcon" />
             </span>
           </li>
-          <li class="group-list-item" @click="cbPopupShow.open('bottom')">
+          <!-- <li class="group-list-item" @click="cbPopupShow.open('bottom')">
             <label class="group-list-item-label">申请加群方式</label>
             <span class="group-h5-list-item-content">
               <p class="content">{{ applyJoinOptionName }}</p>
               <Icon :file="rightIcon" />
             </span>
-          </li>
+          </li> -->
           <li class="group-list-introduction">
             <div class="group-list-item">
               <label class="group-list-item-label">
@@ -261,59 +261,55 @@
 
   const createGroup = async (options: any) => {
     try {
-      const data = {
+      // const data = {
-        applyJoinOption: applyJoinOption.value,
+      //   applyJoinOption: applyJoinOption.value,
-        faceUrl: groupAvatar.value,
+      //   faceUrl: groupAvatar.value,
-        groupName: options.name,
+      //   groupName: options.name,
-        groupType: options.type,
+      //   groupType: options.type,
-        memberList: options.memberList.map((item: IUserProfile) => {
+      //   memberList: options.memberList.map((item: IUserProfile) => {
-          return { memberAccount: item.userID }
+      //     return { memberAccount: item.userID }
-        })
-      }
-
-      const res = await createImGroup(data)
-      const e = res.data
-      // const type = e.groupType
-      // if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
-      //   await TUIGroupService.joinGroup({
-      //     groupID: e.groupID,
-      //     applyMessage: ''
       //   })
       // }
 
-      const newRes = await TUIGroupService.getGroupProfile({
+      // const res = await createImGroup(data)
-        groupID: e.groupId
+      // const e = res.data
-      })
 
-      handleCompleteCreate(newRes.data.group)
+      // const newRes = await TUIGroupService.getGroupProfile({
-      Toast({
+      //   groupID: e.groupId
-        message: TUITranslateService.t('TUIGroup.群组创建成功'),
+      // })
-        type: TOAST_TYPE.SUCCESS
-      })
 
-      // ========= 原本逻辑
+      // handleCompleteCreate(newRes.data.group)
-      // options.memberList = options.memberList.map(
-      //   (item: IUserProfile) => {
-      //     return { userID: item.userID }
-      //   }
-      // )
-      // if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
-      //   delete options.groupID
-      // }
-      // const res = await TUIGroupService.createGroup(options)
-      // console.log(res)
-      // const { type } = res.data.group
-      // if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
-      //   await TUIGroupService.joinGroup({
-      //     groupID: res.data.group.groupID,
-      //     applyMessage: ''
-      //   })
-      // }
-      // handleCompleteCreate(res.data.group)
       // Toast({
       //   message: TUITranslateService.t('TUIGroup.群组创建成功'),
       //   type: TOAST_TYPE.SUCCESS
       // })
+
+      // ========= 原本逻辑
+      options.memberList = options.memberList.map(
+        (item: IUserProfile) => {
+          return { userID: item.userID }
+        }
+      )
+      if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
+        delete options.groupID
+      }
+      const res = await TUIGroupService.createGroup({
+        ...options,
+        avatar: groupAvatar.value
+      })
+      console.log(res)
+      const { type } = res.data.group
+      if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
+        await TUIGroupService.joinGroup({
+          groupID: res.data.group.groupID,
+          applyMessage: ''
+        })
+      }
+      handleCompleteCreate(res.data.group)
+      Toast({
+        message: TUITranslateService.t('TUIGroup.群组创建成功'),
+        type: TOAST_TYPE.SUCCESS
+      })
     } catch (err: any) {
       Toast({
         message: err.message,

TUIKit/components/TUIGroup/manage-group/index.vue

@@ -238,7 +238,11 @@
   import Server from '../server'
   import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus'
   import { IFriendProfile, IGroupMember } from '../../../interface'
-  import { createImGroup, deleteImGroup, quitImGroup } from '../../../../api/tui-kit'
+  import {
+    createImGroup,
+    deleteImGroup,
+    quitImGroup
+  } from '../../../../api/tui-kit'
 
   const TUIGroupServer = Server.getInstance()
   const TUIConstants = TUIGroupServer.constants
@@ -400,47 +404,63 @@
 
   const updateProfile = async (newGroupProfile: any) => {
     const { key, value } = newGroupProfile
-    if (key === 'muteAllMembers') {
+    const options: any = {
-      const options: any = {
+      groupID: currentGroup.value.groupID,
-        groupID: currentGroup.value.groupID,
+      [key]: value
-        [key]: value
-      }
-      TUIGroupService.updateGroupProfile(options)
-        .then((res: any) => {
-          console.log(res.data)
-          currentGroup.value = res.data.group
-          editLableName.value = ''
-        })
-        .catch((error: any) => {
-          Toast({
-            message: error?.message,
-            type: TOAST_TYPE.ERROR
-          })
-        })
-    } else {
-      const newKey = {
-        notification: 'notification',
-        name: 'groupName'
-      }[key]
-      const options: any = {
-        groupId: currentGroup.value.groupID,
-        [newKey]: value
-      }
-      await createImGroup(options, 'put')
-      TUIGroupService.getGroupProfile({
-        groupID: currentGroup.value.groupID
-      })
-        .then((res: any) => {
-          currentGroup.value = res.data.group
-          editLableName.value = ''
-        })
-        .catch((error: any) => {
-          Toast({
-            message: error?.message,
-            type: TOAST_TYPE.ERROR
-          })
-        })
     }
+    TUIGroupService.updateGroupProfile(options)
+      .then((res: any) => {
+        console.log(res.data)
+        currentGroup.value = res.data.group
+        editLableName.value = ''
+      })
+      .catch((error: any) => {
+        Toast({
+          message: error?.message,
+          type: TOAST_TYPE.ERROR
+        })
+      })
+    // if (key === 'muteAllMembers') {
+    //   const options: any = {
+    //     groupID: currentGroup.value.groupID,
+    //     [key]: value
+    //   }
+    //   TUIGroupService.updateGroupProfile(options)
+    //     .then((res: any) => {
+    //       console.log(res.data)
+    //       currentGroup.value = res.data.group
+    //       editLableName.value = ''
+    //     })
+    //     .catch((error: any) => {
+    //       Toast({
+    //         message: error?.message,
+    //         type: TOAST_TYPE.ERROR
+    //       })
+    //     })
+    // } else {
+    //   const newKey = {
+    //     notification: 'notification',
+    //     name: 'groupName'
+    //   }[key]
+    //   const options: any = {
+    //     groupId: currentGroup.value.groupID,
+    //     [newKey]: value
+    //   }
+    //   await createImGroup(options, 'put')
+    //   TUIGroupService.getGroupProfile({
+    //     groupID: currentGroup.value.groupID
+    //   })
+    //     .then((res: any) => {
+    //       currentGroup.value = res.data.group
+    //       editLableName.value = ''
+    //     })
+    //     .catch((error: any) => {
+    //       Toast({
+    //         message: error?.message,
+    //         type: TOAST_TYPE.ERROR
+    //       })
+    //     })
+    // }
   }
 
   const setCurrentTab = (tabName: string) => {
@@ -656,8 +676,8 @@
   }
 
   const dismissGroup = async (group: any) => {
-    await deleteImGroup(group.groupID)
+    // await deleteImGroup(group.groupID)
-    // await TUIGroupService.dismissGroup(group.groupID);
+    await TUIGroupService.dismissGroup(group.groupID)
     enableSampleTaskStatus('dismissGroup')
     Toast({
       message: TUITranslateService.t('TUIGroup.群组解散成功'),
@@ -874,8 +894,8 @@
   }
 
   const quitGroup = async (group: any) => {
-    await quitImGroup(group.groupID)
+    // await quitImGroup(group.groupID)
-    // await TUIGroupService.quitGroup(group.groupID)
+    await TUIGroupService.quitGroup(group.groupID)
     clearGroupInfo()
   }
 

TUIKit/constant.ts

@@ -18,6 +18,8 @@ export const CHAT_MSG_CUSTOM_TYPE = {
   LINK: "text_link",
   CALL: 1,
   ORDER: "order",
+  /** 红包 */
+  RED_ENVELOPE: "redEnvelope"
 };
 
 export const DIALOG_CONTENT = {

api/tui-kit.js

@@ -40,3 +40,12 @@ export const deleteImGroupMember = (groupId, memberId) => {
     data: { groupId, memberId }
   })
 }
+
+/** 发红包 */
+export const sendRedEnvelope = data => {
+  return http({
+    url: '/api/system/pointsRedPacket/send',
+    method: 'post',
+    data
+  })
+}

uni_modules/uu-pwdModal/components/uu-pwdModal/uu-pwdModal.vue

@@ -1,48 +1,46 @@
 <template>
-  <view>
+  <uni-popup ref="popup" type="bottom">
-    <uni-popup ref="popup" type="bottom">
+    <view class="modal">
-      <view class="modal">
+      <view class="title">
-        <view class="title">
+        请输入支付密码
-          请输入支付密码
+        <view class="close" @click="close">
-          <view class="close" @click="close">
+          <uni-icons type="closeempty" size="20"></uni-icons>
-            <uni-icons type="closeempty" size="20"></uni-icons>
-          </view>
-        </view>
-
-        <view class="input">
-          <view
-            class="row"
-            v-for="i in 6"
-            :class="current == i ? 'active' : ''"
-          >
-            <view class="pwd" v-if="current > i"></view>
-          </view>
-        </view>
-
-        <view class="tip" @click="forgetPwd">忘记密码？</view>
-
-        <view class="keyboard">
-          <view
-            class="row"
-            v-for="i in key"
-            :key="i"
-            :class="{ 'no-i': i === -2 }"
-            @click="i !== -2 && input(i)"
-          >
-            <uni-icons
-              v-if="i == -1"
-              type="closeempty"
-              size="24"
-            ></uni-icons>
-            <text v-if="i != -1">
-              {{ i >= 0 ? i : '' }}
-            </text>
-          </view>
         </view>
       </view>
-      <view></view>
+
-    </uni-popup>
+      <view class="input">
-  </view>
+        <view
+          class="row"
+          v-for="i in 6"
+          :class="current == i ? 'active' : ''"
+        >
+          <view class="pwd" v-if="current > i"></view>
+        </view>
+      </view>
+
+      <view class="tip" @click="forgetPwd">忘记密码？</view>
+
+      <view class="keyboard">
+        <view
+          class="row"
+          v-for="i in key"
+          :key="i"
+          :class="{ 'no-i': i === -2 }"
+          @click="i !== -2 && input(i)"
+        >
+          <uni-icons
+            v-if="i == -1"
+            type="closeempty"
+            size="24"
+          ></uni-icons>
+          <text v-if="i != -1">
+            {{ i >= 0 ? i : '' }}
+          </text>
+        </view>
+      </view>
+    </view>
+    <view></view>
+  </uni-popup>
 </template>
 <script>
   export default {
@@ -55,9 +53,9 @@
     },
     methods: {
       forgetPwd() {
-        uni.navigateTo({
+        // uni.navigateTo({
-          url: '/pages/myInfo/changePayPwd'
+        //   url: '/pages/myInfo/changePayPwd'
-        })
+        // })
       },
       open() {
         this.$refs.popup.open()