|
|
- # 同城群功能说明
-
- ## 功能概述
-
- 将原有的活动页面改造为同城群展示列表,提供完整的群组社交功能。
-
- ## 主要功能
-
- ### 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人不等
- - **加入状态**:部分群组已加入,部分未加入
- - **群主权限**:部分群组拥有群主权限
- - **最后消息**:包含真实的时间戳和消息内容
- - **群组公告**:每个群组都有相应的公告内容
-
- 所有功能都可以正常演示,无需连接真实后台接口。
|