132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
|
<SelectFriend v-if="isShowSelectFriend" />
|
|
<div
|
|
v-else-if="isShowContactList"
|
|
:class="['tui-contact', !isPC && 'tui-contact-h5']"
|
|
>
|
|
<div :class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
|
|
<ContactSearch />
|
|
<ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
|
|
</div>
|
|
<div
|
|
v-if="isShowContactInfo"
|
|
:class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
|
|
>
|
|
<ContactInfo @switchConversation="switchConversation" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
|
|
import { TUIGlobal } from '@tencentcloud/universal-api';
|
|
import { ref, watchEffect } from '../../adapter-vue';
|
|
import { isPC, isUniFrameWork } from '../../utils/env';
|
|
|
|
import SelectFriend from './select-friend/index.vue';
|
|
import ContactSearch from './contact-search/index.vue';
|
|
import ContactList from './contact-list/index.vue';
|
|
import ContactInfo from './contact-info/index.vue';
|
|
|
|
const emits = defineEmits(['switchConversation']);
|
|
|
|
const props = defineProps({
|
|
// web/h5 single page application display format, uniapp please ignore
|
|
displayType: {
|
|
type: String,
|
|
default: 'contactList', // "contactList" / "selectFriend"
|
|
require: false,
|
|
},
|
|
});
|
|
|
|
const displayTypeRef = ref<string>(props.displayType || 'contactList');
|
|
const isShowSelectFriend = ref(false);
|
|
const isShowContactList = ref(true);
|
|
const isShowContactInfo = ref(true);
|
|
|
|
watchEffect(() => {
|
|
isShowContactList.value = props?.displayType !== 'selectFriend';
|
|
});
|
|
|
|
TUIStore.watch(StoreName.CUSTOM, {
|
|
isShowSelectFriendComponent: (data: any) => {
|
|
if (!isUniFrameWork && props?.displayType === 'selectFriend') {
|
|
isShowSelectFriend.value = data;
|
|
isShowContactList.value = false;
|
|
return;
|
|
}
|
|
if (data) {
|
|
isShowSelectFriend.value = true;
|
|
if (isUniFrameWork) {
|
|
displayTypeRef.value = 'selectFriend';
|
|
TUIGlobal?.hideTabBar();
|
|
}
|
|
} else {
|
|
isShowSelectFriend.value = false;
|
|
if (isUniFrameWork) {
|
|
displayTypeRef.value = props.displayType;
|
|
TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
|
|
}
|
|
}
|
|
},
|
|
currentContactInfo: (contactInfo: any) => {
|
|
isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
|
|
},
|
|
});
|
|
|
|
const switchConversation = (data: any) => {
|
|
isUniFrameWork
|
|
&& TUIGlobal?.navigateTo({
|
|
url: '/TUIKit/components/TUIChat/index',
|
|
});
|
|
emits('switchConversation', data);
|
|
};
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "../../assets/styles/common";
|
|
|
|
.tui-contact {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
&-left {
|
|
min-width: 285px;
|
|
flex: 0 0 24%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&-right {
|
|
border-left: 1px solid #f4f5f9;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.tui-contact-h5 {
|
|
position: relative;
|
|
|
|
&-left,
|
|
&-right {
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
&-right {
|
|
position: absolute;
|
|
z-index: 100;
|
|
}
|
|
|
|
&-left {
|
|
&-list {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|