<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>
|
<div class="info_queren">
|
<h4>个人基本信息</h4>
|
<p @click="gopersonalChanges"><i class="iconfont icon-edit"></i><span>修改</span></p>
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>姓名</span>
|
<span v-text="personalInfo.userName">111111111111</span>
|
</li>
|
<li>
|
<span>身份证号</span>
|
<span v-text="personalInfo.idNo">111111111111</span>
|
</li>
|
<li>
|
<span>手机号</span>
|
<span v-text="personalInfo.regMblNo">1111111111111</span>
|
</li>
|
<li>
|
<span>最高学历</span>
|
<span v-text="personalInfo.degree">1111111111</span>
|
</li>
|
<li>
|
<span>现居住状况</span>
|
<span v-text="personalInfo.marrStatus">1111111111111111</span>
|
</li>
|
<li>
|
<span>所在地区</span>
|
<span v-text="personalInfo.homeProv">11111111111111</span>
|
</li>
|
<li>
|
<span>详细地址</span>
|
<span v-text="personalInfo.homeAddr">111111111111</span>
|
</li>
|
<li>
|
<span>婚姻状况</span>
|
<span v-text="personalInfo.marrStatus">11111111111111</span>
|
</li>
|
</ul>
|
|
</group>
|
<group>
|
<div class="info_queren">
|
<h4>公司信息</h4>
|
<p @click="gocompanyModification"><i class="iconfont icon-edit"></i><span>修改</span></p>
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>公司名称</span>
|
<span v-text="comyInfo.comyName">111111111111</span>
|
</li>
|
<li>
|
<span>公司详细地址</span>
|
<span v-text="comyInfo.comyAddr">111111111111</span>
|
</li>
|
<li>
|
<span>所属行业</span>
|
<span v-text="comyInfo.industry">1111111111111</span>
|
</li>
|
<li>
|
<span>职位/职级</span>
|
<span v-text="comyInfo.jobRank">1111111111</span>
|
</li>
|
|
</ul>
|
|
</group>
|
<group>
|
<div class="info_queren">
|
<h4>联系人信息</h4>
|
<!--<p><i class="iconfont icon-edit"></i><span>修改</span></p>-->
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>第一联系人</span>
|
<span v-text="contactInfo.contactName1">111111111111</span>
|
</li>
|
<li>
|
<span>与联系人关系</span>
|
<span v-text="contactInfo.contactRel1">111111111111</span>
|
</li>
|
<li>
|
<span>联系人电话</span>
|
<span v-text="contactInfo.contactMblNo1">1111111111111</span>
|
</li>
|
<li>
|
<span>第二联系人</span>
|
<span v-text="contactInfo.contactName2">1111111111</span>
|
</li>
|
<li>
|
<span>与联系人关系</span>
|
<span v-text="contactInfo.contactRel2">1111111111111</span>
|
</li>
|
<li>
|
<span>联系人电话</span>
|
<span v-text="contactInfo.contactMblNo2">1111111111</span>
|
</li>
|
</ul>
|
</group>
|
<group>
|
<div class="info_queren">
|
<h4>银行卡信息</h4>
|
<!--<p><i class="iconfont icon-edit"></i><span>修改</span></p>-->
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>银行卡号</span>
|
<span v-text="bankCardInfo.bankCardNo">111111111111</span>
|
</li>
|
<li>
|
<span>开户行</span>
|
<span v-text="bankCardInfo.bankName">111111111111</span>
|
</li>
|
<li>
|
<span>预留手机号</span>
|
<span v-text="bankCardInfo.mblNo">1111111111111</span>
|
</li>
|
</ul>
|
</group>
|
<div style="height: 20px"></div>
|
<div class="xieyi">
|
<input type='checkbox' v-model="isAgree" name='VoteOption1' @change="agreeINfoCheckBox"/> 我已阅读并同意
|
<span>《包银协议1》</span>、<span>《包银协议2》</span>、<span>《包银协议3》</span>
|
</div>
|
<box class="butonColor" gap="0 15px">
|
<x-button :type="nextBtnType" @click.native="nextPage" :disabled="!isAgree">提交申请</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Flow,
|
FlowState,
|
FlowLine,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
Actionsheet,
|
Msg,
|
XTable,
|
} from 'vux';
|
import FSpace from '../../../components/common/FSpace.vue';
|
import validate from '../../../tool/validator';
|
import SysApi from '../../../api/api'
|
import statusCodeManage from '../../../api/statusCodeManage'
|
|
// ---------mima----
|
export default {
|
name: 'infoOk',
|
data() {
|
return {
|
isPay: false, // 默认进来就设置显示
|
isAgree: false, // 是否同意
|
nextBtnType: "",
|
isLastStep: false, // 是否是最后一步
|
activePageItem: 0, // 激活当前页
|
pageList: [], // 一共有几页
|
//初始化个人基本信息
|
personalInfo: {
|
userName: '',
|
idNo: '',
|
regMblNo: '',
|
degree: '',
|
marrStatus: '',
|
homeProv: '',
|
homeCity: '',
|
homeArea: '',
|
homeAddr: '',
|
marrStatus: '',
|
},
|
//公司信息
|
comyInfo: {
|
comyName: '',
|
comyAddr: '',
|
industry: '',
|
jobRank: '',
|
},
|
//联系人信息
|
contactInfo: {
|
contactRel1: '',
|
contactName1: '',
|
contactMblNo1: '',
|
contactRel2: '',
|
contactName2: '',
|
contactMblNo2: '',
|
},
|
//银行卡信息
|
bankCardInfo: {
|
bankCardNo: '',
|
bankName: '',
|
mblNo: '',
|
}
|
};
|
},
|
components: {
|
Flow,
|
FlowState,
|
FlowLine,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
Actionsheet,
|
Msg,
|
XTable,
|
|
},
|
|
methods: {
|
//初始化确认信息页面
|
initConfirmInfo() {
|
let _this = this;
|
let prodId = {
|
prodId: this.$route.query.prodId,
|
};
|
SysApi.initConfirmInfo(prodId).then(
|
res => {
|
console.log(res)
|
_this.personalInfo.userName = res.body.personalInfo.userName;
|
_this.personalInfo.idNo = res.body.personalInfo.idNo;
|
_this.personalInfo.regMblNo = res.body.personalInfo.regMblNo;
|
_this.personalInfo.degree = res.body.personalInfo.degree;
|
_this.personalInfo.marrStatus = res.body.personalInfo.marrStatus;
|
_this.personalInfo.homeProv = res.body.personalInfo.homeProv + '-' + res.body.personalInfo.homeCity + '-' + res.body.personalInfo.homeArea;
|
// _this.personalInfo.homeCity = res.body.personalInfo.homeCity;
|
// _this.personalInfo.homeArea = res.body.personalInfo.homeArea;
|
_this.personalInfo.homeAddr = res.body.personalInfo.homeAddr;
|
_this.personalInfo.marrStatus = res.body.personalInfo.marrStatus;
|
|
_this.comyInfo.comyName = res.body.comyInfo.comyName;
|
_this.comyInfo.comyAddr = res.body.comyInfo.comyAddr;
|
_this.comyInfo.industry = res.body.comyInfo.industry;
|
_this.comyInfo.jobRank = res.body.comyInfo.jobRank;
|
|
_this.contactInfo.contactRel1 = res.body.contactInfo.contactRel1;
|
_this.contactInfo.contactName1 = res.body.contactInfo.contactName1;
|
_this.contactInfo.contactMblNo1 = res.body.contactInfo.contactMblNo1;
|
_this.contactInfo.contactRel2 = res.body.contactInfo.contactRel2;
|
_this.contactInfo.contactName2 = res.body.contactInfo.contactName2;
|
_this.contactInfo.contactMblNo2 = res.body.contactInfo.contactMblNo2;
|
|
_this.bankCardInfo.bankCardNo = res.body.bankCardInfo.bankCardNo;
|
_this.bankCardInfo.bankName = res.body.bankCardInfo.bankName;
|
_this.bankCardInfo.mblNo = res.body.bankCardInfo.mblNo;
|
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
)
|
},
|
|
//确认协议按钮样式
|
agreeINfoCheckBox() {
|
// console.log(this.isAgree);
|
if (this.isAgree) {
|
this.nextBtnType = "primary";
|
} else {
|
this.nextBtnType = "";
|
}
|
},
|
//个人信息修改
|
gocompanyModification() {
|
this.$router.push({path: '/bnd/credit/companyModification', query: {prodId: this.$route.query.prodId,}})
|
},
|
//公司信息修改
|
gopersonalChanges() {
|
this.$router.push({path: '/bnd/credit/personalChanges', query: {prodId: this.$route.query.prodId,}})
|
},
|
|
// 点击下一步执行的方法
|
nextPage() {
|
this.isPay = true;
|
let Info = {
|
prodId: this.$route.query.prodId,
|
};
|
SysApi.submitApply(Info).then(
|
res => {
|
this.$router.push({path: '/bnd/credit/messageCode', query: {prodId: this.$route.query.prodId,}})
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
});
|
// this.$router.push({path: '/bnd/credit/subSuss', query: {id: '',}});
|
},
|
//返回上一页
|
goBackPage() {
|
// 如果是第一步的话，那么返回到上一个页面
|
if (this.activePageItem <= 1) {
|
this.$router.back();
|
// 不是的话，那么显示上一步
|
} else {
|
this.activePageItem--;
|
this.isLastStep = this.pageList.length === this.activePageItem;
|
}
|
},
|
|
},
|
activated: function () {
|
this.initConfirmInfo()
|
}
|
};
|
</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);;
|
}
|
|
/*------------------------------*/
|
.Code_ls {
|
padding: 0.25rem 1.25rem;
|
h4 {
|
padding-bottom: 2rem;
|
padding-top: 1rem;
|
font-size: 1.2rem;
|
font-weight: normal;
|
color: @color-text-primary;
|
}
|
span {
|
color: @color-text-third;
|
display: inline-block;
|
}
|
span:last-child {
|
margin-left: 0.5rem;
|
}
|
}
|
|
.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-input {
|
text-align: left;
|
}
|
|
.porcolor p {
|
color: @color-primary;
|
}
|
|
.weui-btn weui-btn_mini weui-btn_primary {
|
background-color: @color-white !important;
|
}
|
|
.weui-msg__icon-area i {
|
color: @color-primary !important;
|
}
|
|
.weui-msg__icon-area {
|
margin-bottom: -1.2rem !important;
|
}
|
|
// 信息列表
|
.info_queren {
|
position: relative;
|
height: 3.5rem;
|
padding: 0 1rem;
|
border-bottom: 1px solid @color-divider-regular;
|
h4 {
|
font-size: @font-size-primary;
|
font-weight: normal;
|
line-height: 3.5rem;
|
}
|
p {
|
position: absolute;
|
top: 1rem;
|
right: 1rem;
|
vertical-align: middle;
|
color: @color-primary;
|
}
|
span {
|
display: inline-block;
|
vertical-align: middle;
|
font-size: @font-size-medium;
|
}
|
i {
|
vertical-align: middle;
|
padding-right: 0.5rem;
|
font-size: @font-size-medium;
|
}
|
|
}
|
|
.list_shuju {
|
padding: 1rem;
|
li {
|
padding-bottom: 0.4rem;
|
list-style: none;
|
}
|
span {
|
display: inline-block;
|
font-size: @font-size-base;
|
}
|
span:first-child {
|
color: @color-text-secondary;
|
width: 9rem;
|
}
|
span:last-child {
|
color: @color-text-third;
|
font-size: @font-size-medium;
|
}
|
}
|
|
// 信息列表1
|
.xieyi {
|
text-align: left;
|
padding-bottom: 1.25rem;
|
font-size: @font-size-small;
|
width: 90%;
|
margin: 0 auto;
|
input {
|
vertical-align: middle;
|
}
|
span {
|
display: inline-block;
|
color: @color-primary;
|
}
|
}
|
|
.loan-info-box .weui-wepay-flow, .loan-info-box .weui-wepay-flow-auto {
|
padding: 0.83333rem 2.33333rem 2.5rem;
|
}
|
|
.butonColor {
|
button {
|
background: @color-disabled;
|
}
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
