2.2 KiB
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".
- Dynamic Title: Shows "Guardian Member", "VIP Member", etc. based on
- 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-iconfor 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.nicknamevsuserName,snake_casevscamelCase).
- Navigation:
- Added
goDetailto navigate topages/commission/commissionfor detailed performance breakdowns.
- Added
- Dynamic Content:
cardTitle: Computed fromcardType(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
totalContributionfetched 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/commissionwhich handles full commission records.
Files Modified
pages/team/team.wxmlpages/team/team.wxsspages/team/team.jspages/profile/profile.wxmlpages/profile/profile.wxsspages/profile/profile.js