# xiaoduangong

**Repository Path**: mrbadcoder/xiaoduangong

## Basic Information

- **Project Name**: xiaoduangong
- **Description**: 小段工项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mf-front (mf-wechart)

## 1. 项目概述

### 项目名称和简要描述
**项目名称**：mf-front (mf-wechart)
**描述**：这是一个基于 UniApp 开发的跨平台移动端应用（主要面向微信小程序），旨在提供服务发布、需求对接、周边服务发现以及用户社交互动的功能。用户可以发布服务或需求，浏览附近的服务，进行在线沟通和订单管理。

### 主要功能和目标用户
**主要功能**：
- **服务大厅**：浏览和搜索各类服务，查看附近的服务。
- **发布系统**：用户可以发布服务、需求或动态。
- **消息互动**：支持用户间的消息沟通。
- **个人中心**：管理个人信息、订单、关注、粉丝及足迹。
- **订单管理**：查看和管理服务订单及需求订单。

**目标用户**：需要寻找本地服务或提供技能服务的个人用户。

### 技术栈说明
- **前端框架**：[UniApp](https://uniapp.dcloud.io/) (基于 Vue 3)
- **UI 组件库**：
  - [NutUI-Uni](https://github.com/jdf2e/nutui-uni) (京东风格的移动端组件库)
  - [UV-UI](https://www.uvui.cn/) (多平台 UI 库)
- **状态管理**：Vuex
- **CSS 预处理器**：Sass/SCSS
- **API 请求**：封装的 HTTP 请求模块 (`api/`)

---

## 2. 项目结构说明

### 完整的目录树结构
```
mf-wechart/
├── api/                # 接口请求封装
├── common/             # 公共工具函数和配置
├── components/         # 全局通用组件 (如 f-navBar, f-tabs 等)
├── custom-tar-bar/     # 自定义 TabBar 组件
├── pages/              # 页面文件目录
│   ├── index/          # 首页模块
│   ├── nearby/         # 附近/服务大厅模块
│   ├── publish/        # 发布模块
│   ├── message/        # 消息模块
│   ├── my/             # 个人中心模块
│   ├── guest/          # 访客/互动相关 (关注、粉丝等)
│   ├── category/       # 分类列表
│   ├── aPackage/       # 分包 A (登录、详情页、设置等)
│   ├── order/          # 订单相关页面
│   └── orderPackage/   # 订单分包 (我的发布、需求、服务等)
├── static/             # 静态资源 (图片、图标)
├── store/              # Vuex 状态管理
├── uni_modules/        # 插件市场模块 (NutUI, UV-UI 等)
├── App.vue             # 应用入口组件
├── main.js             # 应用入口脚本
├── manifest.json       # 应用配置文件 (AppID, 权限等)
├── pages.json          # 页面路由及窗口配置
└── uni.scss            # UniApp 全局样式变量
```

### 核心配置文件说明
- **`pages.json`**: 配置应用的所有页面路径、窗口样式、TabBar 以及分包结构。
- **`manifest.json`**: 配置应用名称、AppID、版本号、以及各平台（小程序、App）的打包配置。
- **`uni.scss`**: 预置了 UniApp 的全局样式变量，方便统一修改主题色等。
- **`store/index.ts`**: Vuex 的入口文件，集成了 `user` 和 `global` 模块。

---

## 3. 页面详细说明

### 主要页面及路由
| 页面名称 | 路由路径 | 功能描述 |
| :--- | :--- | :--- |
| **首页** | `pages/index/index` | 应用入口，展示推荐服务、分类入口、热门内容。 |
| **服务大厅** | `pages/nearby/nearby` | 展示附近的服务，支持筛选和搜索。 |
| **发布** | `pages/publish/new-publish` | 发布入口，选择发布类型（服务、需求等）。 |
| **消息** | `pages/message/message` | 消息列表，展示聊天记录和系统通知。 |
| **我的** | `pages/my/my` | 个人中心，展示用户信息、常用功能入口。 |

### 分包页面
#### `pages/aPackage` (核心业务流程)
- `preload/wx-login`: 微信登录页。
- `serviceList/index`: 服务类型列表。
- `publish/publish`: 发布服务表单。
- `orderDetail/orderDetail`: 确认订单/订单详情。
- `demandDetail/demandDetail`: 需求详情页。
- `serviceDetail/serviceDetail`: 服务详情页。
- `userSetting/userSetting`: 编辑个人资料。
- `map/map`: 地图定位选择。

#### `pages/order` & `pages/orderPackage` (订单管理)
- `order-detail/order-detail`: 服务订单详情。
- `demand/demand`: 我的需求列表。
- `service/service`: 我的服务列表。
- `evaluate/evaluate`: 待评价列表。

### 页面交互
- **首页/大厅** -> **详情页**：点击卡片跳转至 `serviceDetail` 或 `demandDetail`。
- **详情页** -> **订单页**：在详情页点击“立即下单”跳转至 `orderDetail`。
- **发布页**：填写表单后提交数据，成功后跳转回列表或详情。

---

## 4. 开发环境配置

### 依赖安装
本项目使用 HBuilderX 导入即可运行，若使用 CLI 模式，请确保安装 Node.js。
由于根目录缺少 `package.json`，建议使用 **HBuilderX** 打开项目，它会自动识别 `uni_modules`。

如果项目中后期引入了 npm 依赖，请在根目录执行：
```bash
npm install
```

### 启动项目
1. **使用 HBuilderX**:
   - 打开项目文件夹。
   - 点击顶部菜单 **运行** -> **运行到小程序模拟器** -> **微信开发者工具**。
   
2. **CLI 方式 (如果配置了脚本)**:
   ```bash
   npm run dev:mp-weixin
   ```

### 环境变量
- `common/config.ts` (假设存在) 通常用于配置 API Base URL 等环境相关变量。
- `manifest.json` 中配置了 AppID (`__UNI__F0AA274`)。

---

## 5. 构建与部署

### 生产环境构建
1. **使用 HBuilderX**:
   - 点击顶部菜单 **发行** -> **小程序-微信**。
   - 填写 AppID 和项目名称，点击发行。
   - 控制台编译完成后，会自动打开微信开发者工具的上传界面。

2. **CLI 方式**:
   ```bash
   npm run build:mp-weixin
   ```

### 部署注意事项
- 确保 `manifest.json` 中的 AppID 正确且有权限上传。
- 检查 `uni_modules` 中的组件是否均为最新版或兼容版本。
- 生产环境务必关闭调试模式，并检查 API 域名是否已在微信后台配置合法域名。

---

## 6. 测试说明

目前项目未集成自动化测试框架（如 Jest 或 Cypress）。建议进行以下手动测试：

- **功能测试**：按照业务流程（发布 -> 浏览 -> 下单 -> 支付 -> 评价）进行全链路测试。
- **兼容性测试**：在 iOS 和 Android 真机上进行 UI 适配测试。
- **接口测试**：使用 Postman 或 Charles 抓包验证 `api/` 目录下的接口调用是否正常。

---

## 7. 贡献指南

### 代码提交规范
- 遵循 Semantic Versioning 规范。
- 提交信息格式：`type(scope): subject`
  - `feat`: 新功能
  - `fix`: 修复 Bug
  - `docs`: 文档变更
  - `style`: 代码格式调整
  - `refactor`: 代码重构

### 分支管理策略
- `main` / `master`: 主分支，保持稳定。
- `dev`: 开发分支，日常开发合并至此。
- `feature/*`: 功能分支，从 `dev` 切出，完成后合并回 `dev`。

### 问题反馈
如有 Bug 或建议，请创建 Issue 并详细描述复现步骤和环境信息。

---

## 8. 更新日志 (Changelog)

### [2025-12-12] 体验优化与 Bug 修复

#### **UI/UX 改进**
- **首页金刚区 (Icon Grid)**:
  - 修复了第二排图标重复的问题。
  - 为不同服务类别（宠物、搬家、健身、代驾）配置了专属图标和颜色，提升视觉识别度。
- **底部导航栏 (Tab Bar)**:
  - 优化了“发布”按钮设计，替换为醒目的红色圆形“+”号图标，符合用户操作直觉。
- **服务列表卡片**:
  - 优化价格显示，增强视觉冲击力。
  - 新增“实名认证”和“已缴保证金”信任标签。
  - 增加“立即预约” CTA 按钮，提升转化率。
- **搜索栏**:
  - 优化了搜索框文案，提供更具引导性的占位符（如“搜索你需要的服务（如：保洁）”）。
  - 微调了地址选择区域的布局间距。
- **吸顶分类 Tab**:
  - 选中状态增加了文字加粗效果，提升选中态的辨识度。

#### **功能与性能优化**
- **消息通知**:
  - 移除了遮挡核心操作区的消息弹窗 (Toast)，改为使用底部导航栏的红点/数字角标提示。
  - 优化了消息模拟逻辑，页面隐藏时自动停止模拟，减少资源消耗。