143 lines
3.7 KiB
Markdown
143 lines
3.7 KiB
Markdown
# 优艺家沙发翻新小程序
|
||
|
||
## 项目简介
|
||
|
||
基于 uni-app x 开发的沙发翻新案例展示小程序，支持微信小程序、H5等多端运行。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**：uni-app x (Vue 3 + UTS)
|
||
- **样式**：SCSS
|
||
- **状态管理**：组合式 API (Composition API)
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
├── api/ # API接口定义
|
||
│ └── index.uts # 接口统一管理
|
||
├── components/ # 公共组件
|
||
│ ├── case-card/ # 案例卡片组件
|
||
│ ├── before-after/ # 翻新前后对比组件
|
||
│ ├── nav-bar/ # 自定义导航栏
|
||
│ ├── section-header/ # 区块标题组件
|
||
│ └── service-card/ # 服务卡片组件
|
||
├── pages/ # 页面文件
|
||
│ ├── index/ # 首页
|
||
│ ├── cases/ # 案例模块
|
||
│ │ ├── list.uvue # 案例列表
|
||
│ │ └── detail.uvue # 案例详情
|
||
│ ├── service/ # 服务介绍
|
||
│ ├── about/ # 关于我们
|
||
│ ├── booking/ # 预约咨询
|
||
│ └── user/ # 用户中心
|
||
├── static/ # 静态资源
|
||
│ ├── icons/ # 图标文件
|
||
│ ├── images/ # 图片资源
|
||
│ └── mock/ # Mock图片
|
||
├── utils/ # 工具函数
|
||
│ ├── config.uts # 配置文件
|
||
│ ├── request.uts # 网络请求封装
|
||
│ └── mock.uts # Mock数据
|
||
├── pages.json # 页面配置
|
||
├── manifest.json # 应用配置
|
||
└── uni.scss # 全局样式变量
|
||
```
|
||
|
||
## 功能模块
|
||
|
||
### 1. 首页
|
||
- 轮播图展示
|
||
- 服务类型入口
|
||
- 公司优势展示
|
||
- 热门案例推荐
|
||
- 预约入口
|
||
|
||
### 2. 案例展示
|
||
- 分类筛选（皮沙发/布艺沙发/功能沙发等）
|
||
- 案例列表（瀑布流/列表展示）
|
||
- 案例详情（翻新前后对比、详细信息）
|
||
|
||
### 3. 服务介绍
|
||
- 服务类型说明
|
||
- 服务流程展示
|
||
- 材质说明
|
||
- 常见问题
|
||
|
||
### 4. 预约咨询
|
||
- 预约表单
|
||
- 图片上传
|
||
- 表单验证
|
||
|
||
### 5. 用户中心
|
||
- 用户登录
|
||
- 我的预约
|
||
- 我的收藏
|
||
- 设置功能
|
||
|
||
## 开发说明
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
# 使用 HBuilderX 打开项目
|
||
```
|
||
|
||
### 运行项目
|
||
|
||
1. 使用 HBuilderX 打开项目
|
||
2. 点击运行 -> 运行到小程序模拟器 -> 微信开发者工具
|
||
|
||
### Mock 数据
|
||
|
||
项目默认使用 Mock 数据，修改 `utils/config.uts` 中的 `useMock` 变量：
|
||
|
||
```typescript
|
||
// 是否使用Mock数据
|
||
export const useMock = true // 开发阶段
|
||
export const useMock = false // 对接后端
|
||
```
|
||
|
||
### 后端接口
|
||
|
||
项目已预留后端接口，接口定义在 `api/index.uts` 中：
|
||
|
||
| 接口 | 方法 | 说明 |
|
||
|------|------|------|
|
||
| /banners | GET | 获取轮播图 |
|
||
| /cases | GET | 获取案例列表 |
|
||
| /cases/:id | GET | 获取案例详情 |
|
||
| /cases/hot | GET | 获取热门案例 |
|
||
| /service/process | GET | 获取服务流程 |
|
||
| /company/info | GET | 获取公司信息 |
|
||
| /booking | POST | 提交预约 |
|
||
| /user/info | GET | 获取用户信息 |
|
||
| /user/favorites | GET/POST | 收藏管理 |
|
||
|
||
## 后续开发计划
|
||
|
||
### 前端待完善
|
||
- [ ] 添加 TabBar 图标
|
||
- [ ] 添加案例图片资源
|
||
- [ ] 完善图片预览功能
|
||
- [ ] 添加下拉刷新
|
||
- [ ] 完善分享功能
|
||
- [ ] 添加骨架屏加载
|
||
|
||
### 后端开发
|
||
- [ ] 用户认证模块
|
||
- [ ] 案例管理接口
|
||
- [ ] 预约管理接口
|
||
- [ ] 文件上传接口
|
||
- [ ] 管理后台
|
||
|
||
## 注意事项
|
||
|
||
1. 运行前请确保已安装 HBuilderX
|
||
2. 微信小程序需配置 appid
|
||
3. 图片资源需自行准备
|
||
4. 正式上线前关闭 Mock 数据
|
||
|
||
## 联系方式
|
||
|
||
如有问题，请联系开发团队。
|