红包需要添加样式
This commit is contained in:
cbb
@@ -14,27 +14,27 @@
|
||||
<div
|
||||
:class="[
|
||||
'evaluate-header-content',
|
||||
!isPC && 'evaluate-h5-header-content',
|
||||
!isPC && 'evaluate-h5-header-content'
|
||||
]"
|
||||
>
|
||||
{{ TUITranslateService.t("Evaluate.请对本次服务进行评价") }}
|
||||
{{ TUITranslateService.t('Evaluate.请对本次服务进行评价') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!isPC"
|
||||
:class="[
|
||||
'evaluate-header-close',
|
||||
!isPC && 'evaluate-h5-header-close',
|
||||
!isPC && 'evaluate-h5-header-close'
|
||||
]"
|
||||
@click.stop="closeDialog"
|
||||
>
|
||||
{{ TUITranslateService.t("关闭") }}
|
||||
{{ TUITranslateService.t('关闭') }}
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
|
||||
<ul
|
||||
:class="[
|
||||
'evaluate-content-list',
|
||||
!isPC && 'evaluate-h5-content-list',
|
||||
!isPC && 'evaluate-h5-content-list'
|
||||
]"
|
||||
>
|
||||
<li
|
||||
@@ -42,7 +42,7 @@
|
||||
:key="index"
|
||||
:class="[
|
||||
'evaluate-content-list-item',
|
||||
!isPC && 'evaluate-h5-content-list-item',
|
||||
!isPC && 'evaluate-h5-content-list-item'
|
||||
]"
|
||||
@click.stop="selectStar(index)"
|
||||
>
|
||||
@@ -64,146 +64,162 @@
|
||||
v-model="comment"
|
||||
:class="[
|
||||
'evaluate-content-text',
|
||||
!isPC && 'evaluate-h5-content-text',
|
||||
!isPC && 'evaluate-h5-content-text'
|
||||
]"
|
||||
/>
|
||||
<div
|
||||
:class="[
|
||||
'evaluate-content-button',
|
||||
!isPC && 'evaluate-h5-content-button',
|
||||
!isPC && 'evaluate-h5-content-button'
|
||||
]"
|
||||
>
|
||||
<button
|
||||
:class="['btn', isEvaluateValid ? 'btn-valid' : 'btn-invalid']"
|
||||
:class="[
|
||||
'btn',
|
||||
isEvaluateValid ? 'btn-valid' : 'btn-invalid'
|
||||
]"
|
||||
@click="submitEvaluate"
|
||||
>
|
||||
{{ TUITranslateService.t("Evaluate.提交评价") }}
|
||||
{{ TUITranslateService.t('Evaluate.提交评价') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['evaluate-adv', !isPC && 'evaluate-h5-adv']">
|
||||
{{ TUITranslateService.t("Evaluate.服务评价工具") }}
|
||||
{{ "(" + TUITranslateService.t("Evaluate.使用") }}
|
||||
{{ TUITranslateService.t('Evaluate.服务评价工具') }}
|
||||
{{ '(' + TUITranslateService.t('Evaluate.使用') }}
|
||||
<a @click="openLink(Link.customMessage)">
|
||||
{{ TUITranslateService.t(`Evaluate.${Link.customMessage.label}`) }}
|
||||
{{
|
||||
TUITranslateService.t(`Evaluate.${Link.customMessage.label}`)
|
||||
}}
|
||||
</a>
|
||||
{{ TUITranslateService.t("Evaluate.搭建") + ")" }}
|
||||
{{ 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';
|
||||
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 evaluateIcon = custom
|
||||
const props = defineProps({
|
||||
starTotal: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['onDialogPopupShowOrHide'])
|
||||
|
||||
const container = ref();
|
||||
const container = ref()
|
||||
|
||||
const starList = ref<number>(props.starTotal);
|
||||
const currentStarIndex = ref<number>(-1);
|
||||
const comment = ref('');
|
||||
const currentConversation = ref<IConversationModel>();
|
||||
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;
|
||||
},
|
||||
});
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversation: (conversation: IConversationModel) => {
|
||||
currentConversation.value = conversation
|
||||
}
|
||||
})
|
||||
|
||||
const isEvaluateValid = computed(() => comment.value.length || currentStarIndex.value >= 0);
|
||||
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 onDialogShow = () => {
|
||||
emits('onDialogPopupShowOrHide', true)
|
||||
}
|
||||
};
|
||||
|
||||
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 onDialogClose = () => {
|
||||
resetEvaluate()
|
||||
emits('onDialogPopupShowOrHide', false)
|
||||
}
|
||||
};
|
||||
|
||||
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 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)
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user