<template> <h-view id="contract-repayment" 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> <scroll v-if="data!==null" ref="scroll" :updateData="[lists]" :pullUp="true" class="pay-content" @pullingUp="getList"> <div v-for="(item,index) in lists" :key="index" class="contract-item"> <div class="header"> <img src="@/assets/contractRepayment/contract.png" alt=""> <h2>{{ item.project_number }}</h2> <!-- 状态用类名控制 待还款orange,待签约blue,还款中green --> <p :class="{'green':item.repayment_status==='首付还款中','blue':item.repayment_status==='待首付','orange':item.repayment_status==='还款中','grey':item.repayment_status==='已结清'}">{{ item.repayment_status }}</p> </div> <div class="center"> <div><span>合同金额</span><p>{{ item.total_price|currency }}</p></div> <div><span>已还金额</span><p class="bold">{{ item.received_amount|currency }}</p></div> <span v-if="item.overdue_status==='已逾期'" class="red">已逾期</span> <section @click="toRepayDetails(item)"> <img src="@/assets/contractRepayment/view.png" alt=""> <span>查看合同明细</span> </section> </div> </div> </scroll> <div v-if="data===null"> <div class="display"> <img src="@/assets/messageCenter/noMsg.png" alt=""> </div> </div> <!-- <h-content v-if="data===null" class="null has-header"> <div class="noData"> <img src="@/assets/messageCenter/noMsg.png" alt=""> </div> </h-content>--> </h-view> </template> <script> export default { name: 'ContractRepayment', components: { }, data () { return { // data: null, 无记录时 pagenum: 1, lists: [], } }, computed: { data () { if (this.lists.length === 0) { return null } else { return 1 } }, }, watch: {}, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'HomePage') { vm.pagenum = 1 vm.lists = [] vm.getList() } }) }, methods: { getList () { let vm = this let url = process.env.basePath + 'con_repayment_list_query' let param = { user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenum, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.lists.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.lists.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, toRepayDetails (e) { this.$router.push({ name: 'RepayDetails', params: { project_id: e.project_id, overdue_status: e.overdue_status, }, }) }, }, } </script> <style lang='less' > #contract-repayment { .display { position: fixed; // top: 0; img { width: 100%; height: 100%; // margin-top: -70px; } } .null{ margin-top:46px; } .noData{ width:100%; height:100%; img{ height:100%; width:100%; } } .h-header { background-color: @headerColor; .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; } } } .pay-content { padding: 0 8px; .contract-item { height: 150px; background-color: #fff; margin-top: 8px; .header { position: relative; height: 44px; img { position: absolute; width: 30px; height: 30px; left: 10px; top: 8px; } h2 { position: absolute; top: 13px; left: 50px; font-family: PingFangSC-Semibold; font-size: 15px; color: #4B4A4B; letter-spacing: 0; margin: 0px; font-weight: 700; } p { position: absolute; right: 20px; top: 13px; width: 57px; height: 21px; line-height: 19px; text-align: center; border-radius: 2px; font-family: PingFangSC-Regular; font-size: 14px; } p.orange { border: 1px solid #FDB62F; color: #FDB62F; } p.grey{ border: 1px solid grey; color: grey; } p.blue { color: @headerColor; border: 1px solid @headerColor; } p.green { color: #1BA261; border: 1px solid #1BA261; } } .center { padding-left: 50px; height: 106px; padding-right: 24px; position: relative; div { display: flex; padding: 8px 0; span { flex:1; font-family: PingFangSC-Regular; font-size: 14px; color: #4B4A4B; } p { flex:2; text-align: right; font-family: Verdana; font-size: 14px; color: #4B4A4B; } p.bold { font-weight: 700; font-family: Verdana-Bold; } } div:first-child { border-top: 1px solid #F3F3F7; } span.red{ margin-top: 10px; position: relative; top: 10px; color: #F04747; font-family: PingFangSC-Regular; font-size: 14px; } span.red::before { position: absolute; bottom: -1px; content: ""; width: 100%; height: 4px; background-color: rgb(255, 169, 169); } section { position: absolute; width: 123px; height: 30px; right: 24px; bottom: 13px; line-height: 30px; background: rgba(33, 37, 76,.1); border-radius: 4px; img { width:16px; position: absolute; top: 8px; left: 8px; } span { position: absolute; left: 32px; font-family: PingFangSC-Regular; font-size: 14px; color: #21254C; } } } } } .content { position: absolute; top: 0; } .scrollContent { padding-top: 0.8rem; padding-bottom: 20px; } } .platform-ios { #contract-repayment { .scrollContent { padding-top: 1.2rem; } .null{ margin-top:1.32em; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #contract-repayment { .scrollContent { padding-top: 1.6rem; } .null{ margin-top:1.72em; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #contract-repayment { .scrollContent { padding-top: 1.6rem; } .null{ margin-top:1.72em; } } } } </style>