wx-mls/pages/register/register.js

import { enroll,smsSend,enrollDetail } 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,
    isEdit: false,// 是否已有报名信息
  },
  async onLoad(){
    const res = await enrollDetail();
    if (res.code == 200 && res.data) {
      let { phone, nickname, gender, race_number, competition_image } = res.data;
      this.setData({
        formData: {
          phone,
          nickname,
          race_number,
          competition_image,
          gender: gender == 0 ? '女' : '男'
        },
        isEdit: true
      });
    }
  },

  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
      }, () => this.checkFormValid());
    } catch (err) {
      console.error('上传失败:', err);
    }
  },
  // 删除文件
  removeFile() {
    this.setData({
      filePath: '',
      fileType: '',
      "formData.competition_image": ''
    },() => this.checkFormValid());
  },
  // 输入框数据绑定
  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 = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
      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, competition_image } = this.data.formData;
    const { isEdit, checked, raceNumberError, phoneError } = this.data;
    let valid = false;
    if (isEdit) {
      valid = phone && nickname && gender && race_number && competition_image && checked && !raceNumberError && !phoneError;
    } else {
      valid = phone && captcha && nickname && gender && race_number && competition_image && checked && !raceNumberError && !phoneError;
    }
    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() {
    this.checkFormValid();
    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) {
      await FETCH_AND_FORMAT_USER_INFO();
      if (!this.data.isEdit) {
        this.setData({
          couponInfo: res.data[0],
          showRegistrationSuccess: true
        });
      } else {
        wx.showToast({ title: '修改成功', icon: 'none' });
        wx.navigateBack({ delta: 1 });
      }
    } 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 == 'liability'?dataInfo.disclaimer : dataInfo.privacy_policy,
      agreementTitle: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);
  }
});