305 lines
11 KiB
Text
305 lines
11 KiB
Text
|
<!--个人资料页面 - 美化版设计-->
|
|||
|
|
<view class="profile-container">
|
|||
|
|
|
|||
|
|
<scroll-view class="profile-content"
|
|||
|
|
scroll-y="true"
|
|||
|
|
enhanced="true"
|
|||
|
|
bounces="true"
|
|||
|
|
show-scrollbar="false"
|
|||
|
|
refresher-enabled="true"
|
|||
|
|
refresher-triggered="{{refreshing}}"
|
|||
|
|
bindrefresherrefresh="onRefresh">
|
|||
|
|
|
|||
|
|
<!-- 个人信息卡片（改版） -->
|
|||
|
|
<view class="profile-card">
|
|||
|
|
<!-- 顶部区域：头像、名字、ID、去认证 -->
|
|||
|
|
<view class="profile-top">
|
|||
|
|
<view class="avatar-section">
|
|||
|
|
<view class="avatar-container" bindtap="changeAvatar">
|
|||
|
|
<image class="avatar-image"
|
|||
|
|
src="{{userInfo.user.avatar || '/images/1111.jpg'}}"
|
|||
|
|
mode="aspectFill" />
|
|||
|
|
<view class="avatar-overlay">
|
|||
|
|
<view class="camera-icon">📷</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="avatar-decoration" wx:if="{{userInfo.user.isVip}}">👑</view>
|
|||
|
|
<view class="online-status online"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="profile-main-info">
|
|||
|
|
<view class="profile-name-row">
|
|||
|
|
<text class="profile-name">{{userInfo.user.nickname || 'FindMe用户'}}</text>
|
|||
|
|
<view class="gender-badge" wx:if="{{userInfo.user.gender}}">
|
|||
|
|
{{userInfo.user.gender === 'male' ? '♂️' : userInfo.user.gender === 'female' ? '♀️' : ''}}
|
|||
|
|
</view>
|
|||
|
|
<view class="vip-crown" wx:if="{{userInfo.user.isVip}}">👑</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="profile-id">
|
|||
|
|
<text class="id-label">ID: </text>
|
|||
|
|
<text class="id-value">{{userInfo.user.customId || (userInfo.user.id ? 'findme_' + userInfo.user.id : '未设置')}}</text>
|
|||
|
|
<!-- 新增：去认证按钮 -->
|
|||
|
|
<view class="verify-btn" wx:if="{{!userInfo.user.verified}}" bindtap="goVerify">
|
|||
|
|
<image class="verify-btn-p" bindtap="copyId" src="/images/btn.png" mode="widthFix" />
|
|||
|
|
<text class="verify-text">去认证</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="verified-tag" wx:if="{{userInfo.user.verified}}">
|
|||
|
|
<image class="verified-tag-p" bindtap="copyId" src="/images/tag.png" mode="widthFix" />
|
|||
|
|
<text class="verified-text">已认证</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部信息区：位置、二维码、编辑按钮、设置、简介、个人标签 -->
|
|||
|
|
<view class="profile-bottom">
|
|||
|
|
<!-- 操作按钮区 -->
|
|||
|
|
<view class="action-buttons">
|
|||
|
|
<view class="qr-code-btn" bindtap="navigateToQRCode">
|
|||
|
|
<image src="/images/qr-code.png" class="qr-code-icon"/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="edit-btn" bindtap="editProfile">
|
|||
|
|
<image src="/images/Edit3.png" class="edit-icon"/>
|
|||
|
|
<text class="edit-text">编辑</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="setting-btn" bindtap="openSettings">
|
|||
|
|
<image src="/images/Subtract.png" class="setting-icon"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 位置信息 -->
|
|||
|
|
<view class="profile-location" bindtap="goVerify">
|
|||
|
|
<image src="/images/location.png" class="location-icon"/>
|
|||
|
|
<text class="location-text">291, Anwar Yousuf Road</text>
|
|||
|
|
<!-- <text class="location-text">{{userInfo.location}}</text> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 个人简介 wx:if="{{!userInfo.user.verified}}"-->
|
|||
|
|
<view class="profile-signature" bindtap="goVerify"> <!--测试期加了"!"，实际是要删掉-->
|
|||
|
|
<!--<text class="signature-text">{{userInfo.signature}} </text>-->
|
|||
|
|
<text class="signature-text">Morem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. </text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 个人标签区域 -->
|
|||
|
|
<view class="profile-tabs">
|
|||
|
|
<scroll-view scroll-x="true" class="tab-scroll" enable-flex="true">
|
|||
|
|
<view class="tab-item {{selectedTab === 'gender' ? 'active' : ''}}" data-tab="gender" bindtap="onTabSelect">
|
|||
|
|
<text>{{userInfo.user.gender === 'male' ? '♂️' : userInfo.user.gender === 'female' ? '♀️' : '？'}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'age' ? 'active' : ''}}" data-tab="age" bindtap="onTabSelect">
|
|||
|
|
<text>年龄 {{userInfo.age}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'mood' ? 'active' : ''}}" data-tab="mood" bindtap="onTabSelect">
|
|||
|
|
<text>心情 {{userInfo.mood}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'personality' ? 'active' : ''}}" data-tab="personality" bindtap="onTabSelect">
|
|||
|
|
<text>人格 {{userInfo.personality}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'identity' ? 'active' : ''}}" data-tab="identity" bindtap="onTabSelect">
|
|||
|
|
<text>身份 {{userInfo.identity}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'constellation' ? 'active' : ''}}" data-tab="constellation" bindtap="onTabSelect">
|
|||
|
|
<text>星座 {{userInfo.constellation}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'school' ? 'active' : ''}}" data-tab="school" bindtap="onTabSelect">
|
|||
|
|
<text>学校 {{userInfo.school}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="tab-item {{selectedTab === 'occupation' ? 'active' : ''}}" data-tab="occupation" bindtap="onTabSelect">
|
|||
|
|
<text>职业 {{userInfo.occupation}}</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- My Footprints -->
|
|||
|
|
<view class="myfootprint">
|
|||
|
|
<!-- Title -->
|
|||
|
|
|
|||
|
|
<!-- White pill badge -->
|
|||
|
|
<view class="footprint-badge">
|
|||
|
|
<text>1个NOW，2个地点</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- Custom Post Input goes here -->
|
|||
|
|
<view>
|
|||
|
|
<text class="textcolor">我的动态</text>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<input type="text" placeholder="Write something" class="input-field"/>
|
|||
|
|
<image src="/images/cameras.png" class="camera-icon" mode="aspectFit"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- My Moments -->
|
|||
|
|
<view class="moments">
|
|||
|
|
<view class="moment-card">
|
|||
|
|
<!-- date & year -->
|
|||
|
|
<view class="moment-header">
|
|||
|
|
<text>26 Sep</text>
|
|||
|
|
<text>2025</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- description -->
|
|||
|
|
<text class="moment-text">
|
|||
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea eveniet, delectus unde quibusdam ipsum fugiat nostrum rerum maiores quisquam enim?
|
|||
|
|
</text>
|
|||
|
|
|
|||
|
|
<!-- image -->
|
|||
|
|
<image src="/images/moments.png" mode="widthFix" class="moment-img"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 会员卡片 -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 快捷功能区 -->
|
|||
|
|
<!-- <view class="quick-actions">
|
|||
|
|
<view class="action-row">
|
|||
|
|
<view class="action-item" bindtap="openWallet">
|
|||
|
|
<image src="/images/wallet-solid.png" class="action-icon wallete"/>
|
|||
|
|
<text class="action-text">卡包</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-item" bindtap="openFavorites">
|
|||
|
|
<image src="/images/folder-favorite.png" class="action-icon favorites"/>
|
|||
|
|
<text class="action-text">收藏</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-item" bindtap="openCards">
|
|||
|
|
<image src="/images/album-bold.png" class="action-icon album"/>
|
|||
|
|
<text class="action-text">相册</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-row">
|
|||
|
|
<view class="action-item" bindtap="openStickers">
|
|||
|
|
<image src="/images/emoji-lol.png" class="action-icon stickers"/>
|
|||
|
|
<text class="action-text">圈子</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-item" bindtap="openGames">
|
|||
|
|
<image src="/images/game-fill.png" class="action-icon games"/>
|
|||
|
|
<text class="action-text">游戏</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-item" bindtap="openShopping">
|
|||
|
|
<image src="/images/shopping-bag.png" class="action-icon shopping"/>
|
|||
|
|
<text class="action-text">团购</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 调试信息卡片 -->
|
|||
|
|
<view class="debug-card" wx:if="{{debugMode}}">
|
|||
|
|
<view class="debug-header">
|
|||
|
|
<view class="debug-icon">🔧</view>
|
|||
|
|
<text class="debug-title">调试信息</text>
|
|||
|
|
<view class="debug-toggle" bindtap="toggleDebug">
|
|||
|
|
<text class="toggle-text">{{showDebugDetails ? '隐藏' : '展开'}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="debug-content" wx:if="{{showDebugDetails}}">
|
|||
|
|
<view class="debug-section">
|
|||
|
|
<text class="debug-label">用户信息:</text>
|
|||
|
|
<text class="debug-value">{{debugInfo.userInfo}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="debug-section">
|
|||
|
|
<text class="debug-label">Token状态:</text>
|
|||
|
|
<text class="debug-value {{debugInfo.tokenValid ? 'success' : 'error'}}">
|
|||
|
|
{{debugInfo.tokenValid ? '✅ 有效' : '❌ 无效'}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="debug-section">
|
|||
|
|
<text class="debug-label">网络状态:</text>
|
|||
|
|
<text class="debug-value">{{debugInfo.networkType || '未知'}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="debug-section">
|
|||
|
|
<text class="debug-label">版本信息:</text>
|
|||
|
|
<text class="debug-value">{{debugInfo.version || 'v1.0.0'}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="debug-actions">
|
|||
|
|
<view class="debug-btn" bindtap="testAPI">
|
|||
|
|
<text class="btn-text">测试API</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="debug-btn" bindtap="showCacheStats">
|
|||
|
|
<text class="btn-text">缓存统计</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="debug-btn" bindtap="clearCache">
|
|||
|
|
<text class="btn-text">清除缓存</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="debug-btn" bindtap="exportLogs">
|
|||
|
|
<text class="btn-text">导出日志</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部空间 - 确保所有内容都能滚动到 -->
|
|||
|
|
<view class="bottom-space" style="height: {{safeAreaBottom + 60}}px;"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 个人状态编辑弹窗 -->
|
|||
|
|
<view class="status-modal {{showStatusModal ? 'show' : ''}}" wx:if="{{showStatusModal}}">
|
|||
|
|
<view class="modal-mask" bindtap="hideStatusModal"></view>
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<view class="modal-header">
|
|||
|
|
<text class="modal-title">设置状态</text>
|
|||
|
|
<view class="modal-close" bindtap="hideStatusModal">✕</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="modal-body">
|
|||
|
|
<view class="status-options">
|
|||
|
|
<view class="status-option"
|
|||
|
|
wx:for="{{statusOptions}}"
|
|||
|
|
wx:key="id"
|
|||
|
|
bindtap="selectStatus"
|
|||
|
|
data-status="{{item}}"
|
|||
|
|
class="{{selectedStatus.id === item.id ? 'selected' : ''}}">
|
|||
|
|
<view class="option-icon">{{item.icon}}</view>
|
|||
|
|
<text class="option-text">{{item.text}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="status-input">
|
|||
|
|
<input class="custom-status"
|
|||
|
|
placeholder="自定义状态..."
|
|||
|
|
value="{{customStatus}}"
|
|||
|
|
bindinput="onStatusInput" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="modal-footer">
|
|||
|
|
<view class="modal-btn cancel" bindtap="hideStatusModal">取消</view>
|
|||
|
|
<view class="modal-btn confirm" bindtap="saveStatus">保存</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 成就徽章展示 -->
|
|||
|
|
<view class="achievement-banner" wx:if="{{showAchievement}}">
|
|||
|
|
<view class="banner-content">
|
|||
|
|
<view class="achievement-icon">🏆</view>
|
|||
|
|
<view class="achievement-text">
|
|||
|
|
<text class="achievement-title">恭喜获得新徽章!</text>
|
|||
|
|
<text class="achievement-desc">{{newAchievement.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="banner-close" bindtap="hideAchievement">✕</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|