Files

T

后端 (Laravel 10 + Sanctum):
- RBAC 四层权限系统 (users→roles→permissions→menus)
- 门店隔离中间件 (BelongsToStore Trait + StoreIsolation Middleware)
- 操作日志中间件 (自动记录写操作)
- 权限检查中间件 (CheckPermission)
- 16张数据库表迁移 (系统基础+RBAC+字典+配置)
- 11个 Eloquent Model
- Auth API (登录/登出/用户信息)
- 系统设置模块 CRUD (门店/部门/职务/用户/角色/菜单/权限/字典/日志)
- 45条 RESTful API 路由
- InitSeeder 初始数据 (超管/角色/76权限/31菜单)

前端 (Vue 3 + Element Plus + Vite):
- Axios 请求封装 + Token 注入
- Pinia 状态管理 (user + permission store)
- 动态路由 (服务端菜单→前端路由自动生成)
- 后台布局 (侧边栏+顶栏+主内容区)
- 登录页 + 仪表盘首页
- 系统设置 7 个 CRUD 页面

技术方案文档 (7卷):
- 技术总览/数据库设计/API规范/RBAC设计/模块详设/小程序设计/部署方案

2026-03-13 19:52:09 +08:00

16 KiB

Raw Blame History

宫中有喜 — 微客宝小程序设计

一、概述

项	值
产品名称	宫中有喜·微客宝
类型	微信小程序
框架	uni-app (Vue 3)
目标用户	在住/潜在客户（产妇及家属）
核心功能	服务商城、月子餐、共伴成长、月嫂预约、学堂社区

二、页面架构

2.1 Tab 导航（底部 5 Tab）

┌──────────────────────────────────┐
│           微客宝小程序            │
├────┬────┬────┬────┬────┤
│ 首页 │ 服务 │ 成长 │ 学堂 │ 我的 │
└────┴────┴────┴────┴────┘

2.2 完整页面树

pages/
├── index/              # Tab1: 首页
│   └── index.vue       # 轮播 + 快捷入口 + 推荐 + 活动
│
├── service/            # Tab2: 服务
│   ├── index.vue       # 服务分类列表
│   ├── detail.vue      # 服务/套餐详情
│   ├── booking.vue     # 预约下单
│   ├── nanny/
│   │   ├── list.vue    # 月嫂列表
│   │   ├── detail.vue  # 月嫂详情
│   │   └── order.vue   # 月嫂预约
│   └── meal/
│       ├── today.vue   # 今日餐单
│       ├── week.vue    # 本周餐单
│       └── custom.vue  # 自选点餐
│
├── growth/             # Tab3: 共伴成长
│   ├── index.vue       # 成长首页（宝宝+妈妈）
│   ├── baby/
│   │   ├── records.vue # 宝宝护理记录
│   │   ├── chart.vue   # 宝宝数据图表
│   │   └── milestone.vue # 成长里程碑
│   └── mom/
│       ├── records.vue # 妈妈护理记录
│       └── chart.vue   # 妈妈健康图表
│
├── study/              # Tab4: 学堂
│   ├── index.vue       # 文章列表
│   ├── detail.vue      # 文章详情
│   └── community/
│       ├── index.vue   # 社区帖子列表
│       ├── detail.vue  # 帖子详情
│       └── post.vue    # 发帖
│
├── mine/               # Tab5: 我的
│   ├── index.vue       # 个人中心首页
│   ├── orders/
│   │   ├── list.vue    # 我的订单
│   │   └── detail.vue  # 订单详情
│   ├── account.vue     # 账户余额/储值卡
│   ├── coupons.vue     # 优惠券
│   ├── reviews.vue     # 我的评价
│   ├── collections.vue # 我的收藏
│   ├── messages.vue    # 消息通知
│   └── settings.vue    # 设置
│
├── auth/               # 认证
│   ├── login.vue       # 微信授权登录
│   └── bindPhone.vue   # 绑定手机号
│
├── pay/                # 支付
│   ├── cashier.vue     # 收银台
│   └── result.vue      # 支付结果
│
└── common/             # 公共页面
    ├── webview.vue     # 内嵌网页
    └── preview.vue     # 图片预览

三、核心页面设计

3.1 首页 (index)

┌────────────────────────────┐
│     [轮播图 Banner]         │
├────────────────────────────┤
│  📋公告栏（滚动）           │
├────┬────┬────┬────┤
│ 商城 │ 点餐 │ 月嫂 │ 更多 │  ← 快捷入口
├────┴────┴────┴────┤
│  ⭐ 热门服务推荐            │
│  ┌─────┐ ┌─────┐          │
│  │ 项目1│ │ 项目2│          │
│  └─────┘ └─────┘          │
├────────────────────────────┤
│  🎉 精彩活动                │
│  ┌──────────────────┐      │
│  │ 活动卡片           │      │
│  └──────────────────┘      │
├────────────────────────────┤
│  📖 孕妈课堂（文章推荐）    │
│  ┌──────────────────┐      │
│  │ 文章卡片           │      │
│  └──────────────────┘      │
└────────────────────────────┘

数据来源：

轮播图：GET /client/home/banners
公告：GET /client/home/notices
推荐服务：GET /client/home/services
活动：GET /client/home/activities
文章推荐：GET /client/articles?recommend=1&limit=3

3.2 共伴成长页

┌────────────────────────────┐
│  [宝宝头像]  小明  出生第15天  │
│  体重: 3.5kg  身长: 50cm    │
├────────────────────────────┤
│  Tab: [护理记录] [数据图表] [里程碑] │
├────────────────────────────┤
│  今日护理记录                │
│  09:00 喂奶 120ml ✓        │
│  09:30 换尿布 ✓            │
│  10:00 体温测量 36.8°C ✓   │
│  11:00 洗澡 ✓              │
│  12:00 喂奶 100ml ✓        │
│  ...                       │
├────────────────────────────┤
│  切换至 [妈妈] 查看         │
└────────────────────────────┘

图表使用 uCharts 或 ECharts 小程序版，展示：

体重增长曲线
喂奶量趋势
睡眠时长统计
健康指标折线图

3.3 月子餐页

┌────────────────────────────┐
│  📅 3月15日 周五  今日餐单   │
├────────────────────────────┤
│  🌅 早餐 07:30              │
│  ┌────────────────────┐    │
│  │ [图] 红枣小米粥     │    │
│  │ [图] 蒸蛋           │    │
│  │ [图] 核桃酥         │    │
│  └────────────────────┘    │
│  [👍已送达] [💬反馈]        │
├────────────────────────────┤
│  🍵 早点心 10:00            │
│  ┌────────────────────┐    │
│  │ [图] 银耳莲子汤     │    │
│  └────────────────────┘    │
│  [⏳待送达]                 │
├────────────────────────────┤
│  🌞 午餐 12:00             │
│  ┌────────────────────┐    │
│  │ [图] 黄花菜炖鸡     │    │
│  │ [图] 时令蔬菜       │    │
│  │ [图] 乌鸡汤         │    │
│  └────────────────────┘    │
│  [🔄申请换餐]              │
├────────────────────────────┤
│  🍵🌙🌙 午点/晚餐/晚点... │
├────────────────────────────┤
│  [查看本周餐单] [自选点餐]  │
└────────────────────────────┘

四、组件设计

4.1 公共组件

components/
├── NavBar.vue           # 自定义导航栏
├── TabBar.vue           # 底部导航（自定义实现）
├── EmptyState.vue       # 空状态占位
├── LoadMore.vue         # 加载更多/到底了
├── PriceTag.vue         # 价格显示（¥ 格式化）
├── StarRating.vue       # 评分星级
├── CountDown.vue        # 倒计时
├── ImageUploader.vue    # 图片上传
├── DatePicker.vue       # 日期选择
├── OrderCard.vue        # 订单卡片
├── ServiceCard.vue      # 服务项目卡片
├── ArticleCard.vue      # 文章卡片
├── NannyCard.vue        # 月嫂卡片
├── MealCard.vue         # 菜品卡片
└── StatusTag.vue        # 状态标签

4.2 业务组件

components/business/
├── PayButton.vue        # 支付按钮（封装微信支付）
├── PhoneAuth.vue        # 手机号授权组件
├── ShareCard.vue        # 分享卡片生成
├── CouponSelector.vue   # 优惠券选择
├── ServiceBooking.vue   # 服务预约表单
└── ReviewForm.vue       # 评价表单（星级+文字+图片）

五、状态管理 (Pinia)

stores/
├── user.js              # 用户信息、Token、登录状态
├── cart.js              # 购物车/预约车
├── order.js             # 订单状态
└── app.js               # 全局配置（门店信息、系统参数）

5.1 用户状态

// stores/user.js
export const useUserStore = defineStore('user', {
    state: () => ({
        token: '',
        userInfo: null,      // 微信用户信息
        customerInfo: null,  // 客户业务信息
        isLoggedIn: false,
        storeId: null,       // 所属门店
    }),
    actions: {
        async wechatLogin(code) { ... },
        async bindPhone(encryptedData, iv) { ... },
        async fetchProfile() { ... },
        logout() { ... },
    }
})

六、API 封装

api/
├── request.js           # 请求封装（baseURL, 拦截器, Token注入）
├── auth.js              # 登录/注册
├── home.js              # 首页数据
├── service.js           # 服务/套餐
├── meal.js              # 月子餐
├── nanny.js             # 月嫂
├── growth.js            # 共伴成长
├── order.js             # 订单
├── pay.js               # 支付
├── article.js           # 文章/学堂
├── community.js         # 社区
└── user.js              # 个人中心

6.1 请求封装

// api/request.js
const BASE_URL = 'https://xxx.com/api/v1/client'

const request = (options) => {
    const userStore = useUserStore()
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data,
            header: {
                'Authorization': `Bearer ${userStore.token}`,
                'Content-Type': 'application/json'
            },
            success: (res) => {
                if (res.data.code === 0) {
                    resolve(res.data.data)
                } else if (res.data.code >= 40100 && res.data.code < 40200) {
                    // Token 过期，跳转登录
                    userStore.logout()
                    uni.navigateTo({ url: '/pages/auth/login' })
                    reject(res.data)
                } else {
                    uni.showToast({ title: res.data.message, icon: 'none' })
                    reject(res.data)
                }
            },
            fail: reject
        })
    })
}

export default request

七、微信能力集成

7.1 登录流程

用户打开小程序
  ↓
wx.login() 获取 code
  ↓
POST /client/auth/wechat-login { code }
  ↓
后端：code → openid/unionid → 查找/创建用户 → 返回 token
  ↓
若无手机号 → 弹出绑定手机号
  ↓
getPhoneNumber → 解密 → 绑定
  ↓
登录完成，进入首页

7.2 微信支付流程

用户点击支付
  ↓
POST /client/pay/wechat { order_id, ... }
  ↓
后端调用微信统一下单 → 返回支付参数
  ↓
前端 wx.requestPayment(payParams)
  ↓
支付成功/失败 → 跳转结果页
  ↓
后端接收微信回调 → 更新订单状态

7.3 分享

// 页面分享配置
onShareAppMessage() {
    return {
        title: '宫中有喜·月子会所',
        path: '/pages/index/index?inviter=' + userId,
        imageUrl: '/static/share-cover.png'
    }
}

onShareTimeline() {
    return {
        title: '宫中有喜·专业月子护理',
        imageUrl: '/static/share-cover.png'
    }
}

7.4 订阅消息

模板	触发场景
订单状态通知	下单成功、支付成功、服务完成
服务预约提醒	预约确认、服务前1小时提醒
餐单推送	每日餐单发布
护理日报	每日护理小结
活动通知	新活动上线

7.5 其他微信能力

能力	用途
地图	门店定位、导航
客服	在线客服对话
图片选择/预览	评价上传图片
扫码	扫码签到、扫码支付
生物认证	敏感操作验证

八、UI 设计规范

8.1 色彩

色彩	色值	用途
主色	#E8A87C	温暖橘粉，品牌色
辅色	#D4A574	暖棕，辅助强调
成功	#67C23A	完成/送达
警告	#E6A23C	提醒/待处理
危险	#F56C6C	异常/取消
文字主色	#303133	正文
文字次色	#909399	辅助说明
背景色	#F5F5F5	页面背景
卡片色	#FFFFFF	内容卡片

8.2 字体

场景	大小	权重
大标题	36rpx	bold
标题	32rpx	bold
正文	28rpx	normal
辅助文字	24rpx	normal
价格	36rpx	bold

8.3 间距

场景	值
页面边距	32rpx
卡片间距	24rpx
卡片内边距	24rpx
元素间距	16rpx
紧凑间距	8rpx

8.4 圆角

场景	值
按钮	40rpx（胶囊）
卡片	16rpx
图片	12rpx
标签	8rpx

九、性能优化

策略	说明
分包加载	主包 < 2MB，子包按 Tab 分
图片懒加载	列表页图片按需加载
数据缓存	首页数据缓存 5 分钟
骨架屏	列表页加载时显示骨架
防抖节流	搜索输入防抖、按钮点击节流
虚拟列表	长列表使用 recycle-view

9.1 分包配置

{
    "pages": [
        "pages/index/index",
        "pages/service/index",
        "pages/growth/index",
        "pages/study/index",
        "pages/mine/index"
    ],
    "subPackages": [
        {
            "root": "pages/service",
            "pages": ["detail", "booking", "nanny/list", "nanny/detail", "nanny/order", "meal/today", "meal/week", "meal/custom"]
        },
        {
            "root": "pages/growth",
            "pages": ["baby/records", "baby/chart", "baby/milestone", "mom/records", "mom/chart"]
        },
        {
            "root": "pages/study",
            "pages": ["detail", "community/index", "community/detail", "community/post"]
        },
        {
            "root": "pages/mine",
            "pages": ["orders/list", "orders/detail", "account", "coupons", "reviews", "collections", "messages", "settings"]
        },
        {
            "root": "pages/auth",
            "pages": ["login", "bindPhone"]
        },
        {
            "root": "pages/pay",
            "pages": ["cashier", "result"]
        }
    ]
}

十、安全设计

措施	说明
Token 存储	uni.setStorageSync 加密存储
接口签名	敏感接口请求签名（timestamp + nonce + sign）
HTTPS	所有接口强制 HTTPS
输入校验	前端校验 + 后端校验双重保障
敏感数据	手机号脱敏显示（138****8000）
支付安全	服务端生成支付参数，前端不接触密钥
防重复提交	支付/下单按钮加 loading + 接口幂等

16 KiB Raw Blame History Unescape Escape

宫中有喜 — 微客宝小程序设计

一、概述

二、页面架构

2.1 Tab 导航（底部 5 Tab）

2.2 完整页面树

三、核心页面设计

3.1 首页 (index)

3.2 共伴成长页

3.3 月子餐页

四、组件设计

4.1 公共组件

4.2 业务组件

五、状态管理 (Pinia)

5.1 用户状态

六、API 封装

6.1 请求封装

七、微信能力集成

7.1 登录流程

7.2 微信支付流程

7.3 分享

7.4 订阅消息

7.5 其他微信能力

八、UI 设计规范

8.1 色彩

8.2 字体

8.3 间距

8.4 圆角

九、性能优化

9.1 分包配置

十、安全设计

16 KiB

Raw Blame History