beta

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

@@ -0,0 +1,213 @@
+// otp-list/index.js
+import { getOTPList, getOTPCode, deleteOTP } from '../../services/otp';
+import { checkLoginStatus } from '../../services/auth';
+
+Page({
+  data: {
+    otpList: [],
+    loading: true,
+    refreshing: false
+  },
+
+  onLoad() {
+    this.checkLogin();
+  },
+
+  onShow() {
+    // 每次页面显示时刷新OTP列表
+    if (!this.data.loading) {
+      this.fetchOTPList();
+    }
+  },
+
+  // 下拉刷新
+  onPullDownRefresh() {
+    this.setData({ refreshing: true });
+    this.fetchOTPList().finally(() => {
+      wx.stopPullDownRefresh();
+      this.setData({ refreshing: false });
+    });
+  },
+
+  // 检查登录状态
+  checkLogin() {
+    checkLoginStatus().then(isLoggedIn => {
+      if (isLoggedIn) {
+        this.fetchOTPList();
+      } else {
+        wx.redirectTo({
+          url: '/pages/login/login'
+        });
+      }
+    });
+  },
+
+  // 获取OTP列表
+  fetchOTPList() {
+    this.setData({ loading: true });
+    return getOTPList()
+      .then(res => {
+        if (res.data && Array.isArray(res.data)) {
+          this.setData({ 
+            otpList: res.data,
+            loading: false
+          });
+          
+          // 获取每个OTP的当前验证码
+          this.refreshOTPCodes();
+        }
+      })
+      .catch(err => {
+        wx.showToast({
+          title: '获取OTP列表失败',
+          icon: 'none'
+        });
+        this.setData({ loading: false });
+      });
+  },
+
+  // 刷新所有OTP的验证码
+  refreshOTPCodes() {
+    const { otpList } = this.data;
+    
+    // 为每个OTP获取当前验证码
+    const promises = otpList.map(otp => {
+      return getOTPCode(otp.id)
+        .then(res => {
+          if (res.data && res.data.code) {
+            return {
+              id: otp.id,
+              code: res.data.code,
+              expiresIn: res.data.expires_in || 30
+            };
+          }
+          return null;
+        })
+        .catch(() => null);
+    });
+
+    Promise.all(promises).then(results => {
+      const updatedList = [...this.data.otpList];
+      
+      results.forEach(result => {
+        if (result) {
+          const index = updatedList.findIndex(otp => otp.id === result.id);
+          if (index !== -1) {
+            updatedList[index] = {
+              ...updatedList[index],
+              currentCode: result.code,
+              expiresIn: result.expiresIn
+            };
+          }
+        }
+      });
+
+      this.setData({ otpList: updatedList });
+      
+      // 设置定时器，每秒更新倒计时
+      this.startCountdown();
+    });
+  },
+
+  // 开始倒计时
+  startCountdown() {
+    // 清除之前的定时器
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+
+    // 创建新的定时器，每秒更新一次
+    this.countdownTimer = setInterval(() => {
+      const { otpList } = this.data;
+      let needRefresh = false;
+
+      const updatedList = otpList.map(otp => {
+        if (!otp.countdown) {
+          otp.countdown = otp.expiresIn || 30;
+        }
+
+        otp.countdown -= 1;
+
+        // 如果倒计时结束，标记需要刷新
+        if (otp.countdown <= 0) {
+          needRefresh = true;
+        }
+
+        return otp;
+      });
+
+      this.setData({ otpList: updatedList });
+
+      // 如果有OTP需要刷新，重新获取验证码
+      if (needRefresh) {
+        this.refreshOTPCodes();
+      }
+    }, 1000);
+  },
+
+  // 添加新的OTP
+  handleAddOTP() {
+    wx.navigateTo({
+      url: '/pages/otp-add/index'
+    });
+  },
+
+  // 编辑OTP
+  handleEditOTP(e) {
+    const { id } = e.currentTarget.dataset;
+    wx.navigateTo({
+      url: `/pages/otp-edit/index?id=${id}`
+    });
+  },
+
+  // 删除OTP
+  handleDeleteOTP(e) {
+    const { id, name } = e.currentTarget.dataset;
+    
+    wx.showModal({
+      title: '确认删除',
+      content: `确定要删除 ${name} 吗？`,
+      confirmColor: '#ff4d4f',
+      success: (res) => {
+        if (res.confirm) {
+          deleteOTP(id)
+            .then(() => {
+              wx.showToast({
+                title: '删除成功',
+                icon: 'success'
+              });
+              this.fetchOTPList();
+            })
+            .catch(err => {
+              wx.showToast({
+                title: '删除失败',
+                icon: 'none'
+              });
+            });
+        }
+      }
+    });
+  },
+
+  // 复制验证码
+  handleCopyCode(e) {
+    const { code } = e.currentTarget.dataset;
+    
+    wx.setClipboardData({
+      data: code,
+      success: () => {
+        wx.showToast({
+          title: '验证码已复制',
+          icon: 'success'
+        });
+      }
+    });
+  },
+
+  onUnload() {
+    // 页面卸载时清除定时器
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+  }
+});