UI优化，红包领取后缺少头像，名称字段
This commit is contained in:
bobobobo
@@ -5,7 +5,7 @@
|
||||
'tui-search',
|
||||
!isPC && 'tui-search-h5',
|
||||
`tui-search-main-${currentSearchType}`,
|
||||
isFullScreen && 'tui-search-h5-full-screen',
|
||||
isFullScreen && 'tui-search-h5-full-screen'
|
||||
]"
|
||||
>
|
||||
<div
|
||||
@@ -16,7 +16,7 @@
|
||||
<div
|
||||
:class="[
|
||||
'tui-search-global-header',
|
||||
!isPC && 'tui-search-h5-global-header',
|
||||
!isPC && 'tui-search-h5-global-header'
|
||||
]"
|
||||
>
|
||||
<SearchInput
|
||||
@@ -40,12 +40,13 @@
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
(currentSearchType === 'conversation' && isShowInConversationSearch) ||
|
||||
isUniFrameWork
|
||||
(currentSearchType === 'conversation' &&
|
||||
isShowInConversationSearch) ||
|
||||
isUniFrameWork
|
||||
"
|
||||
:class="[
|
||||
'tui-search-conversation',
|
||||
!isPC && 'tui-search-h5-conversation',
|
||||
!isPC && 'tui-search-h5-conversation'
|
||||
]"
|
||||
>
|
||||
<SearchContainer
|
||||
@@ -55,9 +56,7 @@
|
||||
@closeInConversationSearch="closeInConversationSearch"
|
||||
>
|
||||
<template #input>
|
||||
<SearchInput
|
||||
:searchType="currentSearchType"
|
||||
/>
|
||||
<SearchInput :searchType="currentSearchType" />
|
||||
</template>
|
||||
<template #result>
|
||||
<SearchResult
|
||||
@@ -70,149 +69,176 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
withDefaults,
|
||||
onUnmounted,
|
||||
watch,
|
||||
} from '../../adapter-vue';
|
||||
import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
|
||||
import SearchInput from './search-input/index.vue';
|
||||
import SearchContainer from './search-container/index.vue';
|
||||
import SearchResult from './search-result/index.vue';
|
||||
import { searchMessageTypeDefault } from './search-type-list';
|
||||
import { searchMessageTimeDefault } from './search-time-list';
|
||||
import { isPC, isUniFrameWork } from '../../utils/env';
|
||||
import { ISearchingStatus, SEARCH_TYPE } from './type';
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed,
|
||||
withDefaults,
|
||||
onUnmounted,
|
||||
watch
|
||||
} from '../../adapter-vue'
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api'
|
||||
import SearchInput from './search-input/index.vue'
|
||||
import SearchContainer from './search-container/index.vue'
|
||||
import SearchResult from './search-result/index.vue'
|
||||
import { searchMessageTypeDefault } from './search-type-list'
|
||||
import { searchMessageTimeDefault } from './search-time-list'
|
||||
import { isPC, isUniFrameWork } from '../../utils/env'
|
||||
import { ISearchingStatus, SEARCH_TYPE } from './type'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
searchType?: SEARCH_TYPE;
|
||||
}>(),
|
||||
{
|
||||
searchType: () => {
|
||||
return 'global';
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const globalSearchRef = ref<HTMLElement | null>();
|
||||
const currentConversationID = ref<string>('');
|
||||
const searchingStatus = ref<boolean>(false);
|
||||
const currentSearchType = ref<SEARCH_TYPE>('global');
|
||||
const isShowSearch = ref<boolean>(false);
|
||||
// Whether to display the search in the chat
|
||||
const isShowInConversationSearch = ref<boolean>(isUniFrameWork);
|
||||
// Whether to search in full screen - Search in full screen when the mobile terminal is searching
|
||||
const isFullScreen = computed(
|
||||
() =>
|
||||
!isPC
|
||||
&& ((currentSearchType.value === 'global' && searchingStatus.value)
|
||||
|| (currentSearchType.value === 'conversation' && isShowInConversationSearch.value)),
|
||||
);
|
||||
|
||||
watch(() => [currentConversationID.value, isShowInConversationSearch.value], (data) => {
|
||||
if (isUniFrameWork && data[0]) {
|
||||
currentSearchType.value = 'conversation';
|
||||
} else {
|
||||
currentSearchType.value = props.searchType;
|
||||
}
|
||||
isShowSearch.value = currentSearchType.value === 'global'
|
||||
|| ((currentSearchType.value === 'conversation' || (!currentSearchType.value && isUniFrameWork))
|
||||
&& !!data[1]);
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
const initSearchValue = (searchType: SEARCH_TYPE) => {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: '',
|
||||
searchType: searchType,
|
||||
});
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
|
||||
value: searchMessageTypeDefault[searchType],
|
||||
searchType: searchType,
|
||||
});
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
|
||||
value: searchMessageTimeDefault,
|
||||
searchType: searchType,
|
||||
});
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: currentSearchType.value,
|
||||
});
|
||||
};
|
||||
|
||||
function onCurrentConversationIDUpdate(conversationID: string) {
|
||||
if (!isUniFrameWork && currentConversationID.value !== conversationID) {
|
||||
// PC side single page switch session, close search
|
||||
closeInConversationSearch();
|
||||
}
|
||||
if (!conversationID && isUniFrameWork) {
|
||||
initSearchValue('global');
|
||||
}
|
||||
currentConversationID.value = conversationID;
|
||||
}
|
||||
function onCurrentSearchingStatusChange(value: ISearchingStatus) {
|
||||
if (value?.searchType === currentSearchType.value) {
|
||||
searchingStatus.value = value?.isSearching;
|
||||
// global search ui bind on click outside close
|
||||
if (value?.searchType === 'global' && globalSearchRef.value) {
|
||||
if (isPC && value.isSearching) {
|
||||
outsideClick.listen({
|
||||
domRefs: globalSearchRef.value,
|
||||
handler: closeGlobalSearch,
|
||||
});
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
searchType?: SEARCH_TYPE
|
||||
}>(),
|
||||
{
|
||||
searchType: () => {
|
||||
return 'global'
|
||||
}
|
||||
}
|
||||
if (value?.searchType === 'global' && isUniFrameWork) {
|
||||
// hide tab bar in uni-app when global searching
|
||||
value.isSearching ? TUIGlobal?.hideTabBar()?.catch(() => { /* ignore */ }) : TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
|
||||
)
|
||||
|
||||
const globalSearchRef = ref<HTMLElement | null>()
|
||||
const currentConversationID = ref<string>('')
|
||||
const searchingStatus = ref<boolean>(false)
|
||||
const currentSearchType = ref<SEARCH_TYPE>('global')
|
||||
const isShowSearch = ref<boolean>(false)
|
||||
// Whether to display the search in the chat
|
||||
const isShowInConversationSearch = ref<boolean>(isUniFrameWork)
|
||||
// Whether to search in full screen - Search in full screen when the mobile terminal is searching
|
||||
const isFullScreen = computed(
|
||||
() =>
|
||||
!isPC &&
|
||||
((currentSearchType.value === 'global' && searchingStatus.value) ||
|
||||
(currentSearchType.value === 'conversation' &&
|
||||
isShowInConversationSearch.value))
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [currentConversationID.value, isShowInConversationSearch.value],
|
||||
data => {
|
||||
if (isUniFrameWork && data[0]) {
|
||||
currentSearchType.value = 'conversation'
|
||||
} else {
|
||||
currentSearchType.value = props.searchType
|
||||
}
|
||||
isShowSearch.value =
|
||||
currentSearchType.value === 'global' ||
|
||||
((currentSearchType.value === 'conversation' ||
|
||||
(!currentSearchType.value && isUniFrameWork)) &&
|
||||
!!data[1])
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
const initSearchValue = (searchType: SEARCH_TYPE) => {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: '',
|
||||
searchType: searchType
|
||||
})
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
|
||||
value: searchMessageTypeDefault[searchType],
|
||||
searchType: searchType
|
||||
})
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
|
||||
value: searchMessageTimeDefault,
|
||||
searchType: searchType
|
||||
})
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: currentSearchType.value
|
||||
})
|
||||
}
|
||||
|
||||
function onCurrentConversationIDUpdate(conversationID: string) {
|
||||
if (
|
||||
!isUniFrameWork &&
|
||||
currentConversationID.value !== conversationID
|
||||
) {
|
||||
// PC side single page switch session, close search
|
||||
closeInConversationSearch()
|
||||
}
|
||||
if (!conversationID && isUniFrameWork) {
|
||||
initSearchValue('global')
|
||||
}
|
||||
currentConversationID.value = conversationID
|
||||
}
|
||||
function onCurrentSearchingStatusChange(value: ISearchingStatus) {
|
||||
if (value?.searchType === currentSearchType.value) {
|
||||
searchingStatus.value = value?.isSearching
|
||||
// global search ui bind on click outside close
|
||||
if (value?.searchType === 'global' && globalSearchRef.value) {
|
||||
if (isPC && value.isSearching) {
|
||||
outsideClick.listen({
|
||||
domRefs: globalSearchRef.value,
|
||||
handler: closeGlobalSearch
|
||||
})
|
||||
}
|
||||
}
|
||||
if (value?.searchType === 'global' && isUniFrameWork) {
|
||||
// hide tab bar in uni-app when global searching
|
||||
value.isSearching
|
||||
? TUIGlobal?.hideTabBar()?.catch(() => {
|
||||
/* ignore */
|
||||
})
|
||||
: TUIGlobal?.showTabBar()?.catch(() => {
|
||||
/* ignore */
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onIsShowInConversationSearchChange(value: boolean) {
|
||||
isShowInConversationSearch.value = value ? true : false;
|
||||
isShowInConversationSearch.value && initSearchValue(currentSearchType.value);
|
||||
}
|
||||
function onIsShowInConversationSearchChange(value: boolean) {
|
||||
isShowInConversationSearch.value = value ? true : false
|
||||
isShowInConversationSearch.value &&
|
||||
initSearchValue(currentSearchType.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// init with default value
|
||||
['global', 'conversation'].forEach((type: string) => {
|
||||
initSearchValue(type as SEARCH_TYPE);
|
||||
});
|
||||
// watch store change
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversationID: onCurrentConversationIDUpdate,
|
||||
});
|
||||
TUIStore.watch(StoreName.SEARCH, {
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
isShowInConversationSearch: onIsShowInConversationSearchChange,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
// init with default value
|
||||
;['global', 'conversation'].forEach((type: string) => {
|
||||
initSearchValue(type as SEARCH_TYPE)
|
||||
})
|
||||
// watch store change
|
||||
TUIStore.watch(StoreName.CONV, {
|
||||
currentConversationID: onCurrentConversationIDUpdate
|
||||
})
|
||||
TUIStore.watch(StoreName.SEARCH, {
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
isShowInConversationSearch: onIsShowInConversationSearchChange
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// unwatch store change
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversationID: onCurrentConversationIDUpdate,
|
||||
});
|
||||
TUIStore.unwatch(StoreName.SEARCH, {
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
isShowInConversationSearch: onIsShowInConversationSearchChange,
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// unwatch store change
|
||||
TUIStore.unwatch(StoreName.CONV, {
|
||||
currentConversationID: onCurrentConversationIDUpdate
|
||||
})
|
||||
TUIStore.unwatch(StoreName.SEARCH, {
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
isShowInConversationSearch: onIsShowInConversationSearchChange
|
||||
})
|
||||
})
|
||||
|
||||
function closeGlobalSearch() {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: currentSearchType.value,
|
||||
});
|
||||
}
|
||||
function closeGlobalSearch() {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: currentSearchType.value
|
||||
})
|
||||
}
|
||||
|
||||
function closeInConversationSearch() {
|
||||
TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false);
|
||||
}
|
||||
function closeInConversationSearch() {
|
||||
TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped src="./style/index.scss"></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tui-search-global {
|
||||
// background: red;
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user