# HuiLin2.0

**Repository Path**: AuroCaffe/hui-lin2.0

## Basic Information

- **Project Name**: HuiLin2.0
- **Description**: 惠邻生活是一个综合性的社区生活服务平台，旨在为社区居民提供便捷的生活服务。通过微信小程序的形式，用户可以轻松预约家政服务、维修服务，参与社区活动，享受邻里互助的便利。

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2025-05-15
- **Last Updated**: 2026-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 惠邻生活 (HuiLin)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Vue](https://img.shields.io/badge/Vue-2.x-4FC08D.svg)](https://vuejs.org/)
[![uni-app](https://img.shields.io/badge/uni--app-3.x-00D4AA.svg)](https://uniapp.dcloud.io/)
[![WeChat Mini Program](https://img.shields.io/badge/WeChat%20Mini%20Program-✓-07C160.svg)](https://developers.weixin.qq.com/miniprogram/dev/framework/)

> 一个基于 uni-app 开发的社区生活服务平台，提供家政服务、维修服务、社区圈子等功能。

## 📋 目录

- [项目简介](#-项目简介)
- [项目截图](#-项目截图)
- [核心功能](#-核心功能)
- [技术栈](#️-技术栈)
- [快速开始](#-快速开始)
  - [配置检查清单](SETUP.md)
  - [隐私信息清理说明](PRIVACY_CLEANUP.md)
- [项目结构](#-项目结构)
- [后端接口说明](#-后端接口说明)
- [开发指南](#-开发指南)
- [问题排查](#-问题排查)
- [贡献指南](#-贡献指南)
- [许可证](#-许可证)
- [联系我们](#-联系我们)

## 📱 项目简介

惠邻生活是一个综合性的社区生活服务平台，旨在为社区居民提供便捷的生活服务。通过微信小程序的形式，用户可以轻松预约家政服务、维修服务，参与社区活动，享受邻里互助的便利。

### ✨ 项目特点

- 🎯 **功能完整** - 涵盖订单管理、社区互动、即时通讯等完整业务流程
- 🏗️ **架构清晰** - 采用模块化设计，代码结构清晰易维护
- 🎨 **界面美观** - 现代化UI设计，良好的用户体验
- 📱 **响应式布局** - 适配不同尺寸设备
- ⚡ **性能优化** - 优化的加载速度和流畅的交互体验
- 🔧 **易于扩展** - 灵活的配置和组件化开发方式

## 📸 项目截图

### 主要界面展示

<table>
  <tr>
    <td width="33%">
      <img src="docs/screenshots/home.png" alt="首页界面" />
      <p align="center"><strong>首页</strong></p>
      <p align="center">服务订单展示、轮播图、公告通知</p>
    </td>
    <td width="33%">
      <img src="docs/screenshots/orders.png" alt="订单中心" />
      <p align="center"><strong>订单中心</strong></p>
      <p align="center">服务订单管理、状态跟踪</p>
    </td>
    <td width="33%">
      <img src="docs/screenshots/circle.png" alt="社区圈子" />
      <p align="center"><strong>社区圈子</strong></p>
      <p align="center">邻里交流、动态分享</p>
    </td>
  </tr>
  <tr>
    <td width="33%">
      <img src="docs/screenshots/profile.png" alt="个人中心" />
      <p align="center"><strong>个人中心</strong></p>
      <p align="center">用户信息、余额管理</p>
    </td>
    <td width="33%">
      <img src="docs/screenshots/service.png" alt="服务预约" />
      <p align="center"><strong>服务预约</strong></p>
      <p align="center">家政服务、维修服务预约</p>
    </td>
    <td width="33%">
      <img src="docs/screenshots/chat.png" alt="即时通讯" />
      <p align="center"><strong>即时通讯</strong></p>
      <p align="center">实时消息、客服沟通</p>
    </td>
  </tr>
</table>

### 功能特色展示

<div align="center">
  <img src="docs/screenshots/features-overview.png" alt="功能特色" width="80%" />
  <p><strong>功能特色总览</strong></p>
</div>

> 💡 **提示**: 以上截图展示了惠邻生活小程序的主要功能模块和用户界面。如需查看完整的功能演示，请下载并体验小程序。

### 界面设计特色

- **🎨 现代化UI设计** - 采用简洁清爽的界面风格，符合现代用户审美
- **📱 响应式布局** - 适配不同尺寸的手机屏幕，确保良好的用户体验
- **🌈 统一色彩体系** - 使用橙色主题色，营造温暖友好的社区氛围
- **⚡ 流畅交互体验** - 优化的页面切换和交互动画，提升用户操作感受

### 功能亮点

- **智能订单管理** - 实时订单状态更新，支持多种服务类型
- **社区互动平台** - 邻里交流、活动分享，构建和谐社区环境
- **便捷服务预约** - 一键预约家政和维修服务，简化生活流程
- **实时消息推送** - WebSocket技术实现即时通讯，确保信息及时传达

### 🎯 核心功能

- **🏠 家政服务** - 清洁、保洁等家庭服务预约
- **🔧 维修服务** - 家电维修、水电维修等服务
- **👥 社区圈子** - 邻里交流、活动分享
- **📋 订单中心** - 服务订单管理和跟踪
- **💬 即时通讯** - 实时消息推送和沟通
- **💰 余额管理** - 账户余额和交易记录
- **🎫 优惠券** - 优惠券领取和使用

## 🛠️ 技术栈

- **前端框架**: Vue.js 2.x + uni-app
- **UI组件**: uni-ui + ColorUI
- **状态管理**: Vuex
- **网络请求**: 自研请求库
- **实时通讯**: WebSocket
- **地图服务**: 高德地图
- **支付集成**: 微信支付
- **构建工具**: HBuilderX

## 📦 项目结构

```
hui-lin2.0/
├── api/                    # API接口定义
│   ├── cart.js            # 购物车相关
│   ├── order.js           # 订单管理
│   ├── members.js         # 用户管理
│   └── ...
├── components/            # 公共组件
│   ├── orderCenterComponents/  # 订单中心组件
│   ├── header-slot.vue    # 头部组件
│   └── ...
├── pages/                 # 页面文件
│   ├── tabBar/           # 底部导航页面
│   ├── homePages/        # 首页相关页面
│   ├── mePages/          # 个人中心页面
│   └── ...
├── utils/                 # 工具函数
│   ├── request.js        # 网络请求封装
│   ├── storage.js        # 本地存储
│   ├── webSokent.js      # WebSocket管理
│   └── ...
├── config/               # 配置文件
│   ├── config.example.js # 主配置示例（已提供）
│   ├── api.example.js   # API配置示例（已提供）
│   ├── config.js        # 主配置（需自行创建，已被.gitignore）
│   └── api.js          # API配置（需自行创建，已被.gitignore）
├── static/               # 静态资源
├── store/                # Vuex状态管理
└── uni_modules/          # uni-app插件
```

## 🚀 快速开始

> ⚠️ **首次使用必读**：
> - [配置检查清单](SETUP.md) - 确保所有配置正确
> - [安全和隐私说明](SECURITY.md) - 了解如何保护敏感信息

### 环境要求

- Node.js >= 14.0.0
- HBuilderX >= 3.1.0
- 微信开发者工具

### 前置准备

在开始之前，你需要：

1. 注册微信小程序账号，获取AppID
2. 申请高德地图开放平台Key（用于地图功能）
3. 准备后端API服务（或自行开发）

### 安装步骤

1. **克隆项目**
   ```bash
   git clone https://github.com/your-username/hui-lin2.0.git
   cd hui-lin2.0
   ```

2. **安装依赖**
   ```bash
   # 如果项目需要npm依赖
   npm install
   ```

3. **配置项目**
   
   **重要：配置文件需要自行创建**
   
   - 复制 `config/config.example.js` 为 `config/config.js`
   - 复制 `config/api.example.js` 为 `config/api.js`
   - 填写实际的配置信息：
     - API地址
     - 微信小程序AppID（需在微信公众平台申请）
     - 高德地图Key（需在高德地图开放平台申请）
     - 客服联系方式
     - IM服务地址
   - 在微信公众平台申请小程序AppID，并配置到 `manifest.json`

4. **导入项目**
   - 使用 HBuilderX 打开项目
   - 配置微信小程序AppID

5. **运行项目**
   - 在 HBuilderX 中选择"运行" -> "运行到小程序模拟器" -> "微信开发者工具"
   - 或直接在微信开发者工具中打开 `unpackage/dist/dev/mp-weixin` 目录

6. **查看效果**
   - 运行成功后，您将看到如上图所示的小程序界面
   - 可以体验各个功能模块，了解项目的完整功能

### 配置说明

#### 1. 项目配置文件

本项目的配置文件已被 `.gitignore` 忽略，需要手动创建：

```bash
# 配置文件结构
config/
├── config.example.js      # 主配置示例文件（已提供）
├── api.example.js         # API配置示例文件（已提供）
├── config.js              # 主配置文件（需自行创建）
└── api.js                 # API配置文件（需自行创建）
```

#### 2. API配置 (`config/config.js`)

参考 `config/config.example.js` 创建配置文件，主要配置项：

```javascript
export default {
  name: "惠邻生活",
  commonApi: 'https://your-api-domain.com',  // 后端API地址
  shareLink: "https://your-h5-domain.com",  // 分享链接
  appid: "your-wechat-appid",  // 微信小程序AppID
  aMapKey: "your-amap-key",  // 高德地图Key（在高德开放平台申请）
  customerServiceMobile: "400-xxx-xxxx",  // 客服电话
  customerServiceEmail: "service@example.com",  // 客服邮箱
  imWebSrc: "https://your-im-domain.com",  // IM地址
  baseWsUrl: "wss://your-ws-domain.com/path/webSocket", // WebSocket地址
  // ... 其他配置见示例文件
}
```

#### 3. 微信小程序配置 (`manifest.json`)

修改 `manifest.json` 中的小程序AppID：

```json
{
  "mp-weixin": {
    "appid": "your-wechat-appid",  // 替换为你的小程序AppID
    "setting": {
      "urlCheck": false,
      "es6": true,
      "postcss": true,
      "minified": true
    }
  }
}
```

#### 4. 第三方服务申请

- **微信小程序AppID**: 在 [微信公众平台](https://mp.weixin.qq.com/) 注册并申请
- **高德地图Key**: 在 [高德开放平台](https://lbs.amap.com/) 申请Web服务Key
- **支付功能**: 需要申请微信支付商户号并配置

## 🔧 开发指南

### 代码规范

- 使用 ESLint 进行代码检查
- 遵循 Vue.js 官方风格指南
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case

### 提交规范

```bash
# 功能开发
git commit -m "feat: 添加订单管理功能"

# 问题修复
git commit -m "fix: 修复WebSocket连接问题"

# 文档更新
git commit -m "docs: 更新README文档"
```

### 分支管理

- `main` - 主分支，用于生产环境
- `develop` - 开发分支，用于功能开发
- `feature/*` - 功能分支
- `hotfix/*` - 紧急修复分支

## 📱 功能模块

### 1. 首页模块
- 服务订单展示
- 轮播图管理
- 公告通知

### 2. 订单中心
- 服务订单列表
- 订单详情查看
- 订单状态跟踪

### 3. 社区圈子
- 动态发布
- 邻里互动
- 活动分享

### 4. 个人中心
- 用户信息管理
- 余额查询
- 优惠券管理
- 设置中心

## 🔌 后端接口说明

本项目前端代码已开源，但需要配合后端API使用。

### API结构

后端API采用RESTful风格，主要模块包括：

- **认证模块**: 用户登录、注册、登出
- **订单模块**: 订单创建、查询、管理
- **用户模块**: 用户信息、余额、地址管理
- **服务模块**: 家政服务、维修服务
- **社区模块**: 圈子动态、评论、点赞
- **消息模块**: 即时通讯、消息推送

### 后端开发

如果需要自行开发后端，可以参考项目中的 `api/` 目录下的接口调用代码，了解所需的接口结构和数据格式。

后端技术栈建议：
- Spring Boot / Node.js / Python Django 等
- MySQL / PostgreSQL 数据库
- Redis 缓存
- WebSocket 实时通讯

## 🐛 问题排查

### 常见问题

1. **WebSocket连接失败**
   - 检查网络连接
   - 确认WebSocket服务地址配置正确

2. **支付功能异常**
   - 检查微信支付配置
   - 确认商户号和密钥配置

3. **地图功能无法使用**
   - 检查高德地图Key配置
   - 确认域名白名单设置

## 🤝 贡献指南

我们欢迎所有形式的贡献！

### 如何贡献

详细的贡献指南请查看 [CONTRIBUTING.md](CONTRIBUTING.md)

### 快速开始贡献

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交你的修改 (`git commit -m 'feat: 添加某个功能'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

### 贡献类型

- 🐛 Bug修复
- ✨ 新功能开发
- 📚 文档完善
- 🎨 UI/UX改进
- ⚡ 性能优化

### 贡献前必读

- 查看 [SECURITY.md](SECURITY.md) 了解安全注意事项
- 确保不提交包含敏感信息的文件
- 遵循项目的代码规范和提交规范

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

### 重要声明

1. **配置文件安全**：请勿将包含真实密钥、AppID等敏感信息的配置文件提交到公开仓库
2. **第三方服务**：本项目使用的微信支付、高德地图等第三方服务需要自行申请和配置
3. **商业使用**：如用于商业项目，请遵守相关法律法规和第三方服务的使用协议
4. **数据安全**：请妥善保护用户数据和隐私信息

## 📞 联系我们

- **项目地址**: [GitHub](https://github.com/your-username/hui-lin2.0)
- **问题反馈**: 请通过 [GitHub Issues](https://github.com/your-username/hui-lin2.0/issues) 提交
- **讨论交流**: 欢迎在 Issues 或 Discussions 中参与讨论

## 🙏 致谢

感谢以下开源项目和服务：

- [uni-app](https://uniapp.dcloud.io/) - 跨平台开发框架
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [uni-ui](https://uniapp.dcloud.io/component/uniui/uni-ui.html) - uni-app官方UI组件库
- [ColorUI](https://www.color-ui.com/) - 鲜亮的高饱和色彩UI框架
- [高德地图](https://lbs.amap.com/) - 地图服务
- [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/framework/) - 小程序开发平台

## 📈 版本历史

- 🎉 初始版本发布
- ✨ 基础功能实现
- 🏠 家政服务模块
- 🔧 维修服务模块
- 👥 社区圈子功能
- 💬 即时通讯功能

---

**⭐ 如果这个项目对你有帮助，请给我们一个Star！**