wx-mls/pages/register/register.js

import { enroll,smsSend } from '../../api/other';
import { FETCH_AND_FORMAT_USER_INFO } from '../../utils/util.js'
import { uploadImage } from '../../utils/upload.js';
import {BASE_URL} from '../../utils/request';
const app = getApp();
Page({
  data: {
    formData: {
      phone: '',
      captcha: '',
      nickname: '',
      gender: '',        // '女' 或 '男'
      race_number: '',   // 身份证号
      // competition_no: '', // 比赛ID
      competition_image: '' // 上传的图片路径
    },
    phoneError: '',
    raceNumberError:'',
    genders: ['女', '男'],
    showPicker: false,
    fileList: [],
    checked: false,
    showRegistrationSuccess: false,
    canSubmit: false, // 按钮是否可点击
    showAgreementModal:false,
    agreementContent:'',
    agreementTitle:'',
    codeText: '获取验证码',
    codeDisabled: false,
    timer: null,
    countdown: 60,
    couponInfo:{},
    filePath: '',  // 上传成功的文件路径
    fileType: '',   // image / pdf
    baseUrl:BASE_URL
  },

  onShowPicker() {
    this.setData({ showPicker: true });
  },
  onCancel() {
    this.setData({ showPicker: false });
  },
  // 性别确定
  onConfirm(event) {
    const { value } = event.detail;
    this.setData({
      formData: {
        ...this.data.formData,
        gender: value
      },
      showPicker: false
    }, () => this.checkFormValid());
  },
  // 点击上传区域
  chooseFile() {
    wx.showActionSheet({
      itemList: ['图片', 'PDF'],
      success: res => {
        if (res.tapIndex === 0) {
          this.chooseImage();
        } else {
          this.choosePdf();
        }
      }
    });
  },
  // 选择图片
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const path = res.tempFilePaths[0];
        this.uploadFile(path, 'image');
      }
    });
  },
  // 选择 PDF
  choosePdf() {
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success: res => {
        const file = res.tempFiles[0];
        if (file.name.endsWith('.pdf')) {
          this.uploadFile(file.path, 'pdf');
        } else {
          wx.showToast({ title: '请选择 PDF 文件', icon: 'none' });
        }
      }
    });
  },
  // 上传文件
  async uploadFile(path, type) {
    if (!path) {
      wx.showToast({ title: '文件路径错误', icon: 'none' });
      return;
    }
    try {
      const res = await uploadImage(path);
      console.log('上传成功:', res);
      this.setData({
        filePath: res.url,
        fileType: type,
        "formData.competition_image": res.path
      });
    } catch (err) {
      console.error('上传失败:', err);
    }
  },
  // 删除文件
  removeFile() {
    this.setData({
      filePath: '',
      fileType: '',
      "formData.competition_image": ''
    });
  },
  // 输入框数据绑定
  onInput(e) {
    console.log(e)
    const field = e.currentTarget.dataset.field;
    const value = e.detail;
    console.log(value)
    // 手机号单独做校验
    if (field === 'phone') {
      const regPhone = /^1[3-9]\d{9}$/;
      if (value && !regPhone.test(value)) {
        this.setData({ phoneError: '手机号格式不正确' });
      }else{
        this.setData({ phoneError: '' });
      }
    }
    if (field === 'race_number') {
      const regIdCard = /^\d{18}$/;
      if (value && !regIdCard.test(value)) {
        this.setData({ raceNumberError: '身份证号格式不正确' });
      }else{
        this.setData({ raceNumberError: '' });
      }
    }
    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) {
      // 优惠券信息
      this.setData({
        couponInfo:res.data[0]
      })
      this.setData({ showRegistrationSuccess: true });
      app.globalData.userInfo = await FETCH_AND_FORMAT_USER_INFO();
    } else {
      wx.showToast({ title: res.message || '报名失败', icon: 'none', duration: 2000 });
    }
  },
  // 点击协议文字显示弹窗
  showAgreement(e) {
    const type = e.currentTarget.dataset.type;
    const dataInfo = app.globalData.programConfig;   
    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 });
  },
  //预览图片
  previewImage(e){
    const current = e.currentTarget.dataset.src;
    wx.previewImage({
      current,
      urls: [current]
    });
  },
  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);
  }
});