<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="贷款信息确认"
|
:left-options="{backText: ''}"></x-header>
|
<group>
|
<div class="info_queren">
|
<h4>贷款人信息</h4>
|
</div>
|
<ul class="list_shuju">
|
<li>
|
<span>贷款人</span>
|
<span>{{loanInfo.userName}}</span>
|
</li>
|
<li>
|
<span>贷款金额</span>
|
<span>{{loanInfo.loanAmt|formatMoney}}</span>
|
</li>
|
<li>
|
<span>还款期数</span>
|
<span>{{loanInfo.loanTerm}}期</span>
|
</li>
|
<li>
|
<span>每期还款金额</span>
|
<span>{{loanInfo.repayAmt|formatMoney}}</span>
|
</li>
|
<li>
|
<span>首次还款日</span>
|
<span>{{showFormDate(loanInfo.firstRepayDay)}}</span>
|
</li>
|
<li>
|
<span>固定还款日</span>
|
<span>暂定</span>
|
</li>
|
<li>
|
<span>还款方式</span>
|
<span>{{loanInfo.repayType}}</span>
|
</li>
|
<li>
|
<span>收还款银行卡</span>
|
<span>{{loanInfo.bankName}} ****{{loanInfo.bankCardNo}}</span>
|
</li>
|
</ul>
|
</group>
|
|
<div style="height: 20px"></div>
|
<div class="xieyi">
|
<input type='checkbox' v-model="isAgree" name='VoteOption1' id="checkbox"/>
|
<label for="checkbox">我已阅读并同意<span>《包银协议1》</span>、<span>《包银协议2》</span>、<span>《包银协议3》</span></label>
|
</div>
|
<box gap="0 15px">
|
<x-button :type="isAgree?'primary':''" @click.native="isPay = true" :disabled="!isAgree">下一步</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
<div class="passwrod_jianpan">
|
<pay-keyboard
|
v-if="isPay"
|
:is-pay='isPay'
|
@pas-end='pasEnd'
|
@close='isPay=false'>
|
<!-- 自定义支付动画 -->
|
<div slot="loading-ani">
|
<svg></svg>
|
</div>
|
</pay-keyboard>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {XHeader, Group, XInput, XButton, Box, md5} from 'vux';
|
import validate from '../../../tool/validator';
|
import formDate from '../../../tool/date';
|
import SysApi from '../../../api/api';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
// ---------支付密码----
|
import payKeyboard from '../../../components/payKeyboard/PayKeyboard'
|
|
export default {
|
name: 'quotaInfo',
|
components: {XHeader, Group, XInput, XButton, Box, payKeyboard},
|
data() {
|
return {
|
isPay: false, // 是否显示支付密码输入框
|
isAgree: false, // 是否同意
|
loanInfo: {}
|
};
|
},
|
filters: {
|
// 金额格式化
|
formatMoney(val) {
|
return validate.formatMoney(val) + '元'
|
}
|
},
|
methods: {
|
//格式化日期
|
showFormDate(dateTime) {
|
return formDate(dateTime, 'YYYY-MM-DD');
|
},
|
// 输入支付密码回调的方法
|
pasEnd(val) {
|
this.isPay = false;
|
this.loanInfo.pwd = md5(sessionStorage.newPhoneNum + val);
|
let parmas = {
|
prodId: sessionStorage.prodId,
|
pwd: this.loanInfo.pwd,
|
loanAmt: this.loanInfo.loanAmt,
|
loanTerm: this.loanInfo.loanTerm,
|
loanUse: this.loanInfo.loanUse,
|
riskInfo: {
|
deviceId: "yhjguyg",
|
IMEI: "IMEI",
|
IDFA: "IDFA",
|
ip: "192.168.10.93",
|
longiTude: "104.108676",
|
latiTude: "30.593814",
|
mac: "daqasdsxzc",
|
wifiMac: "43f1",
|
wifiList: [],
|
phoneModel: "iphone",
|
operationSys: "ios",
|
appNameList: []
|
}
|
};
|
SysApi.submitLoan(parmas).then(
|
res => {
|
this.$router.push({path: '/bnd/loan/loanMessage'});
|
},
|
err => {
|
statusCodeManage.showTipOfStatusCode(err)
|
}
|
)
|
}
|
},
|
activated() {
|
this.isPay = false;
|
this.loanInfo = JSON.parse(sessionStorage.loanInfo)
|
}
|
};
|
</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;
|
}
|
}
|
}
|
.weui-cells {
|
margin-top: 0;
|
}
|
|
}
|
|
.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);;
|
}
|
|
.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;
|
|
}
|
|
}
|
|
.list_shuju {
|
padding: 1rem;
|
li {
|
padding-bottom: 0.4rem;
|
}
|
span {
|
display: inline-block;
|
}
|
span:first-child {
|
color: @color-text-secondary;
|
width: 9rem;
|
font-size: @font-size-base;
|
}
|
span:last-child {
|
color: @color-text-third;
|
font-size: @font-size-medium;
|
}
|
}
|
|
.xieyi {
|
padding: 0 1rem 1.25rem;
|
text-align: left;
|
input {
|
vertical-align: middle;
|
}
|
span {
|
display: inline-block;
|
color: @color-primary;
|
}
|
}
|
|
.passwrod_jianpan {
|
.title v-1px-b pr {
|
span {
|
display: inline-block;
|
font-size: @font-size-base !important;
|
}
|
.pa {
|
left: 15px !important;
|
.icon {
|
width: 1.5rem !important;
|
height: 1.5rem !important;
|
}
|
}
|
}
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
