Skip to content

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

合同查询

parent 0e40f4e2
Show whitespace changes
Inline Side-by-side
Showing with 994 additions and 0 deletions
src/pages/contractInquire/contract-records.vue 0 → 100644
View file @ 675714cf
<template>
<h-view id="contract-records" 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 v-if="data!==null" class="tab">
<p><span :class="{'selected':selected === 'all'}" @click="isSelected('all')">全部</span></p>
<p><span :class="{'selected':selected === 'one'}" @click="isSelected('one')">待签约</span></p>
<p><span :class="{'selected':selected === 'two'}" @click="isSelected('two')">待还款</span></p>
<p><span :class="{'selected':selected === 'three'}" @click="isSelected('three')">还款中</span></p>
<p><span :class="{'selected':selected === 'four'}" @click="isSelected('four')">已结清</span></p>
</div>
<div class="search">
<img src="@/assets/contractInquire/search.png" alt="">
<input type="text" placeholder="请输入合同号/承租人名称">
</div>
<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,已结清black -->
<p class="green">待还款</p>
</div>
<div class="center">
<div><span>承租人</span><p>张三</p></div>
<div><span>年利率</span><p>5%</p></div>
<div><span>期限</span><p>12期</p></div>
<div><span>融资金额</span><p class="bold">90,000.00</p></div>
<span class="red">逾期一周</span>
<section @click="toRepayDetail">
<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: 'ContractRecords',
components: {
},
data () {
return {
// data: null, 无记录时
data: 1,
selected: 'all',
}
},
computed: {},
watch: {},
methods: {
toRepayDetail () {
this.$router.push({
name: 'RepayDetail',
})
},
isSelected (name) {
this.selected = name
},
},
}
</script>
<style lang='less' >
#contract-records {
.h-header {
background-color: #1D3FFF;
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 5px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
}
.tab {
display: flex;
background-color: #fff;
padding: 6px 8px 4px 6px;
p {
text-align: center;
flex: auto;
span {
display: block;
padding: 6px 0;
background-color: #fff;
font-family: PingFangSC-Regular;
font-size: 15px;
color: #656464;
}
span.selected {
background: rgba(29,63,255,.2);
border-radius: 20px;
color: #1D3FFF;
font-family: PingFangSC-Semibold;
font-weight: 700;
}
}
}
.search {
background-color: #fff;
padding: 8px 12px;
position: relative;
input {
background: rgba(239,239,239,0.55);
padding-left: 12px;
border-radius: 4px;
height: 36px;
width: 351px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888C8F;
}
input::placeholder {
font-size: 14px;
color: #888C8F;
}
img {
position: absolute;
height: 16px;
right: 25px;
top: 20px;
}
}
.pay-content {
padding: 0 8px;
.contract-item {
height: 208px;
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;
}
p.black {
color: #4B4A4B;
border: 1px solid #4B4A4B;
}
}
.center {
padding-left: 50px;
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: -15px;
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: #1D3FFF;
border-radius: 4px;
color: white;
line-height: 32px;
text-align: center;
margin-left: 5px;
margin-top: 20px;
}
}
}
}
</style>
src/pages/contractInquire/repay-detail.vue 0 → 100644
View file @ 675714cf
<template>
<h-view id="repay-detail" 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 class="download">电子版下载 <img src="@/assets/contractInquire/download.png" alt=""></div>
</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">90,000.00</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="toRepayPlans">
<img src="@/assets/contractRepayment/plan.png" alt="">
<span>还款计划</span>
</div>
</div>
</item>
</list-item>
</h-content>
</h-view>
</template>
<script>
export default {
name: 'RepayDetail',
components: {
},
data () {
return {
detailInfo: {},
}
},
computed: {},
watch: {},
methods: {
toRepayPlans () {
this.$router.push({
name: 'RepayPlans',
})
},
},
}
</script>
<style lang='less' >
#repay-detail {
.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;
}
}
}
.repay-content {
.header {
position: relative;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #1D3FFF;
text-indent: 1em;
border-bottom: 1px solid #F1F0F5;
.download {
position: absolute;
padding-left: 12px;
right: 12px;
top: 8px;
background: #FFFFFF;
border-radius: 5px;
height: 24px;
line-height: 24px;
width: 93px;
font-family: PingFangSC-Regular;
font-size: 11px;
color: #1D3FFF;
letter-spacing: 0.34px;
img {
position: absolute;
height: 15px;
left: 6px;
top: 6px;
}
}
&: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/contractInquire/repay-plans.vue 0 → 100644
View file @ 675714cf
<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>
<div class="center">
<div class="total">
<div class="sum">
<div>融资额</div>
<p>190,000.00</p>
<img src="@/assets/contractInquire/num.png" alt="">
<h3><span>12</span>期</h3>
</div>
<div class="single">
<div><h4>保证金</h4><p>￥ 5,000.00</p></div>
<div><h4>保证金</h4><p>￥ 5,000.00</p></div>
<div><h4>保证金</h4><p>￥ 5,000.00</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 5" :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>2019</p>
<span>01-01</span>
</div>
<div class="name">
<p>现金流项目</p>
<p>应还金额</p>
</div>
<div class="number">
<p>租金</p>
<span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">90,000.00</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',
show: false,
height: 0,
oldHeight: 0,
newHeight: 0,
}
},
computed: {},
watch: {},
methods: {
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)'
}
},
},
}
</script>
<style lang='less' >
#repay-plan {
.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: 16px;
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;
height: 15px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 12px;
letter-spacing: 1.09px;
line-height: 15px;
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: 5px;
}
span {
font-family: DIN-Bold;
font-weight: 700;
font-size: 14px;
color: #21254C;
}
}
.name {
flex: 9;
opacity: 0.6;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
}
.number {
flex: 9;
text-align: right;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
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>
src/router/index.js
View file @ 675714cf
......@@ -83,6 +83,11 @@ import RepayPlan from '@/pages/contractRepayment/repay-plan'
import StartList from '@/pages/contractStart/startList'
import AddCar from '@/pages/contractStart/addCar'
// 合同查询
import ContractRecords from '@/pages/contractInquire/contract-records'
import RepayDetail from '@/pages/contractInquire/repay-detail'
import RepayPlans from '@/pages/contractInquire/repay-plans'
Vue.use(Router)
export default new Router({
......@@ -209,6 +214,10 @@ export default new Router({
// 发车申请
{path: '/start-List', component: StartList, name: 'StartList', meta: {keepAlive: true}},
{path: '/add-car', component: AddCar, name: 'AddCar', meta: {keepAlive: true}},
// 合同查询
{path: '/contract-records', component: ContractRecords, name: 'ContractRecords', meta: {keepAlive: true}},
{path: '/repay-detail', component: RepayDetail, name: 'RepayDetail', meta: {keepAlive: true}},
{path: '/repay-plans', component: RepayPlans, name: 'RepayPlans', meta: {keepAlive: true}},
],
scrollBehavior (to, from, savedPosition) {
......
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