<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="个人信息" is-done></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="2" title="工作及居住信息" class="currentStep"></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>
|
<group-title slot="title"><span style="color: #ec6758">*</span>居住信息</group-title>
|
<x-address title="居住地址所在地区" class="addressArea" v-model="locationAddress" raw-value
|
:list="addressData"></x-address>
|
<x-input title="详细信息"
|
class="homeAddressInfo"
|
v-model="homeWorkInfo.altBillAddr4"
|
placeholder="请输入详细地址（至门牌号）"
|
:max="20"></x-input>
|
<selector title="居住房屋所有权" :options="ownershipList" v-model="homeWorkInfo.ownership"></selector>
|
<selector title="居住地址是否与户籍地址相同" :options="sameAddressList" v-model="homeWorkInfo.sameAddress"
|
@on-change="selectIsSame"></selector>
|
</group>
|
<group v-if="isShow">
|
<group-title slot="title"><span style="color: #ec6758">*</span>户籍信息</group-title>
|
<x-address title="户籍地址所在地区" class="addressArea" v-model="householdAddress" raw-value
|
:list="addressData"></x-address>
|
<x-input title="详细信息"
|
class="homeAddressInfo"
|
v-model="homeWorkInfo.billAddr4"
|
:max="20"
|
placeholder="请输入详细地址（至门牌号）"></x-input>
|
</group>
|
<group>
|
<group-title slot="title"><span style="color: #ec6758">*</span>工作信息</group-title>
|
<selector title="工作状态" :options="employStatusList" v-model="homeWorkInfo.employStatus"></selector>
|
<x-input class="loan-cell" title="单位名称" v-model="homeWorkInfo.compName" :max="20"
|
placeholder="请输入单位名称"></x-input>
|
<x-address title="工作单位所在地区" class="addressArea" v-model="companyAddress" raw-value
|
:list="addressData"></x-address>
|
<x-input title="详细信息" class="homeAddressInfo" v-model="homeWorkInfo.compAddr4" :max="30"
|
:show-counter="false" placeholder="请填写详细信息"></x-input>
|
<x-input title="单位电话"
|
pattern="[0-9]*"
|
keyboard="number"
|
v-model="homeWorkInfo.compTelno"
|
:max="13"
|
placeholder="区号号码"></x-input>
|
<x-input title="月基本工资"
|
pattern="[0-9]*"
|
keyboard="number"
|
v-model="homeWorkInfo.mthBasicSalary"
|
:max="7" placeholder="请输入月基本工资"></x-input>
|
</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,
|
XTextarea,
|
Box,
|
XAddress,
|
ChinaAddressV4Data,
|
Value2nameFilter as value2name
|
} from 'vux'
|
import store from '../../store/index';
|
import validate from '../../tool/validator';
|
import SystApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
|
export default {
|
name: 'incoHouseAndJobInfo',
|
data () {
|
return {
|
addressData: ChinaAddressV4Data,
|
isShow: false,
|
homeWorkInfo: {},
|
locationAddress: [],
|
householdAddress: [],
|
companyAddress: [],
|
optionNum: 0 // 解决N初始化时，插件会执行N的选择
|
};
|
},
|
deactivated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'out'});
|
},
|
activated: function () {
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
// 初始化，插件的点击次数
|
this.optionNum = 0;
|
// 初始化重置为空，为了解决初始化时，后台返回为空的，地址显示的是上一次的值
|
this.locationAddress = [];
|
this.householdAddress = [];
|
this.companyAddress = [];
|
// 初始化信息
|
let _this = this;
|
let submitInfo = {
|
prodId: this.$route.query.prodId
|
};
|
SystApi.initHomeWorkInfo(submitInfo).then(response => {
|
if (response.errorCode === 0) {
|
_this.homeWorkInfo = response.body;
|
// 居住地址
|
if (!validate.checkValEmpty(_this.homeWorkInfo.altBillState)) {
|
if (_this.isDirectProvince(_this.homeWorkInfo.altBillState)) {
|
_this.homeWorkInfo.altBillCity = '市辖区';
|
}
|
_this.locationAddress = _this.getContactAddress(_this.homeWorkInfo.altBillState, _this.homeWorkInfo.altBillCity, _this.homeWorkInfo.altBillAddr5);
|
}
|
// 户籍地址
|
if (!validate.checkValEmpty(_this.homeWorkInfo.billState)) {
|
if (_this.isDirectProvince(_this.homeWorkInfo.billState)) {
|
_this.homeWorkInfo.altBillCity = '市辖区';
|
}
|
_this.householdAddress = _this.getContactAddress(_this.homeWorkInfo.billState, _this.homeWorkInfo.billCity, _this.homeWorkInfo.billAddr5);
|
}
|
// 公司地址
|
if (!validate.checkValEmpty(_this.homeWorkInfo.compState)) {
|
if (_this.isDirectProvince(_this.homeWorkInfo.altBillState)) {
|
_this.homeWorkInfo.altBillCity = '市辖区';
|
}
|
_this.companyAddress = _this.getContactAddress(_this.homeWorkInfo.compState, _this.homeWorkInfo.compCity, _this.homeWorkInfo.compAddr5);
|
}
|
// 居住地址与户籍地址一致
|
if (_this.homeWorkInfo.sameAddress === 'Y') {
|
_this.householdAddress = _this.getContactAddress(_this.homeWorkInfo.altBillState, _this.homeWorkInfo.altBillCity, _this.homeWorkInfo.altBillAddr5);
|
// 居住地址与户籍地址不一致, 赋值为空
|
} else if (_this.homeWorkInfo.sameAddress === 'N') {
|
_this.householdAddress = _this.getContactAddress(_this.homeWorkInfo.billState, _this.homeWorkInfo.billCity, _this.homeWorkInfo.billAddr5);
|
}
|
}
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error, _this)
|
});
|
},
|
computed: {
|
ownershipList: function () {
|
return this.getOptionsList(this.homeWorkInfo.ownershipList);
|
},
|
sameAddressList: function () {
|
return this.getOptionsList(this.homeWorkInfo.sameAddressList);
|
},
|
employStatusList: function () {
|
return this.getOptionsList(this.homeWorkInfo.employStatusList);
|
}
|
},
|
methods: {
|
validateTip(errorMsg) {
|
return this.$vux.toast.show({
|
width: 'auto',
|
type: 'text',
|
text: errorMsg,
|
time: 2000,
|
position: 'middle'
|
});
|
},
|
checkAddressFormat (val) { // 校验详细地址内容格式
|
return {valid: true};
|
},
|
// 得到选择地址的中文值
|
getName (value) {
|
const tmpList = value2name(value, ChinaAddressV4Data).split(' ');
|
return tmpList;
|
},
|
// 比较数组元素是否相等
|
arrayEqual (array1, array2) {
|
if (!array1 || !array2) {
|
return false;
|
}
|
if (array1.length !== array2.length) {
|
return false;
|
}
|
for (var i = 0, l = array1.length; i < l; i++) {
|
if (array1[i] instanceof Array && array2[i] instanceof Array) {
|
if (!array1[i].equals(array2[i])) {
|
return false;
|
}
|
} else if (array1[i] !== array2[i]) {
|
return false;
|
}
|
}
|
return true;
|
},
|
// 得到选项列表统一的方法
|
getOptionsList (optionList) {
|
let tmpList = [];
|
if (optionList instanceof Array) {
|
optionList.forEach(function (item) {
|
tmpList.push({
|
key: item.code,
|
value: item.name
|
});
|
});
|
}
|
return tmpList;
|
},
|
// 地址的拼接
|
getContactAddress (provinceName, cityName, districtName) {
|
let tmpAddress = [];
|
if (!validate.checkValEmpty(provinceName)) {
|
tmpAddress.push(provinceName);
|
}
|
if (!validate.checkValEmpty(cityName)) {
|
tmpAddress.push(cityName);
|
}
|
if (!validate.checkValEmpty(districtName)) {
|
tmpAddress.push(districtName);
|
}
|
return tmpAddress;
|
},
|
goBackPage: function () {
|
store.commit('updateDirection', {direction: 'out'})
|
this.$router.back();
|
},
|
selectIsSame: function (selectKey) {
|
// 选择与户籍地址不一致,这个插件刷新的时候，会自动执行一次
|
if (validate.checkValEmpty(selectKey)) {
|
this.isShow = false;
|
} else if (selectKey === 'Y') {
|
if (this.optionNum) {
|
this.householdAddress = [];
|
this.homeWorkInfo.billAddr4 = '';
|
}
|
this.optionNum++;
|
this.isShow = false;
|
} else if (selectKey === 'N') {
|
if (this.optionNum) {
|
this.householdAddress = [];
|
this.homeWorkInfo.billAddr4 = '';
|
}
|
this.optionNum++;
|
// 选择与户籍地址不一致
|
this.isShow = true;
|
}
|
},
|
// 是否为直辖市（地址插件与后台要求的地址不一致）
|
isDirectProvince (cityName) {
|
if (cityName === '北京市' || cityName === '重庆市' || cityName === '天津市' || cityName === '上海市') {
|
return true;
|
}
|
return false;
|
},
|
handleNextStep () {
|
let _this = this;
|
if (validate.checkValEmpty(this.locationAddress)) {
|
this.validateTip('请选择居住地址所在地区');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.altBillAddr4)) {
|
this.validateTip('请输入居住详细地址');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.ownership)) {
|
this.validateTip('请选择居住房屋所有权');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.sameAddress)) {
|
this.validateTip('请选择居住地址是否与户籍地址相同');
|
return false;
|
}
|
if (this.isShow) {
|
// 居住地址户籍地址不相同---显示提示内容
|
if (validate.checkValEmpty(this.householdAddress)) {
|
this.validateTip('请选择户籍地址所在地区');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.billAddr4)) {
|
this.validateTip('请输入户籍详细地址');
|
return false;
|
}
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.employStatus)) {
|
this.validateTip('请选择工作状态');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.compName)) {
|
this.validateTip('请输入单位名称');
|
return false;
|
}
|
if (validate.checkValEmpty(this.companyAddress)) {
|
this.validateTip('请选择工作单位所在地区');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.compAddr4)) {
|
this.validateTip('请输入工作详细地址');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.compTelno)) {
|
this.validateTip('请输入单位电话');
|
return false;
|
}
|
if (validate.checkValEmpty(this.homeWorkInfo.mthBasicSalary)) {
|
this.validateTip('请输入月基本工资');
|
return false;
|
}
|
let _reg = /^([1-9][0-9]*)+(.[0-9]{0,2})?$/;
|
if (!_reg.test(this.homeWorkInfo.mthBasicSalary)) {
|
this.validateTip('工资格式错误');
|
return false;
|
}
|
// 检查通过后,进入下一步----进入保存
|
let tmpLocationAddress = this.getName(this.locationAddress);
|
let tmpCompanyAddress = this.getName(this.companyAddress);
|
let tmpHouseholdAddress;
|
// 户籍地址为空
|
if (this.homeWorkInfo.sameAddress === 'Y') {
|
tmpHouseholdAddress = tmpLocationAddress;
|
this.homeWorkInfo.billAddr4 = this.homeWorkInfo.altBillAddr4;
|
} else if (this.homeWorkInfo.sameAddress === 'N') {
|
tmpHouseholdAddress = this.getName(this.householdAddress);
|
// 选择了不一致的话，而用户填写户籍地址与居住地址一致的话
|
let arrayEqual = this.arrayEqual(tmpHouseholdAddress, tmpLocationAddress);
|
if (arrayEqual && (this.homeWorkInfo.billAddr4 === this.homeWorkInfo.altBillAddr4)) {
|
this.validateTip('您的居住地址与户籍地址应该不一致');
|
return false;
|
}
|
}
|
// 提交处理直辖市的处理（北京市，重庆市，天津市，上海市）
|
if (this.isDirectProvince(tmpLocationAddress[0])) {
|
tmpLocationAddress[1] = tmpLocationAddress[0];
|
}
|
if (this.isDirectProvince(tmpHouseholdAddress[0])) {
|
tmpHouseholdAddress[1] = tmpHouseholdAddress[0];
|
}
|
if (this.isDirectProvince(tmpLocationAddress[0])) {
|
tmpCompanyAddress[1] = tmpCompanyAddress[0];
|
}
|
const submitHomeWorkInfo = {
|
prodId: this.$route.query.prodId,
|
altBillState: tmpLocationAddress[0],
|
altBillCity: tmpLocationAddress[1],
|
altBillAddr5: tmpLocationAddress[2],
|
altBillAddr4: this.homeWorkInfo.altBillAddr4,
|
ownership: this.homeWorkInfo.ownership,
|
sameAddress: this.homeWorkInfo.sameAddress,
|
billState: tmpHouseholdAddress[0],
|
billCity: tmpHouseholdAddress[1],
|
billAddr5: tmpHouseholdAddress[2],
|
billAddr4: this.homeWorkInfo.billAddr4,
|
employStatus: this.homeWorkInfo.employStatus,
|
compName: this.homeWorkInfo.compName,
|
compState: tmpCompanyAddress[0],
|
compCity: tmpCompanyAddress[1],
|
compAddr5: tmpCompanyAddress[2],
|
compAddr4: this.homeWorkInfo.compAddr4,
|
compTelno: this.homeWorkInfo.compTelno,
|
mthBasicSalary: this.homeWorkInfo.mthBasicSalary
|
};
|
SystApi.saveHomeWorkInfo(submitHomeWorkInfo).then(response => {
|
if (response.errorCode === 0) {
|
_this.$router.push({path: '/incomeLoan/bindcard', query: {prodId: _this.$route.query.prodId}});
|
}
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error, _this)
|
});
|
}
|
},
|
components: {
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XHeader,
|
XButton,
|
Box,
|
XAddress,
|
XTextarea,
|
Flow,
|
FlowState,
|
FlowLine
|
}
|
};
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin.less";
|
|
.header-space {
|
height: 46px;
|
}
|
|
.weui-wepay-flow {
|
background-color: @color-white;
|
}
|
|
.left-arrow:before {
|
border-color: @color-white;
|
}
|
|
.weui-cells__title {
|
margin: 0 !important;
|
font-size: @font-size-base !important;
|
}
|
|
.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-input, .weui-cell__bd {
|
font-size: @font-size-base;
|
}
|
|
.weui-label {
|
font-size: @font-size-base;
|
}
|
|
.weui-wepay-flow {
|
background-color: @color-white;
|
}
|
|
.left-arrow:before {
|
border-color: @color-white;
|
}
|
|
.weui-cells__title {
|
margin: 0 !important;
|
font-size: 16PX !important;
|
}
|
|
.loan-info-box {
|
background-color: #f5f5f5;
|
}
|
|
.weui-input, .weui-cell__bd, .vux-cell-value {
|
font-size: @color-white;
|
}
|
|
.weui-label {
|
font-size: @color-white;
|
}
|
|
.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-label {
|
width: auto;
|
}
|
|
.loan-cell:before {
|
content: " ";
|
position: absolute;
|
left: 15px;
|
top: 0;
|
right: 0;
|
height: 1px;
|
border-top: 1px solid #d9d9d9;
|
color: #d9d9d9;
|
-webkit-transform-origin: 0 0;
|
transform-origin: 0 0;
|
-webkit-transform: scaleY(.5);
|
transform: scaleY(.5);
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.vux-popup-show .vux-popup-header-right {
|
color: @color-primary;
|
}
|
|
.homeAddressInfo .weui-textarea {
|
text-align: right;
|
}
|
|
.progressState div p {
|
font-size: 9px;
|
}
|
|
.addressArea .vux-cell-value {
|
color: @color-text-primary;
|
}
|
</style>
|
