beta

miniprogram-example/pages/otp-list/index.wxml

@@ -0,0 +1,59 @@
+<!-- otp-list/index.wxml -->
+<view class="container">
+  <view class="header">
+    <text class="title">我的OTP列表</text>
+    <view class="add-button" bindtap="handleAddOTP">
+      <text class="add-icon">+</text>
+    </view>
+  </view>
+
+  <!-- 加载中 -->
+  <view class="loading-container" wx:if="{{loading}}">
+    <view class="loading-spinner"></view>
+    <text class="loading-text">加载中...</text>
+  </view>
+
+  <!-- OTP列表 -->
+  <view class="otp-list" wx:else>
+    <block wx:if="{{otpList.length > 0}}">
+      <view class="otp-item" wx:for="{{otpList}}" wx:key="id">
+        <view class="otp-info">
+          <view class="otp-name-row">
+            <text class="otp-name">{{item.name}}</text>
+            <text class="otp-issuer">{{item.issuer}}</text>
+          </view>
+          
+          <view class="otp-code-row" bindtap="handleCopyCode" data-code="{{item.currentCode}}">
+            <text class="otp-code">{{item.currentCode || '******'}}</text>
+            <text class="copy-hint">点击复制</text>
+          </view>
+          
+          <view class="otp-countdown">
+            <progress 
+              percent="{{(item.countdown / item.expiresIn) * 100}}" 
+              stroke-width="3" 
+              activeColor="{{item.countdown < 10 ? '#ff4d4f' : '#1890ff'}}"
+              backgroundColor="#e9e9e9"
+            />
+            <text class="countdown-text">{{item.countdown || 0}}s</text>
+          </view>
+        </view>
+        
+        <view class="otp-actions">
+          <view class="action-button edit" bindtap="handleEditOTP" data-id="{{item.id}}">
+            <text class="action-icon">✎</text>
+          </view>
+          <view class="action-button delete" bindtap="handleDeleteOTP" data-id="{{item.id}}" data-name="{{item.name}}">
+            <text class="action-icon">✕</text>
+          </view>
+        </view>
+      </view>
+    </block>
+    
+    <!-- 空状态 -->
+    <view class="empty-state" wx:else>
+      <image class="empty-image" src="/assets/images/empty.png" mode="aspectFit"></image>
+      <text class="empty-text">暂无OTP，点击右上角添加</text>
+    </view>
+  </view>
+</view>