<!-- 页面根容器，设置整体样式 -->
<view class="qr-code-container">
  <!-- 自定义导航栏 -->
  <view class="nav-bar">
    <!-- 返回按钮 -->
    <view class="back-btn" bindtap="navigateBack">
      <text class="back-icon">↩</text>
    </view>
    <!-- 菜单按钮 -->
    <view class="menu-btn" bindtap="showMenu">
      <text class="menu-icon">⋯</text>
    </view>
  </view>

  <!-- 主体内容区域 -->
  <view class="main-content">
    <!-- 用户信息区域 -->
    <view class="user-info">
      <!-- 用户名显示 -->
      <text class="username">{{username}}</text>
      <!-- 用户ID显示 -->
      <text class="user-id">ID: {{userId}}</text>
      <!-- 加载状态指示器 -->
      <view wx:if="{{isLoading}}" class="loading-indicator">
        <text class="loading-text">Loading...</text>
      </view>
    </view>

    <!-- 二维码容器 -->
    <view class="qr-code-box">
      <!-- 加载状态 -->
      <view wx:if="{{isLoading}}" class="qr-loading">
        <text class="loading-text">Generating QR Code...</text>
      </view>
      
      <!-- 二维码图片显示 -->
      <image 
        wx:elif="{{qrCodeUrl}}" 
        class="qr-code-image" 
        src="{{qrCodeUrl}}" 
        mode="aspectFit"
        bindload="onQRCodeLoad"
        binderror="onQRCodeError"
      ></image>
      
      <!-- 错误状态 -->
      <view wx:else class="qr-error">
        <text class="error-text">QR Code unavailable</text>
        <button class="retry-btn" bindtap="generateQRCode">Retry</button>
      </view>
    </view>

    <!-- 刷新二维码按钮 -->
    <view class="refresh-btn" bindtap="refreshQRCode" hover-class="btn-hover">
      <!-- 刷新图标 -->
      <text class="refresh-icon">🔄</text>
      <!-- 刷新按钮文字 -->
      <text class="refresh-text">换一换</text>
    </view>

    <!-- 用户信息卡片（可选显示更多信息） -->
    <view wx:if="{{userInfo && userInfo.user}}" class="user-details">
      <view wx:if="{{userInfo.user.avatar}}" class="user-avatar">
        <image class="avatar-img" src="{{userInfo.user.avatar}}" mode="aspectFill"></image>
      </view>
      <view class="user-meta">
        <text class="user-nickname">{{userInfo.user.nickname || 'No nickname'}}</text>
        <text class="user-custom-id">{{userInfo.user.customId || 'No custom ID'}}</text>
        <!-- Test data indicator -->
        <text wx:if="{{isTestData}}" class="test-indicator">🧪 Test Data</text>
      </view>
    </view>
  </view>

  <view class="action-buttons">
      <!-- 保存二维码按钮 -->
      <view class="action-btn" bindtap="saveQRCode">
        <!-- 下载图标 -->
        <image class="action-icon" src="/images/download.svg" mode="aspectFit"></image>
      </view>
      <!-- 扫描二维码按钮 -->
      <view class="action-btn" bindtap="scanQRCode">
        <!-- 扫描图标 -->
        <image class="action-icon" src="/images/scan.svg" mode="aspectFit"></image>
      </view>
      <!-- 分享二维码按钮 -->
      <view class="action-btn" bindtap="shareQRCode">
        <!-- 分享图标 -->
        <image class="action-icon" src="/images/share.svg" mode="aspectFit"></image>
      </view>
    </view>
</view>