修改

App.vue

@@ -48,11 +48,12 @@ TUITranslateService.useI18n();
 // #endif
 
 TUIChatKit.init();
-// const SDKAppID = 1600005199; // 测试版
-const SDKAppID = 1600042286; // 正式
+const SDKAppID = 1600005199; // 测试版
+// const SDKAppID = 1600042286; // 正式
 
-// const secretKey = "82f8b45664eb3252cf02f939aaac43cd81ba25b7c7f94f45be4f05e173e1ab2d"; // 测试key
-const secretKey = "acecc3c3e0a1a83c7b8fa383467bd658c8bb1297c1f2f1f15088add915e68504"; // Your 正式key
+
+const secretKey = "82f8b45664eb3252cf02f939aaac43cd81ba25b7c7f94f45be4f05e173e1ab2d"; // 测试key
+// const secretKey = "acecc3c3e0a1a83c7b8fa383467bd658c8bb1297c1f2f1f15088add915e68504"; // Your 正式key
 uni.$chat_SDKAppID = SDKAppID;
 uni.$chat_secretKey = secretKey;
 

TUIKit/components/TUIChat/config.ts

@@ -9,6 +9,7 @@ class TUIChatConfig {
       CopyMessage: true,
       DeleteMessage: true,
       RevokeMessage: true,
+      modifyMessage: true,
       QuoteMessage: true,
       ForwardMessage: true,
       TranslateMessage: true,

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

@@ -48,6 +48,7 @@
               v-if="item.type === TYPES.MSG_GRP_TIP || isCreateGroupCustomMessage(item)"
               :content="item.getMessageContent()"
             />
+
             <div
               v-else-if="!item.isRevoked && !isPluginMessage(item)"
               :id="`msg-bubble-${item.ID}`"

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

@@ -40,7 +40,8 @@
                 :class="[
                   'blink',
                   'message-body-content',
-                  message.flow === 'out' ? 'content-out' : 'content-in',
+                  messageClass(message),
+
                   message.hasRiskContent && 'content-has-risk',
                   isNoPadding ? 'content-no-padding' : '',
                   isNoPadding && isBlink ? 'blink-shadow' : '',
@@ -66,6 +67,7 @@
                   {{ riskContentText }}
                 </div>
               </div>
+
               <!-- audio unplay mark -->
               <div v-if="isDisplayUnplayMark" class="audio-unplay-mark" />
               <!-- Fail Icon -->
@@ -137,7 +139,8 @@ import RadioSelect from "../../../common/RadioSelect/index.vue";
 import loadingIcon from "../../../../assets/icon/loading.png";
 import { shallowCopyMessage } from "../../utils/utils";
 import { isPC } from "../../../../utils/env";
-
+import { watchEffect, ref } from "../../../../adapter-vue";
+import { isUrl, JSONToObject } from "../../../../utils/index";
 interface IProps {
   messageItem: IMessageModel;
   content?: any;
@@ -161,6 +164,28 @@ interface IEmits {
 }
 
 const emits = defineEmits<IEmits>();
+const isCustom = ref();
+watchEffect(() => {
+  const { payload } = props.messageItem;
+  isCustom.value = payload.data || "";
+  isCustom.value = JSONToObject(payload.data);
+});
+function messageClass(message) {
+  let businessId = message._message.payload.data
+    ? JSON.parse(message._message.payload.data).businessID
+    : "";
+  console.log(businessId);
+
+  if (message.flow === "out" && businessId != "red_envelope_message") {
+    return "content-out";
+  } else if (message.flow === "in" && businessId != "red_envelope_message") {
+    return "content-in";
+  } else if (message.flow === "out" && businessId == "red_envelope_message") {
+    return "contentCustom-out";
+  } else if (message.flow === "in" && businessId == "red_envelope_message") {
+    return "contentCustom-in";
+  }
+}
 
 const props = withDefaults(defineProps<IProps>(), {
   isAudioPlayed: false,
@@ -258,6 +283,16 @@ function openReadUserPanel() {
 </script>
 
 <style lang="scss" scoped>
+.contentCustom-in {
+  height: 100px;
+  // background: linear-gradient(225deg, #f74d30 0%, #ff7633 100%);
+  background: url("../../../../../static/img/hbbj.png") no-repeat;
+  background-size: 100% 100%;
+  padding: 16px 20px !important;
+  display: block !important;
+  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(226, 226, 226, 0.23);
+  border-radius: 0px 20px 20px 20px;
+}
 :not(not) {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,18 @@
 <template>
   <div class="custom">
-    <template v-if="isCustom.businessID === 'order'">
+    <template v-if="isCustom.businessID === 'red_envelope_message'">
+      <div class="evaluate" @click="lqhb(isCustom)">
+        <div class="evaluatered">通用红包</div>
+        <div class="time">
+          {{
+            isCustom.redEnvelopeExpireTime
+              ? $moment(isCustom.redEnvelopeExpireTime).format("YYYY-MM-DD") + "过期"
+              : ""
+          }}
+        </div>
+      </div>
+    </template>
+    <template v-else-if="isCustom.businessID === 'order'">
       <div class="evaluate">
         <div @click="product(isCustom)">
           <div class="left">
@@ -29,13 +41,19 @@
 
 <script lang="ts" setup>
 import { watchEffect, ref } from "../../../../adapter-vue";
-import { TUITranslateService, IMessageModel } from "@tencentcloud/chat-uikit-engine";
+import {
+  TUITranslateService,
+  IMessageModel,
+  TUIStore,
+} from "@tencentcloud/chat-uikit-engine";
 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";
 import * as mesApi from "@/api/message/index";
+import TUIChatConfig from "../../config";
+const featureConfig = TUIChatConfig.getFeatureConfig();
 interface Props {
   messageItem: IMessageModel;
   content: any;
@@ -67,6 +85,14 @@ watchEffect(() => {
 const openLink = (url: any) => {
   window.open(url);
 };
+const lqhb = (record) => {
+  console.log(record);
+  let aa = record;
+  aa.businessID = "red_envelope_message_gq";
+  if (!message.value) return;
+  const messageModel = TUIStore.getMessageModel(message.value.ID);
+  messageModel.modifyMessage(aa);
+};
 
 const product = (record) => {
   if (record.saleType == 2) {
@@ -82,7 +108,22 @@ const product = (record) => {
 </script>
 <style lang="scss" scoped>
 @import "../../../../assets/styles/common";
-
+.evaluatered {
+  position: relative;
+  left: 40px;
+  font-size: 20px;
+  color: #fff;
+}
+.time {
+  letter-spacing: 0.1em;
+  position: relative;
+  top: 30px;
+  font-weight: 500;
+  font-size: 24rpx;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+}
 .name {
   font-weight: bold;
   font-size: 16px;