ai-c/team_page_redesign.md
2026-02-02 18:21:32 +08:00

2.2 KiB

Team Page Redesign & Integration

Overview

The "My Team" page (pages/team) has been redesigned to match the new Figma specifications, including a dynamic "Guardian Member" card and a modernized member list. The data integration has been updated to use real backend APIs for team statistics and referral lists.

Changes

1. UI Redesign (WXML & WXSS)

  • Guardian Card: Added a visual card at the top displaying the user's membership level and team stats.
    • Dynamic Title: Shows "Guardian Member", "VIP Member", etc. based on cardType.
    • Stats: Displays "Direct Referrals" and "Team Total".
  • Member List:
    • New card style for each member.
    • Shows Avatar, Name, Join Date, "First Referral" tag, and Contribution Amount.
    • Handles empty states and loading states.
  • Styling:
    • Implemented purple gradient themes.
    • Used app-icon for consistent iconography.
    • Refined spacing and typography.

2. Logic & Integration (JS)

  • Data Fetching:
    • api.commission.getStats: Fetches team statistics (todayReferrals, totalReferrals, totalContribution, cardType).
    • api.commission.getReferrals (via direct request): Fetches the list of direct referrals.
    • Robust Mapping: Added logic to handle potential API field variations (e.g., user.nickname vs userName, snake_case vs camelCase).
  • Navigation:
    • Added goDetail to navigate to pages/commission/commission for detailed performance breakdowns.
  • Dynamic Content:
    • cardTitle: Computed from cardType (e.g., 'guardian_card' -> '守护会员').

3. Profile Page Integration

  • Updated "Customer Management" section in pages/profile.
  • Replaced old cards with "My Team" and "Performance Data".
  • "Performance Data" displays the totalContribution fetched from commission stats.
  • Both cards navigate to the Team page for consistency.

API Consistency

  • Team Stats: Matches /api/commission?action=stats.
  • Referral List: Matches /api/commission?action=referrals.
  • Commission Details: Links to existing pages/commission which handles full commission records.

Files Modified

  • pages/team/team.wxml
  • pages/team/team.wxss
  • pages/team/team.js
  • pages/profile/profile.wxml
  • pages/profile/profile.wxss
  • pages/profile/profile.js