mall_client/zyhs3_uniapp/pages/im/group/create-group/create.vue

<template>
	<view>
		<!--miniprogram/pages/TUI-Group/create-group/create.wxml-->
		<view class="container">
			<!-- <image class="listimage" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/detail.svg"></image> -->
			<view class="info-list">
				<!-- <view class="line" @tap.stop="changeAvatar">
				<text class="list-left">群头像</text>
				<view class="list-right"  >
					<image class="image_radius" >
					</image>
					<u-icon name="arrow-right" color="#B2B3B2" size="20"></u-icon>
				</view>
			</view> -->
				<view class="line">
					<text class="list-left">群名称<text class="icon">*</text></text>
					<view class="list-right">
						<input class="input" placeholder="请输入群名称" @input="bindgroupnameInput"
							placeholder-style="color:#BBBBBB;" />
					</view>
				</view>
				<view class="line">
					<text class="list-left">新人加入方式<text class="icon">*</text></text>
					<view class="list-right">
						<picker class="tip" @change="bindPickerChange" :value="purviews.cur" range-key="name" :range="purviews.list">
							<view class="uni-input input" style="padding: 0;">
								<text>{{purviews.name}}</text>
								<u-icon name="arrow-right" color="#333" size="14"></u-icon>
							</view>
						</picker>
					</view>
				</view>
				<view class="line" v-if='false'>
					<text class="list-left">群Id</text>
					<view class="list-right">
						<input class="input" type="number" placeholder="请输入群ID" @input="bindgroupIDInput"
							placeholder-style="color:#BBBBBB;" />
					</view>
				</view>
			</view>
			<view class="group-create" @tap="bindConfirmCreate">发起群聊</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				groupID: '',
				purviews: {
					cur: 0,
					name:'所有人都能进',
					ApplyJoinOption:'FreeAccess',
					InviteJoinOption:'FreeAccess',
					list: [
						{name:'所有人都能进',ApplyJoinOption:'FreeAccess',InviteJoinOption:'FreeAccess'},
						{name:'需要群主验证',ApplyJoinOption:'NeedPermission',InviteJoinOption:'NeedPermission'},
						{name:'只能群主拉人',ApplyJoinOption:'DisableApply',InviteJoinOption:'NeedPermission'},
					]
				}
			};
		},
		components: {},
		props: {},
		onLoad() {
			console.log(uni.$TUIKitTIM.TYPES);
		},
		methods: {
			bindConfirmCreate(){
				let purviews = this.purviews;
				let Owner_Account = uni.getStorageSync('TIMInfo')?.userID || '';
				let uinfo = uni.getStorageSync('userInfo') || {};
				const promise = uni.$TUIKit.createGroup({
					Owner_Account,
					type: 'Public',
					name: this.name,
					groupID: this.groupID,
					joinOption:purviews.ApplyJoinOption,
					inviteOption:purviews.InviteJoinOption,
					MemberList:[  //初始化成员
						{
							'Member_Account':Owner_Account,
							'Role':'Admin',
							'AppMemberDefinedData':[
								{Key:'nickname',Value:uinfo.nickname}
							]
						}
					]
				})
				promise.then((imResponse)=>{
					// 创建成功
					// 创建的群的资料
					const { groupID } = imResponse.data.group;
					uni.redirectTo({
					   url: `/pages/im/chat/chat?conversationID=GROUP${groupID}`
					});
				}).catch((err) => {
					  console.log(err,'err')
					  uni.showToast({
						title: '群数量已达上限或该群组ID被使用',
						icon: 'none'
					  });
				});
			},
			bindgroupIDInput(e) {
				const id = e.detail.value;
				this.setData({
					groupID: id
				});
			},
			bindgroupnameInput(e) {
				const groupname = e.detail.value;
				this.setData({
					name: groupname
				});
			},
			bindPickerChange: function(e) {
				let item = this.purviews.list[e.target.value];
				this.purviews.cur = e.target.value;
				this.purviews.name =item.name;
				this.purviews.ApplyJoinOption = item.ApplyJoinOption;
				this.purviews.InviteJoinOption = item.InviteJoinOption;
			}
		}
	};
</script>
<style>
	/* miniprogram/pages/TUI-Group/create-group/create.wxss */
	.container {}

	.icon {
		color: red;
		position: relative;
	}

	.info-list {
		display: flex;
		flex-flow: column nowrap;
	}

	.info-list view:nth-child(1) image {
		width: 48px;
		height: 46px;
		padding: 2px;
	}


	.uni-input {
		display: flex;
	}

	.line {
		display: flex;
		border-bottom: 1px solid #eef0f3;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;font-weight: bold;
		line-height: 40px;
		padding: 10rpx 22rpx;
		justify-content: space-between;
	}

	.list-right {
		display: flex;
		padding: 0;
		color: #B2B3B2;
	}

	.input {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333;
		letter-spacing: 0;
		text-align: right;
		height: 100%;
		padding-right: 8px;
		width: 100%;
	}

	.group-create {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 670rpx;
		height: 96rpx;
		background: #5856d5;
		color: #ffffff;
		border-radius: 48rpx;
		border-radius: 48rpx;
		line-height: 44rpx;
		font-size: 32rpx;
		margin: 80rpx 30rpx 40rpx;
	}
</style>