54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
# 技术开发文档
|
||
|
||
## 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` 生命周期钩子。
|
||
```typescript
|
||
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列)。
|