<template> <h-view id="payment-contract-record" 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 style="margin-top:-1px;"> <div class="top-head"> <div class="center"> <div class="now-pay"> <div class="title">当前应付</div> <div class="data"> <span>¥</span> {{ sumMoney |currency }} </div> </div> </div> </div> <div class="search"> <input v-model="keyWords" type="text" placeholder="请输入合同号/承租人名称" > <img src="@/assets/payment/search.png" alt > </div> <section class="pay-content"> <section v-for="(item,index) in showList" :key="index" class="contract-item"> <div class="header"> <img src="@/assets/payment/file.png" alt > <p> {{ item.project_number }}</p> <span>还款中</span> </div> <div class="my-content"> <div v-for="(detail,index) in item.con_lists" :key="index" class="item"> <div class="list"> <div> <span>承租人</span> <span class="bp-name">{{ item.bp_name }}</span> </div> <div> <span>车辆型号</span> <span>{{ detail.vehicle_model }}</span> </div> </div> <div class="list"> <div> <span>设备识别号</span> <span>{{ detail.product_code }}</span> </div> <div> <span>应还金额</span> <span class="orange">¥{{ detail.due_amount|currency }}</span> </div> </div> <div class="list"> <div> <span>发动机号</span> <span>{{ detail.engine }}</span> </div> <div> <span>已还金额</span> <span class="blue">¥{{ detail.received_amount|currency }}</span> </div> </div> <div class="list"> <div> <span>合格证编号</span> <span>{{ detail.certificate_number }}</span> </div> <div> <span>本次还款</span> <section> <CurrencyInput v-model="detail.amount" placeholder="请输入还款金额" /> </section> </div> </div> </div> <list-item :item-height="44"> <item> <div slot="name">逾期利息</div> <span slot="content">¥{{ money|currency }}</span> </item> </list-item> </div> </section> </section> <div class="prompt has-footer"> <div> <img src="@/assets/payment/prompt.png" alt > </div> <div> <p>温馨提示</p> <p>推荐使用农行卡,农行卡支付免收手续费!</p> <p>由于存在款项到账时差性,“已还金额”字段可能XXX,给您造成的不便,请谅解,谢谢!</p> </div> </div> <bottom-tab> <tab-button class="footer" @click.native="checkPay()">提交订单</tab-button> </bottom-tab> </div> </h-view> </template> <script> import CurrencyInput from '../../../components/currencyInput' export default { name: 'PaymentContractRecord', components: { CurrencyInput, }, beforeRouteEnter (to, from, next) { next(vm => { vm.pagenum = 1 vm.searchPagenum = 1 vm.getRentInfo() vm.money = vm.$route.params.money vm.sumMoney = vm.money vm.keyWords = '' vm.info = [] vm.showList = [] vm.searchList = [] }) }, data () { return { sumMoney: '', money: '', reFund1: '', reFund2: '', keyWords: '', pagenum: 1, searchPagenum: 1, info: [], showList: [], searchList: [], } }, computed: {}, watch: { info: { handler (newName, oldName) { let vm = this let sumL = [] vm.sumMoney = vm.money for (let i of this.info) { i.con_lists.forEach(j => { sumL.push(j.amount) }) let a = 0 let newSum = sumL.filter(item => { return item !== '' }) let notNaN = newSum.filter(item => { return !isNaN(item) }) if (notNaN.length !== 0) { notNaN.forEach(i => { if (!isNaN(parseFloat(i))) { a = a + parseFloat(i) if (vm.money !== '') { vm.sumMoney = parseFloat(a + parseFloat(vm.money)) } else { vm.sumMoney = a } } }) } else { if (vm.money !== '') { vm.sumMoney = vm.money } else { vm.sumMoney = 0 } } } }, deep: true, }, keyWords (newVal, oldVal) { this.getRentInfo() }, 'sumMoney': { handler (newVal, oulVal) { if (newVal === null || isNaN(newVal) || newVal === '') { this.sumMoney = 0 } }, }, }, methods: { checkPay () { let money = parseFloat(this.sumMoney) // let theDefault = parseFloat(this.defaultMoney) if (money > 0) { this.payDetail() } else if (money === 0) { hlsPopup.showLongCenter('当前支付金额为0元,无需支付!') } // else if (money > theDefault) { // hlsPopup.showLongCenter('当前支付金额超出应还金额!') // } }, getRentInfo () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'payment_con_list_query' + '&index' + `'${randomString}'` let param = { bp_id: window.localStorage.getItem('bp_id'), searchInput: vm.keyWords, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.info = res.prj_lists /* vm.info.forEach(i => { i.con_lists.forEach(j => { // let num = (parseFloat(j.due_amount) - parseFloat(j.received_amount)) let num = '' vm.$set(j, 'amount', num) }) })*/ vm.showList = vm.info } else { hlsPopup.showLongCenter(res.message) } }) }, createData () { let pushList = [] this.info.forEach(i => { i.con_lists.forEach(j => { if (!j.amount || j.amount === 0) { }else{ let obj = {} obj.bp_id = window.localStorage.getItem('bp_id') obj.amount = j.amount obj.contract_id = j.contract_id pushList.push(obj) } }) }) return pushList }, payDetail () { let vm = this let url = process.env.basePath + 'create_detail_1_part' let payLists = vm.createData() let param = { order_id: window.localStorage.getItem('order_id'), pay_lists: payLists, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.toPayEntry(res.order_id) } else { hlsPopup.showLongCenter(res.message) } }) }, toPayEntry (e) { this.$router.push({ name: 'PaymentPayEntry', params: { sumMoney: this.sumMoney, money: this.money, order_id: e, }, }) }, }, } </script> <style lang='less' > #payment-contract-record { .list{ span{ overflow: hidden; text-overflow: ellipsis; } } .none { display: flex; justify-content: center; align-items: center; } .top-head { position: relative; width: 100%; height: 92px; background: url("../../../assets/payment/back1.png"); background-size: 100% 142px; } .now-pay { width: 100%; display: flex; justify-content: center; align-items: center; flex-flow: column wrap; } .title { font-family: PingFangSC-Regular; font-size: 14px; color: #ffffff; margin-top: 1.8%; } .data { font-family: Verdana-Bold; font-size: 24px; color: #ffffff; letter-spacing: 0; line-height: 18px; margin-top: 16px; } .search { width: 351px; margin: 0 auto; height: 44px; position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-around; background: #fff; border-radius: 0.08rem; top: -23px; img { //position: absolute; width: 16px; height: 16px; // bottom: 28px; // right: 31px; // top: 83px; // z-index: 999; } input { //position: absolute; //top: 69px; // width: 351px; width: 84%; height: 94%; // height: 44px; // border-radius: 4px; padding-left: 12px; // box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14); } input::placeholder { opacity: 0.4; font-family: PingFangSC-Regular; font-size: 14px; color: #b4b4b5; } } .pay-content { width: 95%; position: absolute; bottom: 150px; left:0; right:0; margin:auto; height: 53%; overflow: scroll; .contract-item { background-color: #fff; box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14); border-radius: 2px; width: 359px; margin: 0 auto; .header { height: 34px; background: #fff; display: flex; align-items: center; line-height: 37px; padding: 0 16px; img { height: 30px; } p { flex: 2; font-family: PingFangSC-Semibold; font-size: 15px; color: #383f45; letter-spacing: 0; font-weight: 700; } span { display: inline-block; width: 57px; height: 21px; text-align: center; line-height: 21px; border: 1px solid #1d3fff; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 14px; color: #3957ff; letter-spacing: 0; } } .my-content { margin-bottom: 8px; .item { padding: 4px 0; background-color: #fff; margin-bottom: 4px; .list { margin-bottom: 0; display: flex; .bp-name { width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } div { flex: 1; display: flex; height: 28px; line-height: 29px; margin-left: -0px; section { flex: 1; } input { text-align: left; width: 96px; height: 28px; border-bottom: 1px solid #00469c; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 12px; } input::placeholder { color: #b4b4b5; } &:first-child { flex: 2; } &:last-child { flex: 3; margin-left: -40px; } span:last-child { flex: 1; font-family: PingFangSC-Regular; font-size: 13px; color: #383f45; } span.orange { font-family: DIN-Bold; font-size: 13px; color: #1d3fff; font-weight: 700; } span.blue { font-family: DIN-Bold; font-size: 13px; font-weight: 700; color: #383f45; } span:first-child { flex: 1; text-align: right; margin-right: 10px; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.6); } } } } } } } // .rate{ // position: absolute; // width: 100%; // bottom: 134px; // box-shadow: -2px -2px 10px #ccc; // } .prompt { position: absolute; width: 100%; bottom: 40px; background: rgba(142, 195, 30, 0.1); height: 111px; display: flex; div:first-child { flex: 1; padding: 16px 0 0 16px; img { width: 16px; height: 16px; } } div:last-child { flex: 12; p:first-child { padding-top: 16px; font-family: PingFangSC-Semibold; font-size: 14px; color: #8ec31e; letter-spacing: 0.5px; margin-bottom: 7px; } p:nth-child(n + 2) { text-indent: 2em; padding-right: 16px; line-height: 20px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(101, 100, 100, 0.8); letter-spacing: 0.37px; margin-left: -22px; } } } .footer { background: @headerColor; color: white; } .hls-list-item{ } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #payment-contract-record { .pay-content { height: 63%; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #payment-contract-record { .pay-content { height: 63%; } } } } </style>