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.image || '/static/image/logo.jpg'" class="group-avatar" mode="aspectFill"></image>
				<view class="group-details">
					<view class="group-name">{{ groupInfo.title || '群组名称' }}</view>
					<view class="group-desc">{{ groupInfo.titleText || '群组描述' }}</view>
					<view class="group-stats">
						<text class="member-count">{{ groupInfo.num || 0 }}人</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'" 
					show-menu-by-longpress
					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="userInfo.id == groupInfo.userId" class="admin-buttons">
					<view class="manage-btn" @click="manageGroup">
						<uv-icon name="setting" size="24rpx" color="#fff"></uv-icon>
						<text>编辑</text>
					</view>
					
					<view class="delete-btn" @click="deleteGroup">
						<uv-icon name="trash" size="24rpx" color="#fff"></uv-icon>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 群组公告 -->
		<view v-if="groupInfo.notice" class="announcement">
			<view class="announcement-title">
				<uv-icon name="volume" size="30rpx" color="#5baaff"></uv-icon>
				<text>群组公告</text>
			</view>
			<view class="announcement-content">
				<uv-parse :content="groupInfo.notice"></uv-parse>
			</view>
		</view>
		
		<!-- 成员列表 -->
		<view class="member-section">
			<view class="section-header">
				<text class="section-title">群组成员</text>
				<text class="member-count-text">({{ groupInfo.num || 0 }}人)</text>
			</view>
			
			<view class="member-list" v-if="groupInfo.userList && groupInfo.userList.length > 0">
				<view 
					v-for="(member, index) in groupInfo.userList" 
					:key="index"
					class="member-item"
					@click="viewMemberProfile(member)"
				>
					<image :src="member.image || '/static/image/logo.jpg'" class="member-avatar" mode="aspectFill"></image>
					<view class="member-info">
						<view class="member-name">{{ member.userName || '用户' }}</view>
					</view>
				</view>
			</view>
			
			<view v-else class="empty-member">
				<uv-empty mode="list" text="暂无成员信息"></uv-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import rewardedVideoAdMixin from '@/mixins/rewardedVideoAd.js'
	export default {
		mixins: [rewardedVideoAdMixin],
		data() {
			return {
				groupId: '',
				showQrCode: false, // 是否显示二维码
				groupInfo: {}
				// 视频广告相关数据已移至混入中
			}
		},
		onLoad(options) {
			if (options.id) {
				this.groupId = options.id
				this.getGroupDetail()
			}
			// initRewardedVideoAd() 已在混入的mounted中处理
			
			// 设置分享路径
			this.share.path = '/pages_order/group/groupDetail?id=' + options.id
		},
		methods: {
			// 广告观看完成回调
			onAdWatchComplete() {
				console.log('用户看完广告，显示群聊二维码')
				this.showQrCodeAfterAd()
			},

			// 广告观看取消回调
			onAdWatchCancel() {
				uni.showToast({
					title: '请观看完整广告才能获取二维码',
					icon: 'none'
				})
			},

			// 广告播放完成后显示二维码
			showQrCodeAfterAd() {
				this.showQrCode = true
				this.$api('groupJoin', {id : this.groupId})
				uni.showToast({
					title: '恭喜获得群聊二维码！',
					icon: 'success'
				})
			},

			// 获取群组详情
			getGroupDetail() {
				this.$api('groupDetail', { id: this.groupId }, res => {
					if (res.code === 200 && res.result) {
						this.groupInfo = res.result
						
						// 设置分享信息
						this.share.title = res.result.shareMsg || res.result.title || '群组详情'
						this.share.imageUrl = this.$utils.getImageOne(res.result.image)
					} else {
						uni.showToast({
							title: res.message || '获取群组详情失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 观看广告
			watchAd() {
				console.log('watchAd 方法被调用')
				console.log('isWatchingAd:', this.isWatchingAd)
				console.log('rewardedVideoAd:', this.rewardedVideoAd)
				
				if (this.isWatchingAd) {
					console.log('正在观看广告，直接返回')
					return
				}
				
				console.log('开始显示激励视频广告')
				// 显示激励视频广告
				this.showRewardedVideoAd({
					onSuccess: this.onAdWatchComplete,
					onCancel: this.onAdWatchCancel,
					fallbackTitle: '广告加载失败',
					fallbackContent: '无法加载广告，是否直接显示二维码？'
				})
			},
			
			// 查看成员资料
			viewMemberProfile(member) {
				// this.$utils.navigateTo('/pages_order/profile/userProfile?id=' + member.id)
			},
			
			// 管理群组
			manageGroup() {
				this.$utils.navigateTo('/pages_order/group/createGroup?id=' + this.groupId)
			},
			
			// 删除群组
			deleteGroup() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个群组吗？删除后无法恢复！',
					confirmText: '删除',
					confirmColor: '#ff4757',
					success: (res) => {
						if (res.confirm) {
							this.confirmDeleteGroup()
						}
					}
				})
			},
			
			// 确认删除群组
			confirmDeleteGroup() {
				uni.showLoading({
					title: '删除中...'
				})
				
				this.$api('deleteGroup', { id: this.groupId }, res => {
					uni.hideLoading()
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.$utils.navigateBack()
						}, 1500)
					} else {
						uni.showToast({
							title: res.message || '删除失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.group-info {
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.group-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.group-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-right: 30rpx;
	}
	
	.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: 15rpx;
	}
	
	.group-stats {
		display: flex;
		align-items: center;
	}
	
	.member-count {
		font-size: 24rpx;
		color: #999;
		background: #f0f0f0;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.group-actions {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.qr-code-section {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		padding: 40rpx;
		text-align: center;
		color: #fff;
		animation: fadeIn 0.5s ease-in-out;
	}
	
	.qr-code-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.qr-code-image {
		width: 300rpx;
		height: 300rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 0 auto 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.qr-code-tip {
		font-size: 24rpx;
		opacity: 0.8;
	}
	
	.watch-ad-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.3);
		transition: all 0.3s ease;
	}
	
	.watch-ad-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
	}
	
	.admin-buttons {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.manage-btn {
		background: linear-gradient(135deg, #5baaff 0%, #4285f4 100%);
		border-radius: 15rpx;
		padding: 15rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		color: #fff;
		font-size: 24rpx;
		box-shadow: 0 4rpx 15rpx rgba(91, 170, 255, 0.3);
		flex: 1;
		transition: all 0.3s ease;
	}
	
	.manage-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 10rpx rgba(91, 170, 255, 0.3);
	}
	
	.delete-btn {
		background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
		border-radius: 15rpx;
		padding: 15rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		color: #fff;
		font-size: 24rpx;
		box-shadow: 0 4rpx 15rpx rgba(255, 71, 87, 0.3);
		flex: 1;
		transition: all 0.3s ease;
	}
	
	.delete-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(255, 71, 87, 0.3);
	}
	
	.announcement {
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.announcement-title {
		display: flex;
		align-items: center;
		gap: 15rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.announcement-content {
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
	}
	
	.member-section {
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-header {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 30rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.member-count-text {
		font-size: 24rpx;
		color: #999;
	}
	
	.member-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.member-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-radius: 15rpx;
		background: #f8f9fa;
		transition: all 0.3s ease;
	}
	
	.member-item:active {
		background: #e9ecef;
		transform: scale(0.98);
	}
	
	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.member-info {
		flex: 1;
	}
	
	.member-name {
		font-size: 28rpx;
		color: #333;
	}
	
	.empty-member {
		padding: 60rpx 0;
		text-align: center;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>