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.
456 lines
10 KiB
456 lines
10 KiB
<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>
|