Files
soul/miniprogram/pages/referral/referral.wxml
卡若 a228911170 推广中心优化 + 用户资料功能
1. 推广中心优化:
   - 增加"待购买"、"已过期"统计
   - 访问量单独显示
   - 移除10元提现门槛,有收益即可提现
   - 复制文案去掉"专属邀请码"

2. 我的页面:
   - 支持获取微信头像(原生能力)
   - 支持获取微信昵称
   - 新增用户更新API

3. 后台API:
   - referral/data返回expiredCount和expiredUsers
   - 新增user/update接口同步用户信息
2026-01-29 11:35:56 +08:00

224 lines
9.0 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--分销中心 - 按照Web版本1:1还原-->
<view class="page">
<!-- 导航栏 -->
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
<view class="nav-back" bindtap="goBack">
<text class="back-icon"></text>
</view>
<text class="nav-title">推广中心</text>
<view class="nav-right">
<view class="nav-btn" bindtap="showNotification">🔔</view>
<view class="nav-btn" bindtap="showSettings">⚙️</view>
</view>
</view>
<view style="height: {{statusBarHeight + 44}}px;"></view>
<view class="content">
<!-- 过期提醒横幅 -->
<view class="expiring-banner" wx:if="{{expiringCount > 0}}">
<view class="banner-icon">⚠️</view>
<view class="banner-content">
<text class="banner-title">{{expiringCount}} 位用户绑定即将过期</text>
<text class="banner-desc">30天内未付款将解除绑定关系</text>
</view>
</view>
<!-- 收益卡片 -->
<view class="earnings-card">
<view class="earnings-bg"></view>
<view class="earnings-main">
<view class="earnings-header">
<view class="earnings-left">
<view class="wallet-icon">💰</view>
<view class="earnings-info">
<text class="earnings-label">累计收益</text>
<text class="commission-rate">{{shareRate}}% 返利</text>
</view>
</view>
<view class="earnings-right">
<text class="earnings-value">¥{{earnings}}</text>
<text class="pending-text">待结算: ¥{{pendingEarnings}}</text>
</view>
</view>
<view class="earnings-detail">
<text class="detail-item">已提现: ¥{{withdrawnEarnings}}</text>
</view>
<view class="withdraw-btn {{pendingEarnings <= 0 ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
{{pendingEarnings <= 0 ? '暂无收益' : '立即提现 ¥' + pendingEarnings}}
</view>
</view>
</view>
<!-- 核心数据统计(重点可见数据) -->
<view class="stats-grid">
<view class="stat-card highlight">
<text class="stat-value brand">{{bindingCount}}</text>
<text class="stat-label">绑定中</text>
<text class="stat-tip">当前有效绑定</text>
</view>
<view class="stat-card highlight">
<text class="stat-value gold">{{paidCount}}</text>
<text class="stat-label">已付款</text>
<text class="stat-tip">成功转化</text>
</view>
<view class="stat-card">
<text class="stat-value orange">{{unboughtCount}}</text>
<text class="stat-label">待购买</text>
<text class="stat-tip">绑定未付款</text>
</view>
<view class="stat-card">
<text class="stat-value gray">{{expiredCount}}</text>
<text class="stat-label">已过期</text>
<text class="stat-tip">绑定已失效</text>
</view>
</view>
<!-- 访问量统计 -->
<view class="visit-stat">
<text class="visit-label">总访问量</text>
<text class="visit-value">{{visitCount}}</text>
<text class="visit-tip">人通过你的链接进入</text>
</view>
<!-- 推广规则 -->
<view class="rules-card">
<view class="rules-header">
<view class="rules-icon">📋</view>
<text class="rules-title">推广规则</text>
</view>
<view class="rules-list">
<text class="rule-item">• <text class="brand">链接带ID</text>:谁发的链接,进的人就绑谁</text>
<text class="rule-item">• <text class="brand">一级、一月</text>只有一级分销绑定有效期30天</text>
<text class="rule-item">• <text class="orange">长期不发</text>:别人发得多,过期后客户会被「抢走」</text>
<text class="rule-item">• <text class="gold">每天发</text>:持续发的人绑定续期,收益越来越高</text>
<text class="rule-item">• <text class="brand">{{shareRate}}%给分发</text>:好友付款后,你得 {{shareRate}}% 收益</text>
</view>
</view>
<!-- 绑定用户列表 -->
<view class="binding-card">
<view class="binding-header" bindtap="toggleBindingList">
<view class="binding-title">
<text class="binding-icon">👥</text>
<text class="title-text">绑定用户</text>
<text class="binding-count">({{totalBindings}})</text>
</view>
<text class="toggle-icon">{{showBindingList ? '▲' : '▼'}}</text>
</view>
<block wx:if="{{showBindingList}}">
<!-- Tab切换 -->
<view class="binding-tabs">
<view
class="tab-item {{activeTab === 'active' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="active"
>绑定中 ({{activeBindings.length}})</view>
<view
class="tab-item {{activeTab === 'converted' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="converted"
>已付款 ({{convertedBindings.length}})</view>
<view
class="tab-item {{activeTab === 'expired' ? 'tab-active' : ''}}"
bindtap="switchTab"
data-tab="expired"
>已过期 ({{expiredBindings.length}})</view>
</view>
<!-- 用户列表 -->
<view class="binding-list">
<block wx:if="{{currentBindings.length === 0}}">
<view class="empty-state">
<text class="empty-icon">👤</text>
<text class="empty-text">暂无用户</text>
</view>
</block>
<block wx:else>
<view
class="binding-item"
wx:for="{{currentBindings}}"
wx:key="id"
>
<view class="user-avatar {{item.status === 'converted' ? 'avatar-converted' : item.status === 'expired' ? 'avatar-expired' : ''}}">
<text wx:if="{{item.status === 'converted'}}">✓</text>
<text wx:elif="{{item.status === 'expired'}}">⏰</text>
<text wx:else>{{item.nickname[0] || '用'}}</text>
</view>
<view class="user-info">
<text class="user-name">{{item.nickname || '匿名用户'}}</text>
<text class="user-time">绑定于 {{item.bindingDate}}</text>
</view>
<view class="user-status">
<block wx:if="{{item.status === 'converted'}}">
<text class="status-amount">+¥{{item.commission}}</text>
<text class="status-order">订单 ¥{{item.orderAmount}}</text>
</block>
<block wx:else>
<text class="status-tag {{item.daysRemaining <= 3 ? 'tag-red' : item.daysRemaining <= 7 ? 'tag-orange' : 'tag-green'}}">
{{item.status === 'expired' ? '已过期' : item.daysRemaining + '天'}}
</text>
</block>
</view>
</view>
</block>
</view>
</block>
</view>
<!-- 分享按钮 -->
<view class="share-section">
<view class="share-item" bindtap="generatePoster">
<view class="share-icon poster">🖼️</view>
<view class="share-info">
<text class="share-title">生成推广海报</text>
<text class="share-desc">一键生成精美海报分享</text>
</view>
<text class="share-arrow">→</text>
</view>
<button class="share-item share-btn-wechat" open-type="share">
<view class="share-icon wechat">💬</view>
<view class="share-info">
<text class="share-title">分享给好友</text>
<text class="share-desc">直接发送小程序卡片</text>
</view>
<text class="share-arrow">→</text>
</button>
<view class="share-item" bindtap="shareToMoments">
<view class="share-icon link">📝</view>
<view class="share-info">
<text class="share-title">复制朋友圈文案</text>
<text class="share-desc">一键复制推广文案</text>
</view>
<text class="share-arrow">→</text>
</view>
</view>
</view>
<!-- 海报生成弹窗 -->
<view class="modal-overlay" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
<view class="modal-content poster-modal" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">推广海报</text>
<view class="modal-close" bindtap="closePosterModal">✕</view>
</view>
<!-- 海报预览 -->
<view class="poster-preview">
<canvas canvas-id="promoPosterCanvas" class="poster-canvas" style="width: 300px; height: 450px;"></canvas>
</view>
<view class="poster-actions">
<view class="poster-btn btn-save" bindtap="savePoster">
<text class="btn-icon">💾</text>
<text>保存到相册</text>
</view>
</view>
<text class="poster-tip">保存后可分享到朋友圈或发送给好友</text>
</view>
</view>
</view>