3.7 KiB
3.7 KiB
优艺家沙发翻新小程序
项目简介
基于 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. 用户中心
- 用户登录
- 我的预约
- 我的收藏
- 设置功能
开发说明
安装依赖
# 使用 HBuilderX 打开项目
运行项目
- 使用 HBuilderX 打开项目
- 点击运行 -> 运行到小程序模拟器 -> 微信开发者工具
Mock 数据
项目默认使用 Mock 数据，修改 utils/config.uts 中的 useMock 变量：
// 是否使用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 图标
- 添加案例图片资源
- 完善图片预览功能
- 添加下拉刷新
- 完善分享功能
- 添加骨架屏加载
后端开发
- 用户认证模块
- 案例管理接口
- 预约管理接口
- 文件上传接口
- 管理后台
注意事项
- 运行前请确保已安装 HBuilderX
- 微信小程序需配置 appid
- 图片资源需自行准备
- 正式上线前关闭 Mock 数据
联系方式
如有问题，请联系开发团队。