fnvtk/soul-yongping
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新小程序开发文档，新增2026-03-03的最佳实践记录，优化个人中心类页面的卡片区边距规范，确保一致性与可用性。调整相关页面以反映最新设计稿，提升用户体验与功能一致性。

Browse Source
This commit is contained in:
Alex-larget
2026-03-04 19:06:06 +08:00
parent 7064f82126
commit 5a5f0087d2
66 changed files with 2555 additions and 1059 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
miniprogram/pages/my/my.wxml
View File

@@ -1,8 +1,11 @@
<!-- 我的页 - professional_profile_with_earnings_vip 1:1 还原 -->
<!-- 我的页 - 设计稿 1:1 还原 -->
<view class="page">
<!-- 顶部导航：仅标题（设置已移至用户区右侧，避让胶囊） -->
<!-- 顶部导航：标题 + 右侧设置齿轮 -->
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
<text class="nav-title">我的</text>
<view class="nav-settings" bindtap="handleMenuTap" data-id="settings">
<image class="nav-settings-icon" src="/assets/icons/settings-gray.svg" mode="aspectFit"/>
</view>
</view>
<view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
@@ -16,77 +19,69 @@
<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 class="profile-card" wx:else>
<view class="profile-card-inner">
<view class="profile-top-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="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 class="profile-meta">
<view class="profile-name-row">
<text class="user-name" bindtap="editNickname">{{userInfo.nickname || '点击设置昵称'}}</text>
<view class="become-member-btn {{isVip ? 'become-member-vip' : ''}}" bindtap="goToVip">{{isVip ? '会员中心' : '成为会员'}}</view>
</view>
<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-wechat" bindtap="copyUserId">微信号: {{userWechat || userIdShort || '--'}}</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 class="profile-stats-row">
<view class="profile-stat">
<text class="profile-stat-val">{{readCount}}</text>
<text class="profile-stat-label">已读章节</text>
</view>
<view class="profile-stat">
<text class="profile-stat-val">{{referralCount}}</text>
<text class="profile-stat-label">推荐好友</text>
</view>
<view class="profile-stat">
<text class="profile-stat-val">{{earnings === '-' ? '--' : earnings}}</text>
<text class="profile-stat-label">我的收益</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>
<image class="card-icon-img" src="/assets/icons/eye-teal.svg" mode="aspectFit"/>
<text class="card-title">阅读统计</text>
</view>
<view class="stats-grid">
<view class="stat-box">
<text class="stat-icon">📖</text>
<image class="stat-icon-img" src="/assets/icons/book-open-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{readCount}}</text>
<text class="stat-label">已读章节</text>
</view>
<view class="stat-box">
<text class="stat-icon">⏱</text>
<image class="stat-icon-img" src="/assets/icons/clock-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{totalReadTime}}</text>
<text class="stat-label">阅读分钟</text>
</view>
<view class="stat-box">
<text class="stat-icon">👥</text>
<image class="stat-icon-img" src="/assets/icons/users-teal.svg" mode="aspectFit"/>
<text class="stat-num">{{matchHistory}}</text>
<text class="stat-label">匹配伙伴</text>
</view>
@@ -96,7 +91,7 @@
<!-- 最近阅读 -->
<view class="card recent-card">
<view class="card-header">
<text class="card-icon">📖</text>
<image class="card-icon-img" src="/assets/icons/book-arrow-teal.svg" mode="aspectFit"/>
<text class="card-title">最近阅读</text>
</view>
<view class="recent-list" wx:if="{{recentChapters.length > 0}}">
@@ -121,22 +116,29 @@
</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>
<view class="menu-icon-wrap icon-teal"><image class="menu-icon-img" src="/assets/icons/folder-teal.svg" mode="aspectFit"/></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>
<view class="menu-icon-wrap icon-blue"><image class="menu-icon-img" src="/assets/icons/info-blue.svg" mode="aspectFit"/></view>
<text class="menu-text">关于作者</text>
</view>
<text class="menu-arrow">›</text>
</view>
<view class="menu-item" bindtap="handleMenuTap" data-id="settings">
<view class="menu-left">
<view class="menu-icon-wrap icon-gray"><image class="menu-icon-img" src="/assets/icons/settings-gray.svg" mode="aspectFit"/></view>
<text class="menu-text">设置</text>
</view>
<text class="menu-arrow">›</text>
</view>
</view>
</view>