UI优化，红包领取后缺少头像，名称字段
This commit is contained in:
bobobobo
@@ -12,10 +12,7 @@
|
||||
v-if="!searchingStatus && props.searchType === 'global'"
|
||||
:class="['tui-search-input', !isPC && 'tui-search-input-h5']"
|
||||
>
|
||||
<div
|
||||
class="tui-search-input-place"
|
||||
@click="onSearchInputClick"
|
||||
>
|
||||
<div class="tui-search-input-place" @click="onSearchInputClick">
|
||||
<Icon
|
||||
class="icon"
|
||||
:file="searchIcon"
|
||||
@@ -47,200 +44,197 @@
|
||||
@blur="onBlur"
|
||||
@keyup.enter="search"
|
||||
@confirm="search"
|
||||
>
|
||||
/>
|
||||
<div
|
||||
v-if="searchingStatus"
|
||||
class="tui-search-input-right"
|
||||
@click="endSearching"
|
||||
>
|
||||
<Icon
|
||||
class="icon"
|
||||
:file="closeIcon"
|
||||
width="14px"
|
||||
height="14px"
|
||||
/>
|
||||
<Icon class="icon" :file="closeIcon" width="14px" height="14px" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!isPC && searchingStatus && props.searchType === 'global'"
|
||||
:class="[
|
||||
'tui-search-input-cancel',
|
||||
!isPC && 'tui-search-input-h5-cancel',
|
||||
!isPC && 'tui-search-input-h5-cancel'
|
||||
]"
|
||||
@click="endSearching"
|
||||
>
|
||||
{{ TUITranslateService.t("TUISearch.取消") }}
|
||||
{{ TUITranslateService.t('TUISearch.取消') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService,
|
||||
} from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import Icon from '../../common/Icon.vue';
|
||||
import searchIcon from '../../../assets/icon/search.svg';
|
||||
import closeIcon from '../../../assets/icon/input-close.svg';
|
||||
import { isPC } from '../../../utils/env';
|
||||
import { ISearchInputValue, ISearchingStatus } from '../type';
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => TUITranslateService.t('TUISearch.搜索'),
|
||||
},
|
||||
searchType: {
|
||||
type: String,
|
||||
default: 'global', // "global" / "conversation"
|
||||
validator(value: string) {
|
||||
return ['global', 'conversation'].includes(value);
|
||||
import { ref, onMounted, onUnmounted } from '../../../adapter-vue'
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api'
|
||||
import Icon from '../../common/Icon.vue'
|
||||
import searchIcon from '../../../assets/icon/search.svg'
|
||||
import closeIcon from '../../../assets/icon/input-close.svg'
|
||||
import { isPC } from '../../../utils/env'
|
||||
import { ISearchInputValue, ISearchingStatus } from '../type'
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => TUITranslateService.t('TUISearch.搜索')
|
||||
},
|
||||
},
|
||||
});
|
||||
searchType: {
|
||||
type: String,
|
||||
default: 'global', // "global" / "conversation"
|
||||
validator(value: string) {
|
||||
return ['global', 'conversation'].includes(value)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const searchValueModel = ref<string>('');
|
||||
const currentSearchInputValue = ref<string>('');
|
||||
const searchingStatus = ref<boolean>(false);
|
||||
const searchValueModel = ref<string>('')
|
||||
const currentSearchInputValue = ref<string>('')
|
||||
const searchingStatus = ref<boolean>(false)
|
||||
|
||||
function onCurrentSearchInputValueChange(obj: ISearchInputValue) {
|
||||
if (obj?.searchType === props?.searchType) {
|
||||
currentSearchInputValue.value = obj?.value;
|
||||
searchValueModel.value = obj?.value;
|
||||
function onCurrentSearchInputValueChange(obj: ISearchInputValue) {
|
||||
if (obj?.searchType === props?.searchType) {
|
||||
currentSearchInputValue.value = obj?.value
|
||||
searchValueModel.value = obj?.value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
|
||||
if (obj?.searchType === props?.searchType) {
|
||||
searchingStatus.value = obj?.isSearching;
|
||||
function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
|
||||
if (obj?.searchType === props?.searchType) {
|
||||
searchingStatus.value = obj?.isSearching
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.SEARCH, {
|
||||
currentSearchInputValue: onCurrentSearchInputValueChange,
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.SEARCH, {
|
||||
currentSearchInputValue: onCurrentSearchInputValueChange,
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.SEARCH, {
|
||||
currentSearchInputValue: onCurrentSearchInputValueChange,
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange,
|
||||
});
|
||||
});
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.SEARCH, {
|
||||
currentSearchInputValue: onCurrentSearchInputValueChange,
|
||||
currentSearchingStatus: onCurrentSearchingStatusChange
|
||||
})
|
||||
})
|
||||
|
||||
const search = () => {
|
||||
// Avoid duplicate searches
|
||||
if (searchValueModel.value === currentSearchInputValue.value) {
|
||||
return;
|
||||
const search = () => {
|
||||
// Avoid duplicate searches
|
||||
if (searchValueModel.value === currentSearchInputValue.value) {
|
||||
return
|
||||
}
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: searchValueModel.value,
|
||||
searchType: props.searchType
|
||||
})
|
||||
}
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: searchValueModel.value,
|
||||
searchType: props.searchType,
|
||||
});
|
||||
};
|
||||
|
||||
const endSearching = () => {
|
||||
searchingStatus.value = false;
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: props.searchType,
|
||||
});
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: '',
|
||||
searchType: props.searchType,
|
||||
});
|
||||
};
|
||||
const endSearching = () => {
|
||||
searchingStatus.value = false
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: false,
|
||||
searchType: props.searchType
|
||||
})
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
|
||||
value: '',
|
||||
searchType: props.searchType
|
||||
})
|
||||
}
|
||||
|
||||
const onSearchInputClick = () => {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: true,
|
||||
searchType: props.searchType,
|
||||
});
|
||||
};
|
||||
const onSearchInputClick = () => {
|
||||
TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
|
||||
isSearching: true,
|
||||
searchType: props.searchType
|
||||
})
|
||||
}
|
||||
|
||||
const onBlur = () => {
|
||||
TUIGlobal?.hideKeyboard?.();
|
||||
};
|
||||
const onBlur = () => {
|
||||
TUIGlobal?.hideKeyboard?.()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tui-search-input-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
padding: 0 2px;
|
||||
|
||||
&-global {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tui-search-input {
|
||||
flex: 1;
|
||||
.tui-search-input-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 10px;
|
||||
background: #FEFEFE;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
|
||||
&-main {
|
||||
padding: 0 2px;
|
||||
&-global {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
caret-color: #007aff;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
.tui-search-input {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 0 7px;
|
||||
flex-direction: row;
|
||||
margin: 0 26rpx;
|
||||
margin-top: 12rpx;
|
||||
background: #F4F4F4;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 64rpx;
|
||||
border-radius: 64rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
caret-color: #007aff;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
display: flex;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-search-input-place {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #bbbbbb;
|
||||
padding-left: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-search-input-place {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #BBBBBB;
|
||||
}
|
||||
}
|
||||
.tui-search-input-container-h5 {
|
||||
.tui-search-input-h5 {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tui-search-input-container-h5 {
|
||||
.tui-search-input-h5 {
|
||||
height: 40px;
|
||||
.tui-search-input-cancel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
padding: 7px 10px 7px 3px;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.tui-search-input-cancel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #007aff;
|
||||
font-size: 16px;
|
||||
padding: 7px 10px 7px 3px;
|
||||
font-family: "PingFang SC", sans-serif;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user