From 1634425c17f6bccf22600b7646f6748e5e6862c5 Mon Sep 17 00:00:00 2001
From: cbb <1055026847@qq.com>
Date: Wed, 7 Jan 2026 17:49:17 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BA=A2=E5=8C=85=E9=9C=80=E8=A6=81=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../message-input-toolbar/evaluate/index.vue  | 246 ++++++++++--------
 .../TUIChat/message-input-toolbar/index.vue   |   1 +
 .../red-envelope/index.vue                    | 116 ++++++++-
 .../red-envelope/style/index.scss             |  83 ++++++
 .../message-elements/message-custom.vue       | 241 ++++++++---------
 5 files changed, 450 insertions(+), 237 deletions(-)
 create mode 100644 TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss

diff --git a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
index 53d1b67..d1350f3 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue
@@ -14,27 +14,27 @@
         <div
           :class="[
             'evaluate-header-content',
-            !isPC && 'evaluate-h5-header-content',
+            !isPC && 'evaluate-h5-header-content'
           ]"
         >
-          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
+          {{ TUITranslateService.t('Evaluate.请对本次服务进行评价') }}
         </div>
         <div
           v-if="!isPC"
           :class="[
             'evaluate-header-close',
-            !isPC && 'evaluate-h5-header-close',
+            !isPC && 'evaluate-h5-header-close'
           ]"
           @click.stop="closeDialog"
         >
-          {{ TUITranslateService.t("关闭") }}
+          {{ TUITranslateService.t('关闭') }}
         </div>
       </div>
       <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
         <ul
           :class="[
             'evaluate-content-list',
-            !isPC && 'evaluate-h5-content-list',
+            !isPC && 'evaluate-h5-content-list'
           ]"
         >
           <li
@@ -42,7 +42,7 @@
             :key="index"
             :class="[
               'evaluate-content-list-item',
-              !isPC && 'evaluate-h5-content-list-item',
+              !isPC && 'evaluate-h5-content-list-item'
             ]"
             @click.stop="selectStar(index)"
           >
@@ -64,146 +64,162 @@
           v-model="comment"
           :class="[
             'evaluate-content-text',
-            !isPC && 'evaluate-h5-content-text',
+            !isPC && 'evaluate-h5-content-text'
           ]"
         />
         <div
           :class="[
             'evaluate-content-button',
-            !isPC && 'evaluate-h5-content-button',
+            !isPC && 'evaluate-h5-content-button'
           ]"
         >
           <button
-            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
+            :class="[
+              'btn',
+              isEvaluateValid ? 'btn-valid' : 'btn-invalid'
+            ]"
             @click="submitEvaluate"
           >
-            {{ TUITranslateService.t("Evaluate.提交评价") }}
+            {{ TUITranslateService.t('Evaluate.提交评价') }}
           </button>
         </div>
       </div>
       <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
-        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
-        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
+        {{ TUITranslateService.t('Evaluate.服务评价工具') }}
+        {{ '(' + TUITranslateService.t('Evaluate.使用') }}
         <a @click="openLink(Link.customMessage)">
-          {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
+          {{
+            TUITranslateService.t(`Evaluate.${Link.customMessage.label}`)
+          }}
         </a>
-        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
+        {{ TUITranslateService.t('Evaluate.搭建') + ')' }}
       </div>
     </div>
   </ToolbarItemContainer>
 </template>
 <script setup lang="ts">
-import TUIChatEngine, {
-  TUITranslateService,
-  TUIStore,
-  StoreName,
-  IConversationModel,
-  TUIChatService,
-  SendMessageParams,
-  SendMessageOptions,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { ref, computed } from '../../../../adapter-vue';
-import ToolbarItemContainer from '../toolbar-item-container/index.vue';
-import custom from '../../../../assets/icon/custom.svg';
-import Link from '../../../../utils/documentLink';
-import Icon from '../../../common/Icon.vue';
-import starIcon from '../../../../assets/icon/star.png';
-import starLightIcon from '../../../../assets/icon/star-light.png';
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
-import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
-import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
-import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
+  import TUIChatEngine, {
+    TUITranslateService,
+    TUIStore,
+    StoreName,
+    IConversationModel,
+    TUIChatService,
+    SendMessageParams,
+    SendMessageOptions
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { ref, computed } from '../../../../adapter-vue'
+  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+  import custom from '../../../../assets/icon/custom.svg'
+  import Link from '../../../../utils/documentLink'
+  import Icon from '../../../common/Icon.vue'
+  import starIcon from '../../../../assets/icon/star.png'
+  import starLightIcon from '../../../../assets/icon/star-light.png'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import { isPC, isH5, isUniFrameWork } from '../../../../utils/env'
+  import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils'
+  import OfflinePushInfoManager, {
+    IOfflinePushInfoCreateParams
+  } from '../../offlinePushInfoManager/index'
 
-const evaluateIcon = custom;
-const props = defineProps({
-  starTotal: {
-    type: Number,
-    default: 5,
-  },
-});
-const emits = defineEmits(['onDialogPopupShowOrHide']);
+  const evaluateIcon = custom
+  const props = defineProps({
+    starTotal: {
+      type: Number,
+      default: 5
+    }
+  })
+  const emits = defineEmits(['onDialogPopupShowOrHide'])
 
-const container = ref();
+  const container = ref()
 
-const starList = ref<number>(props.starTotal);
-const currentStarIndex = ref<number>(-1);
-const comment = ref('');
-const currentConversation = ref<IConversationModel>();
+  const starList = ref<number>(props.starTotal)
+  const currentStarIndex = ref<number>(-1)
+  const comment = ref('')
+  const currentConversation = ref<IConversationModel>()
 
-TUIStore.watch(StoreName.CONV, {
-  currentConversation: (conversation: IConversationModel) => {
-    currentConversation.value = conversation;
-  },
-});
+  TUIStore.watch(StoreName.CONV, {
+    currentConversation: (conversation: IConversationModel) => {
+      currentConversation.value = conversation
+    }
+  })
 
-const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
+  const isEvaluateValid = computed(
+    () => comment.value.length || currentStarIndex.value >= 0
+  )
 
-const onDialogShow = () => {
-  emits('onDialogPopupShowOrHide', true);
-};
-
-const onDialogClose = () => {
-  resetEvaluate();
-  emits('onDialogPopupShowOrHide', false);
-};
-
-const openLink = () => {
-  if (isPC || isH5) {
-    window.open(Link?.customMessage?.url);
+  const onDialogShow = () => {
+    emits('onDialogPopupShowOrHide', true)
   }
-};
 
-const closeDialog = () => {
-  container?.value?.toggleDialogDisplay(false);
-};
-
-const resetEvaluate = () => {
-  currentStarIndex.value = -1;
-  comment.value = '';
-};
-
-const selectStar = (starIndex?: any) => {
-  if (currentStarIndex.value === starIndex) {
-    currentStarIndex.value = currentStarIndex.value - 1;
-  } else {
-    currentStarIndex.value = starIndex;
+  const onDialogClose = () => {
+    resetEvaluate()
+    emits('onDialogPopupShowOrHide', false)
   }
-};
 
-const submitEvaluate = () => {
-  // The evaluate message must have at least one star or comment to be submitted.
-  if (currentStarIndex.value < 0 && !comment.value.length) {
-    return;
+  const openLink = () => {
+    if (isPC || isH5) {
+      window.open(Link?.customMessage?.url)
+    }
+  }
+
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
+  const resetEvaluate = () => {
+    currentStarIndex.value = -1
+    comment.value = ''
+  }
+
+  const selectStar = (starIndex?: any) => {
+    if (currentStarIndex.value === starIndex) {
+      currentStarIndex.value = currentStarIndex.value - 1
+    } else {
+      currentStarIndex.value = starIndex
+    }
+  }
+
+  const submitEvaluate = () => {
+    // The evaluate message must have at least one star or comment to be submitted.
+    if (currentStarIndex.value < 0 && !comment.value.length) {
+      return
+    }
+    const payload = {
+      data: JSON.stringify({
+        businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
+        version: 1,
+        score: currentStarIndex.value + 1,
+        comment: comment.value
+      }),
+      description: '对本次的服务评价',
+      extension: '对本次的服务评价'
+    }
+    const options = {
+      to:
+        currentConversation?.value?.groupProfile?.groupID ||
+        currentConversation?.value?.userProfile?.userID,
+      conversationType: currentConversation?.value?.type,
+      payload,
+      needReadReceipt: isEnabledMessageReadReceiptGlobal()
+    }
+    const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
+      conversation: currentConversation.value,
+      payload: options.payload,
+      messageType: TUIChatEngine.TYPES.MSG_CUSTOM
+    }
+    const sendMessageOptions: SendMessageOptions = {
+      offlinePushInfo: OfflinePushInfoManager.create(
+        offlinePushInfoCreateParams
+      )
+    }
+
+
+    TUIChatService.sendCustomMessage(
+      options as SendMessageParams,
+      sendMessageOptions
+    )
+    // close dialog after submit evaluate
+    container?.value?.toggleDialogDisplay(false)
   }
-  const payload = {
-    data: JSON.stringify({
-      businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
-      version: 1,
-      score: currentStarIndex.value + 1,
-      comment: comment.value,
-    }),
-    description: '对本次的服务评价',
-    extension: '对本次的服务评价',
-  };
-  const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID
-      || currentConversation?.value?.userProfile?.userID,
-    conversationType: currentConversation?.value?.type,
-    payload,
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  };
-  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
-    conversation: currentConversation.value,
-    payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
-  };
-  const sendMessageOptions: SendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
-  };
-  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
-  // close dialog after submit evaluate
-  container?.value?.toggleDialogDisplay(false);
-};
 </script>
 <style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
index 81dfdb3..09c721a 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -63,6 +63,7 @@
             v-if="featureConfig.InputEvaluation"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
           />
+          <!-- 红包 -->
           <RedEnvelope />
         </template>
       </swiper-item>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
index 6f67f61..d7098fe 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/index.vue
@@ -1,20 +1,130 @@
 <script setup lang="ts">
+  import { computed, reactive, ref } from '../../../../adapter-vue'
   import ToolbarItemContainer from '../toolbar-item-container/index.vue'
   import custom from '../../../../assets/icon/red-packet.svg'
   import { isUniFrameWork } from '../../../../utils/env'
 
-  const evaluateIcon = custom;
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 32rpx; font-style: normal; text-transform: none;`
+
+  const evaluateIcon = custom
+
+  /** 提示框 */
+  const message = ref()
+  const container = ref()
+  const formData = reactive({
+    //  积分
+    integral: '',
+    // 红包标题
+    title: ''
+  })
+
+  /** 监听积分输入值 */
+  const monitorPoints = computed(() => {
+    const data = {
+      valid: false,
+      message: ''
+    }
+    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 onDialogShow = () => {
+    console.log('弹出窗口')
+    formData.integral = ''
+    formData.title = ''
+  }
+
+  const onDialogClose = () => {
+    console.log('关闭窗口')
+  }
+
+  const closeDialog = () => {
+    container?.value?.toggleDialogDisplay(false)
+  }
+
+  const onSubmit = () => {
+    if (!formData.integral) return
+    console.log('确认')
+  }
 </script>
 
 <template>
   <ToolbarItemContainer
+    ref="container"
+    needBottomPopup
     :iconFile="evaluateIcon"
     :iconWidth="isUniFrameWork ? '26px' : '20px'"
     :iconHeight="isUniFrameWork ? '26px' : '20px'"
     title="红包"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
   >
-    <view>弹出窗口</view>
+    <view class="red-envelope">
+      <view class="top-title">
+        <text class="title">发红包</text>
+        <uni-icons
+          type="closeempty"
+          color="#333333"
+          size="24"
+          @click.stop="closeDialog"
+        ></uni-icons>
+      </view>
+      <!-- 输入框 -->
+      <view
+        :class="{ 'on-reminder': monitorPoints.valid }"
+        class="input-box"
+      >
+        <text>积分</text>
+        <input
+          v-model="formData.integral"
+          :placeholder-style="placeholderStyle"
+          confirm-type="done"
+          type="number"
+          placeholder="0.00"
+          @confirm="onSubmit"
+        />
+      </view>
+
+      <view class="input-box title-box">
+        <input
+          v-model="formData.title"
+          :placeholder-style="placeholderStyle"
+          placeholder="恭喜发财，大吉大利"
+        />
+      </view>
+
+      <!-- 底部显示 -->
+      <view class="bottom-box">
+        <view class="text-box">
+          <text>积分：</text>
+          <text v-if="formData.integral">{{ formData.integral }}</text>
+          <text v-else>0.00</text>
+        </view>
+        <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>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss" src="./style/index.scss"></style>
diff --git a/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
new file mode 100644
index 0000000..e436121
--- /dev/null
+++ b/TUIKit/components/TUIChat/message-input-toolbar/red-envelope/style/index.scss
@@ -0,0 +1,83 @@
+.red-envelope {
+  padding: 34rpx 24rpx;
+  background-color: #f7f7f7;
+  .top-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 26rpx;
+    .title {
+      font-size: 32rpx;
+      color: #1c1c1c;
+    }
+  }
+
+  .input-box {
+    margin-bottom: 26rpx;
+    background: #ffffff;
+    border-radius: 16rpx;
+    padding: 24rpx 34rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text {
+      font-size: 32rpx;
+      color: #1c1c1c;
+    }
+    input {
+      width: 60%;
+      font-size: 32rpx;
+      color: #1c1c1c;
+      text-align: right;
+    }
+  }
+
+  .title-box {
+    input {
+      width: 100%;
+      text-align: left;
+    }
+  }
+
+  .bottom-box {
+    margin-top: 5vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .text-box {
+      display: flex;
+      align-items: baseline;
+      text {
+        font-weight: 600;
+        font-size: 28rpx;
+        color: #1c1c1c;
+        &:last-child {
+          font-size: 68rpx;
+        }
+      }
+    }
+
+    .btn {
+      margin-top: 28rpx;
+      font-size: 30rpx;
+      color: #ffffff;
+      background: #f56c6c;
+      width: 46%;
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  // 警告提现
+  .on-reminder {
+    text {
+      color: #f56c6c;
+    }
+    input {
+      color: #f56c6c;
+    }
+  }
+}
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 a8c5ebe..d7cc619 100644
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="custom">
-    <template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
+    <template
+      v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE"
+    >
       <div>
         <h1>
           <label>{{ extension.title }}</label>
@@ -8,18 +10,19 @@
             v-if="extension.hyperlinks_text"
             :href="extension.hyperlinks_text.value"
             target="view_window"
-          >{{ extension.hyperlinks_text.key }}</a>
+          >
+            {{ extension.hyperlinks_text.key }}
+          </a>
         </h1>
         <ul v-if="extension.item && extension.item.length > 0">
-          <li
-            v-for="(item, index) in extension.item"
-            :key="index"
-          >
+          <li v-for="(item, index) in extension.item" :key="index">
             <a
               v-if="isUrl(item.value)"
               :href="item.value"
               target="view_window"
-            >{{ item.key }}</a>
+            >
+              {{ item.key }}
+            </a>
             <p v-else>
               {{ item.key }}
             </p>
@@ -28,32 +31,30 @@
         <article>{{ extension.description }}</article>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE"
+    >
       <div class="evaluate">
-        <h1>{{ TUITranslateService.t("message.custom.对本次服务评价") }}</h1>
+        <h1>
+          {{ TUITranslateService.t('message.custom.对本次服务评价') }}
+        </h1>
         <ul class="evaluate-list">
           <li
             v-for="(item, index) in Math.max(customData.score, 0)"
             :key="index"
             class="evaluate-list-item"
           >
-            <Icon
-              :file="star"
-              class="file-icon"
-            />
+            <Icon :file="star" class="file-icon" />
           </li>
         </ul>
         <article>{{ customData.comment }}</article>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
-      <div
-        class="order"
-        @click="openLink(customData.link)"
-      >
-        <img
-          :src="customData.imageUrl"
-        >
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER"
+    >
+      <div class="order" @click="openLink(customData.link)">
+        <img :src="customData.imageUrl" />
         <main>
           <h1>{{ customData.title }}</h1>
           <p>{{ customData.description }}</p>
@@ -61,15 +62,14 @@
         </main>
       </div>
     </template>
-    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
+    <template
+      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK"
+    >
       <div class="textLink">
         <p>{{ customData.text }}</p>
-        <a
-          :href="customData.link"
-          target="view_window"
-        >{{
-          TUITranslateService.t("message.custom.查看详情>>")
-        }}</a>
+        <a :href="customData.link" target="view_window">
+          {{ TUITranslateService.t('message.custom.查看详情>>') }}
+        </a>
       </div>
     </template>
     <template v-else>
@@ -79,109 +79,112 @@
 </template>
 
 <script lang="ts" setup>
-import { watchEffect, ref } from '../../../../adapter-vue';
-import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine-lite';
-import { isUrl, JSONToObject } from '../../../../utils/index';
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
-import { ICustomMessagePayload } from '../../../../interface';
-import Icon from '../../../common/Icon.vue';
-import star from '../../../../assets/icon/star-light.png';
-interface Props {
-  messageItem: IMessageModel;
-  content: any;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  messageItem: undefined,
-  content: undefined,
-});
-
-const custom = ref();
-const message = ref<IMessageModel>();
-const extension = ref();
-const customData = ref<ICustomMessagePayload>({
-  businessID: '',
-});
-
-watchEffect(() => {
-  custom.value = props.content;
-  message.value = props.messageItem;
-  const { payload } = props.messageItem;
-  customData.value = payload.data || '';
-  customData.value = JSONToObject(payload.data);
-  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
-    extension.value = JSONToObject(payload.extension);
+  import { watchEffect, ref } from '../../../../adapter-vue'
+  import {
+    TUITranslateService,
+    IMessageModel
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { isUrl, JSONToObject } from '../../../../utils/index'
+  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
+  import { ICustomMessagePayload } from '../../../../interface'
+  import Icon from '../../../common/Icon.vue'
+  import star from '../../../../assets/icon/star-light.png'
+  interface Props {
+    messageItem: IMessageModel
+    content: any
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    messageItem: undefined,
+    content: undefined
+  })
+
+  const custom = ref()
+  const message = ref<IMessageModel>()
+  const extension = ref()
+  const customData = ref<ICustomMessagePayload>({
+    businessID: ''
+  })
+
+  watchEffect(() => {
+    custom.value = props.content
+    message.value = props.messageItem
+    const { payload } = props.messageItem
+    customData.value = payload.data || ''
+    customData.value = JSONToObject(payload.data)
+    if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
+      extension.value = JSONToObject(payload.extension)
+    }
+  })
+  const openLink = (url: any) => {
+    window.open(url)
   }
-});
-const openLink = (url: any) => {
-  window.open(url);
-};
 </script>
 <style lang="scss" scoped>
-@import "../../../../assets/styles/common";
+  @import '../../../../assets/styles/common';
 
-a {
-  color: #679ce1;
-}
+  a {
+    color: #679ce1;
+  }
 
-.custom {
-  font-size: 14px;
-
-  h1 {
+  .custom {
     font-size: 14px;
-    color: #000;
-  }
 
-  h1,
-  a,
-  p {
-    font-size: 14px;
-  }
+    h1 {
+      font-size: 14px;
+      color: #000;
+    }
 
-  .evaluate {
-    ul {
+    h1,
+    a,
+    p {
+      font-size: 14px;
+    }
+
+    .evaluate {
+      ul {
+        display: flex;
+        padding: 10px 0;
+      }
+
+      &-list {
+        display: flex;
+        flex-direction: row;
+
+        &-item {
+          padding: 0 2px;
+        }
+      }
+    }
+
+    .order {
       display: flex;
-      padding: 10px 0;
-    }
 
-    &-list {
-      display: flex;
-      flex-direction: row;
+      main {
+        padding-left: 5px;
 
-      &-item {
-        padding: 0 2px;
+        p {
+          font-family: PingFangSC-Regular;
+          width: 145px;
+          line-height: 17px;
+          font-size: 14px;
+          color: #999;
+          letter-spacing: 0;
+          margin-bottom: 6px;
+          word-break: break-word;
+        }
+
+        span {
+          font-family: PingFangSC-Regular;
+          line-height: 25px;
+          color: #ff7201;
+        }
+      }
+
+      img {
+        width: 67px;
+        height: 67px;
       }
     }
   }
-
-  .order {
-    display: flex;
-
-    main {
-      padding-left: 5px;
-
-      p {
-        font-family: PingFangSC-Regular;
-        width: 145px;
-        line-height: 17px;
-        font-size: 14px;
-        color: #999;
-        letter-spacing: 0;
-        margin-bottom: 6px;
-        word-break: break-word;
-      }
-
-      span {
-        font-family: PingFangSC-Regular;
-        line-height: 25px;
-        color: #ff7201;
-      }
-    }
-
-    img {
-      width: 67px;
-      height: 67px;
-    }
-  }
-}
 </style>