Skip to content

H
hls-xcmg-vue-app
Commit bba26faa authored by 24776's avatar 24776
Browse files
Options

合同还款

parent fff47c92
Show whitespace changes
Inline Side-by-side
Showing with 791 additions and 3 deletions
src/pages/contractRepayment/contract-repayment.vue 0 → 100644
View file @ bba26faa
<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>
<h-content v-if="data!==null" class="pay-content">
<div v-for="(item,index) in 6" :key="index" class="contract-item">
<div class="header">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>CON201903022001</h2>
<!-- 状态用类名控制 待还款orange,待签约blue,还款中green -->
<p class="orange">待还款</p>
</div>
<div class="center">
<div><span>合同金额</span><p>90,000.00</p></div>
<div><span>已还金额</span><p class="bold">0.00</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetails">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section>
</div>
</div>
</h-content>
<h-content v-if="data===null" class="null">
<div class="display">
<img src="@/assets/contractRepayment/null.png" alt="">
<p>暂时没有还款记录</p>
<div @click="$routeGo()">返回</div>
</div>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'ContractRepayment',
components: {
},
data () {
return {
// data: null, 无记录时
data: 1,
}
},
computed: {},
watch: {},
methods: {
toRepayDetails () {
this.$router.push({
name: 'RepayDetails',
})
},
},
}
</script>
<style lang='less' >
#contract-repayment {
.h-header {
background-color: #00469C;
.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.blue {
color: #1D3FFF;
border: 1px solid #1D3FFF;
}
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;
}
}
}
}
}
.null {
position: relative;
.display {
width:150px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
img {
width:150px;
}
p {
text-align: center;
opacity: 0.7;
font-family: PingFangSC-Semibold;
font-size: 17px;
color: #21254C;
letter-spacing: 0;
font-weight: 700;
margin-top: 10px;
}
div {
width: 140px;
height: 32px;
background: #00469C;
border-radius: 4px;
color: white;
line-height: 32px;
text-align: center;
margin-left: 5px;
margin-top: 20px;
}
}
}
}
</style>
src/pages/contractRepayment/repay-details.vue 0 → 100644
View file @ bba26faa
<template>
<h-view id="repay-details" 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>
<h-content class="repay-content">
<div class="header">合同单据</div>
<list-item :item-height="44" class="invoice">
<item>
<div slot="name">合同号</div>
<div slot="content">CON2019080310020</div>
</item>
<item>
<div slot="name">经销商</div>
<div slot="content">****代理商</div>
</item>
<item>
<div slot="name">承租人</div>
<div slot="content">张三</div>
</item>
<item>
<div slot="name">产品线</div>
<div slot="content">起重机</div>
</item>
<item>
<div slot="name">合同金额</div>
<div slot="content">起重机</div>
</item>
<item>
<div slot="name">商务政策</div>
<div slot="content">零手续费产品</div>
</item>
<item>
<div slot="name">租赁物数量</div>
<div slot="content">3</div>
</item>
</list-item>
<div class="header">设备清单</div>
<list-item :item-height="104" class="equipment-list">
<item v-for="(item,index) in 4" :proportion="[2,1]" :key="index">
<div slot="name" class="parameters">
<div class="list">
<p>参数项</p>
<span class="bold">JC1213</span>
</div>
<div class="list">
<p>发动机号</p>
<span>JC12131111</span>
</div>
<div class="list">
<p>厂商型号</p>
<span>****</span>
</div>
<div class="list">
<p>车牌号</p>
<span>********</span>
</div>
</div>
<div slot="content">
<div class="plan" @click="toRepayPlan">
<img src="@/assets/contractRepayment/plan.png" alt="">
<span>还款计划</span>
</div>
</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RepayDetails',
components: {
},
data () {
return {
}
},
computed: {},
watch: {},
methods: {
toRepayPlan () {
this.$router.push({
name: 'RepayPlan',
})
},
},
}
</script>
<style lang='less' >
#repay-details {
.h-header {
background-color: #00469C;
.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;
}
}
}
.repay-content {
.header {
position: relative;
height: 40px;
line-height: 40px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
font-weight: 700;
text-indent: 1em;
border-bottom: 1px solid #F1F0F5;
&:before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 4px;
height: 16px;
background: #1D3FFF;
}
}
.invoice {
margin-bottom: 0px;
.hls-item{
.contents{
.add-name {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
}
.add-content {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56,63,69,0.60);
}
}
}
}
.equipment-list {
border-top: none;
background-color: transparent;
.hls-item {
border-top: 1px solid #D9DBDF;
border-bottom: 1px solid #D9DBDF;
background-color: #fff;
margin-bottom: 10px;
.contents {
padding-top: 8px;
.add-name{
display: flex;
flex-direction: column;
.parameters {
width: 100%;
margin-left: -40px;
.list {
display: flex;
margin-bottom:0;
p {
font-family: PingFangSC-Regular;
font-size: 13px;
color: rgba(56,63,69,0.60);
letter-spacing: 0.4px;
text-align: right;
flex: 1;
}
span {
flex:1;
margin-left: 15px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #383F45;
letter-spacing: 0.4px;
}
span.bold {
font-family: PingFangSC-Semibold;
font-weight: 700;
}
}
}
}
.add-content {
.plan {
position: relative;
width: 100px;
height: 30px;
background: rgba(29, 63, 255,.2);
border-radius: 4px;
img {
height: 14px;
position: absolute;
top: 8px;
left: 12px;
}
span {
font-family: PingFangSC-Regular;
font-size: 13px;
color: #1D3FFF;
letter-spacing: 0.4px;
position: absolute;
top: 5px;
left: 32px;
}
}
}
}
}
}
}
}
</style>
src/pages/contractRepayment/repay-plan.vue 0 → 100644
View file @ bba26faa
<template>
<h-view id="repay-plan" 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>
<h-content class="plan-content">
<div class="header">还款计划</div>
<div class="plan-list">
<div v-for="(item,index) in 12" :key="index" class="plan-item">
<div class="left">
<p>2019</p>
<span>01-01</span>
</div>
<div :class="{right:true,white:show!=='done'}">
<div :class="{number:true,blue:show==='undone',orange:show==='doing'}">{{ index + 1 }}</div>
<div class="top">
<div><p>现金流项目</p><span :class="{black:show!=='done'}">保证金</span></div>
<div><p>支付方式</p><span>代扣</span></div>
</div>
<div class="center"><p>应还金额</p><p :class="{bold:show==='undone'}">90,000.00</p></div>
<div class="center"><p>已还金额</p><p :class="{yellow:show==='doing'}">90,000.00</p></div>
</div>
</div>
</div>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RepayPlan',
components: {
},
data () {
return {
// 状态 {已还全部 done} {还一部分 doning} {没还 undone}
show: 'doing',
}
},
computed: {},
watch: {},
methods: {
},
}
</script>
<style lang='less' >
#repay-plan {
.h-header {
background-color: #00469C;
.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;
}
}
}
.plan-content {
background-color: #EFEFEF;
.header {
position: relative;
height: 40px;
line-height: 40px;
background-color: #fff;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
font-weight: 700;
text-indent: 1.5em;
border-bottom: 1px solid #F1F0F5;
&:before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 4px;
height: 16px;
background: #1D3FFF;
}
&:after {
position: absolute;
bottom: 0px;
left: 40px;
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color:transparent transparent #EFEFEF transparent;
}
}
.plan-list {
.plan-item {
display: flex;
height: 120px;
margin-top: 8px;
padding-left: 8px;
.left {
position: relative;
flex: 13;
p {
font-family: DIN-Regular;
font-size: 12px;
color: rgba(56,63,69,0.60);
margin-bottom: 5px;
}
span {
font-family: DIN-Bold;
font-size: 14px;
color: #21254C;
font-weight: 700;
}
&:before {
content: '';
position: absolute;
left: 20px;
top: 36px;
height: 82px;
width: 5px;
border-left: 2px dotted #21254C;
opacity: 0.3;
}
}
&:last-child {
.left {
&:before {
content:'';
border-left: 2px dotted transparent;
}
}
}
.right {
padding-left: 28px;
position: relative;
flex:77;
background-color: #f8f8f8;
border-radius: 4px 0 0 4px;
line-height: 40px;
.number {
position: absolute;
left: 0px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: rgba(75, 74, 75, .6);
border-radius: 4px 0 4px 0;
color: white;
}
.blue {
background: #00469C;
}
.orange {
background: #FDB62F;
}
.top {
height: 40px;
border-bottom: 1px solid #F1F0F5;
display: flex;
div {
flex: 3;
display: flex;
padding-right: 15px;
p {
flex: 1;
opacity: 0.6;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
}
span {
flex:1;
opacity: 0.8;
font-family: PingFangSC-Medium;
font-size: 13px;
color: #4B4A4B;
text-align: right;
}
span.black {
opacity: 1;
}
&:first-child {
flex:4;
span {
text-align: left;
text-indent: .5em;
}
}
}
}
.center {
border-bottom: 1px solid #F1F0F5;
display: flex;
padding-right: 15px;
p {
flex: 1;
opacity: 0.6;
font-family: Verdana;
font-size: 13px;
color: #4B4A4B;
&:last-child {
text-align: right;
}
}
p.yellow {
color: #FDB62F;
font-style:italic;
font-family: Verdana-BoldItalic;
font-weight: 700;
opacity: 1;
}
p.bold {
font-family: Verdana-BoldItalic;
font-weight: 700;
opacity: 1;
}
}
}
.white {
background: #fff;
}
}
}
}
}
</style>
src/router/index.js
View file @ bba26faa
......@@ -53,12 +53,12 @@ import FirstPay from '../pages/pay/firstPay/first-pay'
import PayEntry from '@/pages/pay/firstPay/pay-entry'
import ContractRecord from '@/pages/pay/firstPay/contract-record'
// 款项支付
import PaymentFirstPay from '../pages/pay/payment/first-pay'
import PaymentFirstPay from '@/pages/pay/payment/first-pay'
import PaymentPayEntry from '@/pages/pay/payment/pay-entry'
import PaymentContractRecord from '@/pages/pay/payment/contract-record'
// 保证金支付
import MarginFirstPay from '../pages/pay/marginPay/first-pay'
import MarginPayEntry from '../pages/pay/marginPay/pay-entry'
import MarginFirstPay from '@/pages/pay/marginPay/first-pay'
import MarginPayEntry from '@/pages/pay/marginPay/pay-entry'
// 产品查询
import QueryHome from '@/pages/productQuery/query-home'
import ProDetailed from '@/pages/productQuery/product-detailed'
......@@ -67,6 +67,10 @@ import InfoCenter from '@/pages/infoCenter/infoList'
import ProductList from '@/pages/productQuery/product-list'
// 帮助与反馈
import HelpList from '@/pages/help/helpList'
// 合同还款
import ContractRepayment from '@/pages/contractRepayment/contract-repayment'
import RepayDetails from '@/pages/contractRepayment/repay-details'
import RepayPlan from '@/pages/contractRepayment/repay-plan'
Vue.use(Router)
......@@ -182,6 +186,11 @@ export default new Router({
{path: '/product-list', component: ProductList, name: 'ProductList', meta: {keepAlive: true}},
// 帮助与反馈
{path: '/help-list', component: HelpList, name: 'HelpList', meta: {keepAlive: true}},
// 合同还款
{path: '/contract-repayment', component: ContractRepayment, name: 'ContractRepayment', meta: {keepAlive: true}},
{path: '/repay-details', component: RepayDetails, name: 'RepayDetails', meta: {keepAlive: true}},
{path: '/repay-plan', component: RepayPlan, name: 'RepayPlan', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment