universal-wechat-uniapp-241007/pages_order/group/groupManage.vue

<template>
	<view class="page">
		<navbar title="群组管理" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 群组信息 -->
		<view class="group-info">
			<image :src="groupInfo.avatar || '/static/image/logo.jpg'" class="group-avatar" mode="aspectFill"></image>
			<view class="group-details">
				<view class="group-name">{{ groupInfo.name || '群组名称' }}</view>
				<view class="member-count">{{ groupInfo.memberCount || 0 }}人</view>
			</view>
		</view>
		
		<!-- 管理选项 -->
		<view class="manage-options">
			<view class="option-item" @click="editGroupInfo">
				<view class="option-left">
					<uv-icon name="edit-pen" size="40rpx" color="#5baaff"></uv-icon>
					<text>编辑群组信息</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
			
			<view class="option-item" @click="uploadQrCode">
				<view class="option-left">
					<uv-icon name="scan" size="40rpx" color="#5baaff"></uv-icon>
					<text>上传群聊二维码</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
			
			<view class="option-item" @click="manageMembers">
				<view class="option-left">
					<uv-icon name="account" size="40rpx" color="#5baaff"></uv-icon>
					<text>成员管理</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
			
			<view class="option-item" @click="editAnnouncement">
				<view class="option-left">
					<uv-icon name="volume" size="40rpx" color="#5baaff"></uv-icon>
					<text>群组公告</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
			
			<view class="option-item" @click="groupSettings">
				<view class="option-left">
					<uv-icon name="setting" size="40rpx" color="#5baaff"></uv-icon>
					<text>群组设置</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
		</view>
		
		<!-- 危险操作 -->
		<view class="danger-zone">
			<view class="danger-title">危险操作</view>
			<view class="danger-item" @click="transferGroup">
				<view class="danger-left">
					<uv-icon name="account" size="40rpx" color="#ff4757"></uv-icon>
					<text>转让群主</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
			
			<view class="danger-item" @click="dissolveGroup">
				<view class="danger-left">
					<uv-icon name="close" size="40rpx" color="#ff4757"></uv-icon>
					<text>解散群组</text>
				</view>
				<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: '',
				groupInfo: {
					id: 1,
					name: '江华同城交流群',
					avatar: '/static/image/logo.jpg',
					memberCount: 1280
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.groupId = options.id
				this.getGroupInfo()
			}
		},
		methods: {
			// 获取群组信息
			getGroupInfo() {
				// 模拟群组信息
				const mockGroupInfo = {
					1: {
						id: 1,
						name: '江华同城交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 1280
					},
					2: {
						id: 2,
						name: '江华美食分享群',
						avatar: '/static/image/logo.jpg',
						memberCount: 856
					},
					3: {
						id: 3,
						name: '江华租房信息群',
						avatar: '/static/image/logo.jpg',
						memberCount: 2341
					},
					4: {
						id: 4,
						name: '江华求职招聘群',
						avatar: '/static/image/logo.jpg',
						memberCount: 1567
					},
					5: {
						id: 5,
						name: '江华旅游攻略群',
						avatar: '/static/image/logo.jpg',
						memberCount: 623
					},
					6: {
						id: 6,
						name: '江华学习交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 445
					},
					7: {
						id: 7,
						name: '江华二手交易群',
						avatar: '/static/image/logo.jpg',
						memberCount: 1890
					},
					8: {
						id: 8,
						name: '江华宠物交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567
					},
					9: {
						id: 9,
						name: '江华汽车交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 892
					},
					10: {
						id: 10,
						name: '江华宝妈交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 1234
					},
					11: {
						id: 11,
						name: '江华IT技术交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 345
					},
					12: {
						id: 12,
						name: '江华健身运动群',
						avatar: '/static/image/logo.jpg',
						memberCount: 678
					},
					13: {
						id: 13,
						name: '江华摄影爱好者群',
						avatar: '/static/image/logo.jpg',
						memberCount: 456
					},
					14: {
						id: 14,
						name: '江华创业交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 789
					},
					15: {
						id: 15,
						name: '江华医疗健康群',
						avatar: '/static/image/logo.jpg',
						memberCount: 1123
					},
					16: {
						id: 16,
						name: '江华读书会',
						avatar: '/static/image/logo.jpg',
						memberCount: 234
					},
					17: {
						id: 17,
						name: '江华音乐爱好者群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567
					},
					18: {
						id: 18,
						name: '江华电商交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 890
					},
					19: {
						id: 19,
						name: '江华园艺爱好者群',
						avatar: '/static/image/logo.jpg',
						memberCount: 345
					},
					20: {
						id: 20,
						name: '江华法律咨询群',
						avatar: '/static/image/logo.jpg',
						memberCount: 678
					}
				}
				
				setTimeout(() => {
					this.groupInfo = mockGroupInfo[this.groupId] || this.groupInfo
				}, 300)
			},
			
			// 编辑群组信息
			editGroupInfo() {
				this.$utils.navigateTo('/pages_order/group/editGroup?id=' + this.groupId)
			},
			
			// 上传群聊二维码
			uploadQrCode() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0]
						
						// 显示预览
						uni.previewImage({
							urls: [tempFilePath],
							success: () => {
								// 确认上传
								uni.showModal({
									title: '确认上传',
									content: '确定要上传这张二维码图片吗？',
									success: (modalRes) => {
										if (modalRes.confirm) {
											this.uploadQrCodeImage(tempFilePath)
										}
									}
								})
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 上传二维码图片
			uploadQrCodeImage(filePath) {
				uni.showLoading({
					title: '上传中...'
				})
				
				// 模拟上传过程
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
					
					// 这里可以调用实际的上传API
					// uni.uploadFile({
					//     url: 'your-upload-api',
					//     filePath: filePath,
					//     name: 'qrcode',
					//     formData: {
					//         groupId: this.groupId
					//     },
					//     success: (uploadRes) => {
					//         // 处理上传成功
					//     }
					// })
				}, 2000)
			},
			
			// 成员管理
			manageMembers() {
				this.$utils.navigateTo('/pages_order/group/memberManage?id=' + this.groupId)
			},
			
			// 编辑公告
			editAnnouncement() {
				uni.showModal({
					title: '编辑群组公告',
					content: '请输入新的群组公告',
					editable: true,
					placeholderText: '请输入公告内容',
					success: (res) => {
						if (res.confirm && res.content) {
							this.updateAnnouncement(res.content)
						}
					}
				})
			},
			
			// 更新公告
			updateAnnouncement(content) {
				// 模拟更新公告
				setTimeout(() => {
					uni.showToast({
						title: '公告更新成功',
						icon: 'success'
					})
				}, 500)
			},
			
			// 群组设置
			groupSettings() {
				this.$utils.navigateTo('/pages_order/group/groupSettings?id=' + this.groupId)
			},
			
			// 转让群主
			transferGroup() {
				uni.showModal({
					title: '转让群主',
					content: '确定要转让群主身份吗？转让后将失去群主权限。',
					success: (res) => {
						if (res.confirm) {
							// 跳转到选择新群主页面
							this.$utils.navigateTo('/pages_order/group/transferGroup?id=' + this.groupId)
						}
					}
				})
			},
			
			// 解散群组
			dissolveGroup() {
				uni.showModal({
					title: '解散群组',
					content: '确定要解散该群组吗？解散后所有成员将被移出群组，且无法恢复。',
					success: (res) => {
						if (res.confirm) {
							// 模拟解散群组
							setTimeout(() => {
								uni.showToast({
									title: '群组已解散',
									icon: 'success'
								})
								setTimeout(() => {
									this.$utils.navigateBack()
								}, 1500)
							}, 500)
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	
	.group-info {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		
		.group-avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.group-details {
			flex: 1;
			
			.group-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.member-count {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.manage-options, .danger-zone {
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.option-item, .danger-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.option-left, .danger-left {
				display: flex;
				align-items: center;
				
				text {
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	
	.danger-zone {
		.danger-title {
			padding: 20rpx 30rpx;
			font-size: 28rpx;
			color: #ff4757;
			font-weight: bold;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.danger-item {
			.danger-left {
				text {
					color: #ff4757;
				}
			}
		}
	}
}
</style>