|
|
// pages/real-name-auth/real-name-auth.js
Page({ data: { // 表单数据
name: '', phone: '', smsCode: '', // 焦点状态
nameFocus: false, phoneFocus: false, codeFocus: false, // 错误提示
nameError: '', phoneError: '', smsCodeError: '', // 验证码相关
canSendCode: false, countdown: 0, countdownTimer: null, // 协议状态
agreed: false, // 提交状态
canSubmit: false, isSubmitting: false, // 弹窗
showSuccessModal: false },
onLoad() { this.checkForm(); },
onUnload() { // 清除定时器
if (this.data.countdownTimer) { clearInterval(this.data.countdownTimer); } },
// 姓名输入处理
onNameInput(e) { const name = e.detail.value.trim(); let nameError = ''; if (name && !/^[\u4e00-\u9fa5]{2,10}$/.test(name)) { nameError = '姓名应为2-10个汉字'; } this.setData({ name: name, nameError: nameError }, () => { this.checkForm(); this.checkCanSendCode(); }); },
onNameFocus() { this.setData({ nameFocus: true }); },
onNameBlur() { this.setData({ nameFocus: false }); },
// 手机号输入处理
onPhoneInput(e) { const phone = e.detail.value.trim(); let phoneError = ''; if (phone && !/^1[3-9]\d{9}$/.test(phone)) { phoneError = '请输入正确的手机号码'; } this.setData({ phone: phone, phoneError: phoneError }, () => { this.checkForm(); this.checkCanSendCode(); }); },
onPhoneFocus() { this.setData({ phoneFocus: true }); },
onPhoneBlur() { this.setData({ phoneFocus: false }); },
// 验证码输入处理
onSmsCodeInput(e) { const smsCode = e.detail.value.trim(); let smsCodeError = ''; if (smsCode && !/^\d{6}$/.test(smsCode)) { smsCodeError = '请输入6位数字验证码'; } this.setData({ smsCode: smsCode, smsCodeError: smsCodeError }, () => { this.checkForm(); }); },
onCodeFocus() { this.setData({ codeFocus: true }); },
onCodeBlur() { this.setData({ codeFocus: false }); },
// 检查是否可以发送验证码
checkCanSendCode() { const { name, phone, nameError, phoneError } = this.data; const canSendCode = name && phone && !nameError && !phoneError; this.setData({ canSendCode }); },
// 发送验证码
async sendSmsCode() { const { name, phone, countdown } = this.data; if (countdown > 0) return; // 验证手机号格式
if (!/^1[3-9]\d{9}$/.test(phone)) { this.setData({ phoneError: '请输入正确的手机号码' }); return; } // 显示加载
wx.showLoading({ title: '发送中...', mask: true });
try { // 模拟发送验证码请求
await new Promise(resolve => setTimeout(resolve, 1500)); wx.hideLoading(); // 发送成功
wx.showToast({ title: '验证码已发送', icon: 'success', duration: 2000 }); // 开始倒计时
this.startCountdown(); } catch (error) { wx.hideLoading(); wx.showToast({ title: '发送失败,请重试', icon: 'error', duration: 2000 }); } },
// 开始倒计时
startCountdown() { this.setData({ countdown: 60 }); const timer = setInterval(() => { let { countdown } = this.data; countdown--; if (countdown <= 0) { clearInterval(timer); this.setData({ countdown: 0, countdownTimer: null }); } else { this.setData({ countdown: countdown, countdownTimer: timer }); } }, 1000); },
// 协议处理
toggleAgreement() { this.setData({ agreed: !this.data.agreed }, () => { this.checkForm(); }); },
viewAgreement() { wx.navigateTo({ url: '/pages/web-view/web-view?url=' + encodeURIComponent('https://your-domain.com/agreement') }); },
viewPrivacy() { wx.navigateTo({ url: '/pages/web-view/web-view?url=' + encodeURIComponent('https://your-domain.com/privacy') }); },
// 检查表单
checkForm() { const { name, phone, smsCode, nameError, phoneError, smsCodeError, agreed } = this.data;
const isValid = name && phone && smsCode && !nameError && !phoneError && !smsCodeError && agreed;
this.setData({ canSubmit: isValid }); },
// 提交认证
async submitAuth() { if (!this.data.canSubmit || this.data.isSubmitting) return; this.setData({ isSubmitting: true }); // 验证数据
const { name, phone, smsCode } = this.data; // 最终验证
if (!/^[\u4e00-\u9fa5]{2,10}$/.test(name)) { this.setData({ nameError: '姓名应为2-10个汉字', isSubmitting: false }); return; } if (!/^1[3-9]\d{9}$/.test(phone)) { this.setData({ phoneError: '请输入正确的手机号码', isSubmitting: false }); return; } if (!/^\d{6}$/.test(smsCode)) { this.setData({ smsCodeError: '请输入6位数字验证码', isSubmitting: false }); return; }
try { // 模拟API请求
await new Promise(resolve => setTimeout(resolve, 2000)); // 提交成功
this.setData({ isSubmitting: false, showSuccessModal: true }); // 保存认证信息到本地
wx.setStorageSync('realNameAuth', { name: name, phone: phone, certified: true, certifiedTime: new Date().getTime() }); } catch (error) { this.setData({ isSubmitting: false }); wx.showToast({ title: '认证失败,请重试', icon: 'error', duration: 2000 }); } },
// 成功弹窗处理
closeSuccessModal() { this.setData({ showSuccessModal: false }); },
// 前往首页
goToHome() { this.closeSuccessModal(); wx.switchTab({ url: '/pages/index/index' }); }});
|