mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 05:46:44 +08:00
GFRS-2618【前端】新增津贴申请的基本信息页面的部分代码。提交人--张齐
This commit is contained in:
@@ -3604,6 +3604,24 @@ export default {
|
||||
queryOccupationalByType: [
|
||||
{ id: '1', text: '卡单' },
|
||||
{ id: '2', text: '重新投保' }
|
||||
]
|
||||
],
|
||||
|
||||
// 津贴申请-证件类型的枚举(父母津贴申请功能专用,因为父母津贴功能中证件类型没有出生证,所以在此创建一个新的枚举,供父母津贴功能专用)
|
||||
allowanceIdType: [
|
||||
{ id: 1, text: '居民身份证' },
|
||||
{ id: 2, text: '户口本' },
|
||||
// { id: 3, text: '出生证' },
|
||||
{ id: 4, text: '护照' },
|
||||
{ id: 5, text: '港澳居民来往内地通行证' },
|
||||
{ id: 6, text: '台湾居民来往大陆通行证' },
|
||||
// { id: 7, text: '其他', disabled: true },
|
||||
{ id: 8, text: '外国人永久居留身份证' },
|
||||
{ id: 9, text: '港澳台居民居住证' }
|
||||
],
|
||||
|
||||
// 津贴申请-享受人角色的枚举(父母津贴申请功能专用)
|
||||
allowanceEnjoyUserRole: [
|
||||
{ id: '0', text: '父亲' },
|
||||
{ id: '1', text: '母亲' }
|
||||
]
|
||||
}
|
||||
|
||||
226
src/components/ebiz/allowance/application/IndexBar.vue
Normal file
226
src/components/ebiz/allowance/application/IndexBar.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class='own_content'>
|
||||
<ul class='index-bar'>
|
||||
<li @click='changePage(Number(index) + 1)' v-for='(item, index) in pageTitle' :key='index' :class='item.tabClass'
|
||||
:id='item.tabClass'>
|
||||
<!-- 选中 -->
|
||||
<div v-if='item.tabClass' class='flex justify-content-fs align-items-c'>
|
||||
<div class='flex flex-direction-colunm align-items-c'>
|
||||
<van-image :src='item.imgCheckedUrl' class='image_head' />
|
||||
<span class='fs12 mt12'>{{ item.pageItem }}</span>
|
||||
</div>
|
||||
<van-image :src='doneUrl' v-if='index !== 7' class='image_done' />
|
||||
</div>
|
||||
<div v-if='!item.tabClass' class='flex justify-content-fs align-items-c'>
|
||||
<div class='flex flex-direction-colunm align-items-c'>
|
||||
<van-image :src='item.imgNoCheckedUrl' class='image_head' />
|
||||
<span class='fs12 mt12' style='color: #999999'>{{ item.pageItem }}</span>
|
||||
</div>
|
||||
<van-image :src='doneNurl' v-if='index !== 7' class='image_done' />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Icon, Image as VanImage } from 'vant'
|
||||
|
||||
export default {
|
||||
name: 'IndexBar',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
//选项对象中,文字对应的 key
|
||||
valueKey: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[Icon.name]: Icon,
|
||||
[VanImage.name]: VanImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
doneUrl: this.$assetsUrl + 'images/kmh/done.png',
|
||||
doneNurl: this.$assetsUrl + 'images/kmh/done_n.png',
|
||||
pageTitle: [
|
||||
{
|
||||
pageNo: 1,
|
||||
pageItem: '基本信息',
|
||||
urlStr: '/allowance/application/BaseInfo',
|
||||
tabClass: '',
|
||||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx.png',
|
||||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx_n.png'
|
||||
},
|
||||
{
|
||||
pageNo: 2,
|
||||
pageItem: '账户信息',
|
||||
urlStr: '/allowance/application/AccountInfo',
|
||||
tabClass: '',
|
||||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx.png',
|
||||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx_n.png'
|
||||
},
|
||||
{
|
||||
pageNo: 3,
|
||||
pageItem: '影响资料',
|
||||
urlStr: '/allowance/application/AttachmentManagement',
|
||||
tabClass: '',
|
||||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc.png',
|
||||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc_n.png'
|
||||
},
|
||||
{
|
||||
pageNo: 4,
|
||||
pageItem: '签名确认',
|
||||
urlStr: '/allowance/application/SignatureConfirmation',
|
||||
tabClass: '',
|
||||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr.png',
|
||||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr_n.png'
|
||||
}
|
||||
],
|
||||
//localStorage.salePageFlag:控制导航是否可以直接跳转页面 1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
|
||||
salePageFlag: Number(localStorage.salePageFlag)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.selectTab()
|
||||
},
|
||||
methods: {
|
||||
changePage(pageIndex) {
|
||||
let url = ''
|
||||
//由 localStorage.salePageFlag 来控制是否可跳到指定页面
|
||||
if (localStorage.salePageFlag == '-10' && pageIndex != 8) {
|
||||
this.$toast('已到达签名确认流程,不可以回到前面的流程')
|
||||
}
|
||||
if (Number(localStorage.salePageFlag) < Number(pageIndex)) return
|
||||
switch (pageIndex) {
|
||||
case 1: //跳到基本信息页面
|
||||
url = `/allowance/application/BaseInfo?edit=1&salePageFlag=${pageIndex}`
|
||||
break
|
||||
case 2: //跳到账户信息页面
|
||||
url = `/allowance/application/AccountInfo?edit=1&salePageFlag=${pageIndex}`
|
||||
break
|
||||
case 3: //跳到影像资料页面
|
||||
url = `/allowance/application/AttachmentManagement?edit=1&salePageFlag=${pageIndex}`
|
||||
break
|
||||
case 4: //跳到签名确认页面
|
||||
url = `/allowance/application/SignatureConfirmation?edit=1&salePageFlag=${pageIndex}`
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
let str = location.hash
|
||||
let i = str.search(/AttachmentManagement/i)
|
||||
if (i !== -1 && pageIndex != 7 && pageIndex != 8) {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
className: 'dialog-delete',
|
||||
title: '提示',
|
||||
message: '离开此页可能会丢失部分数据,是否确认离开?',
|
||||
cancelButtonColor: '#E9332E',
|
||||
confirmButtonColor: '#FFFFFF'
|
||||
})
|
||||
.then(() => {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
forbidSwipeBack: '1',
|
||||
url: location.origin + `/#${url}`
|
||||
},
|
||||
routerInfo: { path: url }
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
return
|
||||
})
|
||||
} else {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
forbidSwipeBack: '1',
|
||||
url: location.origin + `/#${url}`
|
||||
},
|
||||
routerInfo: { path: url }
|
||||
})
|
||||
}
|
||||
},
|
||||
selectTab() {
|
||||
let endIndex = location.hash.indexOf('?', 1)
|
||||
let str = endIndex == -1 ? location.hash.slice(1) : location.hash.slice(1, endIndex)
|
||||
this.pageTitle.forEach(v => {
|
||||
if (v.urlStr.toLowerCase() == str.toLowerCase()) {
|
||||
v.tabClass = 'active'
|
||||
}
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
this.$el.querySelector('#active').scrollIntoView(true)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.index-bar {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.index-bar li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.index-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-bar span,
|
||||
.index-bar van-icon {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #e9332e;
|
||||
}
|
||||
|
||||
.activeline {
|
||||
background: #e9332e;
|
||||
}
|
||||
|
||||
.image_head {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.image_done {
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.own_content {
|
||||
padding-top: 19px;
|
||||
padding-bottom: 15px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,642 @@
|
||||
<template>
|
||||
<div class='insured-info-container pb60 redRadioCheckbox'>
|
||||
<!-- 基本信息 -->
|
||||
<index-bar></index-bar>
|
||||
<van-cell-group class='mt10'>
|
||||
<van-field
|
||||
v-model='applicantInfo.jobNumber'
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label='申请人工号'
|
||||
name='申请人工号'
|
||||
placeholder='请填写申请人工号'
|
||||
/>
|
||||
<van-field
|
||||
v-model='applicantInfo.name'
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label='申请人姓名'
|
||||
name='申请人姓名'
|
||||
placeholder='请填写申请人姓名'
|
||||
/>
|
||||
<van-field
|
||||
:value="applicantInfo.idType | idToText('allowanceIdType')"
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label='申请人证件类型'
|
||||
name='申请人证件类型'
|
||||
right-icon='arrow'
|
||||
placeholder='请选择'
|
||||
@click='toSelect("1")'
|
||||
/>
|
||||
<van-field
|
||||
v-model='applicantInfo.idNo'
|
||||
maxlength='18'
|
||||
required
|
||||
label='申请人证件号码'
|
||||
name='申请人证件号码'
|
||||
v-validate="'required'"
|
||||
placeholder='手工录入或点击右侧证件扫描'
|
||||
clearable
|
||||
>
|
||||
<van-button v-if='applicantInfo.idType == 1' slot='button' size='small' type='danger' round
|
||||
@click="selectClick('3')">证件扫描
|
||||
</van-button>
|
||||
</van-field>
|
||||
<customer-picker
|
||||
v-model='enjoyUserInfo.name'
|
||||
@on-choose='chooseCustomer'
|
||||
v-validate="'required|salename'"
|
||||
name='享受人姓名'
|
||||
label='享受人姓名'
|
||||
required
|
||||
:parentShowPicker.sync='customerShowPicker'
|
||||
@nameChange='nameChange'
|
||||
@on-click="selectClick('1')"
|
||||
></customer-picker>
|
||||
<select-radio
|
||||
:value.sync='enjoyUserInfo.role'
|
||||
required
|
||||
:radios='enjoyUserInfo.roleRadio'
|
||||
label='享受人角色'
|
||||
name='享受人角色'
|
||||
v-validate="'required'"
|
||||
></select-radio>
|
||||
<van-field
|
||||
:value="enjoyUserInfo.idType | idToText('allowanceIdType')"
|
||||
v-validate="'required'"
|
||||
readonly
|
||||
required
|
||||
label='享受人证件类型'
|
||||
name='享受人证件类型'
|
||||
right-icon='arrow'
|
||||
placeholder='请选择'
|
||||
@click='toSelect("1")'
|
||||
/>
|
||||
<van-field
|
||||
v-model='enjoyUserInfo.idNo'
|
||||
v-validate="'required'"
|
||||
maxlength='18'
|
||||
required
|
||||
label='享受人证件号码'
|
||||
name='享受人证件号码'
|
||||
placeholder='手工录入或点击右侧证件扫描'
|
||||
clearable
|
||||
@blur='getRelatedData(enjoyUserInfo.idNo)'
|
||||
>
|
||||
<van-button v-if='enjoyUserInfo.idType == 1' slot='button' size='small' type='danger' round
|
||||
@click="selectClick('3')">证件扫描
|
||||
</van-button>
|
||||
</van-field>
|
||||
<select-radio
|
||||
:value.sync='enjoyUserInfo.sex'
|
||||
required
|
||||
:radios='enjoyUserInfo.sexRadio'
|
||||
label='性别'
|
||||
name='性别'
|
||||
v-validate="'required'"
|
||||
></select-radio>
|
||||
<FieldDatePicter
|
||||
:value.sync='enjoyUserInfo.birthday'
|
||||
v-validate="'required'"
|
||||
label='出生日期'
|
||||
name='出生日期'
|
||||
required
|
||||
type='date'
|
||||
:flag='true'
|
||||
@confirm='onDateConfirm($event)'
|
||||
ref='birthday'
|
||||
></FieldDatePicter>
|
||||
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<van-button type='danger' class='bottom-btn' @click='nextStep' v-no-more-click='1000'>下一步</van-button>
|
||||
|
||||
<!-- 字段选择 -->
|
||||
<van-popup v-model='popupShow' position='bottom'>
|
||||
<van-picker show-toolbar :columns='columns' @confirm='onConfirm' @cancel='popupShow = false' />
|
||||
</van-popup>
|
||||
|
||||
<!--身份证扫描 -->
|
||||
<van-popup v-model='isScan' position='bottom'>
|
||||
<IdentityCardScan @getScanInfo='getIdentityInfo'></IdentityCardScan>
|
||||
</van-popup>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import IndexBar from '@/components/ebiz/allowance/application/IndexBar'
|
||||
import { Field, CellGroup, Checkbox, Popup, Picker, Area, RadioGroup, Radio, Dialog } from 'vant'
|
||||
import DataDictionary from '@/assets/js/utils/data-dictionary'
|
||||
import utilsAge from '@/assets/js/utils/age'
|
||||
import { selectComp, getIdentityInfo } from '../../sale/js/methods'
|
||||
import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
|
||||
import { idToData } from '../../sale/js/verification'
|
||||
import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
|
||||
import SelectRadio from '@/components/ebiz/SelectRadio'
|
||||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||||
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
|
||||
|
||||
// import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
|
||||
// import areaList from '@/assets/js/utils/areaForSale'
|
||||
// import areaLists from '@/assets/js/utils/areaNewForSale'
|
||||
// import { saveOrUpdateOrderInfo, getAuthCode, getOrderDetail, getCompany } from '@/api/ebiz/sale/sale'
|
||||
// import getAreaName from '@/assets/js/utils/getAreaNameForSale'
|
||||
// import idNoCheck from '@/assets/js/utils/idNoCheck'
|
||||
// import SearchField from '@/components/common/SearchField'
|
||||
|
||||
export default {
|
||||
name: 'insuredInfo',
|
||||
components: {
|
||||
[IndexBar.name]: IndexBar,
|
||||
[Field.name]: Field,
|
||||
[IdentityCardScan.name]: IdentityCardScan,
|
||||
[CustomerPicker.name]: CustomerPicker,
|
||||
[SelectRadio.name]: SelectRadio,
|
||||
[FieldDatePicter.name]: FieldDatePicter
|
||||
// [OccupationPicker.name]: OccupationPicker,
|
||||
//
|
||||
// [CellGroup.name]: CellGroup,
|
||||
// [Checkbox.name]: Checkbox,
|
||||
// [Popup.name]: Popup,
|
||||
// [Picker.name]: Picker,
|
||||
// [Area.name]: Area,
|
||||
// [RadioGroup.name]: RadioGroup,
|
||||
// [Radio.name]: Radio,
|
||||
|
||||
|
||||
// [Dialog.name]: Dialog,
|
||||
// SearchField
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 定义存储申请人信息的对象
|
||||
applicantInfo: {
|
||||
jobNumber: '', // 申请人工号
|
||||
name: '', // 申请人姓名
|
||||
idType: '1', // 证件类型 (枚举值)
|
||||
idNo: '' // 证件号码
|
||||
},
|
||||
// 定义存储享受人信息的对象
|
||||
enjoyUserInfo: {
|
||||
name: '', // 享受人姓名
|
||||
role: '', // 享受人角色
|
||||
// 享受人角色的选择项
|
||||
roleRadio: [
|
||||
{ value: '0', label: '父亲' },
|
||||
{ value: '1', label: '母亲' }
|
||||
],
|
||||
sex: '', // 享受人的性别
|
||||
// 享受人性别的选择项
|
||||
sexRadio: [
|
||||
{ value: '0', label: '男' },
|
||||
{ value: '1', label: '女' }
|
||||
],
|
||||
idType: '1', // 证件类型 (枚举值)
|
||||
idNo: '', // 证件号码
|
||||
birthday: '',
|
||||
maxDate: beforeDate.getBeforeYear(16)
|
||||
},
|
||||
pickerType: '', // 定义当选择证件类型时,为了区分填写的是申请人信息还是享受人信息的类型。1-申请人;2-享受人
|
||||
popupShow: false, // 定义控制显示或隐藏popup弹出层的变量
|
||||
columns: [], // 定义popup弹出层中的数据集合
|
||||
currentPopupIndex: '',
|
||||
customerShowPicker: false,
|
||||
isScan: false //是否显示证件扫描组件
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
// eslint-disable-next-line no-undef
|
||||
EWebBridge.webCallAppInJs('webview_left_button', {
|
||||
img: this.$assetsUrl + 'images/del-close-btn@3x.png',
|
||||
intercept: '1' //是否拦截原生返回事件 1是 其他否
|
||||
})
|
||||
}, 100)
|
||||
// 筛选按钮的点击事件
|
||||
window.appCallBack = this.appCallBack
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @Description: 页面左上角关闭事件的回调方法
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
appCallBack(data) {
|
||||
if (data.trigger == 'left_button_click') {
|
||||
return this.$dialog
|
||||
.confirm({
|
||||
className: 'dialog-delete',
|
||||
title: '提示',
|
||||
message: '退出流程可能会丢失部分数据,是否确认退出?',
|
||||
cancelButtonColor: '#E9332E',
|
||||
confirmButtonColor: '#FFFFFF'
|
||||
})
|
||||
.then(() => {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
title: '电子投保单列表',
|
||||
forbidSwipeBack: 1, //当前页面禁止右滑返回
|
||||
url: location.origin + `/#/sale/list`
|
||||
},
|
||||
routerInfo: {
|
||||
path: `/sale/list`,
|
||||
type: '1'
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
return
|
||||
})
|
||||
} else {
|
||||
// 筛选按钮的点击事件
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '津贴申请信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
if (this.currentPopupIndex == 1) {
|
||||
this.customerShowPicker = false
|
||||
} else if (this.currentPopupIndex == 3) {
|
||||
this.isScan = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 在popup弹出层中显示对应的数据
|
||||
* @paramse: pickerType--区分填写的是申请人信息还是享受人信息的类型。1-申请人;2-享受人
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
toSelect(pickerType) {
|
||||
// 显示弹出层
|
||||
this.popupShow = true
|
||||
// 将区分填写的是申请人信息还是享受人信息的类型的值,赋值给变量
|
||||
// pickerType: 1-申请人;2-享受人
|
||||
this.pickerType = pickerType
|
||||
// 将数据字典中的'津贴申请-证件类型'数据集合赋值给变量
|
||||
this.columns = DataDictionary.allowanceIdType
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 点击popup弹出层中确认按钮触发的方法
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
onConfirm(value) {
|
||||
this.popupShow = false
|
||||
if (this.pickerType == '1') {
|
||||
// 身份证号码不存在时赋默认值
|
||||
if (!this.applicantInfo.idNo) {
|
||||
this.applicantInfo.idNo = ''
|
||||
}
|
||||
this.applicantInfo.idType = value.id
|
||||
} else if (this.pickerType == '2') {
|
||||
// 身份证号码不存在时赋默认值
|
||||
if (!this.userInfo.idNo) {
|
||||
this.userInfo.idNo = ''
|
||||
}
|
||||
//若身份证件类型为身份证,自动带入性别
|
||||
let sexSign = this.userInfo.idNo.length == 18 ? this.userInfo.idNo.substr(16, 1) : this.userInfo.idNo.length == 15 ? this.userInfo.idNo.substr(14, 1) : ''
|
||||
//18位身份证第17位是性别位, 奇男偶女;15位身份证第15位是性别位, 奇男偶女
|
||||
if (sexSign) {
|
||||
if (parseInt(sexSign) % 2 == 0) {
|
||||
this.userInfo.sex = '1'
|
||||
} else {
|
||||
this.userInfo.sex = '0'
|
||||
}
|
||||
}
|
||||
this.userInfo.idType = value.id
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 在享受人姓名位置,点击最右侧图标,选择享受人并获取对应享受人信息的方法
|
||||
* @params: data--享受人的用户数据信息
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
chooseCustomer(data) {
|
||||
console.log('data :>> ', data)
|
||||
this.customerShowPicker = false
|
||||
this.$jump({
|
||||
flag: 'navigation',
|
||||
extra: {
|
||||
title: '津贴申请信息',
|
||||
hiddenRight: '1'
|
||||
}
|
||||
})
|
||||
// 将选择的享受人的数据,赋值给对应的变量
|
||||
this.enjoyUserInfo.name = data.customerName // 享受人姓名
|
||||
this.enjoyUserInfo.role = String(data.customerSex) // 享受人角色
|
||||
this.enjoyUserInfo.idType = data.customerIdType // 享受人证件类型
|
||||
this.enjoyUserInfo.idNo = data.customerIdNumber // 享受人证件号码
|
||||
this.enjoyUserInfo.sex = String(data.customerSex) // 享受人性别
|
||||
this.enjoyUserInfo.birthday = data.birthday // 享受人出生日期
|
||||
this.getRelatedData(this.enjoyUserInfo.idNo)
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description:
|
||||
* @params:
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
getRelatedData(val) {
|
||||
if (this.enjoyUserInfo.idType != '1') {
|
||||
return
|
||||
}
|
||||
//如果证件校验不通过,恢复默认值
|
||||
if (idToData(val).text) {
|
||||
;[this.enjoyUserInfo.idNo, this.enjoyUserInfo.sex] = ['', '0']
|
||||
return this.$toast(idToData(val).text)
|
||||
}
|
||||
this.enjoyUserInfo.role = idToData(val).sex
|
||||
this.enjoyUserInfo.sex = idToData(val).sex
|
||||
this.enjoyUserInfo.birthday = idToData(val).birthday
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 监听切换享受人姓名的方法
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
nameChange(name) {
|
||||
this.enjoyUserInfo.name = name
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 根据不同的参数类型,弹出不同的操作的页面
|
||||
* @params: index-- 1: 选择用户列表的页面;2:选择职业类别的页面;3:扫描获取身份证信息的页面
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
selectClick(index) {
|
||||
selectComp(this, index, '1')
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 获取身份证扫描信息的方法
|
||||
* @params: data--扫描获取到的用户信息
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
getIdentityInfo(data) {
|
||||
getIdentityInfo(this, data, '1')
|
||||
},
|
||||
|
||||
onDateConfirm(val) {
|
||||
//出生日期
|
||||
//如果录入日期晚于当前日期
|
||||
if (Date.parse(val) > Date.parse(new Date())) {
|
||||
this.enjoyUserInfo.birthday = ''
|
||||
this.$refs.birthday.date = ''
|
||||
return this.$toast('出生日期不晚于当日')
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @Description: 点击下一步时触发的方法
|
||||
* @author:zhangqi
|
||||
* @Date:2021-09-08
|
||||
*/
|
||||
async nextStep() {
|
||||
//表单校验, 成功跳转
|
||||
let valid = await this.$validator.validate()
|
||||
// .then(valid => {
|
||||
if (true === valid) {
|
||||
localStorage.chooseProductCodesNew = localStorage.chooseProductCodes
|
||||
// 计算年龄
|
||||
let age = utilsAge.getAge(this.userInfo.birthday, new Date())
|
||||
// 如果是未成年人
|
||||
// if (age < 18) {
|
||||
// return this.$toast('投保人必须是具有民事行为能力且有固定职业和收入的自然人,请确定')
|
||||
// }
|
||||
|
||||
//如果证件类型是身份证
|
||||
if (this.userInfo.idType == '1') {
|
||||
console.log('证件类型是身份证')
|
||||
|
||||
if (this.userInfo.nativeplace != '1') {
|
||||
return this.$toast('证件类型”为“身份证,国籍必须为中国哦')
|
||||
}
|
||||
if (this.userInfo.idNo.length == '18') {
|
||||
//18位身份证第17位是性别位, 奇男偶女
|
||||
let sexSign = this.userInfo.idNo.substr(16, 1)
|
||||
if ((parseInt(sexSign) % 2 == 0 && this.userInfo.sex != 1) || (parseInt(sexSign) % 2 != 0 && this.userInfo.sex != 0)) {
|
||||
return this.$toast('性别录入与身份证不符')
|
||||
}
|
||||
|
||||
//18位身份证第7-14位是生日位, 年月日
|
||||
let birthSign = this.userInfo.idNo.substr(6, 8)
|
||||
if (
|
||||
this.userInfo.birthday.substr(0, 4) != birthSign.substr(0, 4) ||
|
||||
this.userInfo.birthday.substr(5, 2) != birthSign.substr(4, 2) ||
|
||||
this.userInfo.birthday.substr(8, 2) != birthSign.substr(6, 2)
|
||||
) {
|
||||
return this.$toast('生日录入与身份证不符')
|
||||
}
|
||||
}
|
||||
|
||||
// 证件号码规则校验
|
||||
if (!idNoCheck.isIdno(this.userInfo.idNo)) {
|
||||
return this.$toast('您填写的证件号码有误')
|
||||
}
|
||||
|
||||
//年龄在小于周岁(不含46周岁),证件有效期不能为长期
|
||||
if (age < 46 && this.userInfo.effectiveDateType == true) {
|
||||
return this.$toast('证件有效期错误,年龄小于46周岁,证件有效期不能为长期')
|
||||
}
|
||||
// 年龄在 16-25 周岁之间
|
||||
if (age >= 16 && age <= 25) {
|
||||
if (Date.parse(this.userInfo.certiexpiredate) - Date.parse(new Date()) > Date.parse('1980-01-01')) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
this.effectiveDateTypeAble = true
|
||||
return this.$toast('证件有效期错误,16周岁~25周岁的公民身份证有效期应小于等于10年')
|
||||
}
|
||||
//年龄在 26-45 周岁之间
|
||||
} else if (age >= 26 && age <= 45) {
|
||||
if (Date.parse(this.userInfo.certiexpiredate) - Date.parse(new Date()) > Date.parse('1990-01-01')) {
|
||||
this.userInfo.certiexpiredate = ''
|
||||
this.$refs.certiexpiredate.date = ''
|
||||
this.effectiveDateTypeAble = true
|
||||
return this.$toast('证件有效期错误,26周岁~45周岁的公民身份证有效期应小于等于20年')
|
||||
}
|
||||
}
|
||||
//证件类型是户口本
|
||||
} else if (this.userInfo.idType == '2') {
|
||||
if (age > 16) {
|
||||
return this.$toast('客户年龄在16周岁以上,不能使用户口本作为有效证件')
|
||||
}
|
||||
} else if (this.userInfo.idType == '3') {
|
||||
if (age >= 2) {
|
||||
return this.$toast('客户年龄在2周岁及以上,不能使用出生证作为有效证件')
|
||||
}
|
||||
} else if (this.userInfo.idType == '4') {
|
||||
if (this.userInfo.nativeplace == '1') {
|
||||
return this.$toast('“证件类型”为“外国人护照”,“国籍”不能选择为“中国”哦~')
|
||||
}
|
||||
} else if (this.userInfo.idType == '5') {
|
||||
console.log(this.userInfo.nativeplace, 'nativeplace')
|
||||
if (this.userInfo.nativeplace != 2 && this.userInfo.nativeplace != 3) {
|
||||
return this.$toast('“证件类型”为“港澳居民来往内地通行证”,“国籍”请选择“中国香港”或“中国澳门”哦~')
|
||||
}
|
||||
} else if (this.userInfo.idType == '6') {
|
||||
if (this.userInfo.nativeplace != 4) {
|
||||
return this.$toast('“证件类型”为“台湾居民来往大陆通行证”,“国籍”请选择“中国台湾”~')
|
||||
}
|
||||
} else if (this.userInfo.idType == '9') {
|
||||
if (this.userInfo.nativeplace != 2 && this.userInfo.nativeplace != 3 && this.userInfo.nativeplace != 4) {
|
||||
return this.$toast('“证件类型”为“港澳台居民居住证”,“国籍”请选择“中国香港”、“中国澳门”或“中国台湾”~')
|
||||
}
|
||||
}
|
||||
// 投保人年龄必须大于等于16周岁哦
|
||||
if (age < 16) {
|
||||
return this.$toast('亲,投保人年龄必须大于等于16周岁哦~')
|
||||
}
|
||||
|
||||
//职业类型不能为 '一般学生'
|
||||
if (this.userInfo.occupationCode == '2099907') {
|
||||
this.userInfo.occupationName = ''
|
||||
return this.$toast('学生不可以作为投保人,请更换投保人投保')
|
||||
}
|
||||
|
||||
if (!this.userInfo.workcompany) {
|
||||
this.userInfo.workcompany = '无'
|
||||
}
|
||||
|
||||
if (this.userInfo.salarySource == '4') {
|
||||
if (!this.userInfo.otherSalarySource) {
|
||||
return this.$toast('请输入其它收入来源')
|
||||
}
|
||||
}
|
||||
|
||||
// 婚姻状况处理: 使用computed/watch可能会出现检测不到的情况
|
||||
for (let status of DataDictionary.marriage) {
|
||||
if (status.text === this.userInfo.marriageStatus) {
|
||||
this.userInfo.marriage = status.id
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
//如果是已婚
|
||||
if ((this.userInfo.sex == '0' && age < 22) || (this.userInfo.sex == '1' && age < 20)) {
|
||||
if (this.userInfo.marriage != '2') {
|
||||
return this.$toast('投保人不符合国家婚姻法定年龄')
|
||||
}
|
||||
}
|
||||
*/
|
||||
// if (this.userInfo.marriage == '1') {
|
||||
// if (this.userInfo.sex == '0' && age < 22) {
|
||||
// return this.$toast('年龄与婚姻状况不符')
|
||||
// } else if (this.userInfo.sex == '1' && age < 20) {
|
||||
// return this.$toast('年龄与婚姻状况不符')
|
||||
// }
|
||||
// }
|
||||
|
||||
// 通过国籍判断 证件是否符合要求
|
||||
// 如果是国籍选择中国大陆
|
||||
|
||||
if (Number(this.userInfo.nativeplace) <= 4) {
|
||||
// “身份证”或“台湾居民来往大陆通行证”或“港澳居民来往内地通行证”
|
||||
let obj = {
|
||||
1: true,
|
||||
5: true,
|
||||
6: true,
|
||||
9: true
|
||||
}
|
||||
let idType = this.userInfo.idType
|
||||
// 通过年龄 判断证件是否符合要求
|
||||
// 小于2岁
|
||||
if (age < 2) {
|
||||
// “出生证”,"户口本"
|
||||
obj['2'] = true
|
||||
obj['3'] = true
|
||||
if (obj[idType] === undefined) {
|
||||
return this.$toast(
|
||||
'亲,国籍为中国,且未满2周岁儿童,证件类型必须“身份证”或“户口本”或“出生证”或“台湾居民来往大陆通行证”或“港澳居民来往内地通行证”'
|
||||
)
|
||||
}
|
||||
} else if (age < 16) {
|
||||
// 小于16岁
|
||||
// “户口本”
|
||||
obj['2'] = true
|
||||
if (obj[idType] === undefined) {
|
||||
return this.$toast(
|
||||
'亲,国籍为中国,且大于2周岁小于16周岁的未成年人,证件类型必须为“身份证”或“户口本”或“台湾居民来往大陆通行证”或“港澳居民来往内地通行证”'
|
||||
)
|
||||
}
|
||||
} else {
|
||||
// 大于16岁
|
||||
if (obj[idType] === undefined) {
|
||||
return this.$toast('亲,国籍为中国,证件类型必须为“身份证”或“台湾居民来往大陆通行证”或“港澳居民来往内地通行证”')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 非大陆人员按外籍人员
|
||||
let obj = {
|
||||
4: true,
|
||||
8: true
|
||||
}
|
||||
let idType = this.userInfo.idType
|
||||
if (obj[idType] === undefined) {
|
||||
return this.$toast('亲,国籍为外籍,证件类型必须为护照或外国人永久居留身份证投保')
|
||||
}
|
||||
}
|
||||
if (this.isAsync) {
|
||||
if (
|
||||
!this.userWorkcompanys.some((item) => {
|
||||
return item.asscompanies == this.userInfo.workcompany
|
||||
})
|
||||
) {
|
||||
if (
|
||||
this.userWorkcompanys.some((item) => {
|
||||
return item.asscompanies.search(this.userInfo.workcompany) != -1
|
||||
})
|
||||
) {
|
||||
return this.$toast('请填写完整的协同单位名称')
|
||||
}
|
||||
return this.$toast('您选择的为非协同单位,请重新选择。')
|
||||
}
|
||||
}
|
||||
this.infoUpdate()
|
||||
// console.log('success')
|
||||
} else {
|
||||
return this.$toast(this.$validator.errors.all()[0])
|
||||
}
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed: {},
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.insured-info-container {
|
||||
/deep/ .van-checkbox {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/deep/ .van-radio {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/deep/ .van-field__label {
|
||||
width: 30vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user