338 lines
14 KiB
Plaintext
338 lines
14 KiB
Plaintext
<!--分销中心 - 按照Web版本1:1还原-->
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
|
<view class="nav-left">
|
|
<view class="nav-back" bindtap="goBack">
|
|
<image class="nav-icon" src="/assets/icons/chevron-left.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="nav-btn" bindtap="showNotification">
|
|
<image class="nav-icon" src="/assets/icons/bell.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="nav-btn" bindtap="showSettings">
|
|
<image class="nav-icon" src="/assets/icons/settings.svg" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<text class="nav-title">分销中心</text>
|
|
<view class="nav-right-placeholder"></view>
|
|
</view>
|
|
<view style="height: {{statusBarHeight + 44}}px;"></view>
|
|
|
|
<view class="content">
|
|
<!-- 过期提醒横幅 -->
|
|
<view class="expiring-banner" wx:if="{{expiringCount > 0}}">
|
|
<view class="banner-icon">
|
|
<image class="icon-bell-warning" src="/assets/icons/bell.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="banner-content">
|
|
<text class="banner-title">{{expiringCount}} 位用户绑定即将过期</text>
|
|
<text class="banner-desc">30天内未付款将解除绑定关系</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收益卡片 - 对齐 Next.js -->
|
|
<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">
|
|
<image class="icon-wallet" src="/assets/icons/wallet.svg" mode="aspectFit"></image>
|
|
</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">¥{{availableEarnings}}</text>
|
|
<text class="pending-text">累计: ¥{{totalCommission}} | 待审核: ¥{{pendingWithdrawAmount}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="withdraw-btn {{availableEarningsNum < minWithdrawAmount || !hasWechatId ? 'btn-disabled' : ''}}" bindtap="handleWithdraw">
|
|
{{availableEarningsNum < minWithdrawAmount ? '满' + minWithdrawAmount + '元可提现' : !hasWechatId ? '请先绑定微信号' : '申请提现 ¥' + availableEarnings}}
|
|
</view>
|
|
<text class="wechat-tip" wx:if="{{availableEarningsNum > 0 && !hasWechatId}}">为便于提现到账，请先到「设置」中绑定微信号</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据统计 - 对齐 Next.js -->
|
|
<view class="stats-grid">
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{bindingCount}}</text>
|
|
<text class="stat-label">绑定中</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{paidCount}}</text>
|
|
<text class="stat-label">已付款</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value orange">{{unboughtCount}}</text>
|
|
<text class="stat-label">即将过期</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{referralCount}}</text>
|
|
<text class="stat-label">总邀请</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 推广规则 - 顺序调整到前面 -->
|
|
<view class="rules-card">
|
|
<view class="rules-header">
|
|
<view class="rules-icon">
|
|
<image class="icon-alert" src="/assets/icons/alert-circle.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="rules-title">推广规则</text>
|
|
</view>
|
|
<view class="rules-list">
|
|
<text class="rule-item">• 好友通过你的链接购买，<text class="gold">立享5%优惠</text></text>
|
|
<text class="rule-item">• 好友成功付款后，你获得 <text class="brand">{{shareRate}}%</text> 收益</text>
|
|
<text class="rule-item">• 绑定期<text class="brand">30天</text>，期满未付款自动解除</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 绑定用户列表 -->
|
|
<view class="binding-card">
|
|
<view class="binding-header" bindtap="toggleBindingList">
|
|
<view class="binding-title">
|
|
<image class="binding-icon-img" src="/assets/icons/users.svg" mode="aspectFit"></image>
|
|
<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.purchaseCount || 1}}次</text>
|
|
</block>
|
|
<block wx:elif="{{item.status === 'expired'}}">
|
|
<text class="status-tag tag-gray">已过期</text>
|
|
<text class="status-time">{{item.expiryDate}}</text>
|
|
</block>
|
|
<block wx:else>
|
|
<text class="status-tag {{item.daysRemaining <= 3 ? 'tag-red' : item.daysRemaining <= 7 ? 'tag-orange' : 'tag-green'}}">
|
|
{{item.daysRemaining}}天
|
|
</text>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 分享按钮 - 1:1 对齐 Next.js -->
|
|
<view class="share-section">
|
|
<view class="share-item" bindtap="generatePoster">
|
|
<view class="share-icon poster">
|
|
<image class="icon-share-btn" src="/assets/icons/image.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="share-info">
|
|
<text class="share-title">生成推广海报</text>
|
|
<text class="share-desc">一键生成精美海报分享</text>
|
|
</view>
|
|
<image class="share-arrow-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="share-item" bindtap="shareToWechat">
|
|
<view class="share-icon wechat">
|
|
<image class="icon-share-btn" src="/assets/icons/message-circle.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="share-info">
|
|
<text class="share-title">分享到朋友圈</text>
|
|
<text class="share-desc">复制文案发朋友圈</text>
|
|
</view>
|
|
<image class="share-arrow-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<view class="share-item" bindtap="handleMoreShare">
|
|
<view class="share-icon link">
|
|
<image class="icon-share-btn" src="/assets/icons/share.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="share-info">
|
|
<text class="share-title">更多分享方式</text>
|
|
<text class="share-desc">使用系统分享功能</text>
|
|
</view>
|
|
<image class="share-arrow-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收益明细 - 增强版 -->
|
|
<view class="earnings-detail-card" wx:if="{{earningsDetails.length > 0}}">
|
|
<view class="detail-header">
|
|
<text class="detail-title">收益明细</text>
|
|
</view>
|
|
<view class="detail-list">
|
|
<view class="detail-item" wx:for="{{earningsDetails}}" wx:key="id">
|
|
<!-- 买家头像 -->
|
|
<view class="detail-avatar-wrap">
|
|
<image
|
|
class="detail-avatar"
|
|
wx:if="{{item.buyerAvatar}}"
|
|
src="{{item.buyerAvatar}}"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="detail-avatar-text" wx:else>
|
|
{{item.buyerNickname.charAt(0)}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 详细信息 -->
|
|
<view class="detail-content">
|
|
<view class="detail-top">
|
|
<text class="detail-buyer">{{item.buyerNickname}}</text>
|
|
<text class="detail-amount">+¥{{item.commission}}</text>
|
|
</view>
|
|
<view class="detail-product">
|
|
<text class="detail-book">{{item.bookTitle}}</text>
|
|
<text class="detail-chapter" wx:if="{{item.chapterTitle}}"> - {{item.chapterTitle}}</text>
|
|
</view>
|
|
<text class="detail-time">{{item.payTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 - 对齐 Next.js -->
|
|
<view class="empty-earnings" wx:if="{{earningsDetails.length === 0 && activeBindings.length === 0}}">
|
|
<view class="empty-icon-wrapper">
|
|
<image class="empty-gift-icon" src="/assets/icons/gift.svg" mode="aspectFit"></image>
|
|
</view>
|
|
<text class="empty-title">暂无收益记录</text>
|
|
<text class="empty-desc">分享专属链接，好友购买即可获得 {{shareRate}}% 返利</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 海报生成弹窗 - 优化小程序显示 -->
|
|
<view class="modal-overlay" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
|
|
<view class="poster-dialog" catchtap="stopPropagation">
|
|
<view class="poster-close" bindtap="closePosterModal">✕</view>
|
|
|
|
<!-- 上半部分：海报内容（不使用画布，纯布局 + 二维码图片） -->
|
|
<view class="poster-card">
|
|
<!-- 装饰光效 -->
|
|
<view class="poster-glow poster-glow-left"></view>
|
|
<view class="poster-glow poster-glow-right"></view>
|
|
<view class="poster-ring"></view>
|
|
|
|
<view class="poster-inner">
|
|
<!-- 顶部标签 -->
|
|
<view class="poster-badges">
|
|
<text class="poster-badge poster-badge-gold">真实商业案例</text>
|
|
<text class="poster-badge poster-badge-brand">每日更新</text>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="poster-title">
|
|
<text class="poster-title-line1">一场SOUL的</text>
|
|
<text class="poster-title-line2">创业实验场</text>
|
|
</view>
|
|
<text class="poster-subtitle">来自Soul派对房的真实商业故事</text>
|
|
|
|
<!-- 核心数据 -->
|
|
<view class="poster-stats">
|
|
<view class="poster-stat">
|
|
<text class="poster-stat-value poster-stat-gold">{{posterCaseCount}}</text>
|
|
<text class="poster-stat-label">真实案例</text>
|
|
</view>
|
|
<view class="poster-stat">
|
|
<text class="poster-stat-value poster-stat-brand">5%</text>
|
|
<text class="poster-stat-label">好友优惠</text>
|
|
</view>
|
|
<view class="poster-stat">
|
|
<text class="poster-stat-value poster-stat-pink">{{shareRate}}%</text>
|
|
<text class="poster-stat-label">你的收益</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签 -->
|
|
<view class="poster-tags">
|
|
<text class="poster-tag">人性观察</text>
|
|
<text class="poster-tag">行业揭秘</text>
|
|
<text class="poster-tag">赚钱逻辑</text>
|
|
<text class="poster-tag">创业复盘</text>
|
|
<text class="poster-tag">资源对接</text>
|
|
</view>
|
|
|
|
<!-- 推荐人 -->
|
|
<view class="poster-recommender">
|
|
<view class="poster-avatar">
|
|
<text class="poster-avatar-text">{{posterNicknameInitial}}</text>
|
|
</view>
|
|
<text class="poster-recommender-text">{{posterNickname}} 推荐你来读</text>
|
|
</view>
|
|
|
|
<!-- 优惠说明 -->
|
|
<view class="poster-discount">
|
|
<text class="poster-discount-text">通过我的链接购买，<text class="poster-discount-highlight">立省5%</text>
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 二维码 -->
|
|
<view class="poster-qr-wrap" bindtap="previewPosterQr">
|
|
<image
|
|
class="poster-qr-img"
|
|
src="{{posterQrSrc}}"
|
|
mode="aspectFit"
|
|
show-menu-by-longpress="true"
|
|
></image>
|
|
</view>
|
|
<text class="poster-qr-tip">长按识别 · 立即试读</text>
|
|
<text class="poster-code">邀请码: {{referralCode}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 下半部分：白色操作区 -->
|
|
<view class="poster-footer">
|
|
<text class="poster-footer-tip">长按上方图片保存，或截图分享</text>
|
|
<view class="poster-footer-btn" bindtap="closePosterModal">关闭</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|