<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>