addMember.vue

<template>
  <div class="full-page">
    <div class="container addMemberPage">
      <div class="form">
        <div class="table">
          <div class="tr">
            <div class="td label">与我的关系</div>
            <div class="td text-right">
              <div class="td-table">
                <div class="td-table-cell text text-orange">{{labelId === 1 || labelId === 3? '配偶' : labelId === 2 ? '子女' : '未知'}}</div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form">
        <div class="table">
          <div class="tr">
            <div class="td label">姓名</div>
            <div class="td text-right">
              <input type="text" class="form-control" v-model="userData.name" @blur="BaseValidateName" placeholder="请输入姓名"/>
              <span v-show="!BaseValidate.nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
            </div>
          </div>
          <div class="tr" v-if="labelId===1||labelId===3">
            <div class="td label">身份证号</div>
            <div class="td text-right">
              <input type="text" class="form-control" placeholder="请输入有效身份证" @blur="BaseValidateIdCard" v-model="userData.idCard"/>
              <span v-show="!BaseValidate.idCardState" class="small-hint">请输入有效身份证</span>
            </div>
          </div>
          <div class="tr" v-if="labelId===2">
            <div class="td label">出生年月</div>
            <div class="td text-right" @click="openPickerBirth">
                <input type="text" class="form-control" placeholder="请选择子女出生日期" disabled v-model="userData.birthKid"/>
                <span v-show="!BaseValidate.birthKidState" class="small-hint">请选择子女出生日期</span>
            </div>
          </div>
        </div>
      </div>
      <div class="form" v-if="labelId===1||labelId===3">
        <div class="table">
          <div class="tr">
            <div class="td label">末次月经时间</div>
            <div class="td text-right">
              <div class="td-table" @click="openPickerLastMensesTime">
                <div class="td-table-cell text">{{userData.lastMensesTime !== '' ? userData.lastMensesTime : '请选择末次月经时间'}}</div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
              <span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请选择末次月经时间</span>
            </div>
          </div>
        </div>
      </div>
      <div class="form" v-if="labelId===2">
        <div class="table">
          <div class="tr">
            <div class="td label">身份证号</div>
            <div class="td text-right">
              <input type="text" class="form-control" placeholder="请输入子女有效身份证" v-model="userData.idCardKid"/>
              <span v-show="!BaseValidate.idCardKidState" class="small-hint">请输入子女有效身份证</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">性别</div>
            <div class="td text-right">
              <mt-radio
                v-model="userData.sexKid"
                :options="['女孩', '男孩']">
              </mt-radio>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">立即领取</button>
      </div>
    </div>
    <!-- 出生年月picker -->
    <mt-datetime-picker
      v-model="pickerBirthDefault"
      ref="pickerBirth"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="pickerBirthConfirm"
      :endDate="pickerBirthEnd">
    </mt-datetime-picker>
    <!-- 末次月经时间picker -->
    <mt-datetime-picker
      v-model="pickerLastMensesTimeDefault"
      ref="pickerLastMensesTime"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="lastMensesTimePickerConfirm"
      :startDate="pickerLastMensesTimeStart"
      :endDate="pickerLastMensesTimeEnd">
    </mt-datetime-picker>
  </div>
</template>

<script>
import { getStore } from '@/util/store'
import { saveMember } from '@/api/basic/basic'
import { validatename, cardid } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard } from '@/util/index'
import { setTimeout } from 'timers'

export default {
  name: 'Home',
  data () {
    return {
      userId: getStore({ name: 'user_id' }),
      orgId: this.$route.query.orgId ? parseInt(this.$route.query.orgId) : null,
      orgName: this.$route.query.orgName ? this.$route.query.orgName : '',
      labelId: this.$route.query.labelId ? parseInt(this.$route.query.labelId) : 1, // 领取角色类型 1=子女 2=配偶
      userData: {
        name: '',
        idCard: '',
        phone: '',
        birthKid: '',
        sexKid: '男孩',
        lastMensesTime: '' // 末次月经时间
      },
      BaseValidate: { // 表单各个列是否合法状态
        nameState: true,
        idCardState: true,
        idCardKidState: true,
        phoneState: true,
        birthKidState: true,
        lastMensesTimeState: true
      },
      btnDisabled: false,
      pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
      pickerLastMensesTimeStart: SubtractDay(290), // 末次月经时间起始日期为当天日期前290天
      pickerLastMensesTimeEnd: new Date(), // 末次月经时间控件结束日期小于当天
      pickerBirthDefault: new Date(), // 出生年月默认选中日期为当天
      pickerBirthEnd: new Date() // 出生年月控件结束日期小于当天
    }
  },
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    BaseValidateHandle () { // 表单验证
      this.BaseValidateName()
      this.BaseValidateIdCard()
      // this.BaseValidateIdCardKid()
      this.BaseValidateMensesLastDate()
      this.BaseValidateBirthKid()
    },
    BaseValidateName () { // 姓名验证
      if (validatename(this.userData.name)) {
        this.BaseValidate.nameState = true
      } else {
        this.BaseValidate.nameState = false
      }
    },
    BaseValidateIdCard () { // 身份证验证
      if (cardid(this.userData.idCard)[0]) {
        this.BaseValidate.idCardState = false
      } else {
        this.BaseValidate.idCardState = true
      }
    },
    // BaseValidateIdCardKid () { // 子女身份证验证
    //   if (cardid(this.userData.idCardKid)[0]) {
    //     this.BaseValidate.idCardKidState = false
    //   } else {
    //     this.BaseValidate.idCardKidState = true
    //   }
    // },
    BaseValidateMensesLastDate () { // 末次月经时间验证
      if (this.userData.lastMensesTime === '') {
        this.BaseValidate.lastMensesTimeState = false
      } else {
        this.BaseValidate.lastMensesTimeState = true
      }
    },
    BaseValidateBirthKid () { // 出生日期验证
      if (this.userData.birthKid === '') {
        this.BaseValidate.birthKidState = false
      } else {
        this.BaseValidate.birthKidState = true
      }
    },
    openPickerLastMensesTime () { // 打开末次月经时间日期控件
      this.$refs.pickerLastMensesTime.open()
    },
    lastMensesTimePickerConfirm (date) {
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      if (selectedDate.getMonth() + 1 <= 9) {
        month = '0' + (selectedDate.getMonth() + 1)
      }
      this.userData.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
    },
    openPickerBirth () { // 打开出生日期控件
      this.$refs.pickerBirth.open()
    },
    pickerBirthConfirm (date) {
      this.BaseValidate.birthKidState = true
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      if (selectedDate.getMonth() + 1 <= 9) {
        month = '0' + (selectedDate.getMonth() + 1)
      }
      this.userData.birthKid = selectedDate.getFullYear() + '-' + month + '-' + selectedDate.getDate()
    },
    handelSave () {
      console.log('submit')
      this.BaseValidateHandle()
      if (this.labelId === 2) { // 子女
        if (!this.BaseValidate.nameState || !this.BaseValidate.birthKidState) {
          return
        }
      } else if (this.labelId === 1 || this.labelId === 3) { // 配偶
        if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) {
          return
        }
      }
      let params = {
        userId: this.userId,
        name: this.userData.name,
        phone: '',
        orgId: this.orgId,
        orgName: this.orgName,
        relationType: this.labelId === 2 ? 1 : this.labelId === 1 || this.labelId === 3 ? 2 : ''
      }

      if (this.labelId === 2) {
        params.idCard = this.userData.idCard === '' ? null : this.userData.idCard
        params.sex = this.userData.idCard !== '' ? getSexByIdCard(this.userData.idCard) : this.userData.sexKid === '男孩' ? '1' : this.userData.sexKid === '女孩' ? '2' : '3'
        params.birth = this.userData.birthKid
      } else if (this.labelId === 1 || this.labelId === 3) {
        params.idCard = this.userData.idCard
        params.sex = getSexByIdCard(this.userData.idCard)
        params.lastMensesTime = this.userData.lastMensesTime
        params.birth = getBirthByIdNumber(this.userData.idCard)
      }
      this.btnDisabled = true
      this.$Indicator.open()
      saveMember(params).then(res => {
        this.btnDisabled = false
        this.$Indicator.close()
        if (res.code === 0 && res.data) {
          this.$toast({
            message: '保存成功',
            position: 'center',
            duration: 3000
          })
          let that = this
          setTimeout(function () {
            that.$router.push({
              path: '/'
            })
          }, 2500)
        } else {
          this.$toast({
            message: '保存失败',
            position: 'center',
            duration: 3000
          })
        }
      }).catch((error) => {
        this.btnDisabled = false
        this.$Indicator.close()
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    }
  }
}
</script>
<style>
  .addMemberPage .form .mint-radiolist .mint-cell {
    width: 90px;
    float: right;
    background-image: none;
    min-height: 0;
  }
  .addMemberPage .form .mint-radiolist .mint-cell > .mint-cell-wrapper {
    background-image: none;
    padding: 0;
    font-size: 14px;
  }
  .addMemberPage .form .mint-radiolist-label {
    font-weight: normal;
    padding: 0;
  }
  .addMemberPage .form .mint-radio-input:checked + .mint-radio-core {
    background-color: #FF9B44;
    border-color: #FF9B44;
  }
</style>
<style scoped>
  .full-page {
    background-color: #f5f6f7;
  }

  .addMemberPage .footer{
    padding: 4em 0;
  }

  .addMemberPage .form > .table > .tr > .td.label {
    color: #9aa0a4;
    font-weight: normal;
  }
</style>