findme-miniprogram-frontend/subpackages/social/friend-detail/friend-detail.wxml

<!-- 好友详情页面 -->
<view class="friend-detail-container">

  <!-- 加载中 -->
  <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="profile-top flex-row">
          <view class="avatar-container">
            <image class="avatar-image"   data-avatar="{{friendInfo.avatar}}"  bindtap="previewImage" src="{{friendInfo.avatar || '/images/default-avatar.svg'}}" mode="aspectFill" />
            <view class="avatar-decoration" wx:if="{{friendInfo.isMember}}">👑</view>
            <view class="online-status online"></view>
          </view>
          <view class="profile-info flex-col">
            <view class="profile-name-row flex-row">
              <view class="profile-name">{{friendInfo.remark || friendInfo.nickname || 'FindMe用户'}}</view>
              <view class="vip-crown" wx:if="{{friendInfo.isMember}}">👑</view>
            </view>
            <view class="profile-id">
              <text class="id-label">ID: </text>
              <view class="id-value-wrapper" bindtap="copyId">
                <text class="id-value">{{friendInfo.customId}}</text>
              </view>
              <!-- 新增：去认证按钮 -->
              <view class="verify-btn" wx:if="{{!friendInfo.verified}}">
                <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="{{friendInfo.verified}}">
                <image class="verified-tag-p" bindtap="copyId" src="../../../images/tag.png" mode="widthFix" />
                <text class="verified-text">已认证</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部信息区：位置、二维码、编辑按钮、设置、简介、个人标签 -->
    <view class="profile-bottom">
      <!-- 操作按钮区 -->
      <view class="action-buttons">
        <view class="qr-code-btn" bindtap="viewQRCode">
          <image src="/images/qr-code.png" class="qr-code-icon"/>
        </view>
      </view>

      <!-- 位置信息 -->
      <view class="profile-location" bindtap="viewLocation">
        <image src="/images/location.png" class="location-icon"/>
        <text class="location-text-qr">{{hometownText}}</text>
        <text class="location-arrow">›</text>
      </view>

      <!-- 个人简介 -->
      <view class="profile-signature">
        <text class="signature-text">{{friendInfo.bio || '暂无简介'}}</text>
      </view>

      <!-- 个人标签区域 -->
      <view class="profile-tabs">
        <scroll-view scroll-x="true" class="tab-scroll" enable-flex="true">
          <view class="tab-item" wx:if="{{friendInfo.gender !== null && friendInfo.gender !== undefined && friendInfo.gender !== ''}}">
            <image wx:if="{{friendInfo.gender === 1 || friendInfo.gender === '1' || friendInfo.gender === 2 || friendInfo.gender === '2'}}" class="gender-icon" src="{{friendInfo.gender === 1 || friendInfo.gender === '1' ? '/images/self/male.svg' : '/images/self/fmale.svg'}}" mode="aspectFit" />
            <text wx:else>？</text>
          </view>

          <view class="tab-item" wx:if="{{calculatedAge !== null && calculatedAge !== undefined || friendInfo.age}}">
            <text> {{calculatedAge !== null && calculatedAge !== undefined ? calculatedAge : ((friendInfo.age + "岁") || '')}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.mood && friendInfo.mood !== ''}}">
            <text> {{friendInfo.mood}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.mbtiType && friendInfo.mbtiType !== ''}}">
            <text> {{friendInfo.mbtiType}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.identity && friendInfo.identity !== ''}}">
            <text> {{friendInfo.identity}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.zodiacSign && friendInfo.zodiacSign !== ''}}">
            <text> {{friendInfo.zodiacSign}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.school && friendInfo.school !== ''}}">
            <text> {{friendInfo.school}}</text>
          </view>

          <view class="tab-item" wx:if="{{friendInfo.occupation && friendInfo.occupation !== ''}}">
            <text> {{friendInfo.occupation}}</text>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 好友足迹（完全仿 profile.wxml 的 myfootprint 模块） -->
    <!-- <view class="myfootprint">
      <view class="footprint-title">{{friendInfo.remark || friendInfo.nickname}}的足迹</view>
      <image class="footprint-earth" src="/images/self/earth.png" mode="aspectFit"/>
      <view class="footprint-badge">
        <text>{{footprints && footprints.length ? footprints.length + '个足迹' : '暂无足迹'}}</text>
      </view>
    </view> -->

    <!-- 新增两个渐变圆角容器 -->
    <!-- <view class="footprint-gradient-row">
      <view class="footprint-gradient-box footprint-gradient-yellow"></view>
      <view class="footprint-gradient-box footprint-gradient-blue"></view>
    </view> -->

    <!-- 操作按钮区 -->
    <view class="detail-action-buttons">
      <view class="detail-action-btn-wrapper" bindtap="sendMessage">
        <view class="detail-action-btn">
          <text>消息</text>
        </view>
      </view>
      <view class="detail-action-btn-wrapper" bindtap="setRemark">
        <view class="detail-action-btn">
          <text>备注</text>
        </view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="detail-sections">
      <!-- 危险操作 -->
      <view class="detail-section danger-section">
        <view class="danger-item" bindtap="deleteFriend">
          <text class="danger-text">删除好友</text>
        </view>
      </view>
    </view>

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