miniprogramme/pages/social/friend-detail/friend-detail.wxml

<!-- 好友详情页面 -->
<view class="friend-detail-container">
  
  <!-- 自定义导航栏 -->
  <view class="custom-nav-bar" style="padding-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;">
    <view class="nav-content">
      <view class="nav-left" bindtap="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">好友详情</text>
      </view>
      <view class="nav-right" bindtap="showMoreActions">
        <text class="more-icon">⋯</text>
      </view>
    </view>
  </view>

  <!-- 加载中 -->
  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 好友详情内容 -->
  <scroll-view class="detail-content" scroll-y="true" wx:if="{{!loading && friendInfo}}">
    
    <!-- 基本信息卡片 -->
    <view class="info-card">
      <!-- 头像和基本信息 -->
      <view class="basic-info">
        <view class="avatar-section">
          <view class="friend-avatar">
            <image wx:if="{{friendInfo.avatar}}" 
                   src="{{friendInfo.avatar}}" 
                   class="avatar-image" 
                   mode="aspectFill" />
            <view wx:else class="avatar-placeholder">
              <text class="avatar-text">{{friendInfo.nickname ? friendInfo.nickname.charAt(0) : '?'}}</text>
            </view>
          </view>
          
          <!-- 会员标识 -->
          <view class="member-badge" wx:if="{{friendInfo.isMember}}">
            <text class="member-text">VIP{{friendInfo.memberLevel}}</text>
          </view>
        </view>

        <view class="info-section">
          <view class="name-row">
            <text class="friend-name">{{friendInfo.remark || friendInfo.nickname}}</text>
            <view class="gender-icon" wx:if="{{friendInfo.gender}}">
              <text class="gender-text">{{friendInfo.gender === 1 ? '♂' : '♀'}}</text>
            </view>
          </view>
          
          <text class="friend-id">ID: {{friendInfo.customId}}</text>
          
          <text class="friend-bio" wx:if="{{friendInfo.bio}}">{{friendInfo.bio}}</text>
          
          <!-- 好友关系信息 -->
          <view class="friendship-info" wx:if="{{friendInfo.friendSince}}">
            <text class="friendship-text">{{friendInfo.friendSince}}</text>
            <text class="friendship-days" wx:if="{{friendInfo.friendshipDays}}">已成为好友 {{friendInfo.friendshipDays}} 天</text>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <view class="action-btn primary" bindtap="sendMessage">
          <text class="btn-icon">💬</text>
          <text class="btn-text">发消息</text>
        </view>
        
        <view class="action-btn secondary" bindtap="videoCall">
          <text class="btn-icon">📹</text>
          <text class="btn-text">视频通话</text>
        </view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="detail-sections">
      
      <!-- 好友信息 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-title">好友信息</text>
        </view>
        
        <view class="info-items">
          <view class="info-item" wx:if="{{friendInfo.remark}}">
            <text class="item-label">备注</text>
            <text class="item-value">{{friendInfo.remark}}</text>
          </view>
          
          <view class="info-item" wx:if="{{friendInfo.relation}}">
            <text class="item-label">关系</text>
            <text class="item-value">{{friendInfo.relation}}</text>
          </view>
          
          <view class="info-item" wx:if="{{friendInfo.group}}">
            <text class="item-label">分组</text>
            <text class="item-value">{{friendInfo.group}}</text>
          </view>
          
          <view class="info-item" wx:if="{{friendInfo.phone}}">
            <text class="item-label">手机号</text>
            <text class="item-value">{{friendInfo.phone}}</text>
          </view>
        </view>
      </view>

      <!-- 位置信息 -->
      <view class="detail-section" wx:if="{{friendInfo.locationInfo}}">
        <view class="section-header">
          <text class="section-title">位置信息</text>
        </view>
        
        <view class="location-item" bindtap="viewLocation">
          <view class="location-info">
            <text class="location-icon">📍</text>
            <view class="location-details">
              <text class="location-address">{{friendInfo.locationInfo.address}}</text>
              <text class="location-time" wx:if="{{friendInfo.lastLocationTime}}">更新时间: {{friendInfo.lastLocationTime}}</text>
            </view>
          </view>
          <text class="location-arrow">›</text>
        </view>
      </view>

      <!-- 设置选项 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-title">设置</text>
        </view>
        
        <view class="setting-items">
          <view class="setting-item" bindtap="setRemark">
            <view class="setting-info">
              <text class="setting-icon">✏️</text>
              <text class="setting-label">设置备注和标签</text>
            </view>
            <text class="setting-arrow">›</text>
          </view>
          
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon">🔕</text>
              <text class="setting-label">消息免打扰</text>
            </view>
            <switch class="setting-switch" checked="{{friendInfo.isMuted}}" />
          </view>
          
          <view class="setting-item">
            <view class="setting-info">
              <text class="setting-icon">📌</text>
              <text class="setting-label">置顶聊天</text>
            </view>
            <switch class="setting-switch" checked="{{friendInfo.isTop}}" />
          </view>
        </view>
      </view>

      <!-- 危险操作 -->
      <view class="detail-section danger-section">
        <view class="danger-item" bindtap="deleteFriend">
          <text class="danger-icon">🗑️</text>
          <text class="danger-text">删除好友</text>
        </view>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="safe-area-bottom"></view>
  </scroll-view>
</view>