addMain.vue

<template>
  <div class="full-page">
    <div class="container addMainPage">
      <div class="p-title">
        <span class="label">您的基本信息</span>
        <span class="link text-orange">默认为户主</span>
      </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">
            <div class="td label">手机号</div>
            <div class="td text-right">
              <input type="text" class="form-control" placeholder="请输入有效的手机号码" @blur="BaseValidatePhone" v-model="userData.phone"/>
              <span v-show="!BaseValidate.phoneState" class="small-hint">请输入有效的手机号码</span>
            </div>
          </div>
          <div class="tr">
            <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>
      </div>
      <div class="form" v-if="userData.sex === '2'">
        <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="footer">
        <button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">立即领取</button>
      </div>
    </div>
    <!-- 末次月经时间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 store from '@/store'
import { saveMember } from '@/api/basic/basic'
import { validatename, cardid, isvalidatemobile } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard } from '@/util/index'
import { setTimeout } from 'timers'

export default {
  name: 'Home',
  data () {
    return {
      userId: store.getters.user_id,
      orgId: this.$route.query.orgId ? parseInt(this.$route.query.orgId) : null,
      orgName: this.$route.query.orgName ? this.$route.query.orgName : '',
      userData: {
        name: '',
        idCard: '',
        sex: 1,
        phone: '',
        lastMensesTime: '' // 末次月经时间
      },
      BaseValidate: { // 表单各个列是否合法状态
        nameState: true,
        idCardState: true,
        phoneState: true,
        lastMensesTimeState: true
      },
      btnDisabled: false,
      pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
      pickerLastMensesTimeStart: SubtractDay(290), // 末次月经时间起始日期为当天日期前290天
      pickerLastMensesTimeEnd: new Date() // 末次月经时间控件结束日期小于当天
    }
  },
  created () {
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    BaseValidateHandle () { // 表单验证
      this.BaseValidateName()
      this.BaseValidateIdCard()
      this.BaseValidatePhone()
      this.BaseValidateMensesLastDate()
    },
    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.userData.sex = getSexByIdCard(this.userData.idCard)
        this.BaseValidate.idCardState = true
      }
    },
    BaseValidatePhone () { // 手机号码验证
      if (this.userData.phone === '') {
        this.BaseValidate.phoneState = false
      } else if (isvalidatemobile(this.userData.phone)[0]) {
        this.BaseValidate.phoneState = false
      } else {
        this.BaseValidate.phoneState = true
      }
    },
    BaseValidateMensesLastDate () { // 末次月经时间验证
      if (this.userData.lastMensesTime === '') {
        this.BaseValidate.lastMensesTimeState = false
      } else {
        this.BaseValidate.lastMensesTimeState = 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()
      this.BaseValidateMensesLastDate()
    },
    handelSave () {
      console.log('submit')
      this.BaseValidateHandle()
      if (!this.BaseValidate.nameState || !this.BaseValidate.phoneState || !this.BaseValidate.idCardState) {
        return true
      }
      if (this.userData.sex === '2' && !this.BaseValidate.lastMensesTimeState) {
        return true
      }
      if (!this.userId || this.userId === 'null' || this.userId !== '') {
        this.$toast({
          message: '缺少用户标识（user id为空）',
          position: 'center',
          duration: 3000
        })
        return
      }
      let params = {
        userId: this.userId,
        name: this.userData.name,
        phone: this.userData.phone,
        idCard: this.userData.idCard,
        sex: getSexByIdCard(this.userData.idCard),
        lastMensesTime: this.userData.lastMensesTime,
        orgId: this.orgId,
        orgName: this.orgName,
        relationType: '0',
        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: '/home'
            })
          }, 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 scoped>
  .full-page {
    background-color: #f5f6f7;
  }

  .addMainPage .footer{
    padding: 4em 0;
  }
  .addMainPage .p-title {
    padding: 1em 0 0 0;
  }
  .addMainPage .form > .table > .tr > .td.label {
    color: #9aa0a4;
    font-weight: normal;
  }
</style>