jiuyiUniapp/jiuyi/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-custom.vue

<template>
  <!-- Custom message keyword keyword search description, so here only a few custom messages that need to display highlighted description type are parsed -->
  <div
    :class="['message-abstract-custom']"
    @click.capture.stop
  >
    <template v-if="businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
      <div :class="['service']">
        <h1 :class="['service-header']">
          <label :class="['service-header-title']">{{ extensionJSON.title }}</label>
          <a
            v-if="extensionJSON.hyperlinks_text"
            :class="['service-header-link', 'link']"
            :href="extensionJSON.hyperlinks_text.value"
            target="view_window"
          >
            {{ extensionJSON.hyperlinks_text.key }}
          </a>
        </h1>
        <ul
          v-if="extensionJSON.item && extensionJSON.item.length > 0"
          :class="['service-list']"
        >
          <li
            v-for="(item, index) in extensionJSON.item"
            :key="index"
            :class="['service-list-item']"
          >
            <a
              v-if="isUrl(item.value)"
              :class="['service-list-item-link', 'link']"
              :href="item.value"
              target="view_window"
            >{{ item.key }}</a>
            <p
              v-else
              :class="['service-list-item-key']"
            >
              {{ item.key }}
            </p>
          </li>
        </ul>
        <div :class="['service-description', 'description']">
          <span
            v-for="(contentItem, index) in descriptionForShow"
            :key="index"
            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
          >
            {{ contentItem.text }}
          </span>
        </div>
      </div>
    </template>
    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
      <div class="evaluate">
        <div :class="['evaluate-description', 'description']">
          <span
            v-for="(contentItem, index) in descriptionForShow"
            :key="index"
            :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
          >
            {{ contentItem.text }}
          </span>
        </div>
        <ul
          v-if="extensionJSON.score"
          class="evaluate-list"
        >
          <li
            v-for="(item, index) in Math.max(extensionJSON.score, 0)"
            :key="index"
            class="evaluate-list-item"
          >
            <Icon
              :file="star"
              class="file-icon"
            />
          </li>
        </ul>
        <article>{{ extensionJSON.comment }}</article>
      </div>
    </template>
    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
      <div class="order">
        <img
          class="order-image"
          :src="extensionJSON.imageUrl"
          alt=""
        >
        <main class="order-main">
          <h1 class="order-main-title">
            {{ extensionJSON.title }}
          </h1>
          <div :class="['order-main-description', 'description']">
            <span
              v-for="(contentItem, index) in descriptionForShow"
              :key="index"
              :class="[(contentItem && contentItem.isHighlight) ? 'highlight' : 'normal']"
            >
              {{ contentItem.text }}
            </span>
          </div>
          <span class="order-main-price">{{ extensionJSON.price }}</span>
        </main>
      </div>
    </template>
    <template v-else-if="businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
      <div class="text-link">
        <div :class="['text-link-description', 'description']">
          <p>{{ extensionJSON.text }}</p>
        </div>
        <a
          :class="['link']"
          :href="extensionJSON.link"
          target="view_window"
        >{{
          TUITranslateService.t("message.custom.查看详情>>")
        }}</a>
      </div>
    </template>
    <template v-else>
      <span>{{ defaultMessageContent }}</span>
    </template>
  </div>
</template>
<script setup lang="ts">
import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
import { ref, computed, withDefaults } from '../../../../../adapter-vue';
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../../constant';
import { JSONToObject, isUrl } from '../../../../../utils/index';
import Icon from '../../../../common/Icon.vue';
import star from '../../../../../assets/icon/star-light.png';
import { IHighlightContent } from '../../../type';
import { ISearchResultListItem } from '../../../../../interface';
interface IProps {
  contentText: IHighlightContent[];
  message: IMessageModel | ISearchResultListItem;
  messageContent: Record<string, unknown> | undefined;
}
const props = withDefaults(defineProps<IProps>(), {
  contentText: () => ([]) as IHighlightContent[],
  message: () => ({}) as IMessageModel,
  messageContent: () => ({}) as Record<string, unknown>,
});

const custom = ref<{ data?: string; description?: string; extension?: string }>(
  (props?.message as IMessageModel)?.payload,
);
const extensionJSON = computed(() => custom?.value?.data ? JSONToObject(custom.value.data) : custom?.value?.data);
const businessID = computed(() => extensionJSON?.value?.businessID);
const descriptionForShow = ref<Array<{ text: string; isHighlight: boolean }>>(props?.contentText);
const defaultMessageContent = ref<string>(props?.messageContent?.custom as string || '[自定义消息]');
</script>
<style scoped lang="scss">
@import "../../../../../assets/styles/common";

.message-abstract-custom {
  .service {
    .service-header {
      font-size: 14px;
      color: #000;
    }

    .service-list {
      .service-list-item {
        font-size: 14px;
      }
    }
  }

  .evaluate {
    .evaluate-list {
      padding: 5px 0;
      display: flex;
      flex-direction: row;

      .evaluate-item {
        padding: 0 2px;
      }
    }
  }

  .order {
    display: flex;

    .order-main {
      padding-left: 5px;

      .order-main-title {
        font-size: 14px;
        color: #000;
      }

      .order-main-description {
        font-family: PingFangSC-Regular, sans-serif;
        width: 145px;
        line-height: 17px;
        font-size: 14px;
        color: #999;
        letter-spacing: 0;
        margin-bottom: 6px;
        word-break: break-word;
      }

      .order-main-price {
        font-family: PingFangSC-Regular, sans-serif;
        line-height: 25px;
        color: #ff7201;
      }
    }

    .order-img {
      width: 67px;
      height: 67px;
    }
  }

  .link {
    font-size: 14px;
    color: #679ce1;
  }

  .description {
    font-size: 14px;
    color: #000;

    .highlight {
      background-color: #007aff33;
    }

    .normal {
      font-size: 14px;
      color: #000;
    }
  }
}
</style>