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