jiuyiUniapp/jiuyi2/TUIKit/components/TUIChat/message-input-toolbar/evaluate/index.vue

<template>
  <ToolbarItemContainer
    ref="container"
    :iconFile="evaluateIcon"
    title="评价"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '26px' : '20px'"
    :iconHeight="isUniFrameWork ? '26px' : '20px'"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <div :class="['evaluate', !isPC && 'evaluate-h5']">
      <div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
        <div
          :class="[
            'evaluate-header-content',
            !isPC && 'evaluate-h5-header-content',
          ]"
        >
          {{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
        </div>
        <div
          v-if="!isPC"
          :class="[
            'evaluate-header-close',
            !isPC && 'evaluate-h5-header-close',
          ]"
          @click.stop="closeDialog"
        >
          {{ TUITranslateService.t("关闭") }}
        </div>
      </div>
      <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
        <ul
          :class="[
            'evaluate-content-list',
            !isPC && 'evaluate-h5-content-list',
          ]"
        >
          <li
            v-for="(item, index) in starList"
            :key="index"
            :class="[
              'evaluate-content-list-item',
              !isPC && 'evaluate-h5-content-list-item',
            ]"
            @click.stop="selectStar(index)"
          >
            <Icon
              v-if="index <= currentStarIndex"
              :file="starLightIcon"
              :width="isPC ? '20px' : '30px'"
              :height="isPC ? '20px' : '30px'"
            />
            <Icon
              v-else
              :file="starIcon"
              :width="isPC ? '20px' : '30px'"
              :height="isPC ? '20px' : '30px'"
            />
          </li>
        </ul>
        <textarea
          v-model="comment"
          :class="[
            'evaluate-content-text',
            !isPC && 'evaluate-h5-content-text',
          ]"
        />
        <div
          :class="[
            'evaluate-content-button',
            !isPC && 'evaluate-h5-content-button',
          ]"
        >
          <button
            :class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
            @click="submitEvaluate"
          >
            {{ TUITranslateService.t("Evaluate.提交评价") }}
          </button>
        </div>
      </div>
      <div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
        {{ TUITranslateService.t("Evaluate.服务评价工具") }}
        {{ "(" + TUITranslateService.t("Evaluate.使用") }}
        <a @click="openLink(Link.customMessage)">
          {{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
        </a>
        {{ TUITranslateService.t("Evaluate.搭建") + ")" }}
      </div>
    </div>
  </ToolbarItemContainer>
</template>
<script setup lang="ts">
import TUIChatEngine, {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  TUIChatService,
  SendMessageParams,
  SendMessageOptions,
} from '@tencentcloud/chat-uikit-engine';
import { ref, computed } from '../../../../adapter-vue';
import ToolbarItemContainer from '../toolbar-item-container/index.vue';
import evaluateIconLight from '../../../../assets/icon/evalute-light.svg';
import evaluateIconDark from '../../../../assets/icon/evalute-dark.svg';
import Link from '../../../../utils/documentLink';
import Icon from '../../../common/Icon.vue';
import starIcon from '../../../../assets/icon/star.png';
import starLightIcon from '../../../../assets/icon/star-light.png';
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
import { isPC, isH5, isUniFrameWork } from '../../../../utils/env';
import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
import OfflinePushInfoManager, { IOfflinePushInfoCreateParams } from '../../offlinePushInfoManager/index';
import TUIChatConfig from '../../config';

const evaluateIcon = TUIChatConfig.getTheme() === 'dark' ? evaluateIconDark : evaluateIconLight;
const props = defineProps({
  starTotal: {
    type: Number,
    default: 5,
  },
});
const emits = defineEmits(['onDialogPopupShowOrHide']);

const container = ref();

const starList = ref<number>(props.starTotal);
const currentStarIndex = ref<number>(-1);
const comment = ref('');
const currentConversation = ref<IConversationModel>();

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);

const onDialogShow = () => {
  emits('onDialogPopupShowOrHide', true);
};

const onDialogClose = () => {
  resetEvaluate();
  emits('onDialogPopupShowOrHide', false);
};

const openLink = () => {
  if (isPC || isH5) {
    window.open(Link?.customMessage?.url);
  }
};

const closeDialog = () => {
  container?.value?.toggleDialogDisplay(false);
};

const resetEvaluate = () => {
  currentStarIndex.value = -1;
  comment.value = '';
};

const selectStar = (starIndex?: any) => {
  if (currentStarIndex.value === starIndex) {
    currentStarIndex.value = currentStarIndex.value - 1;
  } else {
    currentStarIndex.value = starIndex;
  }
};

const submitEvaluate = () => {
  // The evaluate message must have at least one star or comment to be submitted.
  if (currentStarIndex.value < 0 && !comment.value.length) {
    return;
  }
  const payload = {
    data: JSON.stringify({
      businessID: CHAT_MSG_CUSTOM_TYPE.EVALUATE,
      version: 1,
      score: currentStarIndex.value + 1,
      comment: comment.value,
    }),
    description: '对本次的服务评价',
    extension: '对本次的服务评价',
  };
  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID
      || currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload,
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  };
  const offlinePushInfoCreateParams: IOfflinePushInfoCreateParams = {
    conversation: currentConversation.value,
    payload: options.payload,
    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
  };
  const sendMessageOptions: SendMessageOptions = {
    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
  };
  TUIChatService.sendCustomMessage(options as SendMessageParams, sendMessageOptions);
  // close dialog after submit evaluate
  container?.value?.toggleDialogDisplay(false);
};
</script>
<style scoped lang="scss" src="./style/index.scss"></style>