wx-mls/pages/register/register.js

import { enroll,smsSend } from '../../api/other';
const app = getApp();
Page({
  data: {
    formData: {
      phone: '',
      captcha: '',
      nickname: '',
      gender: '',        // '女' 或 '男'
      race_number: '',   // 身份证号
      // competition_no: '', // 比赛ID
      competition_image: '' // 上传的图片路径
    },
    phoneError: '', 
    genders: ['女', '男'],
    showPicker: false,
    pickerValue: '',
    fileList: [],
    checked: false,
    showRegistrationSuccess: false,
    canSubmit: false, // 按钮是否可点击
    showAgreementModal:false,
    agreementContent:'',
    agreementTitle:'',
    codeText: '获取验证码',
    codeDisabled: false,
    timer: null,
    countdown: 60
  },

  onShowPicker() {
    this.setData({ showPicker: true });
  },
  onCancel() {
    this.setData({ showPicker: false });
  },
  onPickerChange(event) {
    const { value } = event.detail;
    this.setData({ pickerValue: value });
  },
  // 性别确定
  onConfirm() {
    this.setData({
      formData: {
        ...this.data.formData,
        gender: this.data.pickerValue
      },
      showPicker: false
    }, () => this.checkFormValid());
  },

  // 上传文件
  afterRead(event) {
    const { file } = event.detail;
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 替换成真实接口
      filePath: file.url,
      name: 'file',
      formData: { user: 'test' },
      success: (res) => {
        const { fileList } = this.data;
        const path = res.data; // 假设返回路径
        fileList.push({ ...file, url: path });
        this.setData({
          fileList,
          formData: { ...this.data.formData, competition_image: path }
        });
      }
    });
  },

  // 输入框数据绑定
  onInput(e) {
    const field = e.currentTarget.dataset.field;
    const value = e.detail;
    // 手机号单独做校验
    if (field === 'phone') {
      const regPhone = /^1[3-9]\d{9}$/;
      if (value && !regPhone.test(value)) {
        this.setData({ phoneError: '手机号格式不正确' });
      }else{
        this.setData({ phoneError: '' });
      }
    }
    this.setData({
      formData: { ...this.data.formData, [field]: value }
    }, () => this.checkFormValid());
  },

  // 勾选协议
  onCheckbox(event) {
    this.setData({ checked: event.detail }, () => this.checkFormValid());
  },

  // 校验表单是否可提交
  checkFormValid() {
    const { phone, captcha, nickname, gender, race_number } = this.data.formData;
    const valid = phone && captcha && nickname && gender && race_number && this.data.checked;
    this.setData({ canSubmit: valid });
  },
  // 获取验证码
  async getCode() {
    if(this.data.codeDisabled) return;
    const phone = this.data.formData.phone;
    if (!phone) {
      wx.showToast({
        title: '请输入手机号',
        icon: 'none'
      });
      return;
    }
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      wx.showToast({
        title: '手机号格式不正确',
        icon: 'none'
      });
      return;
    }
    // 禁用按钮
    this.setData({ codeDisabled: true });
    // 发送验证码请求给后台
    const res = await smsSend({phone:this.data.formData.phone});
    if (res.code == 200) {
      wx.showToast({ title: '验证码已发送', icon: 'none' });
      this.startCountdown();
    } else {
      wx.showToast({ title: res.message || '发送失败', icon: 'none' });
      this.setData({ codeDisabled: false });
    }
  },

  // 提交报名
  async onSubmit() {
    if (!this.data.canSubmit) return;
    const payload = {
      ...this.data.formData,
      gender: this.data.formData.gender === '女' ? 0 : 1
    };
    const res = await enroll(payload);
    if (res.code === 200) {
      wx.showToast({ title: res.data, icon: 'none', duration: 2000 });
      this.setData({ showRegistrationSuccess: true });
    } else {
      wx.showToast({ title: res.message || '报名失败', icon: 'none', duration: 2000 });
    }
  },
  // 点击协议文字显示弹窗
  showAgreement(e) {
    const type = e.currentTarget.dataset.type;
    const dataInfo = app.globalData.programConfig.marathon_event;   
    this.setData({
      showAgreementModal: true,
      agreementContent: type == 'rules'?dataInfo.rules : type == 'liability'?dataInfo.disclaimer : dataInfo.privacy_policy,
      agreementTitle:type == 'rules'?'活动规则': type == 'liability'?'免责协议' : '隐私政策'
    });
  },
  closeAgreementModal() {
    this.setData({ showAgreementModal: false });
  },

  onReceive() {
    this.setData({ showRegistrationSuccess: false });
    wx.navigateBack({ delta: 1 });
  },
  startCountdown() {
    let countdown = this.data.countdown;
    this.setData({ codeText: `${countdown}s` });
    if (this.data.timer) clearInterval(this.data.timer);
    this.data.timer = setInterval(() => {
      countdown -= 1;
      if (countdown <= 0) {
        clearInterval(this.data.timer);
        this.setData({ codeText: '获取验证码', codeDisabled: false, countdown: 60 });
      } else {
        this.setData({ codeText: `${countdown}s`, countdown });
      }
    }, 1000);
  },
  onUnload() {
    if (this.data.timer) clearInterval(this.data.timer);
  }
});