feat: make referral list collapsible via header tap

pages/promote/promote.js

@@ -20,7 +20,9 @@ Page({
     defaultAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&auto=format&fit=crop&q=60',
     loading: false,
     // 分享配置
-    shareConfig: null
+    shareConfig: null,
+    // 推广列表收放状态
+    isExpanded: false
   },
 
   onLoad() {
@@ -41,6 +43,16 @@ Page({
     this.loadShareConfig()
   },
 
+  /**
+   * 切换推广列表收放状态
+   */
+  toggleExpand() {
+    if (!this.data.referrals || this.data.referrals.length <= 3) return
+    this.setData({
+      isExpanded: !this.data.isExpanded
+    })
+  },
+
   /**
    * 加载分享配置
    */

pages/promote/promote.wxml

@@ -33,20 +33,23 @@
   <view class="main-body">
       <!-- Referrals List Panel -->
       <view class="referral-panel">
-          <view class="panel-header">
+          <view class="panel-header {{referrals.length > 3 ? 'clickable' : ''}}" bindtap="toggleExpand">
               <view class="header-left">
                   <view class="purple-dot"></view>
                   <text class="panel-title">推广列表</text>
+                  <view wx:if="{{referrals.length > 3}}" class="toggle-triangle {{isExpanded ? 'expanded' : ''}}"></view>
               </view>
           </view>
           
           <view class="user-list">
              <!-- If empty show empty state -->
              <view wx:if="{{referrals.length === 0}}" class="empty-state">
-                 <text>暂无推广用户</text>
+                 <image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
+                 <text class="empty-text">暂无推广用户</text>
              </view>
              
              <!-- User Item -->
+             <block wx:if="{{isExpanded}}">
                  <view class="user-row" wx:for="{{referrals}}" wx:key="userId">
                      <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill"></image>
                      <view class="user-info">
@@ -67,6 +70,30 @@
                          </view>
                      </view>
                  </view>
+             </block>
+             <!-- 默认显示前3条 -->
+             <block wx:else>
+                 <view class="user-row" wx:for="{{referrals}}" wx:key="userId" wx:if="{{index < 3}}">
+                     <image class="user-avatar" src="{{item.userAvatar || defaultAvatar}}" mode="aspectFill"></image>
+                     <view class="user-info">
+                         <view class="user-main">
+                             <text class="user-name">{{item.userName}}</text>
+                             <text class="user-level">{{item.level}}</text>
+                         </view>
+                         <view class="user-sub">加入时间: {{item.joinedAt}}</view>
+                     </view>
+                     <view class="user-stats">
+                         <view class="stat-item">
+                             <text class="stat-label">推荐</text>
+                             <text class="stat-value">{{item.referralCount}}</text>
+                         </view>
+                         <view class="stat-item">
+                             <text class="stat-label">业绩</text>
+                             <text class="stat-value">¥{{item.performance}}</text>
+                         </view>
+                     </view>
+                 </view>
+             </block>
           </view>
       </view>
 

pages/promote/promote.wxss

@@ -150,6 +150,10 @@
     padding-top:42rpx;
 }
 
+.panel-header.clickable:active {
+    opacity: 0.85;
+}
+
 .header-left {
     display: flex;
     align-items: center;
@@ -169,6 +173,20 @@
     color: #111827;
 }
 
+.toggle-triangle {
+    width: 0;
+    height: 0;
+    border-left: 10rpx solid transparent;
+    border-right: 10rpx solid transparent;
+    border-top: 12rpx solid #9CA3AF;
+    margin-left: 6rpx;
+    transition: transform 0.2s ease;
+}
+
+.toggle-triangle.expanded {
+    transform: rotate(180deg);
+}
+
 /* Referral List Styles */
 .user-list {
   display: flex;
@@ -176,6 +194,26 @@
   gap: 24rpx;
 }
 
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48rpx 0;
+}
+
+.empty-icon {
+    width: 160rpx;
+    height: 160rpx;
+    margin-bottom: 16rpx;
+    opacity: 0.5;
+}
+
+.empty-text {
+    font-size: 28rpx;
+    color: #9CA3AF;
+}
+
 .user-row {
   display: flex;
   align-items: center;