epdc-resident-mp-js/subpages/voter/pages/register/register.js

const api = require('../../../../utils/api')

Page({
  data: {
    districtPickerOptions: [],
    districtPickerVisible: false,
    districtPickerValue: [],
    districtPickerLabel: '',

    groupPickerOptions: [],
    groupPickerVisible: false,
    groupPickerValue: [],
    groupPickerLabel: '',

    nationPickerOptions: [],
    nationPickerVisible: false,
    nationPickerValue: [],
    nationPickerLabel: '',

    rulePickerOptions: [],
    rulePickerVisible: false,
    rulePickerValue: [],
    rulePickerLabel: '',

    name: '',
    idCard: '',
    address: '',
    telephone: '',
    smsCode: '',
    note: '',
    smsCodeText: '获取验证码',
    id: '',

    submitBtnDisabled: false,
    protocolChecked: false
  },
  onLoad() {
    Promise.all([this.getNationList(), this.getRuleList(), this.getDistrictList()]).then(res => {
      this.getVoterDetail()
    })
  },
  // 所选地区
  showDistrictPicker() {
    this.setData({
      districtPickerVisible: true
    })
  },
  onDistrictPickerConfirm(e) {
    this.setData({
      districtPickerValue: e.detail.value,
      districtPickerLabel: e.detail.label,
      groupPickerValue: [],
      groupPickerLabel: ''
    })
    this.getGroupList()
  },
  onDistrictPickerCancel() {
    this.setData({
      districtPickerVisible: false
    })
  },
  onDistrictPickerVisibleChange(e) {
    this.setData({
      districtPickerVisible: e.detail.visible
    })
  },

  // 所选小组
  showGroupPicker() {
    if ( this.data.districtPickerValue.length === 0) {
      this.showToast("请先选择所在选区")
      return false
    }
    this.setData({
      groupPickerVisible: true
    })
  },
  onGroupPickerConfirm(e) {
    this.setData({
      groupPickerValue: e.detail.value,
      groupPickerLabel: e.detail.label
    })
  },
  onGroupPickerCancel() {
    this.setData({
      groupPickerVisible: false
    })
  },
  onGroupPickerVisibleChange(e) {
    this.setData({
      groupPickerVisible: e.detail.visible
    })
  },

  // 民族
  showNationPicker() {
    this.setData({
      nationPickerVisible: true
    })
  },
  onNationPickerConfirm(e) {
    this.setData({
      nationPickerValue: e.detail.value,
      nationPickerLabel: e.detail.label
    })
  },
  onNationPickerCancel() {
    this.setData({
      nationPickerVisible: false
    })
  },
  onNationPickerVisibleChange(e) {
    this.setData({
      nationPickerVisible: e.detail.visible
    })
  },

  // 参选原则
  showRulePicker() {
    this.setData({
      rulePickerVisible: true
    })
  },
  onRulePickerConfirm(e) {
    this.setData({
      rulePickerValue: e.detail.value,
      rulePickerLabel: e.detail.label
    })
  },
  onRulePickerCancel() {
    this.setData({
      rulePickerVisible: false
    })
  },
  onRulePickerVisibleChange(e) {
    this.setData({
      rulePickerVisible: e.detail.visible
    })
  },

  inputName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  inputIdCard(e) {
    this.setData({
      idCard: e.detail.value
    })
  },
  inputAddress(e) {
    this.setData({
      address: e.detail.value
    })
  },
  inputTelephone(e) {
    this.setData({
      telephone: e.detail.value
    })
  },
  inputSmsCode(e) {
    this.setData({
      smsCode: e.detail.value
    })
  },
  inputNote(e) {
    this.setData({
      note: e.detail.value
    })
  },
  // 获取民族列表
  getNationList() {
    return new Promise((resolve, reject) => {
      api.getNationList().then(res => {
        const arr = []
        res.data.forEach(item => {
          arr.push({
            label: item.nationName,
            value: item.nationNumericalCode
          })
        })
        this.setData({
          nationPickerOptions: arr
        })
        resolve(true)
      }).catch(err => {
        console.error(err)
        reject(false)
      })
    })
  },
  // 获取参选规则
  getRuleList() {
    return new Promise((resolve, reject) => {
      const params = {
        configType: "2",
        pid: ""
      }
      api.getVoterConfigList(params).then(res => {
        console.log('参选规则列表', res)
        const rulePickerOptions = []
        res.data.forEach(item => {
          rulePickerOptions.push({
            label: item.configName,
            value: item.configCode
          })
        })
        this.setData({
          rulePickerOptions
        })
        resolve(true)
      }).catch(err => {
        console.error(err)
        reject(false)
      })
    })
  },
  // 获取所选小区
  getDistrictList() {
    return new Promise((resolve, reject) => {
      const params = {
        configType: "0",
        pid: ""
      }
      api.getVoterConfigList(params).then(res => {
        console.log('参选规则列表', res)
        const districtPickerOptions = []
        res.data.forEach(item => {
          districtPickerOptions.push({
            label: item.configName,
            value: item.configCode,
            id: item.id
          })
        })
        this.setData({
          districtPickerOptions
        })
        resolve(true)
      }).catch(err => {
        console.error(err)
        reject(false)
      })
    })
  },
  // 获取所在小组
  getGroupList() {
    let pid = ''
    this.data.districtPickerOptions.forEach(item => {
      if (item.value === this.data.districtPickerValue[0]) {
        pid = item.id
      }
    })
    const params = {
      configType: "1",
      pid
    }
    api.getVoterConfigList(params).then(res => {
      console.log('参选规则列表', res)
      const groupPickerOptions = []
      res.data.forEach(item => {
        groupPickerOptions.push({
          label: item.configName,
          value: item.configCode
        })
      })
      this.setData({
        groupPickerOptions
      })
    }).catch(err => {
      console.error(err)
    })
  },
  // 获取验证码
  getSmsCode () {
    if (!this.data.telephone.trim('')) {
      this.showToast("请先输入手机号")
      return false
    }
    this.setData({
      smsCodeText: "获取中..."
    })
    const mobile = this.data.telephone.trim('')
    api.sendSms(mobile).then(() => {
      this.showToast("验证码发送成功")
      let num = 60
      this.setData({
        smsCodeText: "60s后重新获取"
      })
      const timer = setInterval(() => {
        if (num >= 1) {
          this.setData({
            smsCodeText: `${num}s后重新获取`
          })
          --num
        } else {
          clearInterval(timer)
          this.setData({
            smsCodeText: "获取验证码"
          })
        }
      }, 1000)
    }).catch(err => {
      console.log(err)
      this.setData({
        smsCodeText: "获取验证码"
      })
    })
  },
  // 提交选民登记
  submitVoter() {
    if (!this.data.protocolChecked) {
      this.showToast('请勾选底部按钮')
      return false
    }
    const { id, districtPickerValue, groupPickerValue, name, nationPickerValue, nationPickerLabel, idCard, address, rulePickerValue, note, telephone, smsCode } = this.data
    if (districtPickerValue.length === 0) {
      this.showToast('请选择所属选区')
      return false
    } else if (groupPickerValue.length === 0) {
      this.showToast('请选择所在小组')
      return false
    }  else if (!name) {
      this.showToast('请输入真实姓名')
      return false
    } else if (nationPickerValue.length === 0) {
      this.showToast('请选择民族')
      return false
    } else if (!idCard) {
      this.showToast('请输入身份证号')
      return false
    } else if (!address) {
      this.showToast('请输入户籍地址')
      return false
    } else if (rulePickerValue.length === 0) {
      this.showToast('请选择参选原则')
      return false
    } else if (!telephone) {
      this.showToast('请输入手机号码')
      return false
    } else if (!smsCode) {
      this.showToast('请输入验证码')
      return false
    }
    const params = {
      id,
      constituencyCode: districtPickerValue[0],
      groupCode: groupPickerValue[0],
      name,
      nationName: nationPickerLabel,
      nationNumericalCode: nationPickerValue[0],
      idNumber: idCard,
      domicile: address,
      participationPrincipleCode: rulePickerValue[0],
      remark: note,
      mobile: telephone,
      smsCode
    }
    wx.showLoading({
      title: '提交中...'
    })
    this.setData({
      submitBtnDisabled: true
    })
    api.submitVote(params).then(res => {
      this.showToast('提交成功')
      setTimeout(() => {
        wx.navigateBack({
          delta: 1
        });
      }, 1000)
    }).catch(err => {
      console.error(err)
    }).finally(() => {
      this.setData({
        submitBtnDisabled: false
      })
    })
  },
  // 获取详情
  getVoterDetail() {
    api.getVoterDetail().then(res => {
      if (res.data) {
        const { id, constituencyCode, groupCode, name, nationNumericalCode, idNumber, domicile, participationPrincipleCode, remark, mobile } = res.data
        let pid = ''
        let districtPickerLabel = ''
        this.data.districtPickerOptions.forEach(item => {
          if (item.value === constituencyCode) {
            districtPickerLabel = item.label
            pid = item.id
          }
        })
        let nationPickerLabel = ''
        this.data.nationPickerOptions.forEach(item => {
          if (item.value === nationNumericalCode) {
            nationPickerLabel = item.label
          }
        })
        let rulePickerLabel = ''
        this.data.rulePickerOptions.forEach(item => {
          if (item.value === participationPrincipleCode) {
            rulePickerLabel = item.label
          }
        })
        this.getGroupDetail({ pid, groupCode })
        this.setData({
          id,
          districtPickerLabel,
          districtPickerValue: [constituencyCode],
          name,
          nationPickerLabel,
          nationPickerValue: [nationNumericalCode],
          idCard: idNumber,
          address: domicile,
          rulePickerLabel,
          rulePickerValue: participationPrincipleCode,
          note: remark,
          telephone: mobile
        })
      }
    }).catch(err => {
      console.error(err)
    })
  },
  // 所选小组回显
  getGroupDetail({ pid, groupCode }) {
    const params = {
      configType: "1",
      pid
    }
    api.getVoterConfigList(params).then(res => {
      console.log('参选规则列表', res)
      const groupPickerOptions = []
      res.data.forEach(item => {
        groupPickerOptions.push({
          label: item.configName,
          value: item.configCode
        })
      })
      let groupPickerLabel = ''
      groupPickerOptions.forEach(item => {
        if (item.value === groupCode) {
          groupPickerLabel = item.label
        }
      })
      this.setData({
        groupPickerLabel,
        groupPickerOptions,
        groupPickerValue: [groupCode]
      })
    }).catch(err => {
      console.error(err)
    })
  },
  // 代码简化，弹窗统一封装
  showToast (title) {
    wx.showToast({
      title: title,
      icon: "none",
      duration: 2000
    })
  },
  // 用户协议点选按钮
  changeCheckedState() {
    this.setData({
      protocolChecked: !this.data.protocolChecked
    })
  }
})