367 lines
10 KiB
Vue
367 lines
10 KiB
Vue
<template>
|
||
<div class="group" :class="[!isPC ? 'group-h5' : '']">
|
||
<div class="group-box">
|
||
<ul v-if="!groupInfo.isEdit" class="group-list">
|
||
<li class="group-list-item">
|
||
<label class="group-list-item-label">
|
||
{{ TUITranslateService.t('TUIGroup.群头像') }}
|
||
</label>
|
||
<Avatar :url="groupInfo.profile.avatar" />
|
||
</li>
|
||
<ul>
|
||
<li
|
||
v-for="(item, index) in createInfo"
|
||
:key="index"
|
||
class="group-list-item"
|
||
>
|
||
<label class="group-list-item-label">{{ item.name }}</label>
|
||
<input
|
||
v-if="isPC"
|
||
v-model="groupInfo.profile[item.key]"
|
||
type="text"
|
||
:placeholder="item.placeholder"
|
||
/>
|
||
<span
|
||
v-else
|
||
class="group-h5-list-item-content"
|
||
@click="edit(item.key)"
|
||
>
|
||
<p class="content">{{ groupInfo.profile[item.key] }}</p>
|
||
<Icon :file="rightIcon" />
|
||
</span>
|
||
</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">
|
||
<div class="group-list-item">
|
||
<label class="group-list-item-label">
|
||
{{ TUITranslateService.t('TUIGroup.群类型') }}
|
||
</label>
|
||
<GroupIntroduction
|
||
v-if="isPC"
|
||
:groupType="groupInfo.profile.type"
|
||
@selectType="selected"
|
||
/>
|
||
<span
|
||
v-else
|
||
class="group-h5-list-item-content"
|
||
@click="edit('type')"
|
||
>
|
||
<p class="content">{{ groupTypeDetail.label }}</p>
|
||
<Icon :file="rightIcon" />
|
||
</span>
|
||
</div>
|
||
<article v-if="!isPC" class="group-h5-list-item-introduction">
|
||
<label class="introduction-name">
|
||
{{ groupTypeDetail.label }}：
|
||
</label>
|
||
<span class="introduction-detail">
|
||
{{ groupTypeDetail.detail }}
|
||
</span>
|
||
<!-- <a :href="documentLink.product.url" target="view_window">
|
||
{{
|
||
TUITranslateService.t(`TUIGroup.${groupTypeDetail.src}`)
|
||
}}
|
||
</a> -->
|
||
</article>
|
||
</li>
|
||
</ul>
|
||
</ul>
|
||
<!-- Edit Group Name -->
|
||
<div v-else class="group-list group-list-edit">
|
||
<input
|
||
v-if="groupInfo.groupConfig.type === 'input'"
|
||
v-model="groupInfo.groupConfig.value"
|
||
class="group-name-input"
|
||
type="text"
|
||
:placeholder="
|
||
TUITranslateService.t(
|
||
`TUIGroup.${groupInfo.groupConfig.placeholder}`
|
||
)
|
||
"
|
||
/>
|
||
<GroupIntroduction
|
||
v-else
|
||
class="group-introduction-list"
|
||
:groupType="groupInfo.groupConfig.value"
|
||
@selectType="selected"
|
||
/>
|
||
</div>
|
||
<footer class="group-profile-footer">
|
||
<button
|
||
v-if="isPC && !groupInfo.isEdit"
|
||
class="btn-default"
|
||
@click="closeCreated"
|
||
>
|
||
{{ TUITranslateService.t('TUIGroup.取消') }}
|
||
</button>
|
||
<button
|
||
class="btn-submit"
|
||
:disabled="submitDisabledStatus"
|
||
@click="submit"
|
||
>
|
||
{{ TUITranslateService.t('TUIGroup.确认') }}
|
||
</button>
|
||
</footer>
|
||
</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>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import TUIChatEngine, {
|
||
TUITranslateService,
|
||
TUIGroupService,
|
||
TUIStore,
|
||
StoreName
|
||
} from '@tencentcloud/chat-uikit-engine-lite'
|
||
import {
|
||
computed,
|
||
ref,
|
||
reactive,
|
||
watchEffect
|
||
} from '../../../adapter-vue'
|
||
import documentLink from '../../../utils/documentLink'
|
||
import { isPC } from '../../../utils/env'
|
||
import Icon from '../../common/Icon.vue'
|
||
import rightIcon from '../../../assets/icon/right-icon.svg'
|
||
import GroupIntroduction from './group-introduction/index.vue'
|
||
import {
|
||
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 TUIGroupServer = Server.getInstance()
|
||
const TUIConstants = TUIGroupServer.constants
|
||
|
||
/** 自定义数据 */
|
||
const cbPopupShow = ref(null)
|
||
const applyJoinOption = ref('NeedPermission')
|
||
|
||
const applyJoinOptionName = computed(() => {
|
||
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
|
||
})
|
||
|
||
watchEffect(() => {
|
||
const params = TUIGroupServer.getOnCallParams(
|
||
TUIConstants.TUIGroup.SERVICE.METHOD.CREATE_GROUP
|
||
)
|
||
groupInfo.profile.memberList = params.memberList
|
||
groupInfo.groupConfig.title = params.title
|
||
})
|
||
|
||
const groupTypeDetail = computed(() => {
|
||
return findGroupIntroConfig(groupInfo.profile.type)
|
||
})
|
||
|
||
const headerTitle = computed(() => {
|
||
let name = '添加群聊'
|
||
if (groupInfo.isEdit) {
|
||
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) => {
|
||
console.log('确认创建==', options)
|
||
// const data = {
|
||
// currentMemberCount:
|
||
// }
|
||
// createImGroup()
|
||
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 submit = () => {
|
||
const { profile } = groupInfo
|
||
|
||
if (groupInfo.isEdit) {
|
||
groupInfo.profile[groupInfo.groupConfig.key] =
|
||
groupInfo.groupConfig.value
|
||
return (groupInfo.isEdit = !groupInfo.isEdit)
|
||
} else {
|
||
createGroup(profile)
|
||
}
|
||
}
|
||
|
||
const closeCreated = () => {
|
||
if (groupInfo.isEdit) {
|
||
return (groupInfo.isEdit = !groupInfo.isEdit)
|
||
}
|
||
handleCompleteCreate(null)
|
||
}
|
||
|
||
const edit = (label: string) => {
|
||
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
|
||
}
|
||
}
|
||
|
||
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
|
||
})
|
||
</script>
|
||
<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>
|