findme-miniprogram-frontend/pages/user-profile/user-profile.wxml

<view class="user-profile-page">
  <!-- 顶部导航栏 -->
  <view class="nav-bar" style="height: {{navBarHeight}}px; padding-top: {{statusBarHeight}}px;">
    <view class="nav-left" bindtap="onBack">
      <image class="back-icon" src="/images/back.png" mode="aspectFit"></image>
    </view>
    <view class="nav-title">个人资料</view>
    <view class="nav-right"></view>
  </view>

  <!-- 加载状态 -->
  <view class="loading-container" wx:if="{{loading}}">
    <image class="loading-img" src="/images/loading.png" mode="aspectFit"></image>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 错误状态 -->
  <view class="error-container" wx:elif="{{error}}">
    <image class="error-img" src="/images/error.png" mode="aspectFit"></image>
    <text class="error-text">{{error}}</text>
    <button class="retry-btn" bindtap="loadUserProfile">重试</button>
  </view>

  <!-- 用户资料内容 -->
  <view class="profile-content" wx:else>
    <!-- 封面区域 -->
    <view class="cover-section">
      <image class="cover-image" src="{{userInfo.coverImage || '/images/default-cover.png'}}" mode="aspectFill"></image>
    </view>

    <!-- 用户基本信息区域 -->
    <view class="user-info-section">
      <!-- 头像和昵称信息 -->
      <view class="avatar-info">
        <image class="user-avatar" src="{{userInfo.avatar}}" mode="aspectFill"></image>
        <view class="user-basic-info">
          <text class="user-nickname">{{userInfo.nickname}}</text>
          <text class="user-id">ID: {{userInfo.customId}}</text>
        </view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="action-buttons">
        <!-- 非当前用户显示的操作按钮 -->
        <block wx:if="{{!isCurrentUser}}">
          <!-- 好友状态下显示消息按钮 -->
          <block wx:if="{{isFriend}}">
            <button class="message-btn" type="primary" size="mini" bindtap="onSendMessage">
              <image class="btn-icon" src="/images/message.png" mode="aspectFit"></image>
              <text class="btn-text">发消息</text>
            </button>
          </block>
          <!-- 非好友状态下显示添加好友按钮 -->
          <block wx:elif="{{!isFriend}}">
            <button class="add-friend-btn" type="primary" size="mini" bindtap="onAddFriend">
              <image class="btn-icon" src="/images/add-friend.png" mode="aspectFit"></image>
              <text class="btn-text">加好友</text>
            </button>
          </block>
          <!-- 关注/取消关注按钮 -->
          <button class="follow-btn" type="default" size="mini" bindtap="onFollowToggle">
            <text class="btn-text">{{isFollowing ? '已关注' : '关注'}}</text>
          </button>
        </block>
        <!-- 当前用户显示编辑资料按钮 -->
        <block wx:elif="{{isCurrentUser}}">
          <button class="edit-btn" type="primary" size="mini">
            <image class="btn-icon" src="/images/edit.png" mode="aspectFit"></image>
            <text class="btn-text">编辑资料</text>
          </button>
        </block>
      </view>

      <!-- 用户个人简介 -->
      <view class="user-intro" wx:if="{{userInfo.bio}}">
        <text class="intro-text">{{userInfo.bio}}</text>
      </view>

      <!-- 用户基本信息详情 -->
      <view class="user-details">
        <view class="detail-item">
          <text class="detail-label">性别</text>
          <text class="detail-value">{{userInfo.formattedGender}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">地区</text>
          <text class="detail-value">{{userInfo.formattedLocation}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">生日</text>
          <text class="detail-value">{{userInfo.birthday || '未设置'}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">星座</text>
          <text class="detail-value">{{userInfo.constellation || '未设置'}}</text>
        </view>
      </view>
    </view>

    <!-- 统计数据区域 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="stat-number">{{stats.friendsCount}}</text>
        <text class="stat-label">好友</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-number">{{stats.postsCount}}</text>
        <text class="stat-label">动态</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-number">{{stats.likesCount}}</text>
        <text class="stat-label">获赞</text>
      </view>
    </view>

    <!-- 动态列表标题 -->
    <view class="feed-section-header">
      <text class="section-title">TA的动态</text>
    </view>

    <!-- 动态列表区域 -->
    <view class="feed-section">
      <!-- 动态项 -->
      <view class="feed-item" wx:for="{{feedList}}" wx:key="id" data-feed-index="{{index}}" bindtap="onFeedTap">
        <!-- 动态内容 -->
        <view class="feed-content" wx:if="{{item.content}}">
          <text class="content-text">{{item.content}}</text>
        </view>
        
        <!-- 动态媒体（图片） -->
        <view class="feed-media" wx:if="{{item.imageMedia && item.imageMedia.length > 0}}">
          <!-- 最多3张图的网格 -->
          <view class="media-grid" wx:if="{{item.imageMedia.length <= 3}}">
            <image 
              wx:for="{{item.imageMedia}}" 
              wx:for-item="mediaItem" 
              wx:for-index="imgIndex"
              wx:key="imgIndex" 
              class="media-image small" 
              src="{{mediaItem.url}}" 
              mode="aspectFill" 
              data-index="{{imgIndex}}"
              data-feed-index="{{index}}" 
              bindtap="onImageTap"
            ></image>
          </view>
          
          <!-- 超过3张图的网格 -->
          <view class="media-grid" wx:else>
            <view class="media-row" wx:for="{{item.imageRowCount}}" wx:for-item="row" wx:for-index="rowIndex" wx:key="rowIndex">
              <image 
                wx:for="{{item.imageMedia}}" 
                wx:for-item="mediaItem" 
                wx:for-index="mediaIndex" 
                wx:key="mediaIndex" 
                wx:if="{{mediaIndex >= rowIndex * 3 && mediaIndex < (rowIndex + 1) * 3}}" 
                class="media-image grid" 
                src="{{mediaItem.url}}" 
                mode="aspectFill" 
                data-index="{{mediaIndex}}" 
                data-feed-index="{{index}}" 
                bindtap="onImageTap"
              ></image>
            </view>
          </view>
        </view>
        
        <!-- 动态时间 -->
        <view class="feed-footer">
          <text class="feed-time">{{item.formattedTime}}</text>
        </view>
      </view>
      
      <!-- 无动态提示 -->
      <view class="no-feeds" wx:if="{{feedList.length === 0}}">
        <image class="no-feeds-img" src="/images/no-content.png" mode="aspectFit"></image>
        <text class="no-feeds-text">暂无动态</text>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" wx:if="{{loadingMore}}">
        <text class="loading-more-text">加载更多...</text>
      </view>
      
      <!-- 没有更多数据提示 -->
      <view class="no-more" wx:if="{{!hasMoreData && feedList.length > 0}}">
        <text class="no-more-text">没有更多了</text>
      </view>
    </view>
  </view>
</view>