You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
10 KiB
476 lines
10 KiB
<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中处理
|
|
},
|
|
methods: {
|
|
// 广告观看完成回调
|
|
onAdWatchComplete() {
|
|
console.log('用户看完广告，显示群聊二维码')
|
|
this.showQrCodeAfterAd()
|
|
},
|
|
|
|
// 广告观看取消回调
|
|
onAdWatchCancel() {
|
|
uni.showToast({
|
|
title: '请观看完整广告才能获取二维码',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
|
|
// 广告播放完成后显示二维码
|
|
showQrCodeAfterAd() {
|
|
this.showQrCode = true
|
|
uni.showToast({
|
|
title: '恭喜获得群聊二维码！',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
|
|
// 获取群组详情
|
|
getGroupDetail() {
|
|
this.$api('groupDetail', { id: this.groupId }, res => {
|
|
if (res.code === 200 && res.result) {
|
|
this.groupInfo = res.result
|
|
} 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>
|