更新记录

1.0.0（2026-02-03） 下载此版本

首页

平台兼容性

美甲美睫小程序使用说明

快速开始

1. 安装 uni-ui 组件库

项目使用了 uni-icons 组件，需要先安装 uni-ui 组件库：

方法一：通过 HBuilderX 插件市场安装

  1. 打开 HBuilderX
  2. 工具 -> 插件安装
  3. 搜索 "uni-ui" 并安装

方法二：通过 npm 安装

npm install @dcloudio/uni-ui

2. 配置 TabBar 图标

在 static/tabbar/ 目录下放置以下图标文件：

  • home.png / home-active.png - 首页图标
  • booking.png / booking-active.png - 预约图标
  • mine.png / mine-active.png - 我的图标

图标规格：

  • 尺寸：81px × 81px
  • 格式：PNG（支持透明）
  • 未选中颜色：#999999
  • 选中颜色：#FF6B9D

临时方案：如果没有图标，可以：

  1. 使用在线图标生成工具（如 iconfont.cn）
  2. 暂时注释掉 pages.json 中的 tabBar 配置
  3. 使用纯文字导航

3. 配置 API 地址

编辑 utils/request.js 文件，修改 API 基础地址：

const BASE_URL = 'https://your-api-domain.com' // 替换为实际地址

4. 配置小程序 AppID

编辑 manifest.json 文件，添加小程序 AppID：

{
  "mp-weixin": {
    "appid": "your-appid-here"
  }
}

功能说明

首页功能

  • ✅ 轮播图展示（可点击）
  • ✅ 8个服务分类导航
  • ✅ 热门服务横向滚动
  • ✅ 限时优惠活动
  • ✅ 推荐技师展示
  • ✅ 下拉刷新

预约功能

  • ✅ 服务选择（6种服务）
  • ✅ 技师选择（4位技师）
  • ✅ 日期选择（未来7天）
  • ✅ 时间段选择（9:00-20:00，每30分钟一个时段）
  • ✅ 预约确认和提交

我的功能

  • ✅ 用户信息展示
  • ✅ 订单统计（待服务、已完成、全部）
  • ✅ 订单状态快速入口
  • ✅ 功能菜单导航
  • ✅ 快捷功能入口

其他页面

  • ✅ 服务详情页
  • ✅ 订单列表页（支持状态筛选）
  • ✅ 订单详情页

数据说明

当前使用模拟数据

所有页面目前使用模拟数据，实际开发时需要：

  1. 替换模拟数据：将各页面中的 data() 数据替换为 API 请求
  2. 实现登录功能：在 pages/mine/mine.vue 中实现真实的登录逻辑
  3. 接入支付：在订单相关页面接入微信支付
  4. 图片资源：替换所有占位图片为真实图片

示例：接入真实 API

在 pages/index/index.vue 中：

import { get } from '@/utils/request'
import { API } from '@/config/api'

export default {
  async onLoad() {
    await this.loadData()
  },
  methods: {
    async loadData() {
      try {
        // 获取轮播图
        const banners = await get(API.BANNER_LIST)
        this.banners = banners

        // 获取热门服务
        const services = await get(API.SERVICE_LIST, { type: 'hot' })
        this.hotServices = services

        // 获取推荐技师
        const technicians = await get(API.TECHNICIAN_LIST, { recommend: true })
        this.technicians = technicians
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    }
  }
}

样式定制

主题颜色

主要颜色定义在 uni.scss 中，也可以在各页面样式中修改：

  • 主色调：#FF6B9D (粉色)
  • 辅助色：#FFB6C1 (浅粉色)
  • 成功色：#4CD964 (绿色)
  • 警告色：#FFD700 (金色)

修改主题色

全局搜索 #FF6B9D 替换为你想要的颜色值。

常见问题

1. uni-icons 组件不显示

解决方案：

  • 确保已安装 uni-ui 组件库
  • 检查 HBuilderX 版本是否为 3.0+
  • 尝试重新编译项目

2. TabBar 图标不显示

解决方案：

  • 检查图标文件是否存在于 static/tabbar/ 目录
  • 检查图标文件路径是否正确
  • 确保图标尺寸为 81px × 81px

3. 页面跳转失败

解决方案：

  • 检查 pages.json 中页面路径是否正确
  • 确保目标页面已创建
  • 检查路由参数是否正确传递

4. 样式不生效

解决方案：

  • 检查 SCSS 是否正确编译
  • 清除缓存重新编译
  • 检查样式作用域（scoped）

开发建议

  1. 使用 HBuilderX 开发：获得最佳开发体验
  2. 真机调试：定期在真机上测试功能
  3. 代码规范：遵循 Vue 3 和 uni-app 最佳实践
  4. 性能优化：注意图片大小和网络请求优化
  5. 用户体验：添加加载状态和错误提示

后续开发

建议按以下顺序进行：

  1. ✅ 完成基础页面和UI（已完成）
  2. ⏳ 接入真实 API 接口
  3. ⏳ 实现用户登录注册
  4. ⏳ 接入微信支付
  5. ⏳ 添加评价功能
  6. ⏳ 实现搜索功能
  7. ⏳ 添加消息推送
  8. ⏳ 性能优化和测试

技术支持

如有问题，请参考：

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT License

Copyright (c) 2025

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

评论列表 撰写评论 向官方投诉

暂无用户评论。