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

// 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);
    }
  }
});