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

<template>
	<view class="page">
		<navbar title="群组详情" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" />
		
		<!-- 群组信息 -->
		<view class="group-info">
			<view class="group-header">
				<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="group-desc">{{ groupInfo.description || '群组描述' }}</view>
					<view class="group-stats">
						<text class="member-count">{{ groupInfo.memberCount || 0 }}人</text>
						<text class="separator">·</text>
						<text class="group-type">{{ groupInfo.type || '同城群' }}</text>
					</view>
				</view>
			</view>
			
			<view class="group-actions">
				<view v-if="showQrCode" class="qr-code-section">
					<view class="qr-code-title">扫码加入群聊</view>
					<image :src="groupInfo.qrCode || '/static/image/qr/default.jpg'" class="qr-code-image" mode="aspectFit"></image>
					<view class="qr-code-tip">长按保存二维码，微信扫码加入</view>
				</view>
				<view v-else class="watch-ad-btn" @click="watchAd">
					<uv-icon name="play-circle" size="30rpx" color="#fff"></uv-icon>
					<text>观看广告获取二维码</text>
				</view>
				
				<view v-if="groupInfo.isOwner" class="manage-btn" @click="manageGroup">
					<uv-icon name="setting" size="30rpx" color="#fff"></uv-icon>
					<text>编辑群组信息</text>
				</view>
			</view>
		</view>
		
		<!-- 群组公告 -->
		<view v-if="groupInfo.announcement" class="announcement">
			<view class="announcement-title">
				<uv-icon name="volume" size="30rpx" color="#5baaff"></uv-icon>
				<text>群组公告</text>
			</view>
			<view class="announcement-content">{{ groupInfo.announcement }}</view>
		</view>
		
		<!-- 成员列表 -->
		<view class="member-section">
			<view class="section-header">
				<text class="section-title">群组成员</text>
				<text class="member-count-text">({{ groupInfo.memberCount || 0 }}人)</text>
			</view>
			
			<view class="member-list">
				<view 
					v-for="(member, index) in memberList" 
					:key="index"
					class="member-item"
					@click="viewMemberProfile(member)"
				>
					<image :src="member.avatar || '/static/image/logo.jpg'" class="member-avatar" mode="aspectFill"></image>
					<view class="member-info">
						<view class="member-name">{{ member.name || '用户' }}</view>
						<view class="member-role">{{ member.role || '成员' }}</view>
					</view>
					<view class="member-status">
						<view v-if="member.isOnline" class="online-status">在线</view>
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: '',
				showQrCode: false, // 是否显示二维码
				groupInfo: {
					id: 1,
					name: '江华同城交流群',
					description: '江华本地生活交流，分享美食、租房、工作信息',
					avatar: '/static/image/logo.jpg',
					memberCount: 1280,
					type: '同城群',
					qrCode: '/static/image/qr/group1.jpg',
					isOwner: true,
					announcement: '欢迎加入江华同城交流群！请遵守群规，文明交流。'
				},
				memberList: [
					{
						id: 1,
						name: '张三',
						avatar: '/static/image/logo.jpg',
						role: '群主',
						isOnline: true
					},
					{
						id: 2,
						name: '李四',
						avatar: '/static/image/logo.jpg',
						role: '管理员',
						isOnline: true
					},
					{
						id: 3,
						name: '王五',
						avatar: '/static/image/logo.jpg',
						role: '成员',
						isOnline: false
					}
				],
			}
		},
		onLoad(options) {
			if (options.id) {
				this.groupId = options.id
				this.getGroupDetail()
			}
		},
		methods: {
			// 获取群组详情
			getGroupDetail() {
				// 模拟数据
				const mockGroupData = {
					1: {
						id: 1,
						name: '江华同城交流群',
						description: '江华本地生活交流，分享美食、租房、工作信息',
						avatar: '/static/image/logo.jpg',
						memberCount: 1280,
						type: '同城群',
						isJoined: true,
						isOwner: true,
						announcement: '欢迎加入江华同城交流群！请遵守群规，文明交流。'
					},
					2: {
						id: 2,
						name: '江华美食分享群',
						description: '发现江华本地美食，分享美食攻略',
						avatar: '/static/image/logo.jpg',
						memberCount: 856,
						type: '兴趣群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎美食爱好者加入！请分享美食照片和推荐。'
					},
					3: {
						id: 3,
						name: '江华租房信息群',
						description: '江华租房信息发布与交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 2341,
						type: '同城群',
						isJoined: true,
						isOwner: false,
						announcement: '租房信息请详细说明位置、价格、联系方式。'
					},
					4: {
						id: 4,
						name: '江华求职招聘群',
						description: '江华本地求职招聘信息发布',
						avatar: '/static/image/logo.jpg',
						memberCount: 1567,
						type: '工作群',
						isJoined: false,
						isOwner: false,
						announcement: '招聘信息请详细说明职位要求、薪资待遇、联系方式。'
					},
					5: {
						id: 5,
						name: '江华旅游攻略群',
						description: '江华旅游景点推荐，攻略分享',
						avatar: '/static/image/logo.jpg',
						memberCount: 623,
						type: '兴趣群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎分享江华旅游攻略和景点推荐！'
					},
					6: {
						id: 6,
						name: '江华学习交流群',
						description: '江华本地学习交流，分享学习资源',
						avatar: '/static/image/logo.jpg',
						memberCount: 445,
						type: '学习群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎学习爱好者加入！请分享学习心得和资源。'
					},
					7: {
						id: 7,
						name: '江华二手交易群',
						description: '江华本地二手物品交易',
						avatar: '/static/image/logo.jpg',
						memberCount: 1890,
						type: '同城群',
						isJoined: true,
						isOwner: false,
						announcement: '二手交易请详细说明物品状况、价格、联系方式。'
					},
					8: {
						id: 8,
						name: '江华宠物交流群',
						description: '江华宠物爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567,
						type: '兴趣群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎宠物爱好者加入！请分享宠物照片和养护经验。'
					},
					9: {
						id: 9,
						name: '江华汽车交流群',
						description: '江华汽车爱好者交流，分享用车心得',
						avatar: '/static/image/logo.jpg',
						memberCount: 892,
						type: '兴趣群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎汽车爱好者加入！请分享用车心得和维修经验。'
					},
					10: {
						id: 10,
						name: '江华宝妈交流群',
						description: '江华宝妈育儿经验分享',
						avatar: '/static/image/logo.jpg',
						memberCount: 1234,
						type: '同城群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎宝妈加入！请分享育儿经验和心得。'
					},
					11: {
						id: 11,
						name: '江华IT技术交流群',
						description: '江华IT从业者技术交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 345,
						type: '工作群',
						isJoined: true,
						isOwner: true,
						announcement: '欢迎IT从业者加入！请分享技术心得和项目经验。'
					},
					12: {
						id: 12,
						name: '江华健身运动群',
						description: '江华健身爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 678,
						type: '兴趣群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎健身爱好者加入！请分享健身心得和运动计划。'
					},
					13: {
						id: 13,
						name: '江华摄影爱好者群',
						description: '江华摄影爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 456,
						type: '兴趣群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎摄影爱好者加入！请分享摄影作品和技巧。'
					},
					14: {
						id: 14,
						name: '江华创业交流群',
						description: '江华创业者交流平台',
						avatar: '/static/image/logo.jpg',
						memberCount: 789,
						type: '工作群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎创业者加入！请分享创业心得和项目经验。'
					},
					15: {
						id: 15,
						name: '江华医疗健康群',
						description: '江华医疗健康咨询交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 1123,
						type: '同城群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎医疗健康从业者加入！请分享健康知识和医疗经验。'
					},
					16: {
						id: 16,
						name: '江华读书会',
						description: '江华读书爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 234,
						type: '学习群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎读书爱好者加入！请分享读书心得和好书推荐。'
					},
					17: {
						id: 17,
						name: '江华音乐爱好者群',
						description: '江华音乐爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 567,
						type: '兴趣群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎音乐爱好者加入！请分享音乐作品和演奏技巧。'
					},
					18: {
						id: 18,
						name: '江华电商交流群',
						description: '江华电商从业者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 890,
						type: '工作群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎电商从业者加入！请分享电商运营经验和技巧。'
					},
					19: {
						id: 19,
						name: '江华园艺爱好者群',
						description: '江华园艺爱好者交流群',
						avatar: '/static/image/logo.jpg',
						memberCount: 345,
						type: '兴趣群',
						isJoined: true,
						isOwner: false,
						announcement: '欢迎园艺爱好者加入！请分享园艺心得和植物养护经验。'
					},
					20: {
						id: 20,
						name: '江华法律咨询群',
						description: '江华法律咨询服务交流',
						avatar: '/static/image/logo.jpg',
						memberCount: 678,
						type: '同城群',
						isJoined: false,
						isOwner: false,
						announcement: '欢迎法律从业者加入！请提供专业的法律咨询服务。'
					}
				}
				
				// 模拟API延迟
				setTimeout(() => {
					this.groupInfo = mockGroupData[this.groupId] || this.groupInfo
				}, 500)
			},
			
			// 观看广告
			watchAd() {
				uni.showLoading({
					title: '加载广告中...'
				})
				
				// 模拟广告播放
				setTimeout(() => {
					uni.hideLoading()
					uni.showModal({
						title: '广告播放完成',
						content: '恭喜您获得群聊二维码！',
						showCancel: false,
						success: () => {
							this.showQrCode = true
						}
					})
				}, 2000)
			},
			
			// 查看成员资料
			viewMemberProfile(member) {
				this.$utils.navigateTo('/pages_order/profile/userProfile?id=' + member.id)
			},
			
			// 管理群组
			manageGroup() {
				this.$utils.navigateTo('/pages_order/group/createGroup?id=' + this.groupId)
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	
	.group-info {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.group-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.group-avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
			
			.group-details {
				flex: 1;
				
				.group-name {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.group-desc {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
					line-height: 1.4;
				}
				
				.group-stats {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					.separator {
						margin: 0 8rpx;
					}
				}
			}
		}
		
		.group-actions {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			
			.qr-code-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;
				background-color: #f8f9fa;
				border-radius: 20rpx;
				
				.qr-code-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.qr-code-image {
					width: 300rpx;
					height: 300rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
				
				.qr-code-tip {
					font-size: 24rpx;
					color: #666;
					text-align: center;
				}
			}
			
			.watch-ad-btn, .manage-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 30rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				
				text {
					margin-left: 10rpx;
				}
			}
			
			.watch-ad-btn {
				background-color: #ff6b35;
				color: #fff;
			}
			
			.manage-btn {
				background-color: #5baaff;
				color: #fff;
			}
		}
	}
	
	.announcement {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.announcement-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			
			text {
				margin-left: 10rpx;
			}
		}
		
		.announcement-content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.5;
		}
	}
	
	.member-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.member-count-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}
	
	.member-list {
		.member-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.member-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			
			.member-info {
				flex: 1;
				
				.member-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 5rpx;
				}
				
				.member-role {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.member-status {
				.online-status {
					background-color: #52c41a;
					color: #fff;
					padding: 4rpx 12rpx;
					border-radius: 10rpx;
					font-size: 20rpx;
				}
			}
		}
	}
}
</style>