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.
601 lines
15 KiB
601 lines
15 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.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>
|