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

238 lines
6.7 KiB
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>