tk-mini-program/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

<template>
  <div class="custom">
    <!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
      <div>
        <h1>
          <label>{{ extension.title }}</label>
          <a
            v-if="extension.hyperlinks_text"
            :href="extension.hyperlinks_text.value"
            target="view_window"
            >{{ 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">
            <a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{
              item.key
            }}</a>
            <p v-else>
              {{ item.key }}
            </p>
          </li>
        </ul>
        <article>{{ extension.description }}</article>
      </div>
    </template>
    <!-- ``````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE">
      <div class="evaluate">
        <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" />
          </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" />
        <main>
          <h1>{{ customData.title }}</h1>
          <p>{{ customData.description }}</p>
          <span>{{ customData.price }}</span>
        </main>
      </div>
    </template>
    <!-- ````````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <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>
      </div>
    </template>
    <!-- `························································标记······················································ -->
    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.PK">
      <div class="pk"  @click="handleAccept(customData)">
        <image
        class="Custommessageimage"
          :src="customData.link"
          mode="scaleToFill"
        />
      </div>
    </template>
    <!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <template v-else>
      <span v-html="content.custom" />
    </template>
    <!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
  </div>
</template>

<script lang="ts" setup>
import { watchEffect, ref } from "../../../../adapter-vue";
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";
import Icon from "../../../common/Icon.vue";
import star from "../../../../assets/icon/star-light.png";
import { isEnabledMessageReadReceiptGlobal } from "../../../TUIChat/utils/utils";
import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUIChatService,
} from "@tencentcloud/chat-uikit-engine";
import { useCounterStore } from "@/stores/counter";
// import message from '@tencentcloud/chat-uikit-uniapp/locales/en/message';
const counter = useCounterStore();


interface Props {
  messageItem: IMessageModel;
  content: any;
}
//```````````````````````````````````````````````````标记

function handleAccept(customData: ICustomMessagePayload) {
  const customDatainfo = JSON.stringify(customData);
  uni.navigateTo({
        url: `/pages/PKMessageprocessing/PKMessageprocessing?customData=${customDatainfo}`,
      });
}
//```````````````````````````````````````````````````
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);
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
@import "../../../../assets/styles/common";

a {
  color: #679ce1;
}

.custom {
  font-size: 18px;

  h1 {
    font-size: 14px;
    color: #000;
  }

  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;

    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;
    }
  }
  // `````````````````````````````````````````````````````````````````````
  .pk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    h1 {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
    }
    .button-group {
      display: flex;
      justify-content: center;
      .buttonAccept {
        width: 40%;
        height: 60rpx;
        background-color: #84ff0055;
        border-radius: 10px;
        border: 2px solid #26ff00;
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 60rpx;
        margin-bottom: 10px;
        border: none;
        cursor: pointer;
      }
      .buttonRefuse {
        width: 40%;
        height: 60rpx;
        background-color: #ff000078;
        border: 2px solid #ff0000;
        border-radius: 10px;
        color: #fff;
        font-size: 16px;
        line-height: 60rpx;
        text-align: center;
        margin-bottom: 10px;
        border: none;
        cursor: pointer;
      }
    }
  }
  //``````````````````````````````````````````````````````````````````````````````````
}
.Custommessageimage{
  width: 385rpx;
  height: 195rpx;
}
</style>