123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
- <div :class="['tui-contact-search', !isPC && 'tui-contact-search-h5']">
- <div
- v-if="!isSearching || !isPC"
- :class="[
- 'tui-contact-search-header',
- !isPC && 'tui-contact-search-h5-header',
- isSearching && 'tui-contact-searching-h5-header',
- ]"
- @click="changeContactSearchingStatus(true)"
- >
- <div
- :class="[
- 'tui-contact-search-header-icon',
- !isPC && 'tui-contact-search-h5-header-icon',
- ]"
- @click.stop="changeContactSearchingStatus(!isSearching)"
- >
- <Icon
- :file="isSearching ? backSVG : addSVG"
- :width="isSearching ? '20px' : '14px'"
- :height="isSearching ? '20px' : '14px'"
- />
- </div>
- <div
- :class="[
- 'tui-contact-search-header-title',
- !isPC && 'tui-contact-search-h5-header-title',
- ]"
- >
- {{ TUITranslateService.t("TUIContact.添加好友/群聊") }}
- </div>
- </div>
- <div
- v-if="isSearching"
- :class="[
- 'tui-contact-search-main',
- !isPC && 'tui-contact-search-h5-main',
- ]"
- >
- <input
- v-model="searchValue"
- class="tui-contact-search-main-input"
- type="text"
- :placeholder="searchingPlaceholder"
- enterkeyhint="search"
- @keyup.enter="search"
- @blur="search"
- @confirm="search"
- >
- <div
- class="tui-contact-search-main-cancel"
- @click="isSearching = false"
- >
- {{ TUITranslateService.t("取消") }}
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import {
- TUITranslateService,
- TUIStore,
- StoreName,
- } from '@tencentcloud/chat-uikit-engine';
- import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
- import { TUIGlobal } from '@tencentcloud/universal-api';
- import { debounce } from 'lodash';
- import { isPC } from '../../../utils/env';
- import Icon from '../../common/Icon.vue';
- import addSVG from '../../../assets/icon/add.svg';
- import backSVG from '../../../assets/icon/back.svg';
- import { ref, watch } from '../../../adapter-vue';
- import { IContactSearchResult } from '../../../interface';
- const searchingPlaceholder = TUITranslateService.t('TUIContact.输入ID');
- const isSearching = ref<boolean>(false);
- const searchValue = ref<string>('');
- const searchResult = ref<IContactSearchResult>({
- user: {
- label: '联系人',
- list: [],
- },
- group: {
- label: '群聊',
- list: [],
- },
- });
- const changeContactSearchingStatus = debounce(function (status: boolean) {
- isSearching.value = status;
- }, 200);
- const search = async () => {
- if (!searchValue.value) {
- return;
- }
- TUICore.callService({
- serviceName: TUIConstants.TUISearch.SERVICE.NAME,
- method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_USER,
- params: {
- userID: searchValue.value,
- },
- })
- .then((res: any) => {
- searchResult.value.user.list = res.data;
- })
- .catch((error: any) => {
- searchResult.value.user.list = [];
- console.warn('search user error', error);
- });
- TUICore.callService({
- serviceName: TUIConstants.TUISearch.SERVICE.NAME,
- method: TUIConstants.TUISearch.SERVICE.METHOD.SEARCH_GROUP,
- params: {
- groupID: searchValue.value,
- },
- })
- .then((res: any) => {
- searchResult.value.group.list = [res.data.group];
- })
- .catch((error: any) => {
- searchResult.value.group.list = [];
- console.warn('search group error', error);
- });
- };
- watch(
- () => searchResult.value,
- () => {
- TUIStore.update(
- StoreName.CUSTOM,
- 'currentContactSearchResult',
- searchResult.value,
- );
- },
- {
- deep: true,
- immediate: true,
- },
- );
- watch(
- () => isSearching.value,
- () => {
- TUIStore.update(
- StoreName.CUSTOM,
- 'currentContactSearchingStatus',
- isSearching.value,
- );
- if (isSearching.value) {
- searchValue.value = '';
- searchResult.value.user.list = [];
- searchResult.value.group.list = [];
- }
- },
- {
- deep: true,
- immediate: true,
- },
- );
- TUIGlobal.updateContactSearch = search;
- TUIGlobal.closeSearching = () => {
- isSearching.value = false;
- };
- </script>
- <style lang="scss" scoped>
- .tui-contact-search {
- position: sticky;
- top: 0;
- z-index: 1;
- padding: 12px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: #fff;
- border-bottom: 1px solid #f4f5f9;
- flex-direction: column;
- &-header,
- &-main {
- width: 100%;
- height: 30px;
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- &-header {
- user-select: none;
- cursor: pointer;
- &-icon {
- padding-right: 10px;
- }
- &-title {
- font-size: 14px;
- }
- }
- &-main {
- display: flex;
- flex-direction: row;
- flex: 1;
- justify-content: center;
- align-items: center;
- width: 100%;
- &-input {
- flex: 1;
- font-size: 14px;
- border-radius: 5px;
- padding: 7px;
- border: 1px solid #ddd;
- }
- &-input:focus {
- outline: none;
- border: 1px solid #006eff;
- }
- &-cancel {
- padding-left: 10px;
- user-select: none;
- cursor: pointer;
- }
- }
- &-h5 {
- &-header {
- width: 100%;
- }
- }
- }
- .tui-contact-searching-h5-header {
- padding-bottom: 10px;
- display: flex;
- flex-direction: row;
- .tui-contact-search-h5-header-title {
- flex: 1;
- text-align: center;
- font-weight: 500;
- font-size: 14px;
- margin-right: 30px;
- }
- }
- </style>
|