添加咨询奖励

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

@@ -5,21 +5,20 @@
       class="message-bubble-main-content"
       :class="[message.flow === 'in' ? '' : 'reverse']"
     >
-      <Avatar
-        useSkeletonAnimation
-        :url="message.avatar || ''"
-      />
-      <main
-        class="message-body"
-        @click.stop
-      >
+      <Avatar useSkeletonAnimation :url="message.avatar || ''" />
+      <main class="message-body" @click.stop>
         <div
           v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
           class="message-body-nick-name"
         >
           {{ props.content.showName }}
         </div>
-        <div :class="['message-body-main', message.flow === 'out' && 'message-body-main-reverse']">
+        <div
+          :class="[
+            'message-body-main',
+            message.flow === 'out' && 'message-body-main-reverse',
+          ]"
+        >
           <div
             :class="[
               'blink',
@@ -30,25 +29,29 @@
               isNoPadding && isBlink ? 'blink-shadow' : '',
               !isNoPadding && isBlink ? 'blink-content' : '',
             ]"
+            :style="{
+              background: StyleImpl(props),
+            }"
           >
             <div class="content-main">
               <img
                 v-if="
-                  (message.type === TYPES.MSG_IMAGE || message.type === TYPES.MSG_VIDEO) &&
-                    message.hasRiskContent
+                  (message.type === TYPES.MSG_IMAGE ||
+                    message.type === TYPES.MSG_VIDEO) &&
+                  message.hasRiskContent
                 "
-                :class="['message-risk-replace', !isPC && 'message-risk-replace-h5']"
+                :class="[
+                  'message-risk-replace',
+                  !isPC && 'message-risk-replace-h5',
+                ]"
                 :src="riskImageReplaceUrl"
-              >
+              />
               <template v-else>
                 <slot />
               </template>
             </div>
             <!-- 敏感信息失败提示 -->
-            <div
-              v-if="message.hasRiskContent"
-              class="content-has-risk-tips"
-            >
+            <div v-if="message.hasRiskContent" class="content-has-risk-tips">
               {{ riskContentText }}
             </div>
           </div>
@@ -62,7 +65,10 @@
           </div>
           <!-- 加载图标 -->
           <Icon
-            v-if="message.status === 'unSend' && needLoadingIconMessageType.includes(message.type)"
+            v-if="
+              message.status === 'unSend' &&
+              needLoadingIconMessageType.includes(message.type)
+            "
             class="message-label loading-circle"
             :file="loadingIcon"
             :width="'15px'"
@@ -101,17 +107,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRefs } from '../../../../adapter-vue';
-import TUIChatEngine, { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import Icon from '../../../common/Icon.vue';
-import ReadStatus from './read-status/index.vue';
-import MessageQuote from './message-quote/index.vue';
-import Avatar from '../../../common/Avatar/index.vue';
-import MessageTranslate from './message-translate/index.vue';
-import MessageConvert from './message-convert/index.vue';
-import loadingIcon from '../../../../assets/icon/loading.png';
-import { shallowCopyMessage } from '../../utils/utils';
-import { isPC } from '../../../../utils/env';
+import { computed, toRefs } from "../../../../adapter-vue";
+import TUIChatEngine, {
+  TUITranslateService,
+  IMessageModel,
+} from "@tencentcloud/chat-uikit-engine";
+import Icon from "../../../common/Icon.vue";
+import ReadStatus from "./read-status/index.vue";
+import MessageQuote from "./message-quote/index.vue";
+import Avatar from "../../../common/Avatar/index.vue";
+import MessageTranslate from "./message-translate/index.vue";
+import MessageConvert from "./message-convert/index.vue";
+import loadingIcon from "../../../../assets/icon/loading.png";
+import { shallowCopyMessage } from "../../utils/utils";
+import { isPC } from "../../../../utils/env";
 
 interface IProps {
   messageItem: IMessageModel;
@@ -121,15 +130,34 @@ interface IProps {
 }
 
 interface IEmits {
-  (e: 'resendMessage'): void;
-  (e: 'blinkMessage', messageID: string): void;
-  (e: 'setReadReceiptPanelVisible', visible: boolean, message?: IMessageModel): void;
+  (e: "resendMessage"): void;
+  (e: "blinkMessage", messageID: string): void;
+  (
+    e: "setReadReceiptPanelVisible",
+    visible: boolean,
+    message?: IMessageModel
+  ): void;
   // 下面的方法是 uniapp 专属
-  (e: 'scrollTo', scrollHeight: number): void;
+  (e: "scrollTo", scrollHeight: number): void;
 }
 
 const emits = defineEmits<IEmits>();
 
+const StyleImpl = (data) => {
+  if (data.messageItem) {
+    let style = data.messageItem._message._elements[0].content.data;
+    if (style) {
+      let styleJSON = JSON.parse(style);
+      if (styleJSON.businessID == "interview_consult_message") {
+        return "none";
+      } else {
+        return "";
+      }
+    } else {
+      return "";
+    }
+  }
+};
 const props = withDefaults(defineProps<IProps>(), {
   messageItem: () => ({} as IMessageModel),
   content: () => ({}),
@@ -138,7 +166,8 @@ const props = withDefaults(defineProps<IProps>(), {
 });
 
 const TYPES = TUIChatEngine.TYPES;
-const riskImageReplaceUrl = 'https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png';
+const riskImageReplaceUrl =
+  "https://web.sdk.qcloud.com/component/TUIKit/assets/has_risk_default.png";
 const needLoadingIconMessageType = [
   TYPES.MSG_LOCATION,
   TYPES.MSG_TEXT,
@@ -150,7 +179,7 @@ const needLoadingIconMessageType = [
 const { blinkMessageIDList, messageItem: message } = toRefs(props);
 
 const containerClassNameList = computed(() => {
-  return ['message-bubble', ...props.classNameList];
+  return ["message-bubble", ...props.classNameList];
 });
 
 const isNoPadding = computed(() => {
@@ -158,12 +187,14 @@ const isNoPadding = computed(() => {
 });
 
 const riskContentText = computed<string>(() => {
-  let content = TUITranslateService.t('TUIChat.涉及敏感内容') + ', ';
-  if (message.value.flow === 'out') {
-    content += TUITranslateService.t('TUIChat.发送失败');
+  let content = TUITranslateService.t("TUIChat.涉及敏感内容") + ", ";
+  if (message.value.flow === "out") {
+    content += TUITranslateService.t("TUIChat.发送失败");
   } else {
     content += TUITranslateService.t(
-      message.value.type === TYPES.MSG_AUDIO ? 'TUIChat.无法收听' : 'TUIChat.无法查看',
+      message.value.type === TYPES.MSG_AUDIO
+        ? "TUIChat.无法收听"
+        : "TUIChat.无法查看"
     );
   }
   return content;
@@ -178,20 +209,20 @@ const isBlink = computed(() => {
 
 function resendMessage() {
   if (!message.value?.hasRiskContent) {
-    emits('resendMessage');
+    emits("resendMessage");
   }
 }
 
 function blinkMessage(messageID: string) {
-  emits('blinkMessage', messageID);
+  emits("blinkMessage", messageID);
 }
 
 function scrollTo(scrollHeight: number) {
-  emits('scrollTo', scrollHeight);
+  emits("scrollTo", scrollHeight);
 }
 
 function openReadUserPanel() {
-  emits('setReadReceiptPanelVisible', true, message.value);
+  emits("setReadReceiptPanelVisible", true, message.value);
 }
 </script>
 
@@ -216,7 +247,7 @@ function openReadUserPanel() {
   -webkit-touch-callout: none; /* 系统默认菜单被禁用 */
   -webkit-user-select: none; /* webkit浏览器 */
   -khtml-user-select: none; /* 早期浏览器 */
-  -moz-user-select: none;/* 火狐 */
+  -moz-user-select: none; /* 火狐 */
   -ms-user-select: none; /* IE10 */
   .message-bubble-main-content {
     display: flex;
@@ -295,96 +326,96 @@ function openReadUserPanel() {
             margin-top: 5px;
             border-top: 1px solid #e5c7c7;
             padding-top: 5px;
+          }
         }
-      }
-
-      .content-in {
-        background: #fbfbfb;
-        border-radius: 0 10px 10px;
-      }
-
-      .content-out {
-        background: #fff;
-        border-radius: 10px 0 10px 10px;
-      }
 
-      .content-no-padding {
-        padding: 0;
-        background: transparent;
-        border-radius: 10px;
-        overflow: hidden;
-      }
+        .content-in {
+          background: #fbfbfb;
+          border-radius: 0 10px 10px;
+        }
 
-      .content-no-padding.content-has-risk {
-        padding: 12px;
-      }
+        .content-out {
+          background: #fff;
+          border-radius: 10px 0 10px 10px;
+        }
 
-      .content-has-risk {
-        background: rgba(250, 81, 81, 0.16);
-      }
+        .content-no-padding {
+          padding: 0;
+          background: transparent;
+          border-radius: 10px;
+          overflow: hidden;
+        }
 
-      .blink-shadow {
-        @keyframes shadow-blink {
-          50% {
-            box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
-          }
+        .content-no-padding.content-has-risk {
+          padding: 12px;
         }
 
-        box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
-        animation: shadow-blink 1s linear 3;
-      }
+        .content-has-risk {
+          background: rgba(250, 81, 81, 0.16);
+        }
 
-      .blink-content {
-        @keyframes reference-blink {
-          50% {
-            background-color: #ff9c19;
+        .blink-shadow {
+          @keyframes shadow-blink {
+            50% {
+              box-shadow: rgba(255, 156, 25, 1) 0 0 10px 0;
+            }
           }
+
+          box-shadow: rgba(255, 156, 25, 0) 0 0 10px 0;
+          animation: shadow-blink 1s linear 3;
         }
 
-        animation: reference-blink 1s linear 3;
-      }
+        .blink-content {
+          @keyframes reference-blink {
+            50% {
+              background-color: #ff9c19;
+            }
+          }
 
-    .message-label {
-      align-self: flex-end;
-      font-family: PingFangSC-Regular;
-      font-size: 12px;
-      color: #b6b8ba;
-      word-break: keep-all;
-      flex: 0 0 auto;
-      margin: 0 8px;
+          animation: reference-blink 1s linear 3;
+        }
 
-      &.fail {
-        width: 15px;
-        height: 15px;
-        border-radius: 15px;
-        background: red;
-        color: #fff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-      }
+        .message-label {
+          align-self: flex-end;
+          font-family: PingFangSC-Regular;
+          font-size: 12px;
+          color: #b6b8ba;
+          word-break: keep-all;
+          flex: 0 0 auto;
+          margin: 0 8px;
+
+          &.fail {
+            width: 15px;
+            height: 15px;
+            border-radius: 15px;
+            background: red;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+          }
 
-      &.loading-circle {
-        opacity: 0;
-        animation: circle-loading 2s linear 1s infinite;
-      }
+          &.loading-circle {
+            opacity: 0;
+            animation: circle-loading 2s linear 1s infinite;
+          }
 
-      @keyframes circle-loading {
-        0% {
-          transform: rotate(0);
-          opacity: 1;
-        }
+          @keyframes circle-loading {
+            0% {
+              transform: rotate(0);
+              opacity: 1;
+            }
 
-        100% {
-          opacity: 1;
-          transform: rotate(360deg);
+            100% {
+              opacity: 1;
+              transform: rotate(360deg);
+            }
+          }
         }
-      }
-    }
 
-    .align-self-bottom {
-      align-self: flex-end;
+        .align-self-bottom {
+          align-self: flex-end;
         }
       }
     }

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

@@ -1,8 +1,28 @@
 <template>
   <div class="custom" style="font-size: 14px">
-   
+    <template v-if="isCustom.businessID === 'interview_consult_message'">
+      <div class="Consultation">
+        <div class="contont">
+          <div>
+            <img
+              src="https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/newImages/jl.png"
+              style="width: 76rpx; height: 76rpx"
+            />
+          </div>
+          <div>
+            <span style="font-weight: 500; font-size: 32rpx; color: #333333"
+              >咨询奖励</span
+            >
+            <span style="font-weight: 400; font-size: 36rpx; color: #cd2121">
+              ￥5</span
+            >
+          </div>
+        </div>
+        <div class="tips">{{isCustom.desc}}</div>
+      </div>
+    </template>
     <!-- 发送联系方式 -->
-    <template v-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.PHONE">
+    <template v-else-if="isCustom.businessID === CHAT_MSG_CUSTOM_TYPE.PHONE">
       <div class="phone">
         <img
           src="https://qcloudimg.tencent-cloud.cn/trisys/assets/product/images/SOOZNXCHkHcm50wX2ndp4.png"
@@ -15,9 +35,10 @@
       </div>
       <div class="xian"></div>
       <div class="phone_footer">
-        <span> <a :href="`tel:` + isCustom.iphone" ref="telPhone">拨号</a></span>
+        <span>
+          <a :href="`tel:` + isCustom.iphone" ref="telPhone">拨号</a></span
+        >
         <span>复制</span>
-        <!-- <span @tap="PhoneChange('2', isCustom)"> 发短信</span> -->
       </div>
     </template>
     <!-- 面试邀请 -->
@@ -27,7 +48,7 @@
           <img :src="isCustom.imageUrl" />
           <div class="main">
             <h1>您已发起面试邀请</h1>
-            <span>云赋能网络信息有限公司</span>
+            <span></span>
           </div>
         </div>
         <div class="xian"></div>
@@ -49,21 +70,22 @@
         <div class="phone_footer">
           <span style="color: #04c4ab">信息费：4HC</span>
           <span>等待接受</span>
-          <!-- <span v-else style="color: #0776eb" @click="AcceptInvitation">接受邀请</span> -->
-          <!-- <span @tap="PhoneChange('2', isCustom)"> 发短信</span> -->
         </div>
       </div>
     </template>
-  
+    
     <template v-else>
-      <span v-html="content.custom" />
+      <span v-html="content.custom" ></span>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { watchEffect, ref } from "../../../../adapter-vue";
-import { TUITranslateService, IMessageModel } from "@tencentcloud/chat-uikit-engine";
+import {
+  TUITranslateService,
+  IMessageModel,
+} from "@tencentcloud/chat-uikit-engine";
 import { isUrl, JSONToObject } from "../../../../utils/index";
 import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
 import { ICustomMessagePayload } from "../../../../interface";
@@ -128,6 +150,27 @@ const openLink = (url: any) => {
 </script>
 <style lang="scss" scoped>
 @import "../../../../assets/styles/common";
+.Consultation {
+  padding: 15px 10px 15px 10px;
+  width: 200px;
+  height: 74px;
+  background: linear-gradient(180deg, #ffdeb2 0%, #ffecc7 100%);
+  border-radius: 16rpx;
+  .contont {
+    
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .tips {
+    font-size: 12px;
+    margin-top: 10px;
+    color: #666666;
+  }
+}
+::v-deep .message-body-content {
+  background: transparent !important;
+}
 .phone {
   min-width: 180px;
   height: 65px;

loginChat.ts

@@ -46,8 +46,6 @@ export const loginChat = (loginInfo) => {
           homemaking: `C2C${userTypeNum > 0 ? shopUserId : "E" + userId}`,
         };
 
-        console.log("conversationMap", conversationMap);
-
         const conversationId = conversationMap[type];
         if (conversationId) {
           TUIConversationService.switchConversation(conversationId);
@@ -80,7 +78,7 @@ export const loginChat = (loginInfo) => {
 // 封装跳转逻辑
 const handleRedirectBasedOnIdentity = (identity, userID) => {
   const isJob = identity === "job";
-  const isMerchant = /[CE]/.test(userID);
+  const isMerchant = /[ABCDEFGHIJKLMNO]/.test(userID);
   const basePrefix = isJob ? "/TUIKit" : `/TUIKit-${capitalize(identity)}`;
   const suffixPath = isMerchant
     ? "/components/TUIConversation/merChantSideIndex"