<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-22 11:36:16
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-06-23 13:42:58
|
* @Description: 提前结清
|
-->
|
<template>
|
<div class="settle-page">
|
<v-navbar title="提前结清" :back="'/order/order-detail?id='+$route.query.id"></v-navbar>
|
<div class="fenqi-info-box">
|
<div class="info-top">
|
<div class="box">
|
<img src="../../../static/img/pic.png" alt />
|
<span>分期信息</span>
|
</div>
|
</div>
|
<div class="mation-box">
|
<h-cell v-model="order.insAmt" readonly label="分期金额"></h-cell>
|
<h-cell v-model="order.insTerm" readonly label="分期期数"></h-cell>
|
</div>
|
<div class="v-collapse-box">
|
<van-collapse v-model="activeNames">
|
<van-collapse-item name="1">
|
<template #title>
|
<div class="cell-box" @click="getActive">
|
<div class="left">
|
<span>当前应还金额</span>
|
<div ref="jiantou" class="jiantou-you"></div>
|
</div>
|
<div class="right">
|
<p>¥{{order.curTotalAmt}}</p>
|
</div>
|
</div>
|
</template>
|
<div class="active-box">
|
<div class="text-box">
|
<span>当期应还：</span>
|
<span>{{order.curRpyAmt}}</span>
|
</div>
|
<div class="text-box">
|
<span>往期应还：</span>
|
<span>¥{{order.pastRpyAmt}}</span>
|
</div>
|
</div>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
<div class="mation-box">
|
<h-cell v-model="order.remainAmt" readonly label="剩余本金"></h-cell>
|
<h-cell v-model="order.settleFeeAmt" readonly label="提前结清手续费"></h-cell>
|
</div>
|
</div>
|
<div class="footer-box">
|
<div class="text-box">
|
<p>提前结清会产生对应的手续费</p>
|
<p>提前结清手续费=剩余本金 * 提前结清费率</p>
|
</div>
|
<div class="play-box">
|
<p>
|
<span>应还总额：</span>
|
<span>¥{{order.totalAmt}}</span>
|
</p>
|
<button class="btn" @click="doPay">确认支付</button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Collapse, CollapseItem } from "vant";
|
|
Vue.use(Collapse);
|
Vue.use(CollapseItem);
|
export default {
|
data() {
|
return {
|
active: false,
|
activeNames: [],
|
repayAmt:'',//结清金额
|
order:{},//订单相关信息
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
/**初始化**/
|
init() {
|
this.$api.initPreClose({
|
orderId:this.$route.query.id
|
}).then(res=>{
|
this.order = res.body || []
|
this.order.insAmt = '￥'+this.order.insAmt
|
this.order.insTerm = this.order.insTerm+'期'
|
this.order.settleFeeAmt = '￥'+this.order.settleFeeAmt
|
this.order.remainAmt = '￥'+this.order.remainAmt
|
})
|
},
|
/**展开控制**/
|
getActive() {
|
this.active = !this.active;
|
if (this.active) {
|
this.$refs.jiantou.style.transform = "rotate(90deg)";
|
this.$refs.jiantou.style.transition = "transform 0.3s linear";
|
//this.$refs.jiantou.style.top = "8px";
|
} else {
|
this.$refs.jiantou.style.transform = "rotate(0deg)";
|
this.$refs.jiantou.style.transition = "transform 0.3s linear";
|
}
|
},
|
/**确认支付**/
|
doPay(){
|
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-提前结清行为
|
}
|
})
|
})
|
|
},
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.settle-page {
|
& {
|
min-height: 100vh;
|
background: @c-back;
|
}
|
/deep/.van-collapse-item__content {
|
padding: 0;
|
}
|
/deep/.van-cell__right-icon {
|
margin-left: 0.1rem;
|
color: #969799;
|
display: none;
|
}
|
/deep/.van-cell--clickable {
|
cursor: pointer;
|
padding: 0 26px;
|
}
|
/deep/.van-hairline--top-bottom::after,
|
.van-hairline-unset--top-bottom::after {
|
border-width: 0;
|
}
|
.fenqi-info-box {
|
& {
|
background: #fff;
|
margin-top: 10px;
|
}
|
.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;
|
}
|
}
|
.mation-box {
|
& {
|
padding: 0 26px;
|
}
|
div:last-of-type {
|
border: 0;
|
}
|
}
|
.cell-box {
|
& {
|
padding: 0.2rem 0;
|
border-top: 1px solid #eeeeee;
|
border-bottom: 1px solid #eeeeee;
|
}
|
.left,
|
.right {
|
display: inline-block;
|
width: 49%;
|
}
|
.right {
|
text-align: right;
|
p{
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.left {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #666666;
|
position: relative;
|
// span::after{
|
// content: '';
|
// position: absolute;
|
// top: 5px;
|
// left: 90px;
|
// width: 0;
|
// height: 0;
|
// border: 6px solid transparent;
|
// border-left-color: #5194fe;
|
// }
|
.jiantou-you {
|
position: absolute;
|
top: 5px;
|
left: 90px;
|
width: 0;
|
height: 0;
|
border: 6px solid transparent;
|
border-left-color: #5194fe;
|
}
|
}
|
}
|
.active-box {
|
background: @c-back;
|
display: flex;
|
flex-wrap: wrap;
|
box-sizing: border-box;
|
padding: 15px 22px;
|
.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);
|
}
|
}
|
}
|
}
|
.footer-box {
|
& {
|
position: fixed;
|
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);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
