beta

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

@@ -0,0 +1,119 @@
+<!-- otp-add/index.wxml -->
+<view class="container">
+  <view class="header">
+    <text class="title">添加OTP</text>
+  </view>
+
+  <view class="form-container">
+    <view class="form-group">
+      <text class="form-label">名称 <text class="required">*</text></text>
+      <input 
+        class="form-input" 
+        placeholder="请输入OTP名称" 
+        value="{{form.name}}"
+        bindinput="handleInputChange"
+        data-field="name"
+      />
+    </view>
+
+    <view class="form-group">
+      <text class="form-label">发行方</text>
+      <input 
+        class="form-input" 
+        placeholder="请输入发行方名称" 
+        value="{{form.issuer}}"
+        bindinput="handleInputChange"
+        data-field="issuer"
+      />
+    </view>
+
+    <view class="form-group">
+      <text class="form-label">密钥 <text class="required">*</text></text>
+      <view class="secret-input-container">
+        <input 
+          class="form-input" 
+          placeholder="请输入密钥或扫描二维码" 
+          value="{{form.secret}}"
+          bindinput="handleInputChange"
+          data-field="secret"
+        />
+        <view class="scan-button" bindtap="handleScanQRCode" wx:if="{{!scanMode}}">
+          <text class="scan-icon">🔍</text>
+        </view>
+        <view class="scanning-indicator" wx:else>
+          <view class="scanning-spinner"></view>
+        </view>
+      </view>
+    </view>
+
+    <view class="form-group">
+      <text class="form-label">算法</text>
+      <picker 
+        mode="selector" 
+        range="{{algorithms}}" 
+        value="{{algorithms.indexOf(form.algorithm)}}"
+        bindchange="handlePickerChange"
+        data-field="algorithm"
+      >
+        <view class="picker-view">
+          <text>{{form.algorithm}}</text>
+          <text class="picker-arrow">▼</text>
+        </view>
+      </picker>
+    </view>
+
+    <view class="form-row">
+      <view class="form-group half">
+        <text class="form-label">位数</text>
+        <picker 
+          mode="selector" 
+          range="{{digitOptions}}" 
+          value="{{digitOptions.indexOf(form.digits)}}"
+          bindchange="handlePickerChange"
+          data-field="digits"
+        >
+          <view class="picker-view">
+            <text>{{form.digits}}</text>
+            <text class="picker-arrow">▼</text>
+          </view>
+        </picker>
+      </view>
+
+      <view class="form-group half">
+        <text class="form-label">周期(秒)</text>
+        <picker 
+          mode="selector" 
+          range="{{periodOptions}}" 
+          value="{{periodOptions.indexOf(form.period)}}"
+          bindchange="handlePickerChange"
+          data-field="period"
+        >
+          <view class="picker-view">
+            <text>{{form.period}}</text>
+            <text class="picker-arrow">▼</text>
+          </view>
+        </picker>
+      </view>
+    </view>
+  </view>
+
+  <view class="button-group">
+    <button 
+      class="cancel-button" 
+      bindtap="handleCancel"
+      disabled="{{submitting}}"
+    >取消</button>
+    
+    <button 
+      class="submit-button {{submitting ? 'loading' : ''}}" 
+      bindtap="handleSubmit"
+      disabled="{{submitting}}"
+    >
+      <text wx:if="{{!submitting}}">保存</text>
+      <view wx:else class="loading-container">
+        <view class="loading-icon"></view>
+        <text>保存中...</text>
+      </view>
+    </button>
+  </view>
+</view>