findme-miniprogram-frontend/subpackages/social/user-preview/user-preview.wxml

<view class="friend-detail-container">
  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>
  <view class="error-box" wx:elif="{{error}}">
    <text class="error-text">{{error}}</text>
    <button class="retry-btn" bindtap="reload">重试</button>
  </view>
  <scroll-view class="detail-content" scroll-y="true" wx:else>
      <view class="info-out">
        <view class="info-card">
          <view class="basic-info">
            <view class="profile-top">
              <view class="avatar-container">
                <image class="avatar-image" data-avatar="{{user.avatar}}" bindtap="previewImage" wx:if="{{user.avatar}}" src="{{user.avatar}}" mode="aspectFill" />
                <view wx:else class="avatar-placeholder">
                  <text class="avatar-text">{{user.nickname ? user.nickname.charAt(0) : '?'}}</text>
                </view>
                <view class="online-status online"></view>
              </view>
              <view class="profile-info">
                <view class="profile-name-row">
                  <view class="profile-name">{{user.nickname || user.customId || 'FindMe用户'}}</view>
                  <view class="vip-crown" wx:if="{{user.isMember}}">👑</view>
                </view>
                <view class="profile-id">
                <view>
                  <text class="id-label">ID: </text>
                  <view class="id-value-wrapper" bindtap="copyId">
                    <text class="id-value">{{user.customId}}</text>
                  </view>
                </view>
                <view class="tag" wx:if="{{user.verified}}">
                  <image class="tagImg"  src="/images/tag.png" mode=""/>
                  <text class="tagText">已认证</text>
                </view>
                </view>
              </view>
            </view>
          </view>
        </view>


      </view>

      <view class="info-out">
        <view class="profile-bottom">
          <view class="action-buttons">
            <!-- <view class="edit-btn" bindtap="goChat">
              <image src="/images/StartGroupChat.svg" class="edit-icon"/>
              <text class="edit-text">发消息</text>
            </view> -->
            <view class="qr-code-btn" bindtap="navigateToQRCode">
              <image src="/images/qr-code.png" class="qr-code-icon"/>
            </view>
            
          </view>

          <!-- 位置信息 -->
          <view class="profile-location">
            <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">{{user.bio || '暂无简介'}}</text>
          </view>
    
          <view class="profile-tabs">
            <scroll-view scroll-x="true" class="tab-scroll" enable-flex="true">
              <view class="tab-item" wx:if="{{user.gender !== null && user.gender !== undefined && user.gender !== ''}}">
                <image wx:if="{{user.gender === 1 || user.gender === '1' || user.gender === 2 || user.gender === '2'}}" class="gender-icon" src="{{user.gender === 1 || user.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) || (user.age !== null && user.age !== undefined)}}">
                <text>{{calculatedAge !== null && calculatedAge !== undefined ? (calculatedAge + '岁') : (user.age ? (user.age + '岁') : '')}}</text>
              </view>

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

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

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

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

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

              <view class="tab-item" wx:if="{{user.occupation && user.occupation !== ''}}">
                <text>{{user.occupation}}</text>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <!-- <view class="info-out"> 
        <view class="myfootprint">
          <view class="footprint-title">Dasha的足迹</view>
          <image class="footprint-earth" src="/images/self/earth.png" mode="aspectFit"/>
          <view class="footprint-badge"><text>暂无足迹</text></view>
        </view>
      </view> -->
      
     <!-- 新增两个渐变圆角容器 -->
     <!-- <view class="info-out">
      <view class="footprint-gradient-row">
        <view class="footprint-gradient-box footprint-gradient-yellow">
          <image class="video" src="/images/self/icon-video.png" mode=""/>
        </view>
        <view class="footprint-gradient-box footprint-gradient-blue">
          <image  class="video" src="/images/self/icon-video.png" mode=""/>
        </view>
      </view>
     </view> -->

    <!-- 操作按钮区 -->
    <view class="info-out but-bom">
      <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="addFriend" wx:if="{{statusAdd === 0}}">
          <view class="detail-action-btn">
            <text>加为好友</text>
          </view>
        </view>
        <view class="detail-action-btn-wrapper gray" wx:if="{{statusAdd === 1}}">
          <view class="detail-action-btn">
            <text>已发送申请</text>
          </view>
        </view>
        <view class="detail-action-btn-wrapper gray" wx:if="{{statusAdd === 2}}">
          <view class="detail-action-btn">
            <text>已是好友</text>
          </view>
        </view>
      </view>
    </view>

  </scroll-view>
  
</view>