- 新增群组相关页面:创建群组、群组详情、群组聊天、群组管理 - 添加群组列表组件和API接口 - 修改活动页为群组列表页并实现搜索和分类功能 - 更新配置文件和路由配置支持群组功能 - 完善文件上传组件支持视频类型 - 添加群组功能文档和项目规则说明master
@ -0,0 +1,6 @@ | |||
功能模块 | |||
同城群:显示各个地区同城群聊的基本信息,不需要实时聊天、不需要加入群聊、点击进行播放广告看完广告显示群聊二维码 | |||
@ -0,0 +1,150 @@ | |||
<template> | |||
<view class="group-item" @click="$emit('click')"> | |||
<view class="group-header"> | |||
<view class="group-avatar"> | |||
<image :src="item.avatar || '/static/image/logo.jpg'" mode="aspectFill"></image> | |||
</view> | |||
<view class="group-info"> | |||
<view class="group-name">{{ item.name || '群组名称' }}</view> | |||
<view class="group-desc">{{ item.description || '群组描述' }}</view> | |||
<view class="group-stats"> | |||
<text class="member-count">{{ item.memberCount || 0 }}人</text> | |||
<text class="separator">·</text> | |||
<text class="group-type">{{ item.type || '同城群' }}</text> | |||
</view> | |||
</view> | |||
<view class="group-status"> | |||
<view v-if="item.isJoined" class="joined-tag">已加入</view> | |||
<view v-else class="join-btn">加入</view> | |||
</view> | |||
</view> | |||
<view class="group-footer" v-if="item.lastMessage"> | |||
<view class="last-message"> | |||
<text class="message-prefix">最新消息:</text> | |||
<text class="message-content">{{ item.lastMessage }}</text> | |||
</view> | |||
<view class="message-time">{{ item.lastMessageTime || '' }}</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
props: { | |||
item: { | |||
type: Object, | |||
default: () => ({}) | |||
} | |||
}, | |||
data() { | |||
return { | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.group-item { | |||
margin: 20rpx; | |||
background-color: #fff; | |||
padding: 30rpx; | |||
border-radius: 20rpx; | |||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); | |||
.group-header { | |||
display: flex; | |||
align-items: center; | |||
.group-avatar { | |||
width: 120rpx; | |||
height: 120rpx; | |||
margin-right: 20rpx; | |||
image { | |||
width: 100%; | |||
height: 100%; | |||
border-radius: 20rpx; | |||
} | |||
} | |||
.group-info { | |||
flex: 1; | |||
.group-name { | |||
font-size: 32rpx; | |||
font-weight: bold; | |||
color: #333; | |||
margin-bottom: 8rpx; | |||
} | |||
.group-desc { | |||
font-size: 26rpx; | |||
color: #666; | |||
margin-bottom: 8rpx; | |||
line-height: 1.4; | |||
} | |||
.group-stats { | |||
display: flex; | |||
align-items: center; | |||
font-size: 24rpx; | |||
color: #999; | |||
.separator { | |||
margin: 0 8rpx; | |||
} | |||
} | |||
} | |||
.group-status { | |||
.joined-tag { | |||
background-color: #5baaff; | |||
color: #fff; | |||
padding: 8rpx 16rpx; | |||
border-radius: 20rpx; | |||
font-size: 24rpx; | |||
} | |||
.join-btn { | |||
background-color: #f0f0f0; | |||
color: #5baaff; | |||
padding: 8rpx 16rpx; | |||
border-radius: 20rpx; | |||
font-size: 24rpx; | |||
border: 1rpx solid #5baaff; | |||
} | |||
} | |||
} | |||
.group-footer { | |||
margin-top: 20rpx; | |||
padding-top: 20rpx; | |||
border-top: 1rpx solid #f0f0f0; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.last-message { | |||
flex: 1; | |||
font-size: 24rpx; | |||
color: #999; | |||
.message-prefix { | |||
color: #666; | |||
} | |||
.message-content { | |||
color: #999; | |||
} | |||
} | |||
.message-time { | |||
font-size: 22rpx; | |||
color: #ccc; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,117 @@ | |||
# 同城群功能说明 | |||
## 功能概述 | |||
将原有的活动页面改造为同城群展示列表,提供完整的群组社交功能。 | |||
## 主要功能 | |||
### 1. 群组列表页面 (`pages/index/activity.vue`) | |||
- 搜索群组功能 | |||
- 分类标签切换(推荐群组、同城群、兴趣群、工作群) | |||
- 群组列表展示 | |||
- 创建群组按钮 | |||
### 2. 群组详情页面 (`pages_order/group/groupDetail.vue`) | |||
- 群组基本信息展示 | |||
- 群组公告 | |||
- 成员列表 | |||
- 最近消息 | |||
- 加入/退出群组 | |||
- 进入聊天 | |||
- 群组管理(仅群主可见) | |||
### 3. 群组聊天页面 (`pages_order/group/groupChat.vue`) | |||
- 实时消息列表 | |||
- 发送消息功能 | |||
- 消息时间显示 | |||
- 自动滚动到底部 | |||
### 4. 创建群组页面 (`pages_order/group/createGroup.vue`) | |||
- 群组头像上传 | |||
- 群组信息填写 | |||
- 群组类型选择 | |||
- 群组公告设置 | |||
- 加入方式设置 | |||
### 5. 群组管理页面 (`pages_order/group/groupManage.vue`) | |||
- 编辑群组信息 | |||
- 成员管理 | |||
- 群组公告编辑 | |||
- 群组设置 | |||
- 转让群主 | |||
- 解散群组 | |||
## 组件结构 | |||
### 群组列表项组件 (`components/list/group/groupItem.vue`) | |||
- 群组头像 | |||
- 群组名称和描述 | |||
- 成员数量 | |||
- 群组类型 | |||
- 加入状态 | |||
- 最新消息预览 | |||
## API接口 | |||
### 群组相关API | |||
- `getGroupList` - 获取群组列表 | |||
- `getGroupDetail` - 获取群组详情 | |||
- `joinGroup` - 加入群组 | |||
- `quitGroup` - 退出群组 | |||
- `createGroup` - 创建群组 | |||
- `sendGroupMessage` - 发送群组消息 | |||
- `getGroupMessages` - 获取群组消息列表 | |||
- `updateGroupAnnouncement` - 更新群组公告 | |||
- `dissolveGroup` - 解散群组 | |||
- `transferGroup` - 转让群主 | |||
## 页面路由 | |||
- `/pages/index/activity` - 群组列表页 | |||
- `/pages_order/group/groupDetail` - 群组详情页 | |||
- `/pages_order/group/groupChat` - 群组聊天页 | |||
- `/pages_order/group/createGroup` - 创建群组页 | |||
- `/pages_order/group/groupManage` - 群组管理页 | |||
## 样式特点 | |||
- 采用现代化的卡片式设计 | |||
- 统一的蓝色主题色 (#5baaff) | |||
- 响应式布局 | |||
- 良好的用户体验 | |||
## 技术实现 | |||
- 使用 Vue.js 框架 | |||
- 采用 uv-ui 组件库 | |||
- 支持微信小程序 | |||
- 模块化组件设计 | |||
- 统一的API调用方式 | |||
- 使用模拟数据,无需后台接口 | |||
## 数据说明 | |||
当前版本使用模拟数据,包含: | |||
- 20个不同类型的群组(同城群、兴趣群、工作群、学习群等) | |||
- 群组详情信息(成员列表、最近消息等) | |||
- 聊天消息模拟 | |||
- 群组管理功能模拟 | |||
### 群组分类统计 | |||
**推荐群组**:显示所有20个群组 | |||
**同城群**:6个群组(江华同城交流群、江华租房信息群、江华二手交易群、江华宝妈交流群、江华医疗健康群、江华法律咨询群) | |||
**兴趣群**:8个群组(江华美食分享群、江华旅游攻略群、江华宠物交流群、江华汽车交流群、江华健身运动群、江华摄影爱好者群、江华音乐爱好者群、江华园艺爱好者群) | |||
**工作群**:4个群组(江华求职招聘群、江华IT技术交流群、江华创业交流群、江华电商交流群) | |||
**学习群**:2个群组(江华学习交流群、江华读书会) | |||
### 群组数据特点 | |||
- **成员数量**:从234人到2341人不等 | |||
- **加入状态**:部分群组已加入,部分未加入 | |||
- **群主权限**:部分群组拥有群主权限 | |||
- **最后消息**:包含真实的时间戳和消息内容 | |||
- **群组公告**:每个群组都有相应的公告内容 | |||
所有功能都可以正常演示,无需连接真实后台接口。 |
@ -0,0 +1,300 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="创建群组" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" /> | |||
<view class="form-container"> | |||
<!-- 群组头像 --> | |||
<view class="avatar-section"> | |||
<view class="avatar-title">群组头像</view> | |||
<view class="avatar-upload" @click="chooseAvatar"> | |||
<image v-if="groupForm.avatar" :src="groupForm.avatar" class="avatar-preview" mode="aspectFill"></image> | |||
<view v-else class="avatar-placeholder"> | |||
<uv-icon name="camera" size="60rpx" color="#ccc"></uv-icon> | |||
<text>点击上传头像</text> | |||
</view> | |||
</view> | |||
</view> | |||
<!-- 群组信息表单 --> | |||
<view class="form-section"> | |||
<view class="form-item"> | |||
<view class="form-label">群组名称</view> | |||
<uv-input | |||
v-model="groupForm.name" | |||
placeholder="请输入群组名称" | |||
:border="false" | |||
:clearable="true" | |||
></uv-input> | |||
</view> | |||
<view class="form-item"> | |||
<view class="form-label">群组描述</view> | |||
<uv-textarea | |||
v-model="groupForm.description" | |||
placeholder="请输入群组描述" | |||
:border="false" | |||
:maxlength="200" | |||
height="120" | |||
></uv-textarea> | |||
</view> | |||
<view class="form-item"> | |||
<view class="form-label">群组类型</view> | |||
<uv-picker | |||
:list="groupTypes" | |||
v-model="groupForm.type" | |||
@confirm="onTypeConfirm" | |||
> | |||
<view class="picker-trigger"> | |||
<text>{{ getTypeName(groupForm.type) }}</text> | |||
<uv-icon name="arrow-right" size="30rpx" color="#ccc"></uv-icon> | |||
</view> | |||
</uv-picker> | |||
</view> | |||
<view class="form-item"> | |||
<view class="form-label">群组公告</view> | |||
<uv-textarea | |||
v-model="groupForm.announcement" | |||
placeholder="请输入群组公告(可选)" | |||
:border="false" | |||
:maxlength="500" | |||
height="120" | |||
></uv-textarea> | |||
</view> | |||
<view class="form-item"> | |||
<view class="form-label">加入方式</view> | |||
<uv-radio-group v-model="groupForm.joinType"> | |||
<view class="radio-item"> | |||
<uv-radio name="free" label="自由加入"></uv-radio> | |||
</view> | |||
<view class="radio-item"> | |||
<uv-radio name="approve" label="需要审核"></uv-radio> | |||
</view> | |||
</uv-radio-group> | |||
</view> | |||
</view> | |||
<!-- 创建按钮 --> | |||
<view class="submit-section"> | |||
<uv-button | |||
type="primary" | |||
text="创建群组" | |||
:loading="submitting" | |||
@click="createGroup" | |||
></uv-button> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
submitting: false, | |||
groupForm: { | |||
name: '', | |||
description: '', | |||
avatar: '', | |||
type: 'local', | |||
announcement: '', | |||
joinType: 'free' | |||
}, | |||
groupTypes: [ | |||
{ | |||
label: '同城群', | |||
value: 'local' | |||
}, | |||
{ | |||
label: '兴趣群', | |||
value: 'interest' | |||
}, | |||
{ | |||
label: '工作群', | |||
value: 'work' | |||
}, | |||
{ | |||
label: '学习群', | |||
value: 'study' | |||
} | |||
] | |||
} | |||
}, | |||
methods: { | |||
// 选择头像 | |||
chooseAvatar() { | |||
uni.chooseImage({ | |||
count: 1, | |||
sizeType: ['compressed'], | |||
sourceType: ['album', 'camera'], | |||
success: (res) => { | |||
this.groupForm.avatar = res.tempFilePaths[0] | |||
// 这里可以上传图片到服务器 | |||
this.uploadAvatar(res.tempFilePaths[0]) | |||
} | |||
}) | |||
}, | |||
// 上传头像 | |||
uploadAvatar(filePath) { | |||
// 这里实现图片上传逻辑 | |||
console.log('上传头像:', filePath) | |||
}, | |||
// 类型选择确认 | |||
onTypeConfirm(e) { | |||
this.groupForm.type = e.value | |||
}, | |||
// 获取类型名称 | |||
getTypeName(type) { | |||
const typeItem = this.groupTypes.find(item => item.value === type) | |||
return typeItem ? typeItem.label : '请选择群组类型' | |||
}, | |||
// 创建群组 | |||
createGroup() { | |||
if (!this.groupForm.name.trim()) { | |||
uni.showToast({ | |||
title: '请输入群组名称', | |||
icon: 'none' | |||
}) | |||
return | |||
} | |||
if (!this.groupForm.description.trim()) { | |||
uni.showToast({ | |||
title: '请输入群组描述', | |||
icon: 'none' | |||
}) | |||
return | |||
} | |||
this.submitting = true | |||
// 模拟创建群组 | |||
setTimeout(() => { | |||
this.submitting = false | |||
uni.showToast({ | |||
title: '创建成功', | |||
icon: 'success' | |||
}) | |||
// 跳转到群组详情页 | |||
setTimeout(() => { | |||
this.$utils.navigateTo('/pages_order/group/groupDetail?id=999') | |||
}, 1500) | |||
}, 1000) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
background-color: #f5f5f5; | |||
min-height: 100vh; | |||
.form-container { | |||
padding: 20rpx; | |||
.avatar-section { | |||
background-color: #fff; | |||
padding: 30rpx; | |||
border-radius: 20rpx; | |||
margin-bottom: 20rpx; | |||
.avatar-title { | |||
font-size: 30rpx; | |||
font-weight: bold; | |||
color: #333; | |||
margin-bottom: 20rpx; | |||
} | |||
.avatar-upload { | |||
display: flex; | |||
justify-content: center; | |||
.avatar-preview { | |||
width: 120rpx; | |||
height: 120rpx; | |||
border-radius: 20rpx; | |||
} | |||
.avatar-placeholder { | |||
width: 120rpx; | |||
height: 120rpx; | |||
border: 2rpx dashed #ddd; | |||
border-radius: 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
text { | |||
font-size: 20rpx; | |||
color: #999; | |||
margin-top: 10rpx; | |||
} | |||
} | |||
} | |||
} | |||
.form-section { | |||
background-color: #fff; | |||
padding: 30rpx; | |||
border-radius: 20rpx; | |||
margin-bottom: 20rpx; | |||
.form-item { | |||
margin-bottom: 30rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
.form-label { | |||
font-size: 28rpx; | |||
color: #333; | |||
margin-bottom: 15rpx; | |||
font-weight: bold; | |||
} | |||
.picker-trigger { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 20rpx 0; | |||
border-bottom: 1rpx solid #f0f0f0; | |||
text { | |||
font-size: 28rpx; | |||
color: #333; | |||
} | |||
} | |||
.radio-item { | |||
margin-bottom: 15rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
} | |||
} | |||
} | |||
.submit-section { | |||
padding: 40rpx 0; | |||
.uv-button { | |||
width: 100%; | |||
height: 80rpx; | |||
border-radius: 40rpx; | |||
font-size: 32rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,304 @@ | |||
<template> | |||
<view class="page"> | |||
<navbar title="群组聊天" bgColor="#5baaff" color="#fff" leftClick @leftClick="$utils.navigateBack" /> | |||
<!-- 消息列表 --> | |||
<scroll-view | |||
class="message-list" | |||
scroll-y="true" | |||
:scroll-top="scrollTop" | |||
@scrolltoupper="loadMoreMessages" | |||
> | |||
<view class="message-container"> | |||
<view | |||
v-for="(message, index) in messageList" | |||
:key="message.id || index" | |||
class="message-item" | |||
:class="{ 'message-mine': message.isMine }" | |||
> | |||
<image | |||
:src="message.avatar || '/static/image/logo.jpg'" | |||
class="message-avatar" | |||
mode="aspectFill" | |||
></image> | |||
<view class="message-content"> | |||
<view class="message-info"> | |||
<text class="sender-name">{{ message.senderName }}</text> | |||
<text class="message-time">{{ message.time }}</text> | |||
</view> | |||
<view class="message-text">{{ message.content }}</view> | |||
</view> | |||
</view> | |||
</view> | |||
</scroll-view> | |||
<!-- 输入框 --> | |||
<view class="input-container"> | |||
<view class="input-box"> | |||
<uv-input | |||
v-model="inputMessage" | |||
placeholder="输入消息..." | |||
:border="false" | |||
:clearable="true" | |||
@confirm="sendMessage" | |||
></uv-input> | |||
</view> | |||
<view class="send-btn" @click="sendMessage"> | |||
<uv-icon name="paperplane" size="40rpx" color="#fff"></uv-icon> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
groupId: '', | |||
groupInfo: {}, | |||
inputMessage: '', | |||
scrollTop: 0, | |||
messageList: [ | |||
{ | |||
id: 1, | |||
senderName: '张三', | |||
avatar: '/static/image/logo.jpg', | |||
content: '大家好,欢迎加入群组!', | |||
time: '10:30', | |||
isMine: false | |||
}, | |||
{ | |||
id: 2, | |||
senderName: '我', | |||
avatar: '/static/image/logo.jpg', | |||
content: '谢谢,很高兴认识大家', | |||
time: '10:32', | |||
isMine: true | |||
}, | |||
{ | |||
id: 3, | |||
senderName: '李四', | |||
avatar: '/static/image/logo.jpg', | |||
content: '有人知道江华哪里有好的租房信息吗?', | |||
time: '10:35', | |||
isMine: false | |||
}, | |||
{ | |||
id: 4, | |||
senderName: '王五', | |||
avatar: '/static/image/logo.jpg', | |||
content: '我这边有个单间出租,位置不错', | |||
time: '10:38', | |||
isMine: false | |||
} | |||
] | |||
} | |||
}, | |||
onLoad(options) { | |||
if (options.id) { | |||
this.groupId = options.id | |||
this.getGroupInfo() | |||
} | |||
}, | |||
onShow() { | |||
this.scrollToBottom() | |||
}, | |||
methods: { | |||
// 获取群组信息 | |||
getGroupInfo() { | |||
// 模拟群组信息 | |||
const mockGroupInfo = { | |||
1: { id: 1, name: '江华同城交流群' }, | |||
2: { id: 2, name: '江华美食分享群' }, | |||
3: { id: 3, name: '江华租房信息群' }, | |||
4: { id: 4, name: '江华求职招聘群' }, | |||
5: { id: 5, name: '江华旅游攻略群' }, | |||
6: { id: 6, name: '江华学习交流群' }, | |||
7: { id: 7, name: '江华二手交易群' }, | |||
8: { id: 8, name: '江华宠物交流群' }, | |||
9: { id: 9, name: '江华汽车交流群' }, | |||
10: { id: 10, name: '江华宝妈交流群' }, | |||
11: { id: 11, name: '江华IT技术交流群' }, | |||
12: { id: 12, name: '江华健身运动群' }, | |||
13: { id: 13, name: '江华摄影爱好者群' }, | |||
14: { id: 14, name: '江华创业交流群' }, | |||
15: { id: 15, name: '江华医疗健康群' }, | |||
16: { id: 16, name: '江华读书会' }, | |||
17: { id: 17, name: '江华音乐爱好者群' }, | |||
18: { id: 18, name: '江华电商交流群' }, | |||
19: { id: 19, name: '江华园艺爱好者群' }, | |||
20: { id: 20, name: '江华法律咨询群' } | |||
} | |||
setTimeout(() => { | |||
this.groupInfo = mockGroupInfo[this.groupId] || { name: '群组聊天' } | |||
}, 300) | |||
}, | |||
// 发送消息 | |||
sendMessage() { | |||
if (!this.inputMessage.trim()) { | |||
return | |||
} | |||
const message = { | |||
id: Date.now(), | |||
senderName: '我', | |||
avatar: '/static/image/logo.jpg', | |||
content: this.inputMessage, | |||
time: this.getCurrentTime(), | |||
isMine: true | |||
} | |||
this.messageList.push(message) | |||
this.inputMessage = '' | |||
// 滚动到底部 | |||
this.$nextTick(() => { | |||
this.scrollToBottom() | |||
}) | |||
// 这里可以调用发送消息API | |||
// this.$api('sendGroupMessage', { | |||
// groupId: this.groupId, | |||
// content: message.content | |||
// }, res => { | |||
// if (res.code == 200) { | |||
// console.log('消息发送成功') | |||
// } | |||
// }) | |||
}, | |||
// 加载更多消息 | |||
loadMoreMessages() { | |||
// 这里可以实现加载历史消息的逻辑 | |||
console.log('加载更多消息') | |||
}, | |||
// 滚动到底部 | |||
scrollToBottom() { | |||
this.scrollTop = 999999 | |||
}, | |||
// 获取当前时间 | |||
getCurrentTime() { | |||
const now = new Date() | |||
const hours = now.getHours().toString().padStart(2, '0') | |||
const minutes = now.getMinutes().toString().padStart(2, '0') | |||
return `${hours}:${minutes}` | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.page { | |||
display: flex; | |||
flex-direction: column; | |||
height: 100vh; | |||
background-color: #f5f5f5; | |||
.message-list { | |||
flex: 1; | |||
padding: 20rpx; | |||
.message-container { | |||
.message-item { | |||
display: flex; | |||
margin-bottom: 30rpx; | |||
&.message-mine { | |||
flex-direction: row-reverse; | |||
.message-content { | |||
margin-left: 0; | |||
margin-right: 20rpx; | |||
align-items: flex-end; | |||
.message-info { | |||
flex-direction: row-reverse; | |||
.sender-name { | |||
margin-left: 10rpx; | |||
margin-right: 0; | |||
} | |||
} | |||
.message-text { | |||
background-color: #5baaff; | |||
color: #fff; | |||
border-radius: 20rpx 20rpx 4rpx 20rpx; | |||
} | |||
} | |||
} | |||
.message-avatar { | |||
width: 80rpx; | |||
height: 80rpx; | |||
border-radius: 50%; | |||
} | |||
.message-content { | |||
flex: 1; | |||
margin-left: 20rpx; | |||
display: flex; | |||
flex-direction: column; | |||
.message-info { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 8rpx; | |||
.sender-name { | |||
font-size: 24rpx; | |||
color: #666; | |||
margin-right: 10rpx; | |||
} | |||
.message-time { | |||
font-size: 22rpx; | |||
color: #999; | |||
} | |||
} | |||
.message-text { | |||
background-color: #fff; | |||
padding: 20rpx; | |||
border-radius: 20rpx 20rpx 20rpx 4rpx; | |||
font-size: 28rpx; | |||
color: #333; | |||
line-height: 1.4; | |||
word-break: break-all; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.input-container { | |||
background-color: #fff; | |||
padding: 20rpx; | |||
border-top: 1rpx solid #f0f0f0; | |||
display: flex; | |||
align-items: center; | |||
gap: 20rpx; | |||
.input-box { | |||
flex: 1; | |||
background-color: #f5f5f5; | |||
border-radius: 30rpx; | |||
padding: 0 20rpx; | |||
} | |||
.send-btn { | |||
width: 80rpx; | |||
height: 80rpx; | |||
background-color: #5baaff; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
} | |||
} | |||
</style> |
@ -0,0 +1,601 @@ | |||
<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> |
@ -0,0 +1,456 @@ | |||
<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> |