yuezi-saas/docs/06-miniapp-design.md

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

## 一、概述

| 项 | 值 |
|---|---|
| 产品名称 | 宫中有喜·微客宝 |
| 类型 | 微信小程序 |
| 框架 | 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 用户状态

```javascript
// 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 请求封装

```javascript
// 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 分享

```javascript
// 页面分享配置
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 分包配置

```json
{
    "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 + 接口幂等 |