<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-22 16:13:05
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-07-05 17:55:53
|
* @Description: 主动还款页面
|
-->
|
<template>
|
<div class="active-repayment-page">
|
<v-navbar title="主动还款" :back="'/order/order-detail?id=' + $route.query.id"></v-navbar>
|
<div class="mation-box">
|
<van-checkbox-group v-model="result" @change="onChange" style="width: 100%">
|
<!-- <div class="info-box" v-for="(item,index) in list" :key="index"> -->
|
<van-collapse v-model="activeNames" style="width: 100%">
|
<van-collapse-item style="width: 100%" :name="item.seqNo" v-for="(item, index) in list" :key="index" ref="keyplan">
|
<template #title>
|
<div class="tit-box">
|
<van-checkbox @click.prevent.stop.native="onClick(item)" v-model="item.checked" :name="item.seqNo" :disabled="item.canRepay == 0 ? true : false">第{{ item.seqNo }}期</van-checkbox>
|
<div>应还总额</div>
|
<div>¥{{ item.totalAmt }}</div>
|
<div v-if="item.rpySts == 1">
|
<p style="line-height: 16px">已还</p>
|
</div>
|
</div>
|
</template>
|
<!-- 内容 -->
|
<div class="content-box">
|
<p>
|
<span>应还本金</span>
|
<span>¥{{ item.rpyAmt }}</span>
|
</p>
|
<p>
|
<span>应还服务费</span>
|
<span>¥{{ item.rpySerFee }}</span>
|
</p>
|
<p>
|
<span>应还滞纳金</span>
|
<span>¥{{ item.rpyLateFee }}</span>
|
</p>
|
<p>
|
<span>应还日期</span>
|
<span>{{ item.rpyDay }}</span>
|
</p>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
<!-- </div> -->
|
</van-checkbox-group>
|
</div>
|
<!-- 占位 -->
|
<div style="height: 100px; width: 100vw"></div>
|
<div class="footer-box">
|
<div class="text-box">
|
<p>主动还款必须按照应还顺序依次还款</p>
|
<p>不支持跳期还款</p>
|
</div>
|
<div class="play-box">
|
<p>
|
<span>应还总额：</span>
|
<span>¥{{ repayAmt }}</span>
|
</p>
|
<button class="btn" @click="pay">确认支付</button>
|
</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 { Collapse, CollapseItem } from "vant";
|
import { Checkbox, CheckboxGroup, Button, Popup, Icon } from "vant";
|
import { mapState } from "vuex";
|
Vue.use(Checkbox);
|
Vue.use(CheckboxGroup);
|
Vue.use(Collapse);
|
Vue.use(CollapseItem);
|
Vue.use(Button);
|
Vue.use(Popup);
|
Vue.use(Icon);
|
export default {
|
data() {
|
return {
|
activeNames: [],
|
list: [],
|
result: [],
|
repayTerms: [], //还款期数
|
repayAmt: 0, //还款金额
|
yzmShow: false,
|
yzmVal: "",
|
yzmText:'发送验证码',
|
Open: true, //倒计时开关
|
};
|
},
|
created() {
|
this.init();
|
},
|
computed: {
|
...mapState(["userinfo"]),
|
},
|
methods: {
|
init() {
|
this.$api
|
.initRepay({
|
orderId: this.$route.query.id,
|
})
|
.then((res) => {
|
this.list = res.body.repayPlans || [];
|
});
|
},
|
pay() {
|
if(this.repayAmt>0){
|
this.yzmShow = true;
|
}else{
|
|
}
|
},
|
onChange() {
|
//判断数组元素个数
|
if (this.result.length > 0) {
|
this.$api
|
.repayTrial({ repayTerms: this.result, orderId: this.$route.query.id })
|
.then((res) => {
|
this.repayAmt = res.body.totalAmt;
|
})
|
.catch((err) => {
|
//捕捉错误 清空选项重新选择
|
this.result = [];
|
this.list.forEach((e) => {
|
e.checked = false;
|
});
|
});
|
} else {
|
//this.activeNames = []
|
this.repayAmt = 0;
|
}
|
console.log(this.activeNames);
|
},
|
onClick(item) {
|
//此点击函数只是用来阻止事件冒泡
|
console.log("点击了", item);
|
},
|
/**主动还款**/
|
yzmYes() {
|
if (this.yzmVal == "" || this.yzmVal == null) {
|
this.$notify({ type: "danger", message: "验证码为空！" });
|
} else{
|
this.$api.repay({orderId: this.$route.query.id,repayAmt: this.repayAmt, repayTerms: this.result,verCode:this.yzmVal}).then((res) => {
|
this.$router.push({
|
path: "/order/pay-result",
|
query: {
|
orderId: this.$route.query.id,
|
repayId: res.body.repayId,
|
model: 1, //1-主动还款行为 2-提前结清行为
|
},
|
});
|
});
|
}
|
},
|
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;
|
});
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.active-repayment-page {
|
& {
|
min-height: 100vh;
|
background: #f5f5f7;
|
position: relative;
|
}
|
/deep/.van-collapse-item {
|
width: 100%;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(225, 237, 255, 1);
|
border-radius: 5px;
|
margin-bottom: 8px;
|
}
|
/deep/[class*="van-hairline"]::after {
|
position: absolute;
|
box-sizing: border-box;
|
content: " ";
|
pointer-events: none;
|
top: -50%;
|
right: -50%;
|
bottom: -50%;
|
left: -50%;
|
border: 0;
|
-webkit-transform: scale(0.5);
|
transform: scale(0.5);
|
}
|
.mation-box {
|
& {
|
background: #fff;
|
display: flex;
|
justify-content: center;
|
padding: 20px 16px;
|
box-sizing: border-box;
|
height: auto;
|
margin-top: 10px;
|
}
|
.info-box {
|
width: 343px;
|
height: 44px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(225, 237, 255, 1);
|
border-radius: 5px;
|
margin-bottom: 8px;
|
}
|
.tit-box {
|
& {
|
//width: 100%;
|
display: flex;
|
z-index: 100;
|
//justify-content: space-between;
|
}
|
div:nth-of-type(1) {
|
width: 80px;
|
}
|
div:nth-of-type(2) {
|
width: 70px;
|
font-size: 13px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
div:nth-of-type(3) {
|
//width: 80px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(51, 51, 51, 1);
|
}
|
div:nth-of-type(4) {
|
margin-left: 12px;
|
text-align: center;
|
p {
|
display: inline-block;
|
width: 40px;
|
height: 16px;
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
background: rgba(240, 246, 255, 1);
|
border: 1px solid rgba(81, 148, 254, 1);
|
border-radius: 3px;
|
color: #5194fe;
|
}
|
}
|
}
|
.content-box {
|
& {
|
color: #999999;
|
}
|
p {
|
span {
|
display: inline-block;
|
width: 49%;
|
}
|
span:nth-of-type(2) {
|
text-align: right;
|
}
|
}
|
p:nth-of-type(2) {
|
margin: 11px 0;
|
}
|
p:nth-of-type(4) {
|
margin-top: 11px;
|
}
|
}
|
}
|
.footer-box {
|
& {
|
position: absolute;
|
bottom: 0;
|
}
|
.text-box {
|
& {
|
height: 39px;
|
width: 100vw;
|
text-align: center;
|
}
|
p {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
line-height: 15px;
|
}
|
}
|
.play-box {
|
& {
|
width: 100vw;
|
height: 49px;
|
background: #fff;
|
position: relative;
|
line-height: 49px;
|
box-sizing: border-box;
|
padding-left: 16px;
|
}
|
.btn {
|
width: 120px;
|
height: 49px;
|
background: rgba(81, 148, 254, 1);
|
color: #fff;
|
border: 0;
|
outline: none;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
p {
|
span:nth-of-type(1) {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
span:nth-of-type(2) {
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(255, 102, 102, 1);
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
