<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-13 17:26:17
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-06-15 17:53:43
|
* @Description: 还款试算-订单详情还款计划表
|
-->
|
<template>
|
<div class="repayment-plan-page">
|
<v-navbar :title="isPlan?'还款计划表':'还款试算'" fixed></v-navbar>
|
<div class='repayment_box'>
|
<!-- <div class='repayment_small_box'> -->
|
<!-- <div style="height:10px"></div> -->
|
<div v-if='isAllReplay' class="primary_btn" @click="checkAll" >
|
<van-checkbox icon-size='14px' v-model="checkedAll">全选</van-checkbox>
|
</div>
|
<div class='repayment_small_box'>
|
<van-collapse v-model="activeNames" accordion style='padding-bottom:50px;' >
|
<van-checkbox-group v-model="result" ref="checkboxGroup" @change='changeRadion'>
|
<div v-for="(item,index) in tremList" :key="index" class='chckout'>
|
<van-checkbox v-if='isAllReplay&&item.canRepay==1' @click.stop='changeRad' :name="item.seqNo" icon-size='14px'> </van-checkbox>
|
<van-collapse-item :name="index">
|
<template #title>
|
<div>
|
<span>{{'第'+(index+1)+'期'}}</span>
|
</div>
|
</template>
|
<div class="detail-box">
|
<div class="text-box">
|
<span>应还日期：</span>
|
<span>{{item.rpyDay}}</span>
|
</div>
|
<div class="text-box">
|
<span>{{isPlan?'应还本金：':'应还总额：'}}</span>
|
<span v-if="isPlan">¥{{item.rpyAmt}}</span>
|
<span v-else>¥{{item.totalAmt}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>应还服务费：</span>
|
<span>¥{{item.rpySerFee}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>应还滞纳金：</span>
|
<span>¥{{item.rpyLateFee}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>实还日期：</span>
|
<span>{{item.realRpyTime}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>实还本金：</span>
|
<span>¥{{item.realAmt}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>实还服务费：</span>
|
<span>¥{{item.realSerFee}}</span>
|
</div>
|
<div v-if="isPlan" class="text-box">
|
<span>实还滞纳金：</span>
|
<span>¥{{item.realLateFee}}</span>
|
</div>
|
</div>
|
</van-collapse-item>
|
</div>
|
</van-checkbox-group>
|
</van-collapse>
|
<!-- <div class='btn_class' v-if='!isAllReplay&&showReplayArr.length>0'>
|
<van-button size='normal' block type="info" @click="goPay">立即还款</van-button>
|
</div>
|
<div class='btn_replay primary_btn' v-else>
|
<div class='payment_money' v-if='totalAmt'>
|
<span>本次共计需还</span>
|
<span>{{totalAmt}}</span>
|
</div>
|
<div v-if="totalAmt&&havaRadion" >
|
<van-button size="small" type="info" @click="yzmShow=true">确认还款</van-button>
|
<van-button size="small" type="default" @click="canelReplay">取消</van-button>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
<!-- 短信验证码弹窗 -->
|
<van-popup v-model="yzmShow">
|
<div class="yzmbox">
|
<van-icon name="cross" size="18" class="yzmbox-close" @click="yzmShow = false" />
|
<p style="font-size:16px;color:#000;">请输入短信验证码</p>
|
<div class="yzmbox-contnet">
|
<div class="yzmbox-contnet-yzm">
|
<span>将发送到手机号：</span>
|
<span>{{userinfo.mblNo.replace(/(\d{3})\d*(\d{4})/,'$1****$2')}}</span>
|
</div>
|
</div>
|
<div class="yzmbox-contnet-get">
|
<input type="text" v-model="yzmVal" placeholder="请输入验证码"/>
|
<span class="yzmbox-contnet-get-yzm" @click="getYzm">{{yzmText}}</span>
|
</div>
|
<van-button class="showbtn" block round @click="yzmYes">确认</van-button>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from 'vue';
|
import { mapState } from 'vuex';
|
import { Collapse, CollapseItem ,Button,Checkbox, CheckboxGroup,Popup,Icon,Dialog } from 'vant';
|
Vue.use(Collapse);
|
Vue.use(CollapseItem);
|
Vue.use(Button);
|
Vue.use(Checkbox);
|
Vue.use(CheckboxGroup);
|
Vue.use(Popup);
|
Vue.use(Icon);
|
export default {
|
components: {[Dialog.Component.name]: Dialog.Component},
|
data(){
|
return{
|
activeNames: ['1'],
|
tremList:[],
|
result: [],
|
checkedAll:false,
|
isAllReplay:false,//是否是可还款状态
|
yzmShow:false,
|
yzmVal:"",
|
Open: true, //倒计时开关
|
yzmText: '获取验证码',
|
showReplayArr:[],
|
totalAmt:'',
|
orderId:'',
|
timer:null,
|
havaRadion:true,
|
getStatusTime:null,
|
repayId:'',
|
repayPStatus:1,
|
}
|
},
|
computed: {
|
...mapState(['userinfo']),
|
isPlan(){
|
if(this.$route.query.id){
|
return true
|
}else{
|
return false
|
}
|
}
|
},
|
methods:{
|
init() {
|
this.$api.initRepay({orderId:this.$route.query.id}).then(res => {
|
this.tremList = (res.body.repayPlans || []).map((val,index)=>{
|
return {
|
...val,
|
id:val.orderId+index,
|
checked:false
|
}
|
});
|
let arr = [];
|
res.body.repayPlans.forEach(val=>{
|
if(val.canRepay==1){
|
arr.push(val.canRepay);
|
}
|
});
|
this.showReplayArr = arr;
|
});
|
},
|
checkAll() {
|
if(!this.checkedAll){
|
this.$refs.checkboxGroup.toggleAll(true);
|
}else{
|
this.result=[];
|
}
|
},
|
goPay(index) {
|
this.isAllReplay =!this.isAllReplay;
|
},
|
getYzm(){
|
let sendParams = {mblNo: this.userinfo.mblNo, verCodeType: 20};
|
if (this.Open) {
|
this.$api.getVerCode(sendParams).then((res) => {
|
this.Open = false;
|
let num = 60;
|
this.yzmText = num + '秒后重发';
|
let _this = this;
|
_this.timer = setInterval(() => {
|
num--;
|
if (num === 0) {
|
clearInterval( _this.timer);
|
_this.Open = true;
|
_this.yzmText = '重新发送';
|
} else {
|
_this.yzmText = num + '秒后重发';
|
}
|
}, 1000);
|
}).catch(() => {
|
this.Open = true;
|
});
|
}
|
},
|
yzmYes() {
|
if (this.yzmVal == "" || this.yzmVal == null) {
|
this.$notify({ type: "danger", message: "验证码为空！" });
|
} else {
|
this.$api.repay({orderId: parseInt(this.$route.query.id),repayAmt:this.totalAmt, repayTerms:this.result,verCode:this.yzmVal}).then(({body}) => {
|
this.yzmShow = false;
|
clearInterval(this.timer);
|
this.yzmVal = "";
|
this.yzmText ='获取验证码';
|
this.isAllReplay =false;
|
this.Open = true;
|
this.totalAmt ='';
|
this.result=[];
|
this.repayId = body.repayId;//还款还款行为ID
|
this.checkReolayStatus();
|
});
|
|
}
|
},
|
checkReolayStatus(){
|
this.$api.findRepayResult({repayId:this.repayId}).then(({body})=>{
|
if(this.getStatusTime!==null){
|
clearInterval(this.getStatusTime);
|
}
|
// 0-支付中，1-支付成功，2-支付失败
|
// failMsg: "支付金额为0,不需要调用授权支付接口流程"
|
// repaySts: 1
|
// repayStsName: "支付成功"
|
// this.repayPStatus = body.repaySts;
|
if(body.repaySts==1){
|
Dialog.alert({
|
title: '提示',
|
message:body.repayStsName? body.repayStsName:'还款成功',
|
}).then(res=>{
|
clearInterval(this.getStatusTime);
|
})
|
}else if(body.repaySts==2){
|
Dialog.alert({
|
title: '提示',
|
message:body.repayStsName? body.repayStsName:'还款失败',
|
}).then(res=>{
|
clearInterval(this.getStatusTime);
|
})
|
}else{
|
// 状态为还款中时不许操作其他未还款的
|
Dialog.alert({
|
title: '提示',
|
message:body.repayStsName? body.failMsg:'还款中',
|
}).then(() => {
|
this.getStatusTime = setInterval(() => {
|
this.checkReolayStatus();
|
}, 2000);
|
});
|
}
|
this.init();
|
});
|
},
|
changeRadion(e){
|
this.havaRadion = this.result.length>0;
|
if(this.result==0){
|
this.totalAmt ='';
|
}
|
if(this.showReplayArr.length!==e.length){
|
this.checkedAll =false;
|
}else{
|
this.checkedAll =true;
|
}
|
if(e.length>0){
|
let max;
|
//遍历数组，默认arr中的某一个元素为最大值，进行逐一比较
|
for(let i=0; i<e.length; i++){
|
//外层循环一次，就拿arr[i] 和 内层循环arr.legend次的 arr[j] 做对比
|
for(var j=i; j<e.length; j++){
|
if(e[i]>e[j]){
|
//如果arr[j]大就把此时的值赋值给最大值变量max
|
max=e[j];
|
e[j]=e[i];
|
e[i]=max;
|
}
|
}
|
}
|
this.$api.repayTrial({orderId:this.$route.query.id,repayTerms:e}).then(res => {
|
this.totalAmt = res.body.totalAmt;
|
}).catch(err=>{
|
this.totalAmt = 0;
|
});
|
}
|
|
},
|
canelReplay(){
|
this.isAllReplay=false;
|
this.result=[];
|
this.checkedAll=false;
|
this.totalAmt=0;
|
},
|
changeRad(){
|
|
}
|
},
|
created(){
|
let tremList = JSON.parse(window.sessionStorage.getItem('order-repayPlans'));
|
if(tremList){
|
this.tremList = (JSON.parse(window.sessionStorage.getItem('order-repayPlans')) || []).map((val,index)=>{
|
return {
|
...val,
|
id:val.orderId+index
|
}
|
});
|
}else{
|
this.init();
|
}
|
},
|
beforeDestroy(){
|
clearInterval(this.getStatusTime);
|
clearInterval(this.timer);
|
sessionStorage.removeItem('order-repayPlans');
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.repayment-plan-page{
|
padding-top: 44px;
|
&{
|
min-height: 100vh;
|
background-color:#fff;
|
padding-bottom: 24px;
|
box-sizing: border-box;
|
}
|
.repayment_box{
|
height:calc(100vh - 44px);
|
overflow: hidden;
|
}
|
.repayment_small_box{
|
height:calc(100vh - 44px);
|
overflow: scroll;
|
padding-bottom: 50px;
|
// box-sizing: border-box;
|
}
|
.detail-box{
|
background: @c-back;
|
display: flex;
|
flex-wrap: wrap;
|
.text-box{
|
display: inline-block;
|
width: 50%;
|
color:rgba(153,153,153,1);
|
font-weight:500;
|
margin: 6px 0;
|
span:nth-of-type(2){
|
color:rgba(51,51,51,1);
|
}
|
}
|
}
|
.btn_class{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 20px;
|
}
|
.van-button--block{
|
width: 90%;
|
}
|
.primary_btn{
|
box-sizing: border-box;
|
width: 100%;
|
padding: 0.2rem 0.32rem;
|
overflow: hidden;
|
color: #323233;
|
font-size: 0.28rem;
|
line-height: 0.48rem;
|
background-color: #fff;
|
}
|
.btn_replay{
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 40px;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
.payment_money{
|
color: #666;
|
span{
|
&:last-child{
|
font-size: 18px;
|
color: #333;
|
font-weight: bold;
|
}
|
}
|
}
|
.yzmbox {
|
box-sizing: border-box;
|
width: 280px;
|
height: 225px;
|
position: relative;
|
overflow: hidden;
|
.flex("", center, center, column);
|
text-align: center;
|
border-radius: 6px;
|
background: #fff;
|
padding-top: 30px;
|
.van-button--block{
|
width: 90%;
|
margin-top: 15px;
|
}
|
&-close {
|
color: #999;
|
font-size: 16px;
|
position: absolute;
|
right: 8px;
|
top: 8px;
|
}
|
&-contnet {
|
margin-top: 11px;
|
color: #999;
|
font-size: 14px;
|
&-yzm {
|
.flex(center, center);
|
span {
|
font-size: 14px;
|
}
|
}
|
&-get {
|
width: 80%;
|
margin: 0 10%;
|
margin-top: 15px;
|
.flex(space-between, center);
|
input {
|
border: none;
|
width: 45%;
|
background: #fff;
|
height: 30px;
|
}
|
&-yzm {
|
color: @c-default;
|
}
|
}
|
}
|
}
|
.chckout{
|
display: flex;
|
justify-content: flex-start;
|
align-items: flex-start;
|
padding: 0 0.32rem;
|
overflow: hidden;
|
color: #323233;
|
box-sizing: border-box;
|
.van-checkbox{
|
width: 20px;
|
height: 44px;
|
overflow: hidden;
|
color: #323233;
|
font-size: 0.28rem;
|
line-height: 44px;
|
background-color: #fff;
|
box-sizing: border-box;
|
display: flex;
|
justify-content:center;
|
align-items: center;
|
}
|
|
}
|
.van-collapse-item{
|
width: 100%;
|
|
}
|
/deep/.van-cell--clickable{
|
padding-left: 0 !important;
|
padding-left: 0.16rem;
|
}
|
/deep/.van-collapse-item__title{
|
padding-left: 0 !important;
|
padding-left: 0.16rem;
|
}
|
/deep/.van-collapse-item__content {
|
padding: 0.32rem;
|
color: #969799;
|
font-size: 0.26rem;
|
line-height: 1.5;
|
background-color: @c-back;
|
}
|
}
|
</style>
|
