# Payment Page Documentation

**File Path:** `pages/mall/consumer/payment.uvue`

## 1. Overview
The Payment Page is the final step in the checkout process. It presents the user with the order total, allows selection of a payment method, and processes the transaction. It is fully integrated with the Supabase backend to ensure order status consistency.

## 2. Page Parameters (`onLoad`)

The page expects the following parameters when navigating to it:

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `orderId` | String | **Yes** | The UUID of the order created in the previous step. |
| `amount` | Number | No | The total amount to pay. Defaults to fetching from DB if omitted. |
| `productAmount` | Number | No | Subtotal for products (for display). |
| `deliveryFee` | Number | No | Shipping cost (for display). |
| `discountAmount` | Number | No | Any discounts applied (for display). |

## 3. Data Integration (Supabase)

The page uses `supabaseService.uts` to interact with the database.

### 3.1 Loading Order Information
- **Method:** `supabaseService.getOrderDetail(orderId)`
- **Behavior:** Fetches `ml_orders` data.
- **Failover:** If DB load fails, falls back to `options.amount` or generates a mock Order No.

### 3.2 Loading User Balance
- **Method:** `supabaseService.getUserBalance()`
- **Behavior:** Fetches the current user's wallet balance to determine if "Balance Payment" is viable.

### 3.3 Processing Payment
- **Method:** `supabaseService.payOrder(orderId, method, amount)`
- **Updates Performed:**
    - Sets `order_status` to `2` (Pending Delivery / Paid).
    - Sets `payment_status` to `1` (Success).
    - Sets `payment_method` (e.g., 'wechat', 'balance').
    - Sets `payment_time`.

## 4. Key Features

### 4.1 Payment Methods
Supported methods (configured in `loadPaymentMethods`):
1.  **WeChat Pay** (Simulated SDK)
2.  **Alipay** (Simulated SDK)
3.  **Balance Payment**
    - Checks if `userBalance >= amount`.
    - Requires 6-digit password input.
    - Password verification is currently simulated.
4.  **Bank Card** (Simulated)

### 4.2 User Interaction
- **Password Input:** A custom 6-digit dot display and numeric keypad overlay appear when "Balance Payment" is selected.
- **Interception:** `onBackPress` is intercepted to warn the user that cancelling will save the order as "Pending Payment".

## 5. State Management

- **Success Flow:**
    1. `confirmPayment` validates inputs (balance, password).
    2. Calls `payOrder` API.
    3. Updates local storage `orders` cache (backup).
    4. Emits `orderUpdated` global event (for Profile page refresh).
    5. Redirects to `/pages/mall/consumer/payment-success`.

- **Cancellation Flow:**
    1. User attempts to go back.
    2. Modal prompts for confirmation.
    3. On confirm, acts as "Pending Payment" (Status remains `1`).
    4. Returns to previous page.

## 6. Future Improvements (TODO)
- **Real Payment SDK:** Integrate actual `uni.requestPayment` for WeChat/Alipay.
- **Server-Side Verification:** Move password verification to a Supabase Edge Function instead of frontend simulation.
- **Inventory Lock:** Ensure inventory is deducted atomically on the server side (currently simulated or implicit).