<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="个人信息"
|
:left-options="{backText: '', preventGoBack:true}"
|
@on-click-back="goBackPage"
|
></x-header>
|
<flow class="progressState">
|
<flow-state state="1" title="个人信息" class="currentStep"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="2" title="工作及居住信息"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="3" title="绑定银行卡"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="4" title="证明材料"></flow-state>
|
</flow>
|
<group class="personInfo" text-align="right">
|
<group-title slot="title"><span style="color: #ec6758">*</span>基本信息</group-title>
|
<x-input title="手机号" v-model="personalInfo.mobileNo" type="tel" :max=11 disabled="disabled"
|
placeholder="请输入用户手机号"></x-input>
|
<x-input title="姓名" v-model="personalInfo.name" :max="6" placeholder="请输入用户姓名"></x-input>
|
<x-input title="身份证号" v-model="personalInfo.idNo" :max="18"
|
placeholder="请输入用户身份证号"></x-input>
|
<selector title="学历" :options="qualificationList" v-model="personalInfo.qualification"></selector>
|
<selector title="婚姻状态" :options="maritalStatusList" v-model="personalInfo.maritalStatus"
|
@on-change="selectMaritalStatus"></selector>
|
<selector title="贷款用途" :options="purposeList" v-model="personalInfo.purpose"></selector>
|
</group>
|
<group text-align="right">
|
<group-title slot="title"><span style="color: #ec6758">*</span>联系人信息</group-title>
|
<cell title="联系人1"></cell>
|
<x-input title="姓名" v-model="personalInfo.relName" :max="6" placeholder="请输入联系人姓名"></x-input>
|
<x-input title="手机号" v-model="personalInfo.relMobile" keyboard="number" pattern="[0-9]*" mask="99999999999"
|
:max=11 type="tel" placeholder="请输入联系人手机号"></x-input>
|
<!--模拟选择框-->
|
<cell title="关系" :is-link="true" @click.native="clickFirstRelation" v-if="!firstSelectShow"></cell>
|
<selector title="关系" :options="firstRelationshipList" v-model="personalInfo.relationToCh"
|
v-if="firstSelectShow"
|
@on-change="selectFirstRelationship"></selector>
|
<FSpace></FSpace>
|
<cell title="联系人2（选填）"></cell>
|
<x-input title="姓名" v-model="personalInfo.relName2" :max="6" placeholder="请输入联系人姓名"></x-input>
|
<x-input title="手机号" v-model="personalInfo.relMobile2" keyboard="number" pattern="[0-9]*" mask="99999999999"
|
:max=11 type="tel" placeholder="请输入联系人手机号"></x-input>
|
<cell title="关系" :is-link="true" @click.native="clickSecondRelation" v-if="!secondSelectShow"></cell>
|
<selector title="关系" :options="secondRelationshipList" v-model="personalInfo.relationToCh2"
|
v-if="secondSelectShow"></selector>
|
</group>
|
<div style="height: 20px"></div>
|
<box gap="0 15px">
|
<x-button type="primary" @click.native="handleNextStep">下一步</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Flow,
|
FlowState,
|
FlowLine,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
Actionsheet
|
} from 'vux';
|
import store from '../../store/index';
|
import validate from '../../tool/validator';
|
import FSpace from '../../components/common/FSpace.vue';
|
import IDValidator from '../../tool/IDValidator';
|
import SystApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
|
export default {
|
name: 'incoPersonalInfo',
|
data () {
|
return {
|
firstSelectShow: false, // 第一个真实的选择框显示
|
secondSelectShow: false, // 第二个真实的选择框显示
|
personalInfo: {
|
relMobile2: null,
|
relMobile: null
|
}, // 初始化的用户信息
|
firstRelationshipList: [],
|
secondRelationshipList: []
|
};
|
},
|
activated: function () {
|
// 初始化信息
|
let _this = this;
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
let submitInfo = {
|
prodId: this.$route.query.prodId
|
};
|
SystApi.initPersonalInfo(submitInfo).then(response => {
|
if (response.errorCode === 0) {
|
_this.personalInfo = response.body;
|
_this.firstRelationshipList = _this.getOptionsList(this.personalInfo.relationList);
|
_this.secondRelationshipList = _this.getOptionsList(this.personalInfo.relation2List);
|
}
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error, _this)
|
});
|
// 初始化的婚姻状态，确定第一个选择联系人的框
|
if (!validate.checkValEmpty(this.personalInfo.maritalStatus)) {
|
// D-离异,M-已婚，W-丧偶，S-未婚
|
if (this.personalInfo.maritalStatus === 'M') {
|
this.firstRelationshipList = this.getMarriedRelationList();
|
} else {
|
this.firstRelationshipList = this.getNotMarriedRelationList();
|
}
|
}
|
},
|
deactivated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'out'});
|
},
|
computed: {
|
qualificationList: function () {
|
return this.getOptionsList(this.personalInfo.qualificationList);
|
},
|
maritalStatusList: function () {
|
return this.getOptionsList(this.personalInfo.maritalStatusList);
|
},
|
purposeList: function () {
|
return this.getOptionsList(this.personalInfo.purposeList);
|
},
|
relationList: function () {
|
return this.getOptionsList(this.personalInfo.relationList);
|
}
|
},
|
methods: {
|
validateTip (errorMsg) {
|
return this.$vux.toast.show({
|
width: 'auto',
|
type: 'text',
|
text: errorMsg,
|
time: 2000,
|
position: 'middle'
|
});
|
},
|
// 得到选项列表统一的方法
|
getOptionsList (optionList) {
|
let tmpList = [];
|
if (optionList instanceof Array) {
|
optionList.forEach(function (item) {
|
tmpList.push({
|
key: item.code,
|
value: item.name
|
});
|
});
|
}
|
return tmpList;
|
},
|
// 第一个联系人的选择已婚时，可以选择的关系选项列表
|
getMarriedRelationList () {
|
let tmpList = [];
|
this.relationList.forEach(function (item) {
|
if (item.value === '父母' || item.value === '丈夫' || item.value === '妻子') {
|
tmpList.push(item);
|
}
|
});
|
return tmpList;
|
},
|
// 第一个联系人选择非已婚时，可以选择的关系的选项列表
|
getNotMarriedRelationList () {
|
let tmpList = [];
|
this.relationList.forEach(function (item) {
|
if (item.value === '父母' || item.value === '子女') {
|
tmpList.push(item);
|
}
|
});
|
return tmpList;
|
},
|
// 选择第一个联系人之后，联系2可以选择的关系的选项列表
|
getSecondRelationList (selectKey) {
|
let tmpList = [];
|
this.secondRelationshipList.forEach(function (item) {
|
if (item.key !== selectKey) {
|
tmpList.push(item);
|
}
|
});
|
return tmpList;
|
},
|
goBackPage: function () {
|
store.commit('updateDirection', {direction: 'out'});
|
const _id = this.$route.query.prodId;
|
this.$router.push({path: '/f-loan-detail', query: {id: _id}});
|
},
|
selectMaritalStatus (value) {
|
if (validate.checkValEmpty(this.personalInfo.maritalStatus)) {
|
this.firstSelectShow = false;
|
} else {
|
// D-离异,M-已婚，W-丧偶，S-未婚
|
if (value === 'M') {
|
this.firstRelationshipList = this.getMarriedRelationList();
|
} else {
|
this.firstRelationshipList = this.getNotMarriedRelationList();
|
}
|
this.firstSelectShow = true;
|
}
|
},
|
// 关系选择1的模拟框的判断
|
clickFirstRelation () {
|
if (validate.checkValEmpty(this.personalInfo.maritalStatus)) {
|
this.validateTip('请先选择婚姻状态');
|
}
|
},
|
// 点击第一个关系框
|
selectFirstRelationship (selectKey) {
|
if (validate.checkValEmpty(this.personalInfo.relationToCh)) {
|
this.secondSelectShow = false;
|
} else {
|
this.secondRelationshipList = this.getSecondRelationList(selectKey);
|
this.secondSelectShow = true;
|
}
|
},
|
// 关系选择2的模拟框的判断
|
clickSecondRelation () {
|
if (validate.checkValEmpty(this.personalInfo.relationToCh)) {
|
this.validateTip('请先选择联系人1关系');
|
}
|
},
|
handleNextStep () {
|
let _this = this;
|
if (!validate.checkName(this.personalInfo.name)) {
|
this.validateTip('请输入正确的姓名');
|
return false;
|
}
|
if (!validate.checkPhone(this.personalInfo.mobileNo)) {
|
this.validateTip('请输入正确的手机号');
|
return false;
|
}
|
if (!IDValidator.isValid(this.personalInfo.idNo)) {
|
this.validateTip('请输入正确的身份证');
|
return false;
|
}
|
if (validate.checkValEmpty(this.personalInfo.qualification)) {
|
this.validateTip('请选择学历');
|
return false;
|
}
|
if (validate.checkValEmpty(this.personalInfo.maritalStatus)) {
|
this.validateTip('请选择婚姻状态');
|
return false;
|
}
|
if (validate.checkValEmpty(this.personalInfo.purpose)) {
|
this.validateTip('请选择贷款用途');
|
return false;
|
}
|
if (!validate.checkName(this.personalInfo.relName)) {
|
this.validateTip('请输入正确的联系人1的姓名');
|
return false;
|
}
|
if (!validate.checkPhone(this.personalInfo.relMobile)) {
|
this.validateTip('请输入正确的联系人1的手机号');
|
return false;
|
}
|
if (validate.checkValEmpty(this.personalInfo.relationToCh)) {
|
this.validateTip('请选择联系人1的关系');
|
return false;
|
}
|
|
// 保存的上传参数
|
const submitPersonalInfo = {
|
prodId: this.$route.query.prodId,
|
name: this.personalInfo.name,
|
mobileNo: this.personalInfo.mobileNo,
|
idNo: this.personalInfo.idNo,
|
qualification: this.personalInfo.qualification,
|
maritalStatus: this.personalInfo.maritalStatus,
|
purpose: this.personalInfo.purpose,
|
relName: this.personalInfo.relName,
|
relMobile: this.personalInfo.relMobile,
|
relationToCh: this.personalInfo.relationToCh,
|
relName2: this.personalInfo.relName2 ? this.personalInfo.relName2 : '',
|
relMobile2: this.personalInfo.relMobile2 ? this.personalInfo.relMobile2 : '',
|
relationToCh2: this.personalInfo.relationToCh2 ? this.personalInfo.relationToCh2 : ''
|
};
|
// 检查通过后,进入下一步
|
SystApi.savePersonalInfo(submitPersonalInfo).then(response => {
|
if (response.errorCode === 0) {
|
_this.$router.push({
|
path: '/incomeLoan/houseAndJobInfo',
|
query: {prodId: _this.$route.query.prodId}
|
});
|
}
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
}
|
},
|
components: {
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XHeader,
|
XButton,
|
Box,
|
Flow,
|
FlowState,
|
FlowLine,
|
Actionsheet,
|
FSpace
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.loan-info-box {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
}
|
.progressState div p {
|
font-size: @font-size-tiny;
|
}
|
.weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
top: -1px;
|
padding-top: 1px;
|
}
|
.currentStep .weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
padding-top: 1px;
|
border: 1px solid @color-primary;
|
color: @color-primary;
|
border-radius: 50%;
|
background-color: @color-white;
|
}
|
.weui-input {
|
height: 28px;
|
line-height: 28px;
|
}
|
.weui-wepay-flow, .weui-wepay-flow-auto {
|
padding: 10px 40px 30px;
|
background: @color-white;
|
}
|
.weui-wepay-flow__li_done .weui-wepay-flow__state,
|
.weui-wepay-flow__process {
|
background-color: @color-primary;
|
}
|
}
|
|
.weui-wepay-flow {
|
background-color: @color-white;
|
}
|
|
.left-arrow:before {
|
border-color: @color-white;
|
}
|
|
.weui-cells__title {
|
margin: 0 !important;
|
font-size: 16PX !important;
|
}
|
|
.weui-input, .weui-cell__bd {
|
font-size: @font-size-base;
|
}
|
|
.weui-label {
|
font-size: @font-size-base;
|
}
|
|
.personInfo ::-webkit-input-placeholder { /* WebKit browsers */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
color: #bfbfbf;
|
}
|
|
.personInfo ::-moz-placeholder { /* Mozilla Firefox 19+ */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-ms-input-placeholder { /* Internet Explorer 10+ */
|
color: #bfbfbf;
|
}
|
|
.header-space {
|
height: 46px;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.loan-info-box .weui-input {
|
text-align: right;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.loan-info-box .weui-btn_primary:not(.weui-btn_disabled):active {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: rgb(241, 95, 79);;
|
}
|
</style>
|
