<template>
<div class="step_insure">
<com-nav-bar title="投保信息">
<i class="iconfont icon-xiangzuo" slot="left"></i>
</com-nav-bar>
<div class="step_insure_inner" ref="scrollWrapper">
<div>
<div class="info_wrapper">
<div class="list-item">
<div class="authInfo" v-if="authentication==0">
<span class="authtext">您尚未进行实名认证</span>
<span class="authaction" @click="goDetails()">立即进行认证<i class="iconfont icon-xiangyou"></i></span>
</div>
<div class="stance"></div>
<div class="title">
<h3>基本信息</h3>
</div>
<ul class="info-list">
<com-date-picker :formatType="dateType" name="起保时间" :minDate="mintime" maxDate="2030-01-30 23:59:00" v-model="submitData.startDate" />
<li class="item">
<span class="name">保障期</span>
<div class="content">
<span class="contentvals">{{cover}}</span>
</div>
</li>
<li class="date-picker-item" v-if="id=='P10010001'">
<span class="name">保障方案</span>
<label class="content">
<div class="wrapper">
<input readonly type="text" v-model="value1" placeholder="请选择" @click="show=true"/>
</div>
<i class="iconfont icon-xiangyou"></i>
</label>
<popup-picker ref="picker" :data="arr1" :columns="1" :show.sync="show" :show-name="true" @on-hide="onHide" @on-change="onChange" :show-cell="false" />
</li>
</ul>
<div class="title" v-if="id==='CMJTCCX'">
<h3 class="clearleft">房产信息</h3>
</div>
<ul class="info-list" v-if="id==='CMJTCCX'">
<li class="item">
<span class="name">房产地址</span>
<div class="content">
<input type="text" v-model="target.address" placeholder="请填写房屋地址" />
</div>
</li>
<com-area-picker v-model="target.areaData" name="区域" v-if="id=='JSRYWX'||id=='CMJTCCX'" />
</ul>
<div class="tabHeader" v-if="id=='P10010001'||id=='SDCHSYWX'">
<span class="tabtn" @click="change(index,)" v-for="(item,index) in changeData" :class="{actives:actives===index}" :key="index">
{{item.name}}
</span>
</div>
<div class="title" style="padding-top:15px" v-if="id=='P10010001'||id=='SDCHSYWX'">
<h2 class="clearleft">投保人信息</h2>
</div>
<div class="title" v-else>
<h3 class="clearleft">投保人信息</h3>
</div>
<ul class="info-list" v-if="actives==0">
<li class="item">
<span class="name">姓名</span>
<div class="content">
<input type="text" v-model="policyholder.name" placeholder="请填写姓名" />
</div>
</li>
<com-picker v-if="id=='P10010001'" v-model="policyholder.certType" :data="cerTypes" name="证件类型" />
<com-picker v-else v-model="policyholder.certType" :data="cerTypesD" name="证件类型" />
<li class="item">
<span class="name">证件号码</span>
<div class="content">
<input type="text" v-model="policyholder.certCode" placeholder="请填写证件号" />
</div>
</li>
<com-date-picker v-if="policyholder.certType!=1" name="出生日期" minDate="1880-01-30 23:59:00" maxDate="2030-01-30 23:59:00" v-model="policyholder.birthDate" />
<com-sex name="性别" v-if="policyholder.certType!=1" @sendVal="send" />
<li class="item">
<span class="name">手机号</span>
<div class="content">
<input type="tel" v-model="policyholder.phone" placeholder="请填写手机号" />
</div>
</li>
<li class="item" v-if="id=='P10010001'||id=='SDCHSYWX'">
<span class="name">电子邮箱(非必填)</span>
<div class="content">
<input type="tel" v-model="policyholder.email" placeholder="用于接收电子保单" />
</div>
</li>
</ul>
<ul class="info-list" v-if="actives==1">
<li class="item">
<span class="name">企业名称</span>
<div class="content">
<input type="text" v-model="policyholdere.name" placeholder="请填写名称" />
</div>
</li>
<li class="item">
<span class="name">社会统一信用码</span>
<div class="content">
<input type="text" v-model="policyholdere.certCode" placeholder="请填写" />
</div>
</li>
<li class="item">
<span class="name">联系电话</span>
<div class="content">
<input type="tel" v-model="policyholdere.phone" placeholder="请填写联系电话" />
</div>
</li>
<li class="item" v-if="id=='P10010001'||id=='SDCHSYWX'">
<span class="name">电子邮箱(非必填)</span>
<div class="content">
<input type="tel" v-model="policyholdere.email" placeholder="用于接收电子保单" />
</div>
</li>
</ul>
<div class="title">
<h3 class="clearleft">被保人信息</h3>
</div>
<ul class="info-list" v-if="actives==0">
<div class="other">本人</div>
</ul>
<ul class="info-list" v-if="actives==1 && id==='SDCHSYWX'">
<li class="item">
<span class="name">姓名</span>
<div class="content">
<input type="text" v-model="insuredInfo.name" placeholder="请填写姓名" />
</div>
</li>
<com-picker v-model="insuredInfo.certType" :data="cerTypes" name="证件类型" />
<li class="item">
<span class="name">证件号码</span>
<div class="content">
<input type="text" v-model="insuredInfo.certCode" placeholder="请填写证件号" />
</div>
</li>
<com-date-picker v-if="insuredInfo.certType!=1" name="出生日期" minDate="1880-01-30 23:59:00" maxDate="2030-01-30 23:59:00" v-model="policyholder.birthDate" />
<com-sex name="性别" v-if="insuredInfo.certType!=1" @sendVal="send" />
<li class="item">
<span class="name">手机号</span>
<div class="content">
<input type="tel" v-model="insuredInfo.phone" placeholder="请填写手机号" />
</div>
</li>
<li class="item" v-if="id=='P10010001'||id=='SDCHSYWX'">
<span class="name">电子邮箱(非必填)</span>
<div class="content">
<input type="tel" v-model="insuredInfo.email" placeholder="用于接收电子保单" />
</div>
</li>
</ul>
<ul class="info-list" v-if="actives==1 && id==='P10010001'">
<li class="item" @click="goDeat">
<span class="name">已添加人员</span>
<span class="showtext" v-if="insureDatalist.length>0 && errShow==2">{{insurelength}}人</span>
<span class="showtext" v-else-if="errShow==1" style="color:red">{{insurelength}}</span>
<span class="showtext" v-else>{{0}}人</span>
<i class="iconfont icon-xiangyou"></i>
</li>
</ul>
<div class="title">
<h3 class="clearleft">受益人信息</h3>
</div>
<ul class="info-list">
<div class="other">法定受益人</div>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-bottom">
<div class="btn">
<button>保费：{{premium}}</button>
<button @click="verify()">立即投保</button>
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
import urls from "@/api/urls";
import { Group, XAddress, Confirm, PopupPicker } from "vux";
import cerTypes from "../../assets/json/ax";
import cerTypesD from "../../assets/json/certificate-types";
import isEmpty from "lodash/isEmpty";
import router from '../../router'
export default {
components: {
Group,
XAddress,
Confirm,
PopupPicker
},
data() {
const defaultTime = this.$moment().format("YYYY-MM-DD");
return {
show: false,
cerTypes, //身份证选项
cerTypesD,//身份证选项富德的
social: 1,
actives: 0,
value1: '',
insuredInfo:{
certType:'1',
personType:'1'
},
changeData: [{
name: '个人投保'
}, {
name: '企业投保'
}],
socialArray: [{
id: '1',
text: '有'
},
{
id: '0',
text: '无'
},
], //有无社保
excessive: {},
policyholder: {
certType:'1',
sex: '1',
personType:'1'
}, //投保人
policyholdere: {
sex: '1',
personType:'1'
}, //投保人
submitData: {
startDate: defaultTime,
personList: [],
extendParams: {}
}, //提交数据
dateType: "",
oldUrl: "",
oldPath: "",
flag: false,
area: ["110000", "110100"],
mintime: '',
cover: '',
authentication: 1,
premium: '0.00元',
urlAddress: '',
arr1: [],
arr: [],
fangan: [],
planCode: '',
hFlag: 1,
planfrom: '',
target:{
areaData: ["110000", "110100"],
address:''
},
insurelength:'',
errShow:2,
};
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.oldUrl = from.path;
vm.oldPath = from.query;
});
},
created() {
this.send(1)
this.flag = this.$route.query.flag;
this.id = this.$route.query.id; //产品code
this.fangan = this.$route.query.fangan
this.value1 = this.$route.query.planName
this.changeDate(this.submitData.startDate);
this.getproductInfo()
if(document.location.port) {
this.urlAddress = document.location.protocol + '//' + document.domain + ':' + document.location.port + '/details/result';
} else {
this.urlAddress = document.location.protocol + '//' + document.domain + '/details/result';
}
if(sessionStorage.getItem('insureDatalist')){
this.insurelength=this.insureDatalist.length
}else{
this.insurelength=0
}
},
computed: {
insureDatalist() {
return this.$store.getters.getinsureDatalist
},
payData: function() {
return this.$store.getters.getpayData;
},
orderData: function() {
return this.$store.getters.getorderData;
}
},
mounted() {
this.platform = sessionStorage.getItem("temp");
this.scroller = new BScroll(this.$refs.scrollWrapper, {
click: true,
pullUpLoad: {
threshold: 60
}
});
this.scroller.on("pullingUp", this.loadMore, this);
this.$nextTick(() => {
if(this.oldUrl === "/details/confirm"||this.oldUrl === "/details/insuredperList") {
if(isEmpty(this.payData)) {
this.getInfo(); //payData为空，调获取投保人信息接口
this.hFlag = 3
return false;
} else {
this.actives= this.payData.actives
if(this.payData.personList[0].policyholder.certType==='1'){
this.policyholder = this.payData.personList[0].policyholder
}else{
this.policyholdere = this.payData.personList[0].policyholder
}
this.submitData = this.payData
}
} else {
this.getInfo()
this.hFlag = 3
}
})
},
beforeDestroy() {
this.scroller.destroy();
},
methods: {
// 添加被保人
goDeat() {
this.$router.push({path: '/details/insuredperList',query:{type:2,errInfo:1}})
const params = []
params.actives=this.actives
this.getSubmitData()
Object.assign(this.submitData, params)
this.$store.dispatch('setpayData', this.submitData)
},
//切换个人和企业
change(val) {
this.actives = val
},
onHide() {},
onChange(val) {
this.value1 = val
this.goForm()
},
goForm() {
let testArr = this.arr
for(let i = 0; i < testArr.length; i++) {
if(this.value1 + '' === testArr[i].name) {
this.premium = testArr[i].code
this.planCode = testArr[i].value
}
}
},
//实名认证
goDetails() {
this.$router.push({
path: '/my/userauth'
})
},
//产品属性
getproductInfo() {
this.$loadingStart()
this.$http(urls.attribute, {
productCode: this.id,
})
.then(res => {
this.$loadingEnd()
this.mintime = res.data.minDate;
this.cover = res.data.coverPeriod;
let plan = res.data.multiPlanList
for(var i = 0; i < plan.length; i++) {
let item = {}
item.name = plan[i].planName;
item.value = plan[i].planCode;
item.code = plan[i].premium
this.arr.push(item)
this.arr1.push(plan[i].planName)
}
let testArr = this.arr
for(let i = 0; i < testArr.length; i++) {
if(this.value1 + '' === testArr[i].name) {
this.premium = testArr[i].code
this.planCode = testArr[i].value
} else {
this.premium = res.data.multiPlanList[0].premium
this.planCode = res.data.multiPlanList[0].planCode
}
}
if(this.hFlag == 3) {
this.submitData.startDate = res.data.suggestDate;
} else {
this.submitData.startDate = this.payData.startDate;
this.planfrom = this.payData.planCode
let testArr1 = this.arr
for(let i = 0; i < testArr1.length; i++) {
if(this.planfrom === testArr1[i].value) {
this.value1 = testArr1[i].name
this.premium = testArr1[i].code
this.planCode = testArr1[i].value
}
}
}
})
.catch(err => {
this.$loadingEnd();
this.$errorHandler(err)
})
},
//切换性别
send(val) {
this.policyholder.sex = val
},
// 时间转化
changeDate(time) {
let formatStr = "YYYY-MM-DD";
if(time) {
const arr = time.split(" ");
const arrLen = arr.length;
if(arrLen >= 2) {
const hhArr = arr[1].split(":");
const hhArrLen = hhArr.length;
if(hhArrLen > 1) {
formatStr += " " + "HH:mm";
} else if(hhArrLen === 1) {
formatStr += " " + "HH";
}
} else if(arrLen === 1) {
const yyArr = arr[0].split("-");
const yyArrLen = yyArr.length;
if(yyArrLen === 3) {
formatStr = "YYYY-MM-DD";
} else if(yyArrLen === 2) {
formatStr = "YYYY-MM";
} else if(yyArrLen === 1) {
formatStr = "YYYY";
}
}
}
this.dateType = formatStr;
},
//获取投保人信息
getInfo() {
this.$loadingStart();
this.submitData.personList = [];
this.$http(urls.getUserInfo, {})
.then(res => {
this.$loadingEnd();
let obj = {}
obj.name = res.data.name
obj.phone = res.data.phone
obj.certCode = res.data.certCode
obj.certType = res.data.certType
this.fangan = this.$route.query.id
this.authentication = res.data.certStatus
if(this.id=='P10010001'||this.id=='SDCHSYWX'){
console.log("赛车和零工保")
if(res.data.certType==="20"){
console.log("是企业")
this.actives=1
this.policyholdere = obj
}else{
this.actives=0
this.policyholder= obj
this.policyholder.certType = res.data.certType;
Object.assign(this.policyholder, {
'sex': '1'
})
}
}else{
console.log("产品都不满足")
this.policyholder= obj
Object.assign(this.policyholder, {
'sex': '1'
})
}
})
.catch(this.$errorHandler.bind(this));
},
//获取提交的信息
getSubmitData() {
this.submitData.personList = []
this.submitData.productCode = this.id
this.submitData.actives = this.actives
if(this.planCode == '') {
this.submitData.planCode = this.value1
} else {
this.submitData.planCode = this.planCode
}
this.submitData.count = 1
this.submitData.extendParams = {
payFinishUrl: this.urlAddress
}
//快递保和分拣包加地区
if(
this.id == "JSRYWX" ||
this.id == "JSRYWXFJ"
) {
this.policyholder.areaData = this.area;
this.policyholder.area = this.area.join("-");
} else {}
var item = {};
//身份证的时候去掉性别
if(this.policyholder.certType == 1) {
delete this.policyholder.sex
}
//切换个人企业投保的时候传值
if( this.actives==0){
this.policyholder.certType='1'
item.policyholder = this.policyholder
item.holderIsInsured = 1
}else{
this.policyholdere.certType='20'
item.policyholder = this.policyholdere
item.insureds =[this.insuredInfo]
}
//云丁产品
if(this.id == "CMJTCCX") {
this.target.area=this.target.areaData.join("-");
item.target = this.target
}
//零工保的企业投保
if(this.id=='P10010001' && this.actives==1){
this.submitData.type=2
var items=[]
if(Array.isArray(this.insureDatalist)){
let val=this.insureDatalist
for(var i= 0;i<val.length;i++){
items.push(val[i])
}
item.policyholder= this.policyholdere
item.insureds=items
}
}
this.submitData.personList.push(item)
},
// 投保信息验证
verify() {
console.log( this.submitData)
this.getSubmitData()
this.$loadingStart();
this.$http(urls.batchVerity, this.submitData)
.then(res => {
this.$loadingEnd();
if(res.code == "2003") {
let _this=this
this.$vux.alert.show({
title: '鲸保网提示',
content: res.message[0].details,
onShow () {
},
onHide () {
_this.flag=false
//失败的数组
let failedList=res.message
let arr=_this.submitData.personList[0].insureds
let arr_=[]
let result=[]
//验证
let re = /^(personList[0].insureds[[d]{1,10}])/
let cache = {}
for(let i=0;i<failedList.length;i++){
let failItem = failedList[i]
if(re.test(failItem.digest)){
let reResult = re.exec(failItem.digest)
if(!cache[reResult[1]]){
cache[reResult[1]]=failItem.details
}
}
}
//整合对比失败的数组
for(let i=0;i<arr.length;i++){
var itemObj={}
itemObj=arr[i]
let key = "personList[0].insureds["+i+"]"
if(cache[key]){
itemObj.errMsg=cache[key]
}
arr_.push(itemObj)
_this.$store.dispatch("setinsureDatalist",arr_); //存储列表
}
console.log(arr_)
//自己组成的数组
for(var i = 0; i < arr_.length; i++){
var obj = arr_[i];
if(obj.errMsg){
result.push(i)
}
}
console.log(result)
_this.errShow=1
_this.insurelength=result.length+'人身份信息错误'
}
})
} else {
this.$loadingEnd();
this.flag = false;
this.excessive = res.data;
this.$store.dispatch("setorderReturnData", this.excessive);
this.$store.dispatch("setpayData", this.submitData);
router.push({
path: "/details/confirm",
});
}
})
.catch(err => {
this.flag = false;
this.$loadingEnd();
this.$errorHandler(err);
});
}
}
};
</script>