提现功能需要添加
This commit is contained in:
bobobobo
@@ -4,19 +4,24 @@
|
||||
v-else-if="isShowContactList"
|
||||
:class="['tui-contact', !isPC && 'tui-contact-h5']"
|
||||
>
|
||||
<Navigation :title="currentContactKey ? contactInfoTitle : TUITranslateService.t('TUIChat.腾讯云 IM')">
|
||||
<Navigation
|
||||
:title="
|
||||
currentContactKey
|
||||
? contactInfoTitle
|
||||
: TUITranslateService.t('TUIChat.腾讯云 IM')
|
||||
"
|
||||
>
|
||||
<template #left>
|
||||
<div v-show="currentContactKey" @click="resetContactType">
|
||||
<Icon
|
||||
:file="backSVG"
|
||||
/>
|
||||
<Icon :file="backSVG" />
|
||||
</div>
|
||||
</template>
|
||||
<template #right>
|
||||
<div v-show="!isShowContactSearch && !currentContactKey" @click="openContactSearch">
|
||||
<Icon
|
||||
:file="addCircle"
|
||||
/>
|
||||
<div
|
||||
v-show="!isShowContactSearch && !currentContactKey"
|
||||
@click="openContactSearch"
|
||||
>
|
||||
<Icon :file="addCircle" />
|
||||
</div>
|
||||
</template>
|
||||
</Navigation>
|
||||
@@ -28,173 +33,204 @@
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
:class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
|
||||
<ContactSearch
|
||||
v-if="isShowContactSearch"
|
||||
:class="['tui-contact-left', !isPC && 'tui-contact-h5-left']"
|
||||
>
|
||||
<ContactSearch v-if="isShowContactSearch" />
|
||||
<ContactList
|
||||
:class="[
|
||||
'tui-contact-left-list',
|
||||
!isPC && 'tui-contact-h5-left-list'
|
||||
]"
|
||||
/>
|
||||
<ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { TUIStore, StoreName, TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api';
|
||||
import { onMounted, onUnmounted, ref, watchEffect } from '../../adapter-vue';
|
||||
import { isPC, isUniFrameWork } from '../../utils/env';
|
||||
import Navigation from '../common/Navigation/index.vue';
|
||||
import Icon from '../common/Icon.vue';
|
||||
import {
|
||||
TUIStore,
|
||||
StoreName,
|
||||
TUITranslateService
|
||||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||||
import { TUIGlobal } from '@tencentcloud/universal-api'
|
||||
import {
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
ref,
|
||||
watchEffect
|
||||
} from '../../adapter-vue'
|
||||
import { isPC, isUniFrameWork } from '../../utils/env'
|
||||
import Navigation from '../common/Navigation/index.vue'
|
||||
import Icon from '../common/Icon.vue'
|
||||
|
||||
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';
|
||||
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'
|
||||
|
||||
import addCircle from '../../assets/icon/add-circle.svg';
|
||||
import backSVG from '../../assets/icon/back.svg';
|
||||
import { CONTACT_INFO_TITLE } from '../../constant';
|
||||
import addCircle from '../../assets/icon/add-circle.svg'
|
||||
import backSVG from '../../assets/icon/back.svg'
|
||||
import { CONTACT_INFO_TITLE } from '../../constant'
|
||||
|
||||
const emits = defineEmits(['switchConversation']);
|
||||
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);
|
||||
const isShowContactSearch = ref(false);
|
||||
const currentContactKey = ref('');
|
||||
const contactInfoTitle = ref<string>('');
|
||||
|
||||
watchEffect(() => {
|
||||
isShowContactList.value = props?.displayType !== 'selectFriend';
|
||||
});
|
||||
|
||||
const switchConversation = (data: any) => {
|
||||
isUniFrameWork
|
||||
&& TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index',
|
||||
});
|
||||
emits('switchConversation', data);
|
||||
};
|
||||
|
||||
const openContactSearch = () => {
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactSearchingStatus',
|
||||
true,
|
||||
);
|
||||
};
|
||||
|
||||
const resetContactType = () => {
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '');
|
||||
};
|
||||
|
||||
const onCurrentContactSearchingStatusUpdated = (data: boolean) => {
|
||||
isShowContactSearch.value = data;
|
||||
};
|
||||
|
||||
const onIsShowSelectFriendComponentUpdated = (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();
|
||||
const props = defineProps({
|
||||
// web/h5 single page application display format, uniapp please ignore
|
||||
displayType: {
|
||||
type: String,
|
||||
default: 'contactList', // "contactList" / "selectFriend"
|
||||
require: false
|
||||
}
|
||||
} else {
|
||||
isShowSelectFriend.value = false;
|
||||
if (isUniFrameWork) {
|
||||
displayTypeRef.value = props.displayType;
|
||||
TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
|
||||
})
|
||||
|
||||
const displayTypeRef = ref<string>(props.displayType || 'contactList')
|
||||
const isShowSelectFriend = ref(false)
|
||||
const isShowContactList = ref(true)
|
||||
const isShowContactInfo = ref(true)
|
||||
const isShowContactSearch = ref(false)
|
||||
const currentContactKey = ref('')
|
||||
const contactInfoTitle = ref<string>('')
|
||||
|
||||
watchEffect(() => {
|
||||
isShowContactList.value = props?.displayType !== 'selectFriend'
|
||||
})
|
||||
|
||||
const switchConversation = (data: any) => {
|
||||
isUniFrameWork &&
|
||||
TUIGlobal?.navigateTo({
|
||||
url: '/TUIKit/components/TUIChat/index'
|
||||
})
|
||||
emits('switchConversation', data)
|
||||
}
|
||||
|
||||
const openContactSearch = () => {
|
||||
TUIStore.update(
|
||||
StoreName.CUSTOM,
|
||||
'currentContactSearchingStatus',
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
const resetContactType = () => {
|
||||
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', '')
|
||||
}
|
||||
|
||||
const onCurrentContactSearchingStatusUpdated = (data: boolean) => {
|
||||
isShowContactSearch.value = data
|
||||
}
|
||||
|
||||
const onIsShowSelectFriendComponentUpdated = (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 */
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onCurrentContactInfoUpdated = (contactInfo: any) => {
|
||||
isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
|
||||
};
|
||||
const onCurrentContactInfoUpdated = (contactInfo: any) => {
|
||||
isShowContactInfo.value =
|
||||
isPC ||
|
||||
(contactInfo &&
|
||||
typeof contactInfo === 'object' &&
|
||||
Object.keys(contactInfo)?.length > 0)
|
||||
}
|
||||
|
||||
const onCurrentContactListKeyUpdated = (key: string) => {
|
||||
currentContactKey.value = key;
|
||||
contactInfoTitle.value = TUITranslateService.t(`TUIContact.${CONTACT_INFO_TITLE[key]}`);
|
||||
};
|
||||
const onCurrentContactListKeyUpdated = (key: string) => {
|
||||
currentContactKey.value = key
|
||||
contactInfoTitle.value = TUITranslateService.t(
|
||||
`TUIContact.${CONTACT_INFO_TITLE[key]}`
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus: onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated,
|
||||
});
|
||||
});
|
||||
onMounted(() => {
|
||||
TUIStore.watch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
TUIStore.unwatch(StoreName.CUSTOM, {
|
||||
currentContactSearchingStatus:
|
||||
onCurrentContactSearchingStatusUpdated,
|
||||
isShowSelectFriendComponent: onIsShowSelectFriendComponentUpdated,
|
||||
currentContactInfo: onCurrentContactInfoUpdated,
|
||||
currentContactListKey: onCurrentContactListKeyUpdated
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../assets/styles/common";
|
||||
@import '../../assets/styles/common';
|
||||
|
||||
.tui-contact {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
uni-page-body,
|
||||
html,
|
||||
body,
|
||||
page {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-left {
|
||||
min-width: 285px;
|
||||
flex: 0 0 24%;
|
||||
.tui-contact {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-right {
|
||||
border-left: 1px solid #f4f5f9;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
min-width: 285px;
|
||||
flex: 0 0 24%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tui-contact-h5 {
|
||||
position: relative;
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-right {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-left {
|
||||
&-list {
|
||||
overflow-y: auto;
|
||||
&-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>
|
||||
|
||||
Reference in New Issue
Block a user