149 lines
5.3 KiB
Plaintext
149 lines
5.3 KiB
Plaintext
<view class="profile-page">
|
|
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
|
|
|
<scroll-view
|
|
scroll-y="true"
|
|
class="profile-scroll"
|
|
enhanced="true"
|
|
show-scrollbar="false"
|
|
refresher-enabled="true"
|
|
bindrefresherrefresh="onRefresh"
|
|
refresher-triggered="{{refreshing}}"
|
|
>
|
|
<!-- 用户信息区 -->
|
|
<view class="profile-header">
|
|
<!-- 头部操作栏 -->
|
|
<view class="header-topbar">
|
|
<view class="settings-btn" bindtap="onSettings">⚙️</view>
|
|
</view>
|
|
|
|
<!-- 头像 + 基本信息 -->
|
|
<view class="user-top">
|
|
<view class="user-avatar-wrap">
|
|
<view class="user-avatar" style="background: {{avatarGradient}}">
|
|
<text class="avatar-text">{{userInfo.nickName[0] || '?'}}</text>
|
|
</view>
|
|
<view class="avatar-edit" bindtap="onEditAvatar">✏️</view>
|
|
</view>
|
|
<view class="user-meta">
|
|
<view class="user-name-row">
|
|
<text class="user-name">{{userInfo.nickName}}</text>
|
|
</view>
|
|
<text class="user-handle">{{userInfo.handle || '@' + userInfo.openid.slice(0,8)}} · {{userInfo.location || '上海'}}</text>
|
|
<text class="user-bio">{{userInfo.bio || '还没有介绍~'}}</text>
|
|
</view>
|
|
<view class="edit-profile-btn" bindtap="onEditProfile">编辑</view>
|
|
</view>
|
|
|
|
<!-- 数据统计 -->
|
|
<view class="stats-row">
|
|
<view class="stat-item" bindtap="onStatTap" data-type="posts">
|
|
<text class="stat-num">{{userInfo.stats.posts || 0}}</text>
|
|
<text class="stat-label">动态</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" bindtap="onStatTap" data-type="following">
|
|
<text class="stat-num">{{userInfo.stats.friends || 0}}</text>
|
|
<text class="stat-label">汪友</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" bindtap="onStatTap" data-type="likes">
|
|
<text class="stat-num">{{formattedLikes}}</text>
|
|
<text class="stat-label">获赞</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 宠物档案卡 -->
|
|
<view class="section-wrap">
|
|
<view class="section-header">
|
|
<text class="section-title">我的宝贝</text>
|
|
<view class="add-pet-btn" bindtap="onAddPet">+ 添加</view>
|
|
</view>
|
|
|
|
<!-- 宠物卡片横滑 -->
|
|
<scroll-view scroll-x="true" enhanced="true" show-scrollbar="false" class="pets-scroll">
|
|
<view
|
|
wx:for="{{userInfo.pets}}"
|
|
wx:key="_id"
|
|
class="pet-card"
|
|
bindtap="onPetTap"
|
|
data-pid="{{item._id}}"
|
|
>
|
|
<view class="pet-avatar" style="background: {{item.gradient || 'linear-gradient(135deg, #c9f7df, #d9d2ff)'}}">
|
|
<text class="pet-emoji">{{item.emoji || '🐾'}}</text>
|
|
</view>
|
|
<view class="pet-info">
|
|
<text class="pet-name">{{item.name}}</text>
|
|
<text class="pet-breed">{{item.breed}} · {{item.gender === 'female' ? '女生' : '男生'}} · {{item.age}}</text>
|
|
</view>
|
|
<view class="pet-badge">我的宝贝</view>
|
|
</view>
|
|
|
|
<!-- 空态时添加宠物 -->
|
|
<view wx:if="{{userInfo.pets.length === 0}}" class="pet-card pet-card-empty" bindtap="onAddPet">
|
|
<view class="pet-avatar pet-avatar-add">
|
|
<text style="font-size: 48rpx;">+</text>
|
|
</view>
|
|
<view class="pet-info">
|
|
<text class="pet-name">添加宠物</text>
|
|
<text class="pet-breed">建立您的宠物档案</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 动态网格 / 列表切换 -->
|
|
<view class="section-wrap">
|
|
<view class="section-header">
|
|
<text class="section-title">全部动态</text>
|
|
<view class="view-toggle">
|
|
<view class="toggle-item {{postView === 'grid' ? 'active' : ''}}" bindtap="setPostView" data-v="grid">▦</view>
|
|
<view class="toggle-item {{postView === 'list' ? 'active' : ''}}" bindtap="setPostView" data-v="list">☰</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 网格视图 -->
|
|
<view wx:if="{{postView === 'grid'}}" class="post-grid">
|
|
<view
|
|
wx:for="{{posts}}"
|
|
wx:key="_id"
|
|
class="grid-item"
|
|
bindtap="onGridItemTap"
|
|
data-id="{{item._id}}"
|
|
>
|
|
<image
|
|
wx:if="{{item.images && item.images.length > 0}}"
|
|
class="grid-img"
|
|
src="{{item.images[0]}}"
|
|
mode="aspectFill"
|
|
lazy-load="true"
|
|
/>
|
|
<view wx:else class="grid-no-img">
|
|
<text>{{item.content.slice(0, 20)}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空态 -->
|
|
<view wx:if="{{posts.length === 0}}" class="grid-empty">
|
|
<text class="empty-emoji">📸</text>
|
|
<text class="empty-tip">还没有动态，去发一条吧</text>
|
|
<view class="btn-primary post-btn" bindtap="onGoPost">发动态</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 列表视图 -->
|
|
<view wx:else>
|
|
<post-card
|
|
wx:for="{{posts}}"
|
|
wx:key="_id"
|
|
post="{{item}}"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="height: {{tabBarHeight}}px"></view>
|
|
<view class="safe-bottom"></view>
|
|
</scroll-view>
|
|
</view>
|