<!-- * @Author: your name * @Date: 2019-10-30 19:29:24 * @LastEditTime : 2019-12-26 16:47:07 * @LastEditors : Please set LastEditors * @Description: In User Settings Edit --> <template> <h-view id="repay-plan-trial" class="public-style"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <span>融资明细</span> </div> </h-header> <div class="center"> <div class="total"> <div class="sum"> <div>融资额</div> <p>{{ info.finance_amount | currency }}</p> <img src="@/assets/contractInquire/num.png" alt=""> <h3><span>{{ info.lease_times }}期</span></h3> </div> <div class="single"> <div><h4>保证金</h4><p>¥{{ info.deposit | currency }}</p></div> <div><h4>首付款</h4><p>¥{{ info.down_payment | currency }}</p></div> <div><h4>手续费</h4><p>¥{{ info.lease_charge | currency }}</p></div> </div> </div> <div class="plan-name"> <div class="header">还款计划</div> <img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails"> </div> </div> <h-content id="content" class="plan-content"> <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green --> <div v-for="(item,index) in repayLists" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}"> <div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div> <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left"> <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left"> <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left"> <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left"> <div class="time"> <p>{{ item.due_date.substr(0,4) }}</p> <span>{{ dateConverse(item.due_date).substr(5,10) }}</span> </div> <div class="number"> <div> <span>本金</span> <span>{{ item.principal |currency }}</span> </div> <div> <span>租金</span> <span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">{{ item.rental |currency }}</span> </div> </div> <div class="name"> <span>利息</span> <span>{{ item.interest | currency }}</span> </div> <img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status"> <img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status"> </div> </h-content> </h-view> </template> <script> export default { name: 'RepayPlan', components: { }, data () { return { // 已结清 black , 逾期 orange , 还款中 blue , 未还款 green statu: 'orange', info: {}, show: false, height: 0, oldHeight: 0, newHeight: 0, repayLists: [], // 每期还款 } }, computed: {}, watch: {}, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'FinancingDetails') { vm.repayQuery() } }) next() }, methods: { dateConverse (date) { return date.replace(/\//g, '-') }, // 根据还款期排序 arrSort (property) { return function (a, b) { var value1 = a[property] var value2 = b[property] return value1 - value2 } }, showDetails () { if (!this.flag) { this.flag = true this.height = document.getElementsByClassName('total')[0].clientHeight this.oldHeight = document.getElementById('content').clientHeight this.newHeight = this.height + this.oldHeight } if (!this.show) { this.show = !this.show document.getElementById('content').style.height = this.newHeight + 'px' document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s' document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)' document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s' document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)' } else { this.show = !this.show document.getElementById('content').style.height = this.oldHeight + 'px' document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s' document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)' document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s' document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)' } }, // 还款计划查询 repayQuery () { let vm = this let url = $config.basePath + 'prd_repayment_plan' let param = { quotation_id: vm.$route.params.quotation_id, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.info = res.info vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序 } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang='less'> #repay-plan-trial { .h-header { background-color: #1D3FFF; .h-header-btn { img { width: 16px; height: 16px; margin-left: 4px; } span { font-family: PingFangSC-Semibold; margin-left: 16px; font-size: 17px; letter-spacing: 0.61px; line-height: 24px; } } } .total { position: relative; background-color: #1D3FFF; height: 138px; color: #fff; background-image: url(../../assets/contractInquire/background.png); background-size: cover; .sum { padding: 0 20px; div { font-family: PingFangSC-Semibold; font-size: 14px; padding-top: 12px; padding-bottom: 10px; } p { font-family: Verdana-BoldItalic; font-size: 20px; font-weight: 700; font-style: italic; margin-left: -4px; } img { width: 75px; position: absolute; right: 20px; top: 25px; } h3 { position: absolute; font-weight: 700; margin: 0; right: 42px; top: 32px; color: #1D3FFF; font-family: PingFangSC-Semibold; font-size: 14px; span { font-style: italic; margin-right: 5px; } } } .single { display: flex; margin-top: 28px; div { flex: auto; text-align: center; h4 { opacity: 0.8; margin: 0; font-family: PingFangSC-Regular; font-size: 12px; color: #FFFFFF; margin-bottom: 8px; } p { font-family: Verdana; font-size: 14px; color: #FFFFFF; font-weight: 700; } } } } .plan-name { position: relative; background-color: #1D3FFF; margin-top: -2px; img { position: absolute; right: 30px; top: 12px; height: 20px; transition: 0s; } .rotate { transform: rotate(180deg); } .header { position: relative; height: 48px; line-height: 48px; background-color: #fff; font-family: PingFangSC-Semibold; font-size: 14px; color: #21254C; font-weight: 700; text-indent: 2em; border-radius: 24px 0 0 0 ; &:before { content: ""; position: absolute; top: 16px; left: 15px; width: 4px; height: 16px; background: #1D3FFF; } } } .plan-content { background-color: #fff; padding: 0px 11px; .plan-list { position:relative; background-color: #f7f7f7; height: 78px; display: flex; padding-right: 20px; padding-left: 10px; padding-top: 20px; margin-bottom: 10px; .left { height: 30px; position: absolute; left: -8px; top: 24px; } .status { position: absolute; width:18px; right: -3px; top: -5px; } .period { position: absolute; top: 0; left: 0; background: rgba(75,74,75,.5); border-radius: 4px 0 4px 0; // width: 30px; padding: 1px 2px; height: 20px; color: #fff; font-family: PingFangSC-Semibold; font-size: 12px; letter-spacing: 1.09px; line-height: 20px; text-align: center; } .orange { background: rgba(253, 182, 47,.5); } .blue { background-color: rgba(29, 63, 255,.5); } .green { background-color: rgba(27, 162, 97,.5); } .time { // flex: 5; p { font-family: DIN-Regular; font-size: 12px; color: rgba(56,63,69,0.60); margin-bottom: 4px; margin-top: 8px; } span { font-family: DIN-Bold; font-weight: 700; font-size: 14px; color: #21254C; } } .name { // flex: 9; font-family: PingFangSC-Regular; font-size: 13px; color: #4B4A4B; //padding-top: 20px; margin-left: 22px; span:nth-of-type(2) { margin-left: 8px; } span:nth-of-type(1) { opacity: 0.6; } } .number { // flex: 9; display: flex; flex-direction: column; font-family: PingFangSC-Regular; font-size: 13px; color: #4B4A4B; margin-left: 20px; div:nth-of-type(2) { margin-top: 12px; } span:nth-of-type(2) { margin-left: 8px; } span.orang { color: rgb(253, 182, 47); font-weight: 700; font-family: PingFangSC-Semibold; } span.blu { color: #1D3FFF; font-weight: 700; font-family: PingFangSC-Semibold; } span.gree { color: #1BA261; } } } .or { background-color:rgba(253, 182, 47,.05); } .bl,.gr { background: #FFFFFF; box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69); } } } </style>