<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 porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="2" title="绑定银行卡" class="currentStep porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="3" title="照片上传" class="currentStep porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="4" title="三方授权" class="currentStep porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="5" title="提交申请" class="currentStep porcolor"></flow-state>
|
</flow>
|
<group class="personInfo" text-align="right">
|
<x-input title="姓名"
|
:max="10"
|
placeholder="请输入姓名"
|
v-model.trim="form.userName"
|
disabled
|
></x-input>
|
<x-input title="身份证号"
|
:max="18"
|
:min="18"
|
placeholder="请输入身份证号"
|
v-model.trim="form.cardID"
|
disabled
|
></x-input>
|
</group>
|
<group>
|
<selector
|
title="最高学历"
|
:options="degreeList"
|
placeholder="请选择"
|
v-model='form.userDegree'
|
></selector>
|
</group>
|
<group>
|
<selector title="现居住状况"
|
:options="residenceStatusList"
|
placeholder="请选择"
|
v-model="form.userResidenceStatus"
|
@on-change="selectMaritalStatus"
|
></selector>
|
<x-address title="所在地区"
|
class="address_list"
|
raw-value="true"
|
:list="addressData"
|
v-model="form.userAddressData"
|
placeholder="请选择"
|
></x-address>
|
<x-input title="详细地址"
|
placeholder="请输入您的详细地址"
|
:max="50"
|
v-model.trim="form.userHomeAddr"
|
></x-input>
|
</group>
|
<group>
|
<selector title="婚否状况"
|
:options="marrStatusList"
|
placeholder="请选择"
|
v-model="form.userMarrStatus"
|
></selector>
|
</group>
|
<div style="height: 20px"></div>
|
<box gap="0 15px">
|
<x-button type="primary" @click.native="gohome">取消修改</x-button>
|
<x-button type="primary" @click.native="goback">确认修改</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Flow,
|
FlowState,
|
FlowLine,
|
XHeader,
|
Group,
|
GroupTitle,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
XAddress,
|
ChinaAddressV4Data
|
} from 'vux';
|
|
import FSpace from '../../../components/common/FSpace.vue';
|
import SysApi from '../../../api/api'
|
import statusCodeManage from '../../../api/statusCodeManage'
|
import validate from '../../../tool/validator';
|
|
export default {
|
name: 'personalChanges',
|
data() {
|
return {
|
form: {
|
userName: '',
|
cardID: '',
|
userDegree: '',
|
userResidenceStatus: '',
|
userAddressData: [],
|
userHomeAddr: '',
|
userMarrStatus: ''
|
},
|
personalInfo: {
|
relMobile2: null,
|
relMobile: null,
|
}, // 初始化的用户信息
|
isLastStep: false, // 是否是最后一步
|
activePageItem: 0, // 激活当前页
|
pageList: [], // 一共有几页
|
addressData: ChinaAddressV4Data,//地址
|
|
// userDegreeList: [], //最高学历
|
// userResidenceStatusList: [], //现居住状况
|
// userAddressData: [], //地区
|
// userHomeAddr: '', //详细地址
|
// userMarrStatusList: [], //婚否
|
|
degreeList: [],
|
residenceStatusList: [],
|
marrStatusList: []
|
};
|
},
|
components: {
|
Group,
|
GroupTitle,
|
XInput,
|
Selector,
|
XHeader,
|
XButton,
|
Box,
|
Flow,
|
FlowState,
|
FlowLine,
|
FSpace,
|
XAddress,
|
ChinaAddressV4Data
|
},
|
computed: {},
|
methods: {
|
//地址转值
|
getAddressName(val) {
|
for (let i = 0, j = this.addressData.length; i < j; i++) {
|
if (val == this.addressData[i].value) {
|
return this.addressData[i].name
|
}
|
}
|
},
|
|
//初始化个人基本信息
|
init() {
|
let _this = this;
|
let init = {
|
prodId: this.$route.query.prodId,
|
saveType: 1,
|
}
|
SysApi.textListGeren(init).then(
|
res => {
|
console.log(res);
|
_this.form.userName = res.body.userName;
|
_this.form.cardID = res.body.idNo;
|
|
_this.degreeList = _this.getOptionsList(res.body.degreeList);
|
_this.form.userDegree = res.body.degree;
|
|
_this.residenceStatusList = _this.getOptionsList(res.body.residenceStatusList);
|
_this.form.userResidenceStatus = res.body.residenceStatus;
|
|
_this.form.userAddressData = [res.body.homeProv, res.body.homeCity, res.body.homeArea];
|
|
_this.form.userHomeAddr = res.body.homeAddr;
|
|
_this.marrStatusList = _this.getOptionsList(res.body.marrStatusList);
|
_this.form.userMarrStatus = res.body.marrStatus;
|
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
);
|
},
|
gohome() {
|
this.$router.push({
|
path: '/bnd/credit/infoOk', query: {prodId: this.$route.query.prodId}
|
});
|
},
|
//下一步的表单验证及提交
|
goback() {
|
let _this = this;
|
if (validate.checkValEmpty(this.form.userName)) {
|
this.validateTip('请输入姓名');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.cardID)) {
|
this.validateTip('请输入身份证号');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.userDegree)) {
|
this.validateTip('请选择最高学历');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.userResidenceStatus)) {
|
this.validateTip('请选择现居住状况');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.userAddressData)) {
|
this.validateTip('请选择所在地区');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.userHomeAddr)) {
|
this.validateTip('请输入详细地址');
|
return false;
|
}
|
if (validate.checkValEmpty(this.form.userMarrStatus)) {
|
this.validateTip('请选择婚否');
|
return false;
|
}
|
// 检查内容的合理性
|
if (!validate.checkName(this.form.userName)) {
|
this.validateTip('请输入2-10个长度中文');
|
return false;
|
}
|
if (!validate.checkIDCard(this.form.cardID)) {
|
this.validateTip('请输入正确的身份证号');
|
return false;
|
}
|
|
let listInfo = {
|
//pordId通过路由传递
|
prodId: this.$route.query.prodId,
|
saveType: 2,
|
userName: this.form.userName,
|
idNo: this.form.cardID,
|
degree: this.form.userDegree,
|
residenceStatus: this.form.userResidenceStatus,
|
|
homeProv: this.getAddressName(this.form.userAddressData[0]),
|
homeCity: this.getAddressName(this.form.userAddressData[1]),
|
homeArea: this.getAddressName(this.form.userAddressData[2]),
|
homeAddr: this.form.userHomeAddr,
|
marrStatus: this.form.userMarrStatus
|
};
|
console.log(this.form.userMarrStatus)
|
if (this.form.userMarrStatus == '20') {
|
sessionStorage.userMarrStatus = "HW"
|
} else {
|
sessionStorage.userMarrStatus = ""
|
|
}
|
SysApi.savePersonal(listInfo).then(
|
res => {
|
this.$router.push({
|
path: '/bnd/credit/infoOk', query: {prodId: _this.$route.query.prodId}
|
});
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
);
|
|
},
|
// 弹窗
|
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;
|
},
|
//返回上一页
|
goBackPage() {
|
// 如果是第一步的话，那么返回到上一个页面
|
if (this.activePageItem <= 1) {
|
this.$router.back();
|
// 不是的话，那么显示上一步
|
} else {
|
this.activePageItem--;
|
this.isLastStep = this.pageList.length === this.activePageItem;
|
}
|
},
|
},
|
activated: function () {
|
this.init();
|
}
|
|
};
|
</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-label {
|
font-size: @font-size-base;
|
}
|
|
.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;
|
font-size: @font-size-medium;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
/*------------------------------*/
|
.vux-no-group-title {
|
margin-top: 0.77rem !important;
|
}
|
|
.loan-info-box .currentStep .weui-wepay-flow__state {
|
background-color: @color-primary;
|
color: @color-white !important;
|
line-height: 1rem;
|
}
|
|
.weui-wepay-flow__li.weui-wepay-flow__li .weui-wepay-flow__state {
|
width: 1.33333rem;
|
height: 1.33333rem;
|
border-radius: 1.58333rem;
|
color: @color-text-third;
|
line-height: 1.33333rem;
|
}
|
|
.loan-info-box .weui-wepay-flow, .loan-info-box .weui-wepay-flow-auto {
|
padding: 0.83333rem 2.33333rem 2.5rem;
|
}
|
|
.porcolor p {
|
color: @color-primary;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
select {
|
font-size: @font-size-medium !important;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
|
.address_list {
|
.vux-popup-picker-select {
|
span {
|
font-size: @font-size-medium;
|
position: relative;
|
top: -0.1rem;
|
}
|
}
|
}
|
|
</style>
|
