medical-mall/doc_mall/reports/PAYMENT_PAGE_GUIDE.md

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).