发送红包接口有问题，添加群恢复
This commit is contained in:
bobobobo
@@ -4,13 +4,20 @@
|
||||
:class="{
|
||||
'input-quote-container': true,
|
||||
'input-quote-container-uni': isUniFrameWork,
|
||||
'input-quote-container-h5': isH5,
|
||||
'input-quote-container-h5': isH5
|
||||
}"
|
||||
>
|
||||
<div class="input-quote-content">
|
||||
<div class="max-one-line">
|
||||
{{ quoteMessage.nick || quoteMessage.from }}: {{ quoteContentText }}
|
||||
{{ quoteMessage.nick || quoteMessage.from }}:
|
||||
{{ quoteContentText }}
|
||||
</div>
|
||||
<Icon
|
||||
v-if="isRedEnvelope"
|
||||
:file="unopenedEnvelope"
|
||||
width="44rpx"
|
||||
height="55rpx"
|
||||
/>
|
||||
<Icon
|
||||
class="input-quote-close-icon"
|
||||
:file="closeIcon"
|
||||
@@ -23,135 +30,174 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from '../../../../adapter-vue';
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService,
|
||||
IMessageModel,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import Icon from '../../../common/Icon.vue';
|
||||
import closeIcon from '../../../../assets/icon/icon-close.svg';
|
||||
import { isH5, isUniFrameWork } from '../../../../utils/env';
|
||||
import { transformTextWithKeysToEmojiNames } from '../../emoji-config';
|
||||
import { InputDisplayType } from '../../../../interface';
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted
|
||||
} from '../../../../adapter-vue'
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService,
|
||||
IMessageModel
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import Icon from '../../../common/Icon.vue'
|
||||
import closeIcon from '../../../../assets/icon/icon-close.svg'
|
||||
import { isH5, isUniFrameWork } from '../../../../utils/env'
|
||||
import { transformTextWithKeysToEmojiNames } from '../../emoji-config'
|
||||
import { InputDisplayType } from '../../../../interface'
|
||||
import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
|
||||
import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
|
||||
|
||||
interface IProps {
|
||||
displayType?: InputDisplayType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
displayType: 'editor',
|
||||
});
|
||||
|
||||
const TYPES = TUIChatEngine.TYPES;
|
||||
const quoteMessage = ref<IMessageModel>();
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
const quoteContentText = computed(() => {
|
||||
let _quoteContentText;
|
||||
switch (quoteMessage.value?.type) {
|
||||
case TYPES.MSG_TEXT:
|
||||
_quoteContentText = transformTextWithKeysToEmojiNames(quoteMessage.value.payload?.text);
|
||||
break;
|
||||
case TYPES.MSG_IMAGE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.图片');
|
||||
break;
|
||||
case TYPES.MSG_AUDIO:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.语音');
|
||||
break;
|
||||
case TYPES.MSG_VIDEO:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.视频');
|
||||
break;
|
||||
case TYPES.MSG_FILE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.文件');
|
||||
break;
|
||||
case TYPES.MSG_CUSTOM:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.自定义');
|
||||
break;
|
||||
case TYPES.MSG_FACE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.表情');
|
||||
break;
|
||||
case TYPES.MSG_MERGER:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录');
|
||||
break;
|
||||
default:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.消息');
|
||||
break;
|
||||
interface IProps {
|
||||
displayType?: InputDisplayType
|
||||
}
|
||||
return _quoteContentText;
|
||||
});
|
||||
|
||||
function cancelQuote() {
|
||||
TUIStore.update(StoreName.CHAT, 'quoteMessage', { message: undefined, type: 'quote' });
|
||||
}
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
displayType: 'editor'
|
||||
})
|
||||
|
||||
function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
|
||||
if (options?.message && options?.type === 'quote') {
|
||||
quoteMessage.value = options.message;
|
||||
} else {
|
||||
quoteMessage.value = undefined;
|
||||
const TYPES = TUIChatEngine.TYPES
|
||||
const quoteMessage = ref<IMessageModel>()
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated
|
||||
})
|
||||
})
|
||||
|
||||
/** 是否是红包 */
|
||||
const isRedEnvelope = computed(() => {
|
||||
if (quoteMessage.value?.payload?.data) {
|
||||
const businessID = JSON?.parse(
|
||||
quoteMessage.value?.payload?.data
|
||||
)?.businessID
|
||||
return businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
|
||||
}
|
||||
return false
|
||||
})
|
||||
/** 红包内容 */
|
||||
const quoteRedEnvelopeContentText = computed(() => {
|
||||
if (isRedEnvelope.value) {
|
||||
const data = JSON.parse(quoteMessage.value?.payload?.data)
|
||||
return `${data.title}`
|
||||
}
|
||||
return ''
|
||||
})
|
||||
|
||||
const quoteContentText = computed(() => {
|
||||
let _quoteContentText
|
||||
if (isRedEnvelope.value) {
|
||||
_quoteContentText = `${quoteRedEnvelopeContentText.value}`
|
||||
} else {
|
||||
switch (quoteMessage.value?.type) {
|
||||
case TYPES.MSG_TEXT:
|
||||
_quoteContentText = transformTextWithKeysToEmojiNames(
|
||||
quoteMessage.value.payload?.text
|
||||
)
|
||||
break
|
||||
case TYPES.MSG_IMAGE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.图片')
|
||||
break
|
||||
case TYPES.MSG_AUDIO:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.语音')
|
||||
break
|
||||
case TYPES.MSG_VIDEO:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.视频')
|
||||
break
|
||||
case TYPES.MSG_FILE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.文件')
|
||||
break
|
||||
case TYPES.MSG_CUSTOM:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.自定义')
|
||||
break
|
||||
case TYPES.MSG_FACE:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.表情')
|
||||
break
|
||||
case TYPES.MSG_MERGER:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.聊天记录')
|
||||
break
|
||||
default:
|
||||
_quoteContentText = TUITranslateService.t('TUIChat.消息')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
return _quoteContentText
|
||||
})
|
||||
|
||||
function cancelQuote() {
|
||||
TUIStore.update(StoreName.CHAT, 'quoteMessage', {
|
||||
message: undefined,
|
||||
type: 'quote'
|
||||
})
|
||||
}
|
||||
|
||||
function onQuoteMessageUpdated(options?: {
|
||||
message: IMessageModel
|
||||
type: string
|
||||
}) {
|
||||
if (options?.message && options?.type === 'quote') {
|
||||
quoteMessage.value = options.message
|
||||
} else {
|
||||
quoteMessage.value = undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
%common-container-style {
|
||||
margin: 5px 100px 5px 8px;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
|
||||
.input-quote-content {
|
||||
%common-container-style {
|
||||
margin: 5px 100px 5px 8px;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
line-height: 16px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
|
||||
.max-one-line {
|
||||
.input-quote-content {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
align-items: center;
|
||||
line-height: 16px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
|
||||
.max-one-line {
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.input-quote-close-icon {
|
||||
margin-left: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-quote-close-icon {
|
||||
margin-left: 5px;
|
||||
padding: 5px;
|
||||
.input-quote-container {
|
||||
@extend %common-container-style;
|
||||
}
|
||||
}
|
||||
|
||||
.input-quote-container {
|
||||
@extend %common-container-style;
|
||||
}
|
||||
.input-quote-container-uni {
|
||||
@extend %common-container-style;
|
||||
|
||||
.input-quote-container-uni {
|
||||
@extend %common-container-style;
|
||||
margin: 5px 60px 0 30px;
|
||||
}
|
||||
|
||||
margin: 5px 60px 0 30px;
|
||||
}
|
||||
.input-quote-container-h5 {
|
||||
@extend %common-container-style;
|
||||
|
||||
.input-quote-container-h5 {
|
||||
@extend %common-container-style;
|
||||
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user