123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- <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 evaluateIcon from '../../../../assets/icon/evaluate.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 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>
|