# 同城群功能说明

## 功能概述

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

## 主要功能

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

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