medical-mall/doc_mall/consumer/技术开发文档.md

技术开发文档

1. 架构设计

项目采用 MVVM 架构，View 层为 .uvue 文件，Model/Service 层主要由 utils/supabaseService.uts 承担，负责与 Supabase 进行数据交互。

2. 核心模块实现

2.1 首页 (index.uvue)

• UI 组件: 使用 .category-tabs-pills 实现胶囊式选项卡切换。解决在移动端 flex 布局默认方向问题，显式设置 flex-direction: row。
• 动态布局: 监听 statusBarHeight，动态调整内容区域的 marginTop，防止被自定义导航栏遮挡。
• 数据加载:
  • loadCategories() 与 loadBrands() 获取数据后调用 .sort(() => Math.random() - 0.5) 实现随机排序。
  • 品牌点击事件 switchBrand 使用 uni.navigateTo 跳转至搜索页，携带参数 type=brand。

2.2 搜索页 (search.uvue)

• 自动搜索逻辑: 在 onLoad 或 initPage 中检查页面参数 options。
  • 若 options.type === 'brand'，则直接调用 performSearch()，并设置 showResults = true，跳过手动输入步骤。
• 数据源: supabaseService.searchProducts 支持按销量、价格排序。

2.3 订单导航拦截 (orders.uvue)

• 问题: 登录后跳转至订单页，点击返回键可能回到登录页。
• 方案: 实现 onBackPress 生命周期钩子。

  onBackPress((options) => {
    if (options.from === 'navigateBack') {
      // 检查路由栈，若需拦截则跳转至 Profile
      uni.switchTab({ url: '/pages/mall/consumer/profile' })
      return true
    }
    return false
  })
  

2.4 钱包与提现 (wallet.uvue / withdraw.uvue)

• 数据交互:
  • getWalletBalance(): 获取 ak_wallet 表余额。
  • withdraw(): 调用 Supabase RPC withdraw_balance (需在数据库定义该函数) 或直接操作余额表（视后端实现而定，建议使用 RPC 保证事务原子性）。

3. 数据库交互 (Supabase)

主要涉及的表结构：

• ml_products: 商品主表
• ml_brands: 品牌表
• ml_categories: 分类表
• ak_wallet: 用户钱包表
• ml_orders: 订单表

3.1 数据脚本

请参考 doc_mall/consumer/sql/ 目录下的 SQL 脚本进行数据初始化：

• 05_insert_brand_products.sql: 自动为每个品牌生成 12 个测试商品。

4. UI 适配指南

• 状态栏适配: 所有自定义导航栏页面均需获取 uni.getSystemInfoSync().statusBarHeight 并设置顶部内边距。
• 响应式: 使用媒体查询 (@media) 适配手机、平板及桌面端网格列数 (2列 -> 6列)。