root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加群需要添加API

Browse Source
This commit is contained in:
cbb
2026-01-06 17:54:57 +08:00
parent 578eafafa1
commit 95b46d5cf4
7 changed files with 442 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
TUIKit/components/TUIContact/contact-list/index.vue
View File

@@ -246,7 +246,6 @@
currentContactListKey.value = key currentContactListKey.value = key
TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key) TUIStore.update(StoreName.CUSTOM, 'currentContactListKey', key)
console.log(111)
if (key === 'friendApplicationList') { if (key === 'friendApplicationList') {
TUIFriendService.setFriendApplicationRead() TUIFriendService.setFriendApplicationRead()
} }
@@ -456,3 +455,14 @@
</script> </script>
<style lang="scss" scoped src="./style/index.scss"></style> <style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
uni-page-body,
html,
body,
page {
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
</style>

59
TUIKit/components/TUIGroup/create-group/group-introduction/config.ts
View File

@@ -1,50 +1,59 @@
import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite'; import TUIChatEngine from '@tencentcloud/chat-uikit-engine-lite'
const groupIntroConfig = [ const groupIntroConfig = [
{ {
icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg', icon: 'https://web.sdk.qcloud.com/im/assets/images/Public.svg',
label: '陌生人社交群（Public）', label: '陌生人社交群',
type: TUIChatEngine.TYPES.GRP_PUBLIC, type: TUIChatEngine.TYPES.GRP_PUBLIC,
detail: '类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。详见', detail:
src: '产品文档', '（Public）类似 QQ 群，创建后群主可以指定群管理员，用户搜索群 ID 发起加群申请后，需要群主或管理员审批通过才能入群。',
src: '产品文档'
}, },
{ {
icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg', icon: 'https://web.sdk.qcloud.com/im/assets/images/Meeting.svg',
label: '临时会议群（Meeting）', label: '临时会议群',
type: TUIChatEngine.TYPES.GRP_MEETING, type: TUIChatEngine.TYPES.GRP_MEETING,
detail: '创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。详见', detail:
src: '产品文档', '（Meeting）创建后可以随意进出，且支持查看入群前消息；适合用于音视频会议场景、在线教育场景等与实时音视频产品结合的场景。',
src: '产品文档'
}, },
{ {
icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg', icon: 'https://web.sdk.qcloud.com/im/assets/images/Work.svg',
label: '好友工作群（Work）', label: '好友工作群',
type: TUIChatEngine.TYPES.GRP_WORK, type: TUIChatEngine.TYPES.GRP_WORK,
detail: '类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。详见', detail:
src: '产品文档', '（Work）类似普通微信群，创建后仅支持已在群内的好友邀请加群，且无需被邀请方同意或群主审批。',
src: '产品文档'
}, },
{ {
icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg', icon: 'https://web.sdk.qcloud.com/im/assets/images/AVChatroom.svg',
label: '直播群（AVChatroom）', label: '直播群',
type: TUIChatEngine.TYPES.GRP_AVCHATROOM, type: TUIChatEngine.TYPES.GRP_AVCHATROOM,
detail: '创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。详见', detail:
src: '产品文档', '（AVChatroom）创建后可以随意进出，没有群成员数量上限，但不支持历史消息存储；适合与直播产品结合，用于弹幕聊天场景。',
src: '产品文档'
}, },
{ {
icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png', icon: 'https://web.sdk.qcloud.com/im/assets/images/Community.png',
label: '社群（Community）', label: '社群',
type: TUIChatEngine.TYPES.GRP_COMMUNITY, type: TUIChatEngine.TYPES.GRP_COMMUNITY,
detail: '创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。详见', detail:
src: '产品文档', '（Community）创建后可以随意进出，最多支持100000人，支持历史消息存储，用户搜索群 ID 发起加群申请后，无需管理员审批即可进群。',
}, src: '产品文档'
]; }
]
const findGroupIntroConfig = (type: string) => { const findGroupIntroConfig = (type: string) => {
return groupIntroConfig.filter((item: any) => { return groupIntroConfig.filter((item: any) => {
return item.type === type; return item.type === type
})[0]; })[0]
}; }
export { /** 入群方式 */
groupIntroConfig, const groupJoinTypeConfig = [
findGroupIntroConfig, { label: '自由加入', value: 'FreeAccess' },
}; { label: '需要验证', value: 'NeedPermission' },
{ label: '禁止加群', value: 'DisableApply' }
]
export { groupIntroConfig, groupJoinTypeConfig, findGroupIntroConfig }

80
TUIKit/components/TUIGroup/create-group/group-introduction/index.vue
View File

@@ -10,66 +10,64 @@
<main class="select-item-type"> <main class="select-item-type">
<div class="select-item-header"> <div class="select-item-header">
<aside class="left"> <aside class="left">
<Icon <Icon class="icon" :file="item.icon" />
class="icon" <span class="select-item-label">
:file="item.icon" {{ TUITranslateService.t(`TUIGroup.${item.label}`) }}
/> </span>
<span class="select-item-label">{{ TUITranslateService.t(`TUIGroup.${item.label}`) }}</span>
</aside> </aside>
<Icon <Icon v-if="selectType === item.type" :file="selectedIcon" />
v-if="selectType === item.type"
:file="selectedIcon"
/>
</div> </div>
<span class="select-item-detail">{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}</span> <!-- <span class="select-item-detail">
{{ TUITranslateService.t(`TUIGroup.${item.detail}`) }}
</span>
<a <a
class="link" class="link"
:href="documentLink.product.url" :href="documentLink.product.url"
target="_blank" target="_blank"
@click="openUrl(documentLink.product.url)" @click="openUrl(documentLink.product.url)"
>{{ >
TUITranslateService.t(`TUIGroup.${item.src}`) }}</a> {{ TUITranslateService.t(`TUIGroup.${item.src}`) }}
</a> -->
</main> </main>
</li> </li>
</ul> </ul>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watchEffect } from '../../../../adapter-vue'; import { ref, watchEffect } from '../../../../adapter-vue'
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite'; import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite'
import { TUIGlobal } from '@tencentcloud/universal-api'; import { TUIGlobal } from '@tencentcloud/universal-api'
import documentLink from '../../../../utils/documentLink'; import documentLink from '../../../../utils/documentLink'
import Icon from '../../../common/Icon.vue'; import Icon from '../../../common/Icon.vue'
import selectedIcon from '../../../../assets/icon/selected.svg'; import selectedIcon from '../../../../assets/icon/selected.svg'
import { groupIntroConfig } from './config'; import { groupIntroConfig } from './config'
import { isUniFrameWork } from '../../../../utils/env'; import { isUniFrameWork } from '../../../../utils/env'
const props = defineProps({ const props = defineProps({
groupType: { groupType: {
type: String, type: String,
default: '', default: ''
}, }
}); })
const type = groupIntroConfig; const type = groupIntroConfig
const selectType = ref(); const selectType = ref()
const emit = defineEmits(['selectType']); const emit = defineEmits(['selectType'])
watchEffect(() => { watchEffect(() => {
selectType.value = props.groupType; selectType.value = props.groupType
}); })
const selected = (item: any) => { const selected = (item: any) => {
selectType.value = item.type; selectType.value = item.type
emit('selectType', item.type); emit('selectType', item.type)
};
const openUrl = (link: string) => {
if (!isUniFrameWork) {
TUIGlobal?.open(link);
} }
};
const openUrl = (link: string) => {
if (!isUniFrameWork) {
TUIGlobal?.open(link)
}
}
</script> </script>
<style lang="scss" scoped src="../style/index.scss"></style> <style lang="scss" scoped src="../style/index.scss"></style>

442
TUIKit/components/TUIGroup/create-group/index.vue
View File

@@ -1,15 +1,11 @@
<template> <template>
<div <div class="group" :class="[!isPC ? 'group-h5' : '']">
class="group"
:class="[!isPC ? 'group-h5' : '']"
>
<div class="group-box"> <div class="group-box">
<ul <ul v-if="!groupInfo.isEdit" class="group-list">
v-if="!groupInfo.isEdit"
class="group-list"
>
<li class="group-list-item"> <li class="group-list-item">
<label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群头像') }}</label> <label class="group-list-item-label">
{{ TUITranslateService.t('TUIGroup.群头像') }}
</label>
<Avatar :url="groupInfo.profile.avatar" /> <Avatar :url="groupInfo.profile.avatar" />
</li> </li>
<ul> <ul>
@@ -24,7 +20,7 @@
v-model="groupInfo.profile[item.key]" v-model="groupInfo.profile[item.key]"
type="text" type="text"
:placeholder="item.placeholder" :placeholder="item.placeholder"
> />
<span <span
v-else v-else
class="group-h5-list-item-content" class="group-h5-list-item-content"
@@ -34,9 +30,18 @@
<Icon :file="rightIcon" /> <Icon :file="rightIcon" />
</span> </span>
</li> </li>
<li class="group-list-item" @click="cbPopupShow.open('bottom')">
<label class="group-list-item-label">申请加群方式</label>
<span class="group-h5-list-item-content">
<p class="content">{{ applyJoinOptionName }}</p>
<Icon :file="rightIcon" />
</span>
</li>
<li class="group-list-introduction"> <li class="group-list-introduction">
<div class="group-list-item"> <div class="group-list-item">
<label class="group-list-item-label">{{ TUITranslateService.t('TUIGroup.群类型') }}</label> <label class="group-list-item-label">
{{ TUITranslateService.t('TUIGroup.群类型') }}
</label>
<GroupIntroduction <GroupIntroduction
v-if="isPC" v-if="isPC"
:groupType="groupInfo.profile.type" :groupType="groupInfo.profile.type"
@@ -51,34 +56,35 @@
<Icon :file="rightIcon" /> <Icon :file="rightIcon" />
</span> </span>
</div> </div>
<article <article v-if="!isPC" class="group-h5-list-item-introduction">
v-if="!isPC" <label class="introduction-name">
class="group-h5-list-item-introduction" {{ groupTypeDetail.label }}：
> </label>
<label class="introduction-name">{{ groupTypeDetail.label }}：</label> <span class="introduction-detail">
<span class="introduction-detail">{{ groupTypeDetail.detail }}</span> {{ groupTypeDetail.detail }}
<a </span>
:href="documentLink.product.url" <!-- <a :href="documentLink.product.url" target="view_window">
target="view_window" {{
> TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`)
{{ TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`) }} }}
</a> </a> -->
</article> </article>
</li> </li>
</ul> </ul>
</ul> </ul>
<!-- Edit Group Name --> <!-- Edit Group Name -->
<div <div v-else class="group-list group-list-edit">
v-else
class="group-list group-list-edit"
>
<input <input
v-if="groupInfo.groupConfig.type === 'input'" v-if="groupInfo.groupConfig.type === 'input'"
v-model="groupInfo.groupConfig.value" v-model="groupInfo.groupConfig.value"
class="group-name-input" class="group-name-input"
type="text" type="text"
:placeholder="TUITranslateService.t(`TUIGroup.${groupInfo.groupConfig.placeholder}`)" :placeholder="
> TUITranslateService.t(
`TUIGroup.${groupInfo.groupConfig.placeholder}`
)
"
/>
<GroupIntroduction <GroupIntroduction
v-else v-else
class="group-introduction-list" class="group-introduction-list"
@@ -103,176 +109,258 @@
</button> </button>
</footer> </footer>
</div> </div>
<uni-popup ref="cbPopupShow" backgroundColor="#fff">
<view class="popup-content">
<text
v-for="(item, index) in groupJoinTypeConfig"
:key="index"
:class="{ 'on-text': item.value === applyJoinOption }"
@click="
() => {
cbPopupShow.close()
applyJoinOption = item.value
}
"
>
{{ item.label }}
</text>
<text @click="cbPopupShow.close()">取消</text>
</view>
</uni-popup>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import TUIChatEngine, { import TUIChatEngine, {
TUITranslateService, TUITranslateService,
TUIGroupService, TUIGroupService,
TUIStore, TUIStore,
StoreName, StoreName
} from '@tencentcloud/chat-uikit-engine-lite'; } from '@tencentcloud/chat-uikit-engine-lite'
import { computed, reactive, watchEffect } from '../../../adapter-vue'; import {
import documentLink from '../../../utils/documentLink'; computed,
import { isPC } from '../../../utils/env'; ref,
import Icon from '../../common/Icon.vue'; reactive,
import rightIcon from '../../../assets/icon/right-icon.svg'; watchEffect
import GroupIntroduction from './group-introduction/index.vue'; } from '../../../adapter-vue'
import { groupIntroConfig, findGroupIntroConfig } from './group-introduction/config'; import documentLink from '../../../utils/documentLink'
import { Toast, TOAST_TYPE } from '../../common/Toast/index'; import { isPC } from '../../../utils/env'
import Avatar from '../../common/Avatar/index.vue'; import Icon from '../../common/Icon.vue'
import Server from '../server'; import rightIcon from '../../../assets/icon/right-icon.svg'
import { IUserProfile } from '../../../interface'; import GroupIntroduction from './group-introduction/index.vue'
const TUIGroupServer = Server.getInstance(); import {
const TUIConstants = TUIGroupServer.constants; groupIntroConfig,
findGroupIntroConfig,
groupJoinTypeConfig
} from './group-introduction/config'
import { Toast, TOAST_TYPE } from '../../common/Toast/index'
import Avatar from '../../common/Avatar/index.vue'
import Server from '../server'
import { IUserProfile } from '../../../interface'
import { createImGroup } from '../../../../api/tui-kit'
const groupInfo = reactive<any>({ const TUIGroupServer = Server.getInstance()
profile: { const TUIConstants = TUIGroupServer.constants
groupID: '',
name: '',
type: groupIntroConfig[0].type,
avatar: groupIntroConfig[0].icon,
introduction: '',
notification: '',
// joinOption: '',
memberList: [],
isSupportTopic: false,
},
groupConfig: {
title: '',
value: '',
key: '',
type: '',
placeholder: '',
},
isEdit: false,
});
watchEffect(() => { /** 自定义数据 */
const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP); const cbPopupShow = ref(null)
groupInfo.profile.memberList = params.memberList; const applyJoinOption = ref('NeedPermission')
groupInfo.groupConfig.title = params.title;
});
const groupTypeDetail = computed(() => { const applyJoinOptionName = computed(() => {
return findGroupIntroConfig(groupInfo.profile.type); const data = groupJoinTypeConfig.find(
}); v => v.value === applyJoinOption.value
)
return data?.label || ''
})
// =======
const groupInfo = reactive<any>({
profile: {
groupID: '',
name: '',
type: groupIntroConfig[0].type,
avatar: groupIntroConfig[0].icon,
introduction: '',
notification: '',
// joinOption: '',
memberList: [],
isSupportTopic: false
},
groupConfig: {
title: '',
value: '',
key: '',
type: '',
placeholder: ''
},
isEdit: false
})
const headerTitle = computed(() => { watchEffect(() => {
let name = '添加群聊'; const params = TUIGroupServer.getOnCallParams(
if (groupInfo.isEdit) { TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
name = groupInfo.groupConfig.title; )
} groupInfo.profile.memberList = params.memberList
return TUITranslateService.t(`TUIGroup.${name}`); groupInfo.groupConfig.title = params.title
}); })
const createInfo = computed(() => { const groupTypeDetail = computed(() => {
const groupNameInput = { return findGroupIntroConfig(groupInfo.profile.type)
name: TUITranslateService.t('TUIGroup.群名称'), })
key: 'name',
placeholder: TUITranslateService.t('TUIGroup.请输入群名称'),
};
const groupIDInput = {
name: `${TUITranslateService.t('TUIGroup.群ID')}(${TUITranslateService.t('TUIGroup.选填')})`,
key: 'groupID',
placeholder: TUITranslateService.t('TUIGroup.请输入群ID'),
};
return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
? [groupNameInput]
: [groupNameInput, groupIDInput];
});
const submitDisabledStatus = computed(() => { const headerTitle = computed(() => {
return groupInfo.profile.name === '' && !groupInfo.isEdit; let name = '添加群聊'
});
const selected = (type: any) => {
if (groupInfo.profile.type !== type) {
groupInfo.profile.type = type;
groupInfo.profile.avatar = findGroupIntroConfig(type).icon;
if (groupInfo.isEdit) { if (groupInfo.isEdit) {
groupInfo.groupConfig.value = type; name = groupInfo.groupConfig.title
}
return TUITranslateService.t(`TUIGroup.${name}`)
})
const createInfo = computed(() => {
const groupNameInput = {
name: TUITranslateService.t('TUIGroup.群名称'),
key: 'name',
placeholder: TUITranslateService.t('TUIGroup.请输入群名称')
}
const groupIDInput = {
name: `${TUITranslateService.t(
'TUIGroup.群ID'
)}(${TUITranslateService.t('TUIGroup.选填')})`,
key: 'groupID',
placeholder: TUITranslateService.t('TUIGroup.请输入群ID')
}
return groupInfo.profile.type === TUIChatEngine.TYPES.GRP_COMMUNITY
? [groupNameInput]
: [groupNameInput, groupIDInput]
})
const submitDisabledStatus = computed(() => {
return groupInfo.profile.name === '' && !groupInfo.isEdit
})
const selected = (type: any) => {
if (groupInfo.profile.type !== type) {
groupInfo.profile.type = type
groupInfo.profile.avatar = findGroupIntroConfig(type).icon
if (groupInfo.isEdit) {
groupInfo.groupConfig.value = type
}
} }
} }
};
const createGroup = async (options: any) => { const createGroup = async (options: any) => {
try { console.log('确认创建==', options)
options.memberList = options.memberList.map((item: IUserProfile) => { // const data = {
return { userID: item.userID }; // currentMemberCount:
}); // }
if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) { // createImGroup()
delete options.groupID; return
try {
options.memberList = options.memberList.map(
(item: IUserProfile) => {
return { userID: item.userID }
}
)
if (options.type === TUIChatEngine.TYPES.GRP_COMMUNITY) {
delete options.groupID
}
const res = await TUIGroupService.createGroup(options)
const { type } = res.data.group
if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) {
await TUIGroupService.joinGroup({
groupID: res.data.group.groupID,
applyMessage: ''
})
}
handleCompleteCreate(res.data.group)
Toast({
message: TUITranslateService.t('TUIGroup.群组创建成功'),
type: TOAST_TYPE.SUCCESS
})
} catch (err: any) {
Toast({
message: err.message,
type: TOAST_TYPE.ERROR
})
} }
const res = await TUIGroupService.createGroup(options); }
const { type } = res.data.group;
if (type === TUIChatEngine.TYPES.GRP_AVCHATROOM) { const submit = () => {
await TUIGroupService.joinGroup({ const { profile } = groupInfo
groupID: res.data.group.groupID,
applyMessage: '', if (groupInfo.isEdit) {
}); groupInfo.profile[groupInfo.groupConfig.key] =
groupInfo.groupConfig.value
return (groupInfo.isEdit = !groupInfo.isEdit)
} else {
createGroup(profile)
} }
handleCompleteCreate(res.data.group);
Toast({
message: TUITranslateService.t('TUIGroup.群组创建成功'),
type: TOAST_TYPE.SUCCESS,
});
} catch (err: any) {
Toast({
message: err.message,
type: TOAST_TYPE.ERROR,
});
} }
};
const submit = () => { const closeCreated = () => {
const { profile } = groupInfo; if (groupInfo.isEdit) {
if (groupInfo.isEdit) { return (groupInfo.isEdit = !groupInfo.isEdit)
groupInfo.profile[groupInfo.groupConfig.key] = groupInfo.groupConfig.value; }
return groupInfo.isEdit = !groupInfo.isEdit; handleCompleteCreate(null)
} else {
createGroup(profile);
} }
};
const closeCreated = () => { const edit = (label: string) => {
if (groupInfo.isEdit) { groupInfo.isEdit = !groupInfo.isEdit
return groupInfo.isEdit = !groupInfo.isEdit; groupInfo.groupConfig.key = label
groupInfo.groupConfig.value = (groupInfo.profile as any)[label]
switch (label) {
case 'name':
groupInfo.groupConfig.title = '设置群名称'
groupInfo.groupConfig.placeholder = '请输入群名称'
groupInfo.groupConfig.type = 'input'
break
case 'groupID':
groupInfo.groupConfig.title = '设置群ID'
groupInfo.groupConfig.placeholder = '请输入群ID'
groupInfo.groupConfig.type = 'input'
break
case 'type':
groupInfo.groupConfig.title = '选择群类型'
groupInfo.groupConfig.type = 'select'
break
}
} }
handleCompleteCreate(null);
};
const edit = (label: string) => { const handleCompleteCreate = (group: any) => {
groupInfo.isEdit = !groupInfo.isEdit; TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false)
groupInfo.groupConfig.key = label; const callback = TUIGroupServer.getOnCallCallback(
groupInfo.groupConfig.value = (groupInfo.profile as any)[label]; TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
switch (label) { )
case 'name': callback && callback(group)
groupInfo.groupConfig.title = '设置群名称';
groupInfo.groupConfig.placeholder = '请输入群名称';
groupInfo.groupConfig.type = 'input';
break;
case 'groupID':
groupInfo.groupConfig.title = '设置群ID';
groupInfo.groupConfig.placeholder = '请输入群ID';
groupInfo.groupConfig.type = 'input';
break;
case 'type':
groupInfo.groupConfig.title = '选择群类型';
groupInfo.groupConfig.type = 'select';
break;
} }
};
const handleCompleteCreate = (group: any) => {
TUIStore.update(StoreName.GRP, 'isShowCreateComponent', false);
const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP);
callback && callback(group);
};
defineExpose({
closeCreated,
});
defineExpose({
closeCreated
})
</script> </script>
<style lang="scss" scoped src="./style/index.scss"></style> <style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
.popup-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 34rpx 0;
text + text {
margin-top: 20rpx;
}
text {
border: 2rpx solid #a7a7a7;
width: 80%;
padding: 18rpx 0;
border-radius: 50rpx;
text-align: center;
font-size: 28rpx;
color: #333333;
}
.on-text {
border: 2rpx solid #348aec;
background: rgb(65, 178, 212);
color: #ffffff;
}
}
</style>

12
TUIKit/components/TUIGroup/create-group/style/h5.scss
View File

@@ -33,18 +33,20 @@
margin-top: 12px; margin-top: 12px;
overflow: hidden; overflow: hidden;
.group-introduction-list{ .group-introduction-list {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
padding: 12px 18px; padding: 12rpx 24rpx;
width: calc(100% - 48rpx);
}
.select-item {
border-radius: 26rpx;
} }
&-item { &-item {
padding: 14px 18px; padding: 14px 18px;
border-bottom: 1px solid #E5E5E5; border-bottom: 2rpx solid #e5e5e5;
&-label { &-label {
font-size: 14px; font-size: 14px;
} }

155
TUIKit/components/TUIGroup/index.vue
View File

@@ -1,23 +1,21 @@
<template> <template>
<div :class="[(isShowCreateGroup || isShowManageGroup || isShowSelectMember) && 'tui-group']"> <div
<Navigation :class="[
:title="title" (isShowCreateGroup || isShowManageGroup || isShowSelectMember) &&
customStyle="manage-navigation" 'tui-group'
> ]"
<template >
#left <Navigation :title="title" customStyle="manage-navigation">
> <template #left>
<div v-show="isShowCreateGroup || isShowManageGroup" @click="back"> <div
<Icon v-show="isShowCreateGroup || isShowManageGroup"
:file="backSVG" @click="back"
/> >
<Icon :file="backSVG" />
</div> </div>
</template> </template>
</Navigation> </Navigation>
<CreateGroup <CreateGroup v-if="isShowCreateGroup" ref="createGroupRef" />
v-if="isShowCreateGroup"
ref="createGroupRef"
/>
<ManageGroup <ManageGroup
v-if="isShowManageGroup" v-if="isShowManageGroup"
ref="manageGroupRef" ref="manageGroupRef"
@@ -27,77 +25,76 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { import {
TUIStore, TUIStore,
StoreName, StoreName,
TUITranslateService, TUITranslateService
} from '@tencentcloud/chat-uikit-engine-lite'; } from '@tencentcloud/chat-uikit-engine-lite'
import { ref } from '../../adapter-vue'; import { ref } from '../../adapter-vue'
import Navigation from '../common/Navigation/index.vue'; import Navigation from '../common/Navigation/index.vue'
import Icon from '../common/Icon.vue'; import Icon from '../common/Icon.vue'
import backSVG from '../../assets/icon/back.svg'; import backSVG from '../../assets/icon/back.svg'
import CreateGroup from './create-group/index.vue'; import CreateGroup from './create-group/index.vue'
import ManageGroup from './manage-group/index.vue'; import ManageGroup from './manage-group/index.vue'
import SelectMember from './select-member/index.vue'; import SelectMember from './select-member/index.vue'
const title = ref(''); const title = ref('')
const isShowCreateGroup = ref(false); const isShowCreateGroup = ref(false)
const isShowManageGroup = ref(false); const isShowManageGroup = ref(false)
const isShowSelectMember = ref(false); const isShowSelectMember = ref(false)
const createGroupRef = ref<any>(null); const createGroupRef = ref<any>(null)
const manageGroupRef = ref<any>(null); const manageGroupRef = ref<any>(null)
TUIStore.watch(StoreName.GRP, { TUIStore.watch(StoreName.GRP, {
isShowCreateComponent: (data: any) => { isShowCreateComponent: (data: any) => {
if (data) { if (data) {
isShowCreateGroup.value = true; isShowCreateGroup.value = true
title.value = TUITranslateService.t('TUIConversation.发起群聊'); title.value = TUITranslateService.t('TUIConversation.发起群聊')
} else { } else {
isShowCreateGroup.value = false; isShowCreateGroup.value = false
}
},
isShowManageComponent: (data: any) => {
if (data) {
isShowManageGroup.value = true
title.value = TUITranslateService.t('TUIGroup.群管理')
} else {
isShowManageGroup.value = false
}
},
isShowSelectComponent: (data: any) => {
if (data) {
isShowSelectMember.value = true
} else {
isShowSelectMember.value = false
}
} }
}, })
isShowManageComponent: (data: any) => {
if (data) {
isShowManageGroup.value = true;
title.value = TUITranslateService.t('TUIGroup.群管理');
} else {
isShowManageGroup.value = false;
}
},
isShowSelectComponent: (data: any) => {
if (data) {
isShowSelectMember.value = true;
} else {
isShowSelectMember.value = false;
}
},
});
const updateTabName = (tabName: string) => { const updateTabName = (tabName: string) => {
if (isShowManageGroup.value) { if (isShowManageGroup.value) {
title.value = TUITranslateService.t(`TUIGroup.${tabName}`); title.value = TUITranslateService.t(`TUIGroup.${tabName}`)
}
} }
};
const back = () => { const back = () => {
if (isShowCreateGroup.value) { if (isShowCreateGroup.value) {
createGroupRef.value.closeCreated(); createGroupRef.value.closeCreated()
} else if (isShowManageGroup.value) { } else if (isShowManageGroup.value) {
manageGroupRef.value.back(); manageGroupRef.value.back()
}
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tui-group { .tui-group {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.manage-navigation { .manage-navigation {
background: #fff; background: #fff;
border-bottom: 0.5px solid #e5e5e5; border-bottom: 0.5px solid #e5e5e5;
} }
</style> </style>

10
api/tui-kit.js Normal file
View File

@@ -0,0 +1,10 @@
import http from '@/utils/request'
/** 创建群组 */
export const createImGroup = data => {
return http({
url: '/api/service/imGroup',
method: 'post',
data
})
}