92 lines
3.2 KiB
Text
92 lines
3.2 KiB
Text
|
<!-- 页面根容器，设置整体样式 -->
|
||
|
|
<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>
|