imChat/src/TUIKit/TUIComponents/container/TUIChat/components/message-custom.vue

<template>
  <div class="custom">
    <template v-if="isCustom === constant.typeService">
      <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="isCustom.businessID === constant.typeEvaluate">
      <div class="evaluate">
        <h1>{{ $t('message.custom.对本次服务评价') }}</h1>
        <ul>
          <li
            class="evaluate-list-item"
            v-for="(item, index) in ~~isCustom.score"
            :key="index"
          >
            <i class="icon icon-star-light"></i>
          </li>
        </ul>
        <article>{{ isCustom.comment }}</article>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === constant.typeOrder">
      <div class="order" @click="openLink(isCustom.link)">
        <img :src="isCustom.imageUrl" alt="" />
        <main>
          <h1>{{ isCustom.title }}</h1>
          <p>{{ isCustom.description }}</p>
          <span>{{ isCustom.price }}</span>
        </main>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === constant.typeTextLink">
      <div class="textLink">
        <p>{{ isCustom.text }}</p>
        <a :href="isCustom.link" target="view_window">
          {{ $t('message.custom.查看详情>>') }}
        </a>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === constant.TYPE_CALL_MESSAGE">
      <div
        class="call"
        @click="handleCallAgain"
        :class="`call-${data?.message?.conversationType}`"
      >
        <i class="icon" :class="handleCallMessageIcon()"></i>
        <span>{{ data.custom }}</span>
      </div>
    </template>
    <template v-else-if="isCustom.businessID === constant.TC_GROUP_NOTICE">
      <div class="notice-message" @click="handleNotice">
        <div class="notice-title">
          <i class="iconNotice"></i>
          <span>群公告</span>
        </div>
        <div class="content">
          <div class="content-title">
          {{isCustom.msgTitle}}
          </div>
          <div class="content-text">{{isCustom.msgContent}}</div>
        </div>
      </div>
    </template>
    <template v-else>
      <span v-html="data.custom"></span>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
import { isUrl, JSONToObject } from '../utils/utils';
import constant from '../../constant';
import { useStore } from 'vuex';
import { eventGlobal } from "@/helpers";
import TUIMessage from "../../../components/messageTUI/index";
import { imGroupNoticeDetail } from "../../../../api";
export default defineComponent({
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props: any, ctx: any) {
    const VuexStore =
      ((window as any)?.TUIKitTUICore?.isOfficial && useStore && useStore()) ||
      {};
    const data = reactive({
      data: {} as any,
      extension: {},
      isCustom: '',
      constant: constant
    });
    watchEffect(() => {
      data.data = props.data;
      const {
        message: { payload }
      } = props.data;
      data.isCustom = payload.data || ' ';
      data.isCustom = JSONToObject(payload.data);
      if (payload.data === constant.typeService) {
        data.extension = JSONToObject(payload.extension);
      }
    });
    const openLink = (url: any) => {
      window.open(url);
    };
    const handleCallMessageIcon = () => {
      const callType = JSON.parse(
        JSON.parse(data?.data?.message?.payload?.data)?.data
      )?.call_type;
      let className = '';
      switch (callType) {
        case 1:
          className = 'icon-call-voice';
          break;
        case 2:
          className = 'icon-call-video';
          break;
        default:
          break;
      }
      return className;
    };

    const handleCallAgain = async () => {
      const callType = JSON.parse(
        JSON.parse(props?.data?.message?.payload?.data)?.data
      )?.call_type;
      switch (data?.data?.message?.conversationType) {
        case (window as any).TUIKitTUICore.TIM.TYPES.CONV_C2C:
          // eslint-disable-next-line no-case-declarations, no-unsafe-optional-chaining
          const { flow, to, from } = data?.data?.message;
          if (to === from) break;
          try {
            await (window as any)?.TUIKitTUICore?.TUIServer?.TUICallKit?.call({
              userID: flow === 'out' ? to : from,
              type: callType
            });
            (window as any)?.TUIKitTUICore?.isOfficial &&
              VuexStore?.commit &&
              VuexStore?.commit('handleTask', 6);
          } catch (error) {
            console.warn(error);
          }
          break;
        case (window as any).TUIKitTUICore.TIM.TYPES.CONV_GROUP:
          break;
        default:
          break;
      }
    };

    const handleNotice = async () => {
      if(!data.isCustom?.msgId) return
      try {
        await imGroupNoticeDetail(data.isCustom?.msgId)
        eventGlobal.emit('handleNotice', data.isCustom?.msgId)
      } catch(e) {
        //
        TUIMessage({
          message: e.message,
          isH5: false,
          type: "error",
        });
      }
    }
    return {
      ...toRefs(data),
      isUrl,
      openLink,
      handleCallMessageIcon,
      handleNotice,
      handleCallAgain
    };
  }
});
</script>
<style lang="scss" scoped>
@import url('../../../styles/common.scss');
@import url('../../../styles/icon.scss');
a {
  color: #679ce1;
}
.custom {
  font-size: 14Px;
  h1 {
    font-size: 14Px;
    color: #000000;
  }
  h1,
  a,
  p {
    font-size: 14Px;
  }
  .evaluate {
    ul {
      display: flex;
      padding-top: 10Px;
    }
  }
  .order {
    display: flex;
    main {
      padding-left: 5Px;
      p {
        font-family: PingFangSC-Regular;
        width: 145Px;
        line-height: 17Px;
        font-size: 14Px;
        color: #999999;
        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;
    }
  }
  .call {
    display: flex;
    flex-direction: row;
    align-items: center;
    &-C2C {
      cursor: pointer;
    }
    &-GROUP {
      cursor: default;
    }
  }

  .notice-message {
    max-width: 376px;
    cursor: pointer;
    .notice-title {
      display: flex;
      align-items: center;
      padding-bottom: 6px;
      span {
        font-weight: 600;
        font-size: 16px;
        color: #198CFE;
        line-height: 24px;
      }
            
      .iconNotice {
        width: 18px;
        height: 18px;
        display: inline-block;
        margin-right: 6px;
      }
    }
    .content {
      font-size: 16px;
      color: #131415;
      line-height: 24px;
      .content-title {
        font-weight: 600;
        
      }
    }
  }
}
</style>