搜索：判断某个成员是不是禁言
This commit is contained in:
cbb
@@ -4,7 +4,7 @@
|
||||
<MessageInputAudio
|
||||
v-if="(isWeChat || isApp) && isRenderVoice"
|
||||
:class="{
|
||||
'message-input-wx-audio-open': displayType === 'audio',
|
||||
'message-input-wx-audio-open': displayType === 'audio'
|
||||
}"
|
||||
:isEnableAudio="displayType === 'audio'"
|
||||
@changeDisplayType="changeDisplayType"
|
||||
@@ -49,192 +49,251 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<MessageQuote
|
||||
:style="{minWidth: 0}"
|
||||
:displayType="displayType"
|
||||
/>
|
||||
<MessageQuote :style="{ minWidth: 0 }" :displayType="displayType" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
IConversationModel,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { ref, watch, onMounted, onUnmounted } from '../../../adapter-vue';
|
||||
import MessageInputEditor from './message-input-editor.vue';
|
||||
import MessageInputAt from './message-input-at/index.vue';
|
||||
import MessageInputAudio from './message-input-audio.vue';
|
||||
import MessageQuote from './message-input-quote/index.vue';
|
||||
import Icon from '../../common/Icon.vue';
|
||||
import faceIcon from '../../../assets/icon/face-uni.png';
|
||||
import moreIcon from '../../../assets/icon/more-uni.png';
|
||||
import { isPC, isH5, isWeChat, isApp } from '../../../utils/env';
|
||||
import { sendTyping } from '../utils/sendMessage';
|
||||
import { ToolbarDisplayType, InputDisplayType } from '../../../interface';
|
||||
import TUIChatConfig from '../config';
|
||||
import TUIChatEngine, {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
IMessageModel,
|
||||
IConversationModel,
|
||||
TUIGroupService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onUnmounted
|
||||
} from '../../../adapter-vue'
|
||||
import MessageInputEditor from './message-input-editor.vue'
|
||||
import MessageInputAt from './message-input-at/index.vue'
|
||||
import MessageInputAudio from './message-input-audio.vue'
|
||||
import MessageQuote from './message-input-quote/index.vue'
|
||||
import Icon from '../../common/Icon.vue'
|
||||
import faceIcon from '../../../assets/icon/face-uni.png'
|
||||
import moreIcon from '../../../assets/icon/more-uni.png'
|
||||
import { isPC, isH5, isWeChat, isApp } from '../../../utils/env'
|
||||
import { sendTyping } from '../utils/sendMessage'
|
||||
import {
|
||||
ToolbarDisplayType,
|
||||
InputDisplayType
|
||||
} from '../../../interface'
|
||||
import TUIChatConfig from '../config'
|
||||
import { useAuthUser } from '../../../../composables/useAuthUser'
|
||||
import { useUI } from '../../../../utils/use-ui'
|
||||
|
||||
interface IProps {
|
||||
placeholder: string;
|
||||
isMuted?: boolean;
|
||||
muteText?: string;
|
||||
enableInput?: boolean;
|
||||
enableAt?: boolean;
|
||||
enableTyping?: boolean;
|
||||
replyOrReference?: Record<string, any>;
|
||||
inputToolbarDisplayType: ToolbarDisplayType;
|
||||
}
|
||||
interface IEmits {
|
||||
(e: 'changeToolbarDisplayType', displayType: ToolbarDisplayType): void;
|
||||
}
|
||||
|
||||
const emits = defineEmits<IEmits>();
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
placeholder: 'this is placeholder',
|
||||
replyOrReference: () => ({}),
|
||||
isMuted: true,
|
||||
muteText: '',
|
||||
enableInput: true,
|
||||
enableAt: true,
|
||||
enableTyping: true,
|
||||
inputToolbarDisplayType: 'none',
|
||||
});
|
||||
|
||||
const editor = ref();
|
||||
const messageInputAtRef = ref();
|
||||
const currentConversation = ref<IConversationModel>();
|
||||
const isGroup = ref<boolean>(false);
|
||||
const displayType = ref<InputDisplayType>('editor');
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig();
|
||||
const isRenderVoice = ref<boolean>(featureConfig.InputVoice);
|
||||
const isRenderEmojiPicker = ref<boolean>(featureConfig.InputEmoji || featureConfig.InputStickers);
|
||||
const isRenderMore = ref<boolean>(featureConfig.InputImage || featureConfig.InputVideo || featureConfig.InputEvaluation || featureConfig.InputQuickReplies);
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdated,
|
||||
});
|
||||
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdated,
|
||||
});
|
||||
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
watch(() => props.inputToolbarDisplayType, (newVal: ToolbarDisplayType) => {
|
||||
if (newVal !== 'none') {
|
||||
changeDisplayType('editor');
|
||||
interface IProps {
|
||||
placeholder: string
|
||||
groupID?: string
|
||||
isMuted?: boolean
|
||||
muteText?: string
|
||||
enableInput?: boolean
|
||||
enableAt?: boolean
|
||||
enableTyping?: boolean
|
||||
replyOrReference?: Record<string, any>
|
||||
inputToolbarDisplayType: ToolbarDisplayType
|
||||
}
|
||||
});
|
||||
|
||||
function changeDisplayType(display: InputDisplayType) {
|
||||
displayType.value = display;
|
||||
if (display === 'audio') {
|
||||
emits('changeToolbarDisplayType', 'none');
|
||||
interface IEmits {
|
||||
(e: 'changeToolbarDisplayType', displayType: ToolbarDisplayType): void
|
||||
}
|
||||
}
|
||||
|
||||
function changeToolbarDisplayType(displayType: ToolbarDisplayType) {
|
||||
emits('changeToolbarDisplayType', displayType);
|
||||
}
|
||||
const { showDialog } = useUI()
|
||||
const { tencentUserSig } = useAuthUser()
|
||||
const emits = defineEmits<IEmits>()
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
placeholder: 'this is placeholder',
|
||||
replyOrReference: () => ({}),
|
||||
isMuted: true,
|
||||
groupID: '',
|
||||
muteText: '',
|
||||
enableInput: true,
|
||||
enableAt: true,
|
||||
enableTyping: true,
|
||||
inputToolbarDisplayType: 'none'
|
||||
})
|
||||
|
||||
const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
|
||||
sendTyping(inputContentEmpty, inputBlur);
|
||||
};
|
||||
const editor = ref()
|
||||
const messageInputAtRef = ref()
|
||||
const currentConversation = ref<IConversationModel>()
|
||||
const isGroup = ref<boolean>(false)
|
||||
const displayType = ref<InputDisplayType>('editor')
|
||||
const featureConfig = TUIChatConfig.getFeatureConfig()
|
||||
const isRenderVoice = ref<boolean>(featureConfig.InputVoice)
|
||||
const isRenderEmojiPicker = ref<boolean>(
|
||||
featureConfig.InputEmoji || featureConfig.InputStickers
|
||||
)
|
||||
const isRenderMore = ref<boolean>(
|
||||
featureConfig.InputImage ||
|
||||
featureConfig.InputVideo ||
|
||||
featureConfig.InputEvaluation ||
|
||||
featureConfig.InputQuickReplies
|
||||
)
|
||||
|
||||
const onAt = (show: boolean) => {
|
||||
messageInputAtRef?.value?.toggleAtList(show);
|
||||
};
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdated
|
||||
})
|
||||
|
||||
const onFocus = () => {
|
||||
emits('changeToolbarDisplayType', 'none');
|
||||
};
|
||||
TUIStore.watch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated
|
||||
})
|
||||
})
|
||||
|
||||
const insertEmoji = (emoji: any) => {
|
||||
editor?.value?.addEmoji && editor?.value?.addEmoji(emoji);
|
||||
};
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversation: onCurrentConversationUpdated
|
||||
})
|
||||
|
||||
const insertAt = (atInfo: any) => {
|
||||
editor?.value?.insertAt && editor?.value?.insertAt(atInfo);
|
||||
};
|
||||
TUIStore.unwatch(StoreName.CHAT, {
|
||||
quoteMessage: onQuoteMessageUpdated
|
||||
})
|
||||
})
|
||||
|
||||
const onAtListOpen = () => {
|
||||
editor?.value?.blur && editor?.value?.blur();
|
||||
};
|
||||
watch(
|
||||
() => props.inputToolbarDisplayType,
|
||||
(newVal: ToolbarDisplayType) => {
|
||||
if (newVal !== 'none') {
|
||||
changeDisplayType('editor')
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const reEdit = (content: any) => {
|
||||
editor?.value?.resetEditor();
|
||||
editor?.value?.setEditorContent(content);
|
||||
};
|
||||
|
||||
function onCurrentConversationUpdated(conversation: IConversationModel) {
|
||||
currentConversation.value = conversation;
|
||||
isGroup.value = currentConversation.value?.type === TUIChatEngine.TYPES.CONV_GROUP;
|
||||
}
|
||||
|
||||
function onQuoteMessageUpdated(options?: { message: IMessageModel; type: string }) {
|
||||
// switch text input mode when there is a quote message
|
||||
if (options?.message && options?.type === 'quote') {
|
||||
changeDisplayType('editor');
|
||||
function changeDisplayType(display: InputDisplayType) {
|
||||
displayType.value = display
|
||||
if (display === 'audio') {
|
||||
emits('changeToolbarDisplayType', 'none')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
insertEmoji,
|
||||
reEdit,
|
||||
});
|
||||
/** 禁言数据获取 */
|
||||
const getMuteTime = async (displayType: ToolbarDisplayType) => {
|
||||
TUIGroupService.getGroupProfile({
|
||||
groupID: props.groupID
|
||||
}).then(res => {
|
||||
// muteAllMembers
|
||||
console.log(res.data.group.muteAllMembers)
|
||||
if (res.data.group.muteAllMembers) {
|
||||
// 禁言了
|
||||
showDialog('提示', '当前群组已全员禁言', false)
|
||||
} else {
|
||||
// emits('changeToolbarDisplayType', displayType)
|
||||
// 判断某个成员是不是禁言
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const changeToolbarDisplayType = async (
|
||||
displayType: ToolbarDisplayType
|
||||
) => {
|
||||
if (props.groupID) {
|
||||
const res = await TUIGroupService.getGroupMemberProfile({
|
||||
groupID: props.groupID,
|
||||
userIDList: [tencentUserSig.value.userId]
|
||||
})
|
||||
if (res.data.memberList[0].role === 'Member') {
|
||||
getMuteTime(displayType)
|
||||
} else {
|
||||
emits('changeToolbarDisplayType', displayType)
|
||||
}
|
||||
return
|
||||
}
|
||||
emits('changeToolbarDisplayType', displayType)
|
||||
}
|
||||
|
||||
const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
|
||||
sendTyping(inputContentEmpty, inputBlur)
|
||||
}
|
||||
|
||||
const onAt = (show: boolean) => {
|
||||
messageInputAtRef?.value?.toggleAtList(show)
|
||||
}
|
||||
|
||||
const onFocus = () => {
|
||||
emits('changeToolbarDisplayType', 'none')
|
||||
}
|
||||
|
||||
const insertEmoji = (emoji: any) => {
|
||||
editor?.value?.addEmoji && editor?.value?.addEmoji(emoji)
|
||||
}
|
||||
|
||||
const insertAt = (atInfo: any) => {
|
||||
editor?.value?.insertAt && editor?.value?.insertAt(atInfo)
|
||||
}
|
||||
|
||||
const onAtListOpen = () => {
|
||||
editor?.value?.blur && editor?.value?.blur()
|
||||
}
|
||||
|
||||
const reEdit = (content: any) => {
|
||||
editor?.value?.resetEditor()
|
||||
editor?.value?.setEditorContent(content)
|
||||
}
|
||||
|
||||
function onCurrentConversationUpdated(
|
||||
conversation: IConversationModel
|
||||
) {
|
||||
currentConversation.value = conversation
|
||||
isGroup.value =
|
||||
currentConversation.value?.type === TUIChatEngine.TYPES.CONV_GROUP
|
||||
}
|
||||
|
||||
function onQuoteMessageUpdated(options?: {
|
||||
message: IMessageModel
|
||||
type: string
|
||||
}) {
|
||||
// switch text input mode when there is a quote message
|
||||
if (options?.message && options?.type === 'quote') {
|
||||
changeDisplayType('editor')
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
insertEmoji,
|
||||
reEdit
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../assets/styles/common";
|
||||
@import '../../../assets/styles/common';
|
||||
|
||||
:not(not) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.message-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
|
||||
&-h5 {
|
||||
padding: 10px 10px 15px;
|
||||
}
|
||||
|
||||
&-editor {
|
||||
flex: 1;
|
||||
:not(not) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 3px;
|
||||
.message-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
|
||||
&-h5 {
|
||||
padding: 10px 10px 15px;
|
||||
}
|
||||
|
||||
&-editor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&-wx-audio-open {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-wx-audio-open {
|
||||
flex: 1;
|
||||
.audio-main-content-line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.audio-main-content-line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user