adminzy/ai-c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make referral list collapsible via header tap

Browse Source
This commit is contained in:
xin 2026-02-05 11:47:28 +08:00
parent 5e63193f9f
commit 615a07fd08
3 changed files with 97 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/promote/promote.js
View File

@ -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
})
},
/**
* 加载分享配置
*/

65
pages/promote/promote.wxml
View File

@ -33,40 +33,67 @@
<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 -->
<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">
<view class="user-main">
<text class="user-name">{{item.userName}}</text>
<text class="user-level">{{item.level}}</text>
<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">
<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-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 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>
</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>

38
pages/promote/promote.wxss
View File

@ -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;