221 lines
10 KiB
Plaintext
221 lines
10 KiB
Plaintext
<!-- 我的页 - professional_profile_with_earnings_vip 1:1 还原 -->
|
||
<view class="page">
|
||
<!-- 顶部导航：仅标题（设置已移至用户区右侧，避让胶囊） -->
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<text class="nav-title">我的</text>
|
||
</view>
|
||
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
|
||
|
||
<!-- 未登录：引导登录 -->
|
||
<view class="guest-block" wx:if="{{!isLoggedIn}}">
|
||
<view class="guest-avatar">
|
||
<image wx:if="{{guestAvatar}}" class="guest-avatar-img" src="{{guestAvatar}}" mode="aspectFill"/>
|
||
<text wx:else class="guest-avatar-text">{{guestNickname[0] || '游'}}</text>
|
||
</view>
|
||
<text class="guest-name">{{guestNickname}}</text>
|
||
<view class="guest-login-btn" bindtap="showLogin">点击登录</view>
|
||
</view>
|
||
|
||
<!-- 已登录：用户区 -->
|
||
<view class="header-block" wx:else>
|
||
<view class="user-row">
|
||
<view class="avatar-wrap" bindtap="onAvatarTap">
|
||
<view class="avatar-inner {{isVip ? 'avatar-vip' : ''}}">
|
||
<image wx:if="{{userInfo.avatar}}" class="avatar-img" src="{{userInfo.avatar}}" mode="aspectFill"/>
|
||
<text wx:else class="avatar-text">{{userInfo.nickname ? userInfo.nickname[0] : '?'}}</text>
|
||
</view>
|
||
<view class="vip-badge" wx:if="{{isVip}}">VIP</view>
|
||
<view class="vip-badge vip-badge-gray" wx:else bindtap="goToVip">VIP</view>
|
||
</view>
|
||
<view class="user-meta">
|
||
<text class="user-name" bindtap="editNickname">{{userInfo.nickname || '点击设置昵称'}}</text>
|
||
<view class="vip-tags">
|
||
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToVip">会员</text>
|
||
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToVip">匹配</text>
|
||
<text class="vip-tag {{isVip ? 'vip-tag-active' : ''}}" bindtap="goToVip">排行</text>
|
||
</view>
|
||
<text class="user-id" bindtap="copyUserId">{{userWechat ? '微信: ' + userWechat : 'ID: ' + userIdShort}}</text>
|
||
<text class="vip-expire" wx:if="{{isVip && vipExpireDate}}">会员到期时间：{{vipExpireDate}}</text>
|
||
</view>
|
||
<view class="user-actions">
|
||
<view class="action-btn" bindtap="handleMenuTap" data-id="settings"><text class="action-icon">⚙️</text></view>
|
||
<view class="action-btn" catchtap="goToProfileEdit"><text class="action-icon">✎</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已登录：内容区 -->
|
||
<view class="main-content" wx:if="{{isLoggedIn}}">
|
||
<!-- 分享收益 -->
|
||
<view class="card earnings-card">
|
||
<view class="card-header">
|
||
<text class="card-icon">💰</text>
|
||
<text class="card-title">分享收益</text>
|
||
</view>
|
||
<view class="earnings-grid">
|
||
<view class="earnings-col">
|
||
<text class="earnings-val primary">{{referralCount}}</text>
|
||
<text class="earnings-label">推荐好友</text>
|
||
</view>
|
||
<view class="earnings-col">
|
||
<text class="earnings-val primary">{{earnings === '-' ? '--' : earnings}}</text>
|
||
<text class="earnings-label">我的收益</text>
|
||
</view>
|
||
<view class="earnings-col" bindtap="handleWithdraw">
|
||
<text class="earnings-val primary">{{pendingEarnings === '-' ? '--' : pendingEarnings}}</text>
|
||
<text class="earnings-label">可提现金额</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 阅读统计 -->
|
||
<view class="card stats-card">
|
||
<view class="card-header">
|
||
<text class="card-icon">👁️</text>
|
||
<text class="card-title">阅读统计</text>
|
||
</view>
|
||
<view class="stats-grid">
|
||
<view class="stat-box">
|
||
<text class="stat-icon">📖</text>
|
||
<text class="stat-num">{{readCount}}</text>
|
||
<text class="stat-label">已读章节</text>
|
||
</view>
|
||
<view class="stat-box">
|
||
<text class="stat-icon">⏱</text>
|
||
<text class="stat-num">{{totalReadTime}}</text>
|
||
<text class="stat-label">阅读分钟</text>
|
||
</view>
|
||
<view class="stat-box">
|
||
<text class="stat-icon">👥</text>
|
||
<text class="stat-num">{{matchHistory}}</text>
|
||
<text class="stat-label">匹配伙伴</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最近阅读 -->
|
||
<view class="card recent-card">
|
||
<view class="card-header">
|
||
<text class="card-icon">📖</text>
|
||
<text class="card-title">最近阅读</text>
|
||
</view>
|
||
<view class="recent-list" wx:if="{{recentChapters.length > 0}}">
|
||
<view
|
||
class="recent-item"
|
||
wx:for="{{recentChapters}}"
|
||
wx:key="id"
|
||
bindtap="goToRead"
|
||
data-id="{{item.id}}"
|
||
data-mid="{{item.mid}}"
|
||
>
|
||
<view class="recent-left">
|
||
<text class="recent-index">{{index + 1}}</text>
|
||
<text class="recent-title">{{item.title}}</text>
|
||
</view>
|
||
<text class="recent-link">继续阅读</text>
|
||
</view>
|
||
</view>
|
||
<view class="recent-empty" wx:else>
|
||
<text class="recent-empty-text">暂无阅读记录</text>
|
||
<view class="recent-empty-btn" bindtap="goToChapters">去阅读 →</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的订单 + 关于作者 -->
|
||
<view class="card menu-card">
|
||
<view class="menu-item" bindtap="handleMenuTap" data-id="orders">
|
||
<view class="menu-left">
|
||
<view class="menu-icon-wrap icon-teal"><text class="menu-icon">📦</text></view>
|
||
<text class="menu-text">我的订单</text>
|
||
</view>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
<view class="menu-item" bindtap="handleMenuTap" data-id="about">
|
||
<view class="menu-left">
|
||
<view class="menu-icon-wrap icon-blue"><text class="menu-icon">ℹ</text></view>
|
||
<text class="menu-text">关于作者</text>
|
||
</view>
|
||
<text class="menu-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登录弹窗 -->
|
||
<view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
|
||
<view class="modal-content login-modal-content" catchtap="stopPropagation">
|
||
<view class="modal-close" bindtap="closeLoginModal">✕</view>
|
||
<view class="login-icon">🔐</view>
|
||
<text class="login-title">登录 Soul创业派对</text>
|
||
<text class="login-desc">登录后可购买章节、解锁更多内容</text>
|
||
<button class="btn-wechat {{agreeProtocol ? '' : 'btn-wechat-disabled'}}" bindtap="handleWechatLogin" disabled="{{isLoggingIn || !agreeProtocol}}">
|
||
<text class="btn-wechat-icon">微</text>
|
||
<text>{{isLoggingIn ? '登录中...' : '微信快捷登录'}}</text>
|
||
</button>
|
||
<view class="login-modal-cancel" bindtap="closeLoginModal">取消</view>
|
||
<view class="login-agree-row" catchtap="toggleAgree">
|
||
<view class="agree-checkbox {{agreeProtocol ? 'agree-checked' : ''}}">{{agreeProtocol ? '✓' : ''}}</view>
|
||
<text class="agree-text">我已阅读并同意</text>
|
||
<text class="agree-link" catchtap="openUserProtocol">《用户协议》</text>
|
||
<text class="agree-text">和</text>
|
||
<text class="agree-link" catchtap="openPrivacy">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 手机/微信号弹窗 -->
|
||
<view class="modal-overlay contact-modal-overlay" wx:if="{{showContactModal}}" bindtap="closeContactModal">
|
||
<view class="contact-modal" catchtap="stopPropagation">
|
||
<text class="contact-modal-title">请完善联系方式</text>
|
||
<view class="contact-modal-hint">需完善手机号或微信号才能使用提现和找伙伴功能</view>
|
||
<view class="form-input-wrap">
|
||
<text class="form-label">手机号</text>
|
||
<view class="form-input-inner">
|
||
<text class="form-icon">📱</text>
|
||
<input class="form-input" type="tel" placeholder="请输入您的手机号" value="{{contactPhone}}" bindinput="onContactPhoneInput"/>
|
||
</view>
|
||
</view>
|
||
<view class="form-input-wrap">
|
||
<text class="form-label">微信号</text>
|
||
<view class="form-input-inner">
|
||
<text class="form-icon">💬</text>
|
||
<input class="form-input" type="text" placeholder="请输入您的微信号" value="{{contactWechat}}" bindinput="onContactWechatInput"/>
|
||
</view>
|
||
</view>
|
||
<view class="contact-modal-btn" bindtap="saveContactInfo" disabled="{{contactSaving}}">{{contactSaving ? '保存中...' : '保存'}}</view>
|
||
<text class="contact-modal-cancel" bindtap="closeContactModal">取消</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 头像弹窗：必须点击 button 才能获取微信头像（隐私规范） -->
|
||
<view class="modal-overlay" wx:if="{{showAvatarModal}}" bindtap="closeAvatarModal">
|
||
<view class="modal-content avatar-modal" catchtap="stopPropagation">
|
||
<view class="modal-close" bindtap="closeAvatarModal">✕</view>
|
||
<text class="avatar-modal-title">获取微信头像</text>
|
||
<text class="avatar-modal-desc">点击下方按钮使用你的微信头像</text>
|
||
<button class="btn-choose-avatar" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">使用微信头像</button>
|
||
<view class="avatar-modal-cancel" bindtap="closeAvatarModal">取消</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 修改昵称弹窗 -->
|
||
<view class="modal-overlay" wx:if="{{showNicknameModal}}" bindtap="closeNicknameModal">
|
||
<view class="modal-content nickname-modal" catchtap="stopPropagation">
|
||
<view class="modal-close" bindtap="closeNicknameModal">✕</view>
|
||
<view class="modal-header">
|
||
<text class="modal-icon">✏️</text>
|
||
<text class="modal-title">修改昵称</text>
|
||
</view>
|
||
<view class="nickname-input-wrap">
|
||
<input class="nickname-input" type="nickname" value="{{editingNickname}}" placeholder="点击输入昵称" placeholder-class="nickname-placeholder" bindchange="onNicknameChange" bindinput="onNicknameInput" maxlength="20"/>
|
||
<text class="input-tip">微信用户可点击自动填充昵称</text>
|
||
</view>
|
||
<view class="modal-actions">
|
||
<view class="modal-btn modal-btn-cancel" bindtap="closeNicknameModal">取消</view>
|
||
<view class="modal-btn modal-btn-confirm" bindtap="confirmNickname">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-space"></view>
|
||
</view>
|