878 lines
26 KiB
Vue
878 lines
26 KiB
Vue
<template>
|
||
<div class="add">
|
||
<div class="form">
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="width: 8px;">*</i>
|
||
<span>与户主关系</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpRelationship" v-model="form.householdRelation"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="width: 8px;"></i>
|
||
<span>选择人员</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiPagePicker class="select" :selected.sync="userList" single>
|
||
<AiMore v-model="form.name"/>
|
||
</AiPagePicker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>成员姓名</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
|
||
placeholder-style="color: #999; font-size: 30rpx;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="form-item" v-if="!id">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>户主姓名</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="text" v-model="form.name" :maxlength="8"
|
||
placeholder-style="color: #999; font-size: 30rpx;" :disabled="isEdit" />
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>证件号码</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"
|
||
placeholder-style="color: #999; font-size: 30rpx;" @input="changeIdNumber" :disabled="userList.length? true : false"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>性别</span>
|
||
</div>
|
||
<div class="right">
|
||
<span :style="form.sex === '' ? 'color:#999;' : 'color:#333;' ">{{ $dict.getLabel('sex', form.sex) || '自动识别' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>联系方式</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"
|
||
placeholder-style="color: #999; font-size: 30rpx;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i>*</i>
|
||
<span>现住址</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiAreaPicker :fullName.sync="form.currentAreaName" v-model="form.currentAreaId">
|
||
<AiMore v-model="form.currentAreaName"/>
|
||
</AiAreaPicker>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>详细地址</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" v-model="form.currentAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>民族</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>政治面貌</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpPoliticalOutlook" v-model="form.politicsStatus"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="width: 8px;"></i>
|
||
<span>文化程度</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper border-b0">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>个人照片</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="upload">
|
||
<AiUploader :def.sync="photo" multiple placeholder="上传图片" :limit="1" action="/admin/file/add2" :disabled="id != ''"></AiUploader>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="width: 8px;"></i>
|
||
<span>在校生状况</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpStudentsInSchool" v-model="form.schoolStatus"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 个人健康状况 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrappers">
|
||
<div class="top">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>个人健康状况(可多选)</span>
|
||
</div>
|
||
<div class="bottoms">
|
||
<div class="cards" v-for="(e, index) in helthList" :key="index">
|
||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="userClick(e, index)">{{ e.dictName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 残疾类别 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="width: 8px;"></i>
|
||
<span>残疾类别</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpDisabilityType" v-model="form.disabilityType"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>残疾证办理年度</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpYear" v-model="form.disabilityCertificateYear"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基础保险 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrappers">
|
||
<div class="top">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>基础保险(可多选)</span>
|
||
</div>
|
||
<div class="bottoms">
|
||
<div class="cards" v-for="(e, index) in basicsCheckList" :key="index">
|
||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="basicsCheck(e, index)">{{ e.dictName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保障措施 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrappers">
|
||
<div class="top">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>保障措施(可多选)</span>
|
||
</div>
|
||
<div class="bottoms">
|
||
<div class="cards" v-for="(e, index) in guaranteeCheckList" :key="index">
|
||
<div :style="{color:e.checked == true ? '#1174FE' : '#333'}" @click="guaranteeCheck(e, index)">{{ e.dictName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 劳动技能 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>劳动技能</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpLaborSkills" v-model="form.labourStatus"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>是否会讲普通话</span>
|
||
</div>
|
||
<div class="right">
|
||
<div class="check-item" :class="form.mandarin == '01' ? 'check-active' : '' " @click="form.mandarin='01'">是<img
|
||
src="./components/img/check-icon.png" alt=""></div>
|
||
<div class="check-item" :class="form.mandarin == '02' ? 'check-active' : '' " @click="form.mandarin='02'">否<img
|
||
src="./components/img/check-icon.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 就业渠道 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>就业渠道</span>
|
||
</div>
|
||
<div class="right">
|
||
<AiSelect dict="fpEmploymentChannels" v-model="form.employmentChannels"></AiSelect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>务工企业名称</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="text" v-model="form.migrantEnterprises" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>务工时间/月</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" v-model="form.workeMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>公益性岗位</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" v-model="form.publicWelfarePosts" type="text" placeholder-style="color: #999; font-size: 30rpx;" maxlength="20"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>公益性岗位（月数）</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" v-model="form.publicWelfarePostsMonths" type="number" placeholder-style="color: #999; font-size: 30rpx;" maxlength="9"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 是否国外务工 -->
|
||
<div class="form-group">
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>是否国外务工</span>
|
||
</div>
|
||
<div class="right">
|
||
<div class="check-item" :class="form.foreignWorkers == '01' ? 'check-active' : '' " @click="form.foreignWorkers='01'">是<img
|
||
src="./components/img/check-icon.png" alt=""></div>
|
||
<div class="check-item" :class="form.foreignWorkers == '02' ? 'check-active' : '' " @click="form.foreignWorkers='02'">否<img
|
||
src="./components/img/check-icon.png" alt=""></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="form-item__wrapper">
|
||
<div class="left">
|
||
<i style="opacity: 0;">*</i>
|
||
<span>务工所在地</span>
|
||
</div>
|
||
<div class="right">
|
||
<input placeholder="请输入" type="text" v-model="form.foreignWorkersAddress" placeholder-style="color: #999; font-size: 30rpx;"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn" hover-class="text" @click="submit">保存</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
name: '',
|
||
objectType: '',
|
||
idNumber: '',
|
||
sex: '',
|
||
phone: '',
|
||
currentAreaId: '',
|
||
currentAreaName: '',
|
||
nation: '',
|
||
politicsStatus: '',
|
||
education: '',
|
||
currentAddress: '',
|
||
files: [],
|
||
schoolStatus: '',
|
||
labourStatus: '',
|
||
workArea: '',
|
||
workeMonths: '',
|
||
basicMedicalTreatment: '',
|
||
seriousIllnessInsurance: '',
|
||
endowmentInsurance: '',
|
||
subsistenceAllowance: '',
|
||
specialPovertySupport: '',
|
||
girdId: '',
|
||
girdName: '',
|
||
healthyStatus: '',
|
||
age: '',
|
||
birthday: '',
|
||
isHousehold: '',
|
||
photo: '',
|
||
riskType: '',
|
||
detail: '',
|
||
disabilityType: '', // 残疾类型
|
||
disabilityCertificateYear: '',
|
||
basicsCheck: '', // 基础保险
|
||
guaranteeCheck: '', // 保障措施
|
||
mandarin: '',
|
||
employmentChannels: '',
|
||
migrantEnterprises: '',
|
||
publicWelfarePosts: '',
|
||
publicWelfarePostsMonths: '',
|
||
foreignWorkers: '',
|
||
foreignWorkersAddress: '',
|
||
houseIdNumber: '',
|
||
},
|
||
id: '',
|
||
$areaId: '',
|
||
isEdit: false,
|
||
girdInfo: {},
|
||
householdIdNumber: '',
|
||
objectType: '',
|
||
userList: [],
|
||
photo: [],
|
||
flag: false,
|
||
helthList: [],
|
||
namelist: [],
|
||
basicsCheckList: [
|
||
{dictName: '城乡居民基本医疗保险', checked: false},
|
||
{dictName: '城镇职工基本医疗保险', checked: false},
|
||
{dictName: '大病保险', checked: false},
|
||
{dictName: '商业补充医疗保险', checked: false},
|
||
{dictName: '城乡居民基本养老保险', checked: false},
|
||
{dictName: '城镇职工基本养老保险', checked: false},
|
||
{dictName: '享受人身意外保险补贴', checked: false},
|
||
],
|
||
basicsList: [],
|
||
guaranteeCheckList: [
|
||
{dictName: '享受农村最低生活保障', checked: false},
|
||
{dictName: '是否特困供养人员', checked: false},
|
||
{dictName: '分散供养五保户转集中供养（减少）', checked: false},
|
||
{dictName: '是否接受医疗救助', checked: false},
|
||
{dictName: '是否接受其它健康扶贫', checked: false},
|
||
],
|
||
guaranteeList: [],
|
||
isAdd: 'false',
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
|
||
onLoad(query) {
|
||
this.householdIdNumber = query.houseIdNumber
|
||
this.objectType = query.objectType
|
||
this.$dict.load(['fpRelationship', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo', 'fpNation', 'fpEducation', 'fpStudentsInSchool', 'fpHealth',
|
||
'fpLaborSkills', 'fpPoliticalOutlook', 'sex', 'fpHealth']).then(() => {
|
||
if (query.id) {
|
||
this.id = query.id
|
||
this.getInfo(query.id)
|
||
this.isEdit = true
|
||
}
|
||
})
|
||
this.$dict.getDict('fpHealth').map((item) => {
|
||
this.helthList.push({
|
||
dictName: item.dictName,
|
||
dictValue: item.dictValue,
|
||
checked: false,
|
||
})
|
||
})
|
||
if (query.index > -1) {
|
||
this.isEdit = true
|
||
this.index = Number(query.index)
|
||
}
|
||
|
||
this.isGirdUser()
|
||
this.$areaId = this.user.areaId
|
||
uni.$on('reload', () => {
|
||
this.getInfo()
|
||
})
|
||
},
|
||
|
||
onShow() {
|
||
document.title = this.id ? '编辑家庭成员' : '添加家庭成员'
|
||
},
|
||
|
||
methods: {
|
||
userClick(row, i) {
|
||
row.checked = !row.checked
|
||
this.form.healthyStatus = this.helthList.filter(e => e.checked)?.map(e => e.dictValue)?.toString()
|
||
},
|
||
|
||
// 医疗保险
|
||
basicsCheck(row, i) {
|
||
this.basicsCheckList[i].checked = !this.basicsCheckList[i].checked
|
||
},
|
||
// 保障措施
|
||
guaranteeCheck(row, i) {
|
||
this.guaranteeCheckList[i].checked = !this.guaranteeCheckList[i].checked
|
||
},
|
||
getInfo(id) {
|
||
this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.form = {...res.data}
|
||
if (this.form.photo) {
|
||
this.form.files = [{url: this.form.photo}]
|
||
} else {
|
||
this.form.files = []
|
||
}
|
||
|
||
res.data.healthyStatusList = res.data.healthyStatus.split(',')
|
||
res.data.healthyStatusList.map((item) => {
|
||
this.helthList.map(items => {
|
||
items.checked = item == items.dictValue
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
rules() {
|
||
return {
|
||
householdRelation: '请选择与户主关系',
|
||
name: '请输入姓名',
|
||
idNumber: '请输入身份证号',
|
||
phone: '请输入联系方式',
|
||
currentAreaId: '请选择现住址',
|
||
}
|
||
},
|
||
|
||
checkInit(formName, list, index) {
|
||
if (list[index].checked) {
|
||
this.form[formName] = '01'
|
||
} else {
|
||
this.form[formName] = '02'
|
||
}
|
||
},
|
||
|
||
submit() {
|
||
|
||
const rules = this.rules()
|
||
|
||
for (let v of Object.keys(rules)) {
|
||
if (!this.form[v]) {
|
||
return this.$u.toast(rules[v])
|
||
}
|
||
}
|
||
let regTel = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
|
||
if (this.form.phone.length == 11 && !regTel.test(this.form.phone)) {
|
||
return this.$u.toast('请输入正确的手机号')
|
||
}
|
||
if (!/[^0]0{0,2}$/.test(this.form.currentAreaId)) {
|
||
return this.$u.toast('现住址必须选到村级')
|
||
}
|
||
|
||
if (this.form.files.length) {
|
||
this.form.photo = this.form.files[0].url
|
||
}
|
||
if (this.photo.length) {
|
||
this.form.photo = this.photo[0].accessUrl
|
||
}
|
||
|
||
this.form.girdId = this.girdInfo.girdId
|
||
this.form.girdName = this.girdInfo.girdName
|
||
this.current = 1
|
||
|
||
// if(!this.form.riskType) {
|
||
// return this.$u.toast('请选择风险因素')
|
||
// }
|
||
|
||
this.basicsCheckList.map((item, index) => {
|
||
if (item.checked) {
|
||
this.basicsList.push(index)
|
||
}
|
||
})
|
||
|
||
this.form.basicsCheck = this.basicsList.join(',')
|
||
|
||
this.guaranteeCheckList.map((item, index) => {
|
||
if (item.checked) {
|
||
this.guaranteeList.push(index)
|
||
}
|
||
})
|
||
|
||
this.form.guaranteeCheck = this.guaranteeList.join(',')
|
||
|
||
this.checkInit('jcbxCxyiliao', this.basicsCheckList, 0)
|
||
this.checkInit('jcbxCzyiliao', this.basicsCheckList, 1)
|
||
this.checkInit('jcbxDabing', this.basicsCheckList, 2)
|
||
this.checkInit('jcbxShangye', this.basicsCheckList, 3)
|
||
this.checkInit('jcbxCxyanglao', this.basicsCheckList, 4)
|
||
this.checkInit('jcbxCzyanglao', this.basicsCheckList, 5)
|
||
this.checkInit('jcbxRenshenyiwai', this.basicsCheckList, 6)
|
||
|
||
this.checkInit('bzcsNongcundibao', this.guaranteeCheckList, 0)
|
||
this.checkInit('bzcsTekungongyang', this.guaranteeCheckList, 1)
|
||
this.checkInit('bzcsWubaohu', this.guaranteeCheckList, 2)
|
||
this.checkInit('bzcsYiliaojiuzhu', this.guaranteeCheckList, 3)
|
||
this.checkInit('bzcsQita', this.guaranteeCheckList, 4)
|
||
|
||
this.$http.post('/app/apppreventionreturntopoverty/addByEwechat', {
|
||
...this.form,
|
||
id: this.id || '',
|
||
girdId: this.user.girdCheckType == 1 ? this.user.girdId : '',
|
||
householdIdNumber: this.householdIdNumber,
|
||
isHousehold: '0',
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.$u.toast('保存成功')
|
||
uni.$emit('reload')
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 2
|
||
})
|
||
},600)
|
||
}
|
||
}).catch((err) => {
|
||
this.$u.toast(err)
|
||
})
|
||
},
|
||
|
||
isGirdUser() {
|
||
this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
|
||
if (res.code == 0) {
|
||
this.girdInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
changeIdNumber() {
|
||
// let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
||
// .length == 18 && !reg.test(this.form.idNumber)
|
||
if (!this.form.idNumber) {
|
||
return this.$u.toast('请输入正确的身份证号码')
|
||
}
|
||
var info = this.$idCardNoUtil.getIdCardInfo(this.form.idNumber)
|
||
this.form.sex = info.gender
|
||
this.form.birthDate = info.birthday
|
||
var myDate = new Date();
|
||
var month = myDate.getMonth() + 1;
|
||
var day = myDate.getDate();
|
||
var age = myDate.getFullYear() - this.form.idNumber.substring(6, 10) - 1;
|
||
if (this.form.idNumber.substring(10, 12) < month || this.form.idNumber.substring(10, 12) == month && this.form.idNumber.substring(12, 14) <= day) {
|
||
age++;
|
||
}
|
||
this.form.age = age
|
||
},
|
||
},
|
||
watch: {
|
||
userList: {
|
||
handler: function (v) {
|
||
let {name, idNumber, currentAreaId, currentAreaName} = v?.[0] || {}
|
||
this.form = {...this.form, name, idNumber, currentAreaId, currentAreaName}
|
||
this.form.sex = this.$idCardNoUtil.getIdCardInfo(idNumber)?.sex
|
||
this.form.birthday = this.$idCardNoUtil.getIdCardInfo(idNumber)?.birthday
|
||
this.form.age = this.$calcAge(this.form.idNumber)
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.add {
|
||
padding-bottom: 120px;
|
||
width: 100%;
|
||
|
||
::v-deep .u-radio {
|
||
&:last-child {
|
||
.u-radio__label {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > div {
|
||
margin-bottom: 16px;
|
||
background: #fff;
|
||
}
|
||
|
||
.form-group {
|
||
.form-item {
|
||
padding-left: 32px;
|
||
|
||
.form-item__wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 112px;
|
||
border-bottom: 1px solid #E4E5E6;
|
||
}
|
||
|
||
.form-item__wrappers {
|
||
padding-right: 30px;
|
||
box-sizing: border-box;
|
||
|
||
.top {
|
||
font-size: 32px;
|
||
padding: 32px 0;
|
||
}
|
||
|
||
.bottoms {
|
||
padding-bottom: 20px;
|
||
|
||
.cards {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
border: 1px solid #CCCCCC;
|
||
border-radius: 16px;
|
||
margin-bottom: 16px;
|
||
|
||
.changeActive {
|
||
color: #1174FE;
|
||
border: 1px solid #1174FE;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.right {
|
||
height: 112px;
|
||
line-height: 112px;
|
||
padding-right: 32px;
|
||
|
||
span {
|
||
font-size: 30px;
|
||
color: #999999;
|
||
}
|
||
|
||
.check-item {
|
||
display: inline-block;
|
||
width: 140px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
text-align: center;
|
||
background: #F5F5F5;
|
||
border-radius: 4px;
|
||
font-size: 30px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333;
|
||
position: relative;
|
||
|
||
img {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.check-item:nth-of-type(1) {
|
||
margin-right: 36px;
|
||
}
|
||
|
||
.check-active {
|
||
background: #E7F1FE;
|
||
color: #1174FE;
|
||
|
||
img {
|
||
display: block;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
}
|
||
}
|
||
|
||
input {
|
||
height: 100%;
|
||
text-align: right;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
color: #333333;
|
||
font-size: 32px;
|
||
}
|
||
|
||
i {
|
||
margin-right: 4px;
|
||
font-style: normal;
|
||
color: #FF4466;
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item__imgs {
|
||
padding: 32px;
|
||
|
||
.form-item__title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 34px;
|
||
|
||
h2 {
|
||
color: #333333;
|
||
font-weight: normal;
|
||
font-size: 32px;
|
||
}
|
||
|
||
i {
|
||
color: #999999;
|
||
font-size: 28px;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
textarea {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.form-type {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 112px;
|
||
padding: 0 32px;
|
||
|
||
h2 {
|
||
font-weight: normal;
|
||
color: #333333;
|
||
font-size: 32px;
|
||
}
|
||
|
||
span {
|
||
color: #999999;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 11;
|
||
width: 100%;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
margin: 0;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
font-size: 32px;
|
||
background: #3192F4;
|
||
}
|
||
|
||
.upload {
|
||
width: 100%;
|
||
padding: 10px 32px 32px 32px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.border-b0 {
|
||
border-bottom: 0 !important;
|
||
}
|
||
|
||
::v-deep .familyMember .item {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|