uniapp-im-shop/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-lite'
  import { ref, computed } from '../../../../adapter-vue'
  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
  import custom from '../../../../assets/icon/custom.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'

  const evaluateIcon = custom
  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>