瑶都万能墙

3.4 KiB

Raw Blame History

同城群功能说明

功能概述

将原有的活动页面改造为同城群展示列表，提供完整的群组社交功能。

主要功能

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人不等
加入状态：部分群组已加入，部分未加入
群主权限：部分群组拥有群主权限
最后消息：包含真实的时间戳和消息内容
群组公告：每个群组都有相应的公告内容

所有功能都可以正常演示，无需连接真实后台接口。

3.4 KiB Raw Blame History