<template> <div class="full-page"> <div class="member-page"> <div class="member-body"> <div class="head-bg"></div> <div class="user-info"> <div class="picture"> <div class="inner"> <img :src="picture"/> </div> </div> <div class="member-form"> <div class="form"> <div class="table"> <div class="tr"> <div class="td label">与我的关系</div> <div class="td text-right"> <div class="td-table" @click="roleActionSheet"> <div class="td-table-cell text text-orange">{{userData.role === 1 ? '子女' : userData.role === 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" :disabled="userId" placeholder="请输入姓名"/> <span v-show="!BaseValidate.nameState" class="small-hint">(只能是中文或英文,长度1~15位)</span> </div> </div> <div class="tr" v-if="userData.role===1"> <div class="td label">出生日期</div> <div class="td text-right"> <span @click="openPickerBirth">{{userData.birth==='' ? '请选择子女出生日期' : userData.birth}}</span> <span v-show="!BaseValidate.birthState" class="small-hint">请选择子女出生日期</span> </div> </div> <div class="tr" v-if="userData.role===2"> <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"> <div class="table"> <div class="tr" v-if="userData.role===1"> <div class="td label">身份证号</div> <div class="td text-right"> <input type="text" class="form-control" placeholder="请输入子女有效身份证" v-model="userData.idCardKid" :disabled="userId"/> <span v-show="!BaseValidate.idCardKidState" class="small-hint">请输入子女有效身份证</span> </div> </div> <div class="tr" v-if="userData.role===1"> <div class="td label">性别</div> <div class="td text-right"> <input type="text" v-if="userId" disabled class="form-control" v-model="userData.sex"/> <mt-radio v-if="!userId" v-model="userData.sex" :options="['女孩', '男孩']" @change="pictureChange"> </mt-radio> </div> </div> </div> </div> <div class="form"> <div class="table"> <div class="tr" v-if="userData.role===2"> <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> <div class="footer"> <a class="btn-link" v-if="userId" @click="delMember">删除家庭成员</a> <button v-if="!userId" class="btn-orange btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">保存</button> </div> </div> </div> </div> <mt-actionsheet :actions="roleActions" v-model="roleSheetVisible"> </mt-actionsheet> <!-- 出生日期picker --> <mt-datetime-picker v-model="pickerBirthDefault" ref="pickerBirth" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="birthPickerConfirm" :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 { getUserInfoById, saveMember, deleteMemberById } from '@/api/basic/basic' import { validatename, cardid } from '@/util/validate' import { getSexByIdCard, getBirthByIdNumber, SubtractDay } from '@/util/index' // import { getAgeByBirth } from '@/util/index' import _iconMan from '@/assets/images/man.png' import _iconWoman from '@/assets/images/woman.png' import _iconBoy from '@/assets/images/boy.png' import _iconGirl from '@/assets/images/girl.png' // import _iconOldwoman from '@/assets/images/oldwoman.png' export default { name: 'member', data () { return { memberId: this.$route.query.memberId ? parseInt(this.$route.query.memberId) : null, userId: this.$route.query.id ? parseInt(this.$route.query.id) : null, pageType: this.$route.query.type ? parseInt(this.$route.query.type) : null, // 1=子女 2=配偶 3=父母 picture: _iconBoy, userData: { name: '', role: this.$route.query.type ? parseInt(this.$route.query.type) : 1, sex: '男孩', birth: '', idCard: '', idCardKid: '', lastMensesTime: '' // 末次月经时间 }, BaseValidate: { // 表单各个列是否合法状态 nameState: true, sexState: true, birthState: true, idCardState: true, idCardKidState: true, lastMensesTimeState: true }, roleSheetVisible: false, // “与我关系”sheet显示状态 roleActions: null, // “与我关系”sheet数据 btnDisabled: false, // 保存按钮状态 pickerBirthVisible: false, // 出生日期控件显示状态 pickerBirthDefault: new Date(), // 出生日期控件默认选中日期为当天 pickerBirthEnd: new Date(), // 出生日期控件结束日期小于当天 pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天 pickerLastMensesTimeStart: SubtractDay(290), pickerLastMensesTimeEnd: new Date() // 末次月经时间控件结束日期小于当天 } }, created () { let that = this this.roleActions = [{ // “与我关系”sheet静态数据录入 name: '子女', method: that.selectedRole1 }, { name: '配偶', method: that.selectedRole2 }] console.log('member edit') if (this.userId) { this.getUserInfoByIdFn(this.userId) // 根据用户id获取该成员信息(成员编辑) } }, mounted: function () { }, computed: { }, components: { }, methods: { getUserInfoByIdFn (id) { this.$Indicator.open() getUserInfoById(id).then(res => { this.$Indicator.close() if (res.code === 0) { const data = res.data this.userData.name = data.name if (this.pageType === 1) { this.userData.idCardKid = data.skuNumber this.userData.birth = data.birth this.userData.sex = data.sex === 1 ? '男孩' : data.sex === 2 ? '女孩' : '' this.picture = data.sex === 1 ? _iconBoy : data.sex === 2 ? _iconGirl : _iconMan } else if (this.pageType === 2) { this.userData.idCard = data.skuNumber this.userData.lastMensesTime = data.lastMensesTime } } }).catch((error) => { this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, roleActionSheet () { if (!this.userId) { this.roleSheetVisible = true } }, selectedRole1 () { // 选择“与我关系”,子女=1、配哦=2 console.log('子女') if (this.userData.role === 2) { // 切换不同角色则需清空表单 this.userData.role = 1 this.pictureChange() } else { this.resetForm() } }, selectedRole2 () { // 选择“与我关系”,子女=1、配哦=2 console.log('配偶') if (this.userData.role === 1) { // 切换不同角色则需清空表单 this.userData.role = 2 this.pictureChange() } else { this.resetForm() } }, openPickerBirth () { // 打开出生日期控件 if (!this.userId) { this.$refs.pickerBirth.open() } }, birthPickerConfirm (date) { // 出生日期控件“确认”事件 const selectedDate = new Date(date) let month = selectedDate.getMonth() + 1 if (month < 10) { month = '0' + month } let day = selectedDate.getDate() if (day < 10) { day = '0' + day } this.userData.birth = selectedDate.getFullYear() + '-' + month + '-' + day console.log(date) }, openPickerLastMensesTime () { this.$refs.pickerLastMensesTime.open() }, lastMensesTimePickerConfirm (date) { // 末次月经日期控件“确认”事件 const selectedDate = new Date(date) let month = selectedDate.getMonth() + 1 let day = selectedDate.getDate() if (selectedDate.getMonth() + 1 <= 9) { month = '0' + (selectedDate.getMonth() + 1) } if (selectedDate.getDate() <= 9) { day = '0' + selectedDate.getDate() } this.userData.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + day }, pictureChange () { // 头部头像根据角色、性别不同变换头像 if (this.userData.role === 1) { if (this.userData.sex === '男孩') { this.picture = _iconBoy } else if (this.userData.sex === '女孩') { this.picture = _iconGirl } } else if (this.userData.role === 2) { this.picture = _iconWoman } }, resetForm () { // 重置表单数据 this.userData = { name: '', role: 1, sex: '男孩', birth: '', idCard: '', idCardKid: '', lastMensesTime: '' } }, goToUserDetail () { // 跳转至用户编辑页 }, BaseValidateHandle () { // 表单验证 this.BaseValidateName() this.BaseValidateIdCard() // this.BaseValidateIdCardKid() this.BaseValidateBirthKid() 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 { if (getSexByIdCard(this.userData.idCard) === '2') { this.BaseValidate.idCardState = true } else { this.BaseValidate.idCardState = false } } }, BaseValidateIdCardKid () { // 身份证(子女)验证 if (cardid(this.userData.idCardKid)[0]) { this.BaseValidate.idCardKidState = false } else { this.BaseValidate.idCardKidState = true } }, BaseValidateBirthKid () { // 出生日期验证 if (this.userData.birth === '') { this.BaseValidate.birthState = false } else { this.BaseValidate.birthState = true } }, BaseValidateMensesLastDate () { // 末次月经时间验证 if (this.userData.lastMensesTime === '') { this.BaseValidate.lastMensesTimeState = false } else { this.BaseValidate.lastMensesTimeState = true } }, handelSave () { // 保存 this.BaseValidateHandle() // 点击保存验证表单所有列是否合法 if (this.userData.role === 1) { // 子女角色添加验证 if (!this.BaseValidate.nameState || !this.BaseValidate.birthState) { return false } } else if (this.userData.role === 2) { // 配偶角色添加验证 if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) { return false } } let params = { userId: this.memberId, name: this.userData.name, orgId: '', orgName: '', relationType: this.userData.role } if (this.userData.role === 1) { // 子女 params.idCard = this.userData.idCardKid === '' ? null : this.userData.idCardKid params.sex = this.userData.idCardKid !== '' ? getSexByIdCard(this.idCardKid) : this.userData.sex === '男孩' ? '1' : this.userData.sex === '女孩' ? '2' : '3' params.birth = this.userData.birth } else if (this.userData.role === 2) { // 配偶 params.idCard = this.userData.idCard === '' ? null : this.userData.idCard params.sex = getSexByIdCard(this.userData.idCard) params.lastMensesTime = this.userData.lastMensesTime params.birth = getBirthByIdNumber(this.userData.idCard) } this.$Indicator.open() saveMember(params).then(res => { 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.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, delMember () { this.$MessageBox.confirm('是否删除该家庭成员?').then(action => { let params = { masterId: this.memberId, userId: this.userId } this.$Indicator.open() deleteMemberById(params).then(res => { this.$Indicator.close() if (res.code === 0 && res.data) { this.$toast({ message: '删除成功', position: 'center', duration: 3000 }) this.$router.back(-1) } else { this.$toast({ message: '删除失败', position: 'center', duration: 3000 }) } }).catch((error) => { this.$Indicator.close() this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }) } } } </script> <style> .full-page { background-color: #f4f6f7; } .member-form .form .mint-radiolist .mint-cell { width: 90px; float: right; background-image: none; min-height: 0; } .member-form .form .mint-radiolist .mint-cell > .mint-cell-wrapper { background-image: none; padding: 0; font-size: 14px; } .member-form .form .mint-radiolist-label { font-weight: normal; padding: 0; } .member-form .form .mint-radio-input:checked + .mint-radio-core { background-color: #FF9B44; border-color: #FF9B44; } </style> <style scoped> .full-page { background-color: #f4f6f7; } .member-page .member-body { position: relative; } .member-page .member-body > .head-bg{ background-color: #43d1be; height: 8em; } .member-page .member-body .user-info { margin: 0 auto; position: absolute; left: 0; right: 0; top: 4em; text-align: center; } .member-page .member-body > .user-info > .picture { width: 8em; height: 8em; margin: 0 auto; padding: 1em; background-color: #fff; border-radius: 50%; } .member-page .member-body > .user-info > .picture .inner > img { width: 100%; } .member-page .member-body > .user-info > .nick-name { text-align: center; font-size: 1.2em; margin: 0.8em 0; } .member-page .member-body > .user-info > .footer { padding: 3em 1em; } .member-form { padding: 0 1em; } .member-form .form > .table > .tr > .td.label { color: #959595; font-weight: normal; } </style>