<!--
|
* @Author: zxq
|
* @Date: 2022-06-14 11:03:17
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-06-16 10:06:39
|
* @Description: Description
|
* @FilePath: \axx_ins_client\src\views\order\settlementEarly.vue
|
-->
|
<template>
|
<div class="settlement_early">
|
<v-navbar title="全部应还"></v-navbar>
|
<div class="settle_box">
|
<div>结清待支付总额（元）</div>
|
<div>{{ order.totalAmt }}</div>
|
<div>服务费{{ order.settleFeeAmt }}元</div>
|
<div>
|
<button class="btn-jq" @click="goSettle">提前结清</button>
|
</div>
|
</div>
|
|
<div class="info-top">
|
<div class="box">
|
<img src="../../../static/img/pic.png" alt />
|
<span>未还期数</span>
|
</div>
|
<div>
|
<van-collapse v-model="activeNames" style="width:100%">
|
<van-collapse-item style="width:100%" :name="item.seqNo" v-for="item in repayPlans" :key="item.seqNo" 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 style="width:150px;">
|
<span>{{item.rpyDay}}账单</span>
|
</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.totalAmt }}</span>
|
</p>
|
<p>
|
<span>应还日期</span>
|
<span>{{ item.rpyDay }}</span>
|
</p>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
<div class="text-box">
|
<p>提前结清会产生对应的手续费</p>
|
<p>提前结清手续费=剩余本金 * 提前结清费率</p>
|
</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 { Collapse, CollapseItem ,Button,Popup,Icon} from "vant";
|
import { mapState } from 'vuex';
|
Vue.use(Collapse);
|
Vue.use(Button);
|
Vue.use(Popup);
|
Vue.use(Icon);
|
Vue.use(CollapseItem);
|
export default {
|
data() {
|
return {
|
order: {},
|
repayPlans: [],
|
activeNames: ["1"],
|
yzmShow:false,
|
yzmVal:'',
|
yzmText:'发送验证码',
|
Open: true, //倒计时开关
|
};
|
},
|
created() {
|
this.init();
|
},
|
computed: {
|
...mapState(['userinfo'])
|
},
|
methods: {
|
init() {
|
this.$api.initPreClose({ orderId: this.$route.query.id }).then(({ body }) => {
|
this.order = body.preSettInfo || {};
|
this.repayPlans = body.repayPlans;
|
});
|
},
|
goSettle() {
|
this.yzmShow = true;
|
// this.$api.preClose({
|
// orderId:this.$route.query.id,
|
// repayAmt:this.order.totalAmt
|
// }).then(res=>{
|
// //支付跳转支付宝结果页面
|
// this.$router.push({
|
// path:'/order/pay-result',
|
// query:{
|
// orderId:this.$route.query.id,
|
// model:2 //1-主动还款行为 2-提前结清行为
|
// }
|
// })
|
// })
|
},
|
yzmYes() {
|
if (this.yzmVal == "" || this.yzmVal == null) {
|
this.$notify({ type: "danger", message: "验证码为空！" });
|
} else {
|
this.$api.preClose({orderId: parseInt(this.$route.query.id),verCode:this.yzmVal}).then(({body}) => {
|
this.yzmShow = false;
|
clearInterval(this.timer);
|
this.$router.push({
|
path:'/order/pay-result',
|
query:{
|
orderId:this.$route.query.id,
|
model:2 //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 scoped lang="less">
|
.settlement_early {
|
background-color: #f5f5f7;
|
padding-bottom: 50px;
|
}
|
.settle_box {
|
width: 100%;
|
padding: 16px 0;
|
box-sizing: border-box;
|
text-align: center;
|
background-color: #fff;
|
> div {
|
margin-bottom: 16px;
|
&:first-child {
|
font-size: 16px;
|
}
|
&:nth-child(2){
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
}
|
.btn-jq {
|
width: 155px;
|
height: 44px;
|
background: #5194fe;
|
border: 1px solid rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
outline: none;
|
color: #fff;
|
margin-right: 13px;
|
}
|
.info-top {
|
font-size: 15px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: rgba(51, 51, 51, 1);
|
padding: 0 10px;
|
.box {
|
border-bottom: 1px solid #e6e6e6;
|
padding: 17px 6px;
|
}
|
img {
|
width: 6px;
|
height: 13px;
|
}
|
}
|
.tit-box {
|
& {
|
display: flex;
|
z-index: 100;
|
}
|
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: #999;
|
}
|
p {
|
margin-top: 11px;
|
span {
|
display: inline-block;
|
width: 49%;
|
}
|
span:nth-of-type(2) {
|
text-align: right;
|
}
|
}
|
}
|
.text-box {
|
margin-top: 16px;
|
& {
|
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;
|
}
|
}
|
.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>
|
