消息
This commit is contained in:
pengxiaolong
@@ -0,0 +1,2 @@
|
||||
import Evaluate from './index.vue';
|
||||
export default Evaluate;
|
||||
@@ -0,0 +1,211 @@
|
||||
<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>
|
||||
@@ -0,0 +1,57 @@
|
||||
.evaluate {
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
&-header {
|
||||
&-content {
|
||||
font-weight: 500;
|
||||
color: #1c1c1c;
|
||||
}
|
||||
}
|
||||
|
||||
&-adv {
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
|
||||
a {
|
||||
color: #006eff;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-text {
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #ececec;
|
||||
}
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
font-weight: 400;
|
||||
color: #50545c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-H5 {
|
||||
&-main {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.evaluate-main-content {
|
||||
background: #fff;
|
||||
|
||||
p {
|
||||
a {
|
||||
color: #3370ff;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
color: #3370ff;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
.evaluate-h5 {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
padding: 23px !important;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-content {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-close {
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
font-weight: 400;
|
||||
color: #3370ff;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
order: 1;
|
||||
|
||||
&-list {
|
||||
&-item {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
cursor: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 14px 0;
|
||||
font-size: 18px;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-adv {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "./color";
|
||||
@import "./web";
|
||||
@import "./h5";
|
||||
@import "../../../../../assets/styles/common";
|
||||
@@ -0,0 +1,93 @@
|
||||
.evaluate {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 315px;
|
||||
top: -255px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
background: url("https://web.sdk.qcloud.com/im/assets/images/login-background.png") no-repeat;
|
||||
background-color: #fff;
|
||||
background-size: cover;
|
||||
background-position-x: 128px;
|
||||
background-position-y: 77px;
|
||||
user-select: none;
|
||||
|
||||
&-header {
|
||||
&-content {
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
|
||||
&-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
padding-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
box-sizing: border-box;
|
||||
width: 288px;
|
||||
height: 90px;
|
||||
margin: 12px 0;
|
||||
padding: 12px;
|
||||
border-radius: 2px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
&-button {
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
padding: 2px 46px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-valid {
|
||||
background-color: #3370ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-invalid{
|
||||
background-color: rgb(160, 207, 255);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-adv {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user