mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 03:26:45 +08:00
384 lines
12 KiB
Vue
384 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<BreadcrumbNavigator :moveOn.sync="moveOn" />
|
||
<van-cell-group class="proposal-appnt">
|
||
<customer-picker
|
||
class="border-bottom"
|
||
@nameChange="nameChange"
|
||
@on-choose="chooseCustomer"
|
||
name="投保人"
|
||
label="姓名"
|
||
@on-click="selectClick('1')"
|
||
:parentShowPicker.sync="customerShowPicker"
|
||
v-model="appntDTO.name"
|
||
></customer-picker>
|
||
<select-radio class="border-bottom" :radios="sexRadio" label="性别" :value.sync="appntDTO.sex"></select-radio>
|
||
<FieldDatePicter
|
||
@confirm="dateConfirm"
|
||
label="出生日期"
|
||
name="出生日期"
|
||
:value.sync="appntDTO.birthday"
|
||
:maxDate="maxDate"
|
||
type="date"
|
||
:flag="true"
|
||
></FieldDatePicter>
|
||
<div class="border-bottom">
|
||
<van-field :border="false" required v-model="appntDTO.age" clearable label="年龄" @blur="ageBlur" v-validate="'required'" placeholder="投保人年龄" />
|
||
<!-- <van-field :border="false" v-model="appntDTO.age" clearable label="年龄" v-validate="'appntAge'" placeholder="投保人年龄" :readonly="ageFlag" /> -->
|
||
</div>
|
||
<occupation-picker
|
||
class="border-bottom"
|
||
:value.sync="appntDTO.occupationCode"
|
||
:chooseName.sync="appntDTO.occupationName"
|
||
:lifeGrade.sync="appntDTO.lifeGrade"
|
||
:healthGrade.sync="appntDTO.healthGrade"
|
||
:parentShowPicker.sync="occupationShowPicker"
|
||
@on-choose="chooseOccupation"
|
||
@on-click="selectClick('2')"
|
||
required
|
||
clearable
|
||
label="职业"
|
||
name="职业"
|
||
v-validate="'required'"
|
||
placeholder="投保人职业"
|
||
/>
|
||
<van-field :border="false" maxlength="11" v-model="appntDTO.mobile" clearable label="手机号码" name="手机号码" placeholder="投保人手机号码" v-validate="'mobileLength11|mobileStartWith1|mobile'" />
|
||
<van-button type="danger" @click="nextStep" class="bottom-btn fs16">下一步</van-button>
|
||
</van-cell-group>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
|
||
import SelectRadio from '@/components/ebiz/SelectRadio'
|
||
import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
|
||
import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
|
||
import { CellGroup, Field } from 'vant'
|
||
import { saveProposal } from '@/api/ebiz/proposal/proposal.js'
|
||
import getAge from '@/assets/js/utils/age.js'
|
||
import beforeDate from '@/assets/js/utils/getBeforeDate.js'
|
||
import BreadcrumbNavigator from '@/components/ebiz/proposal/BreadcrumbNavigator'
|
||
import { getDetail } from '@/api/ebiz/proposal/proposal.js'
|
||
import utils from '@/assets/js/utils/date-utils'
|
||
export default {
|
||
data() {
|
||
return {
|
||
sexRadio: [
|
||
{
|
||
label: '男',
|
||
value: '0'
|
||
},
|
||
{
|
||
label: '女',
|
||
value: '1'
|
||
}
|
||
],
|
||
maxDate: beforeDate.getBeforeYear(16),
|
||
appntDTO: {
|
||
name: '',
|
||
age: '',
|
||
sex: '0',
|
||
birthday: '',
|
||
occupationCode: '',
|
||
occupationName: '',
|
||
mobile: '',
|
||
lifeGrade: '',
|
||
healthGrade: ''
|
||
},
|
||
customerShowPicker: false,
|
||
occupationShowPicker: false,
|
||
currentPopupIndex: '',
|
||
// ageFlag: false //年龄输入框是否只读 false-可输入 true-只读
|
||
}
|
||
},
|
||
computed: {
|
||
moveOn() {
|
||
return this.$CacheUtils.getLocItem('canMoveOn') === '1'
|
||
}
|
||
},
|
||
components: {
|
||
[SelectRadio.name]: SelectRadio,
|
||
[CellGroup.name]: CellGroup,
|
||
[Field.name]: Field,
|
||
[FieldDatePicter.name]: FieldDatePicter,
|
||
[OccupationPicker.name]: OccupationPicker,
|
||
[CustomerPicker.name]: CustomerPicker,
|
||
BreadcrumbNavigator
|
||
},
|
||
created() {
|
||
this.init()
|
||
// 回显信息
|
||
this.echoInfo()
|
||
},
|
||
methods: {
|
||
async echoInfo() {
|
||
// 从编辑页面过来时localstorage存在orderNo
|
||
const orderNo = this.$CacheUtils.getLocItem('proposalNo')
|
||
if (orderNo) {
|
||
let proposalInfoDTO = {
|
||
orderNo: orderNo
|
||
}
|
||
let res = await getDetail(proposalInfoDTO)
|
||
this.appntDTO = res.content[0].appntDTO
|
||
// 建议书投保人/被保人姓名不必填, 填写姓名时展示姓名(落库),不填写姓名时展示性别+年龄,如:男30岁(不落库)
|
||
if(!this.appntDTO.name){
|
||
let sex = this.appntDTO.sex == '0'?'男':'女'
|
||
this.appntDTO.name = sex+this.appntDTO.age+'岁'
|
||
}
|
||
}
|
||
},
|
||
stepIn() {
|
||
this.$router.push({ path: '/proposal/appnt' })
|
||
// this.$jump({
|
||
// flag: 'h5',
|
||
// extra: {
|
||
// url: location.origin + '/#/proposal/appnt',
|
||
// needRefresh: '1'
|
||
// },
|
||
// routerInfo: {
|
||
// path: '/proposal/appnt'
|
||
// }
|
||
// })
|
||
},
|
||
init() {
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title: '投保人信息'
|
||
},
|
||
})
|
||
//重置左上角按钮，变成返回
|
||
window.EWebBridge.webCallAppInJs("webview_left_button",{
|
||
reset:"1" //1：重制 其他值不变
|
||
})
|
||
setTimeout(() => {
|
||
// eslint-disable-next-line no-undef
|
||
EWebBridge.webCallAppInJs('webview_right_button', {
|
||
img: this.$assetsUrl + 'images/del-close-btn@3x.png',
|
||
intercept: '1' //是否拦截原生返回事件 1是 其他否
|
||
})
|
||
}, 100)
|
||
// 筛选按钮的点击事件
|
||
window.appCallBack = this.appCallBack
|
||
},
|
||
selectClick(index) {
|
||
this.currentPopupIndex = index
|
||
let title = ''
|
||
if (index == 1) {
|
||
;[this.customerShowPicker, title] = [true, '客户列表']
|
||
} else if (index == 2) {
|
||
;[this.occupationShowPicker, title] = [true, '职业类别']
|
||
}
|
||
|
||
setTimeout(() => {
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title,
|
||
hiddenLeft: '1'
|
||
}
|
||
})
|
||
this.closeBtn()
|
||
}, 400)
|
||
},
|
||
closeBtn() {
|
||
// 筛选按钮的显示
|
||
this.$jump({
|
||
flag: 'webview_right_button',
|
||
extra: {
|
||
btns: [
|
||
{
|
||
img: this.$assetsUrl + 'images/del-close.png',
|
||
route: { flag: '', extra: {} }
|
||
}
|
||
]
|
||
}
|
||
})
|
||
},
|
||
appCallBack(data) {
|
||
// 筛选按钮的点击事件
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title: '投保人信息',
|
||
hiddenRight: '1'
|
||
}
|
||
})
|
||
if (this.currentPopupIndex == 1) {
|
||
this.customerShowPicker = false
|
||
} else if (this.currentPopupIndex == 2) {
|
||
this.occupationShowPicker = false
|
||
}
|
||
if (data.trigger == 'right_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 + `/#/proposal/list`
|
||
},
|
||
routerInfo: {
|
||
path: `/proposal/list`,
|
||
type: '1'
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
return
|
||
})
|
||
}
|
||
},
|
||
chooseOccupation() {
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title: '投保人信息',
|
||
hiddenRight: '1'
|
||
}
|
||
})
|
||
this.occupationShowPicker = false
|
||
},
|
||
nameChange(data) {
|
||
this.appntDTO.name = data
|
||
},
|
||
dateConfirm(data) {
|
||
console.log(data,'data')
|
||
let age = getAge.getAge(data, new Date())
|
||
this.appntDTO.age = age
|
||
// this.ageFlag = true
|
||
},
|
||
//年龄变化时，清空出生日期
|
||
//并校验年龄规则按照出生日期的校验规则来定
|
||
ageBlur(){
|
||
this.appntDTO.birthday = ''
|
||
let minAge = getAge.getAge(utils.formatDate(new Date(this.maxDate),'yyyy-MM-dd'), new Date())
|
||
let maxAge = getAge.getAge('1900-01-01', new Date())
|
||
if(this.appntDTO.age < minAge || this.appntDTO.age > maxAge){
|
||
this.$toast('您的年龄不符合投保人的年龄范围')
|
||
}
|
||
},
|
||
//从客户列表选择客户
|
||
chooseCustomer(data) {
|
||
this.customerShowPicker = false
|
||
this.$jump({
|
||
flag: 'navigation',
|
||
extra: {
|
||
title: '投保人信息',
|
||
hiddenRight: '1'
|
||
}
|
||
})
|
||
let { customerName, customerSex, birthday, customerPhone, age, occupationName, occupationCode, lifeGrade, healthGrade, socialSecurity } = data
|
||
this.appntDTO = {
|
||
mobile: customerPhone,
|
||
birthday,
|
||
sex: String(customerSex),
|
||
name: customerName,
|
||
occupationName,
|
||
age: age ? age : birthday ? getAge.getAge(birthday, new Date()) : '',
|
||
occupationCode,
|
||
lifeGrade,
|
||
healthGrade,
|
||
socialSecurity
|
||
}
|
||
// this.ageFlag = true
|
||
},
|
||
|
||
nextStep() {
|
||
// 建议书投保人/被保人姓名不必填, 填写姓名时展示姓名(落库),不填写姓名时展示性别+年龄,如:男30岁(不落库)
|
||
let sex = this.appntDTO.sex == '0'?'男':'女'
|
||
let name = sex + this.appntDTO.age+'岁'
|
||
if(this.appntDTO.name == name){
|
||
this.appntDTO.name = ''
|
||
}
|
||
this.appntDTO.age = String(this.appntDTO.age)
|
||
this.$validator.validate().then(valid => {
|
||
if (true === valid) {
|
||
this.$CacheUtils.setLocItem('canMoveOn', 1)
|
||
const orderNo = this.$CacheUtils.getLocItem('proposalNo');
|
||
//进行投保人年龄校验（大于18周岁）
|
||
let params = {
|
||
orderDTO: {
|
||
appntDTO: this.appntDTO,
|
||
orderInfoDTO: {
|
||
orderStatus: orderNo?'01':'00',
|
||
orderNo: orderNo
|
||
}
|
||
}
|
||
}
|
||
saveProposal(params).then(res => {
|
||
if (res.result == '0') {
|
||
let url = `/proposal/chooseInsuredPerson?proposalOrderNo=${res.content.orderNo}`
|
||
//localStorage.orderNo = res.content.orderNo
|
||
this.$CacheUtils.setLocItem('proposalNo', res.content.orderNo)
|
||
if (this.appntDTO.socialSecurity) {
|
||
localStorage.orderNoSocialSecurity = this.appntDTO.socialSecurity
|
||
}
|
||
this.$router.push({ path: url })
|
||
// this.$jump({
|
||
// flag: 'h5',
|
||
// extra: {
|
||
// url: location.origin + `/#${url}`,
|
||
// needRefresh: '1'
|
||
// },
|
||
// routerInfo: { path: url }
|
||
// })
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
} else {
|
||
this.$toast(this.$validator.errors.all()[0])
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
body{
|
||
overscroll-behavior-y: contain;
|
||
}
|
||
.proposal-appnt {
|
||
.van-cell:not(:last-child)::after {
|
||
display: none;
|
||
}
|
||
.border-bottom::after {
|
||
position: absolute;
|
||
z-index: 99;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
content: ' ';
|
||
pointer-events: none;
|
||
right: 0;
|
||
left: 4.26667vw;
|
||
border-bottom: 1px solid #dadada;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
}
|
||
.customer {
|
||
.van-cell:not(:last-child)::after {
|
||
position: absolute;
|
||
z-index: 99;
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
content: ' ';
|
||
pointer-events: none;
|
||
right: 0;
|
||
left: 4.26667vw;
|
||
border-bottom: 1px solid #dadada;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
}
|
||
}
|
||
}
|
||
</style>
|