Skip to content

H
hls-xcmg-vue-app
Commit ab07fbba authored by 胡's avatar 胡
Browse files
Options

feat: 逾期信息查询页面绘制

parent 95d91673
Hide whitespace changes
Inline Side-by-side
Showing with 1002 additions and 0 deletions
src/pages/functionCenter/function-list.vue
View file @ ab07fbba
......@@ -142,6 +142,15 @@
<img src="@/assets/functionCenter/in@2x.png" alt="">
</div>
</div>
<div class="info-content">
<div class="add-name">
<img src="@/assets/functionCenter/con-que@2x.png" alt="">
<div class="name-title">逾期信息查询</div>
</div>
<div class="add-content" @click="goOvertimeList">
<img src="@/assets/functionCenter/in@2x.png" alt="">
</div>
</div>
</div>
</h-content>
......@@ -357,6 +366,19 @@ export default {
hlsPopup.showLongCenter('请先进行用户绑定')
}
},
goOvertimeList(e) {
let vm = this
if (this.bp_id) {
vm.$router.push({
name: 'overTimeQueryList',
params: {
bp_type: e,
},
})
} else {
hlsPopup.showLongCenter('请先进行用户绑定')
}
},
// 进入合同签订
goCarConfirm () {
let vm = this
......
src/pages/overTimeQuery/detail.vue 0 → 100644
View file @ ab07fbba
<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" @click="$routeGo()">
<img src="@/assets/userBind/arrow.png">
<span>逾期信息明细</span>
</div>
</h-header>
<div ref="content" class="repay-content">
<div class="header">合同</div>
<list-item :item-height="44" class="invoice">
<item>
<div slot="name">合同编号</div>
<div slot="content">{{ detailInfo.project_number }}</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">{{ detailInfo.total_price | currency }}</div>
</item>
</list-item>
<div class="header">逾期现金流</div>
</div>
<scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="getEquipment" class="plan-content">
<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-else-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
<img v-else-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
<img v-else-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="number">
<div>
<span>利息</span>
<span>{{ item.interest | currency }}</span>
</div>
<div>
<span>逾期天数</span>
<span>33</span>
</div>
</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
<img v-else-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
</div>
</scroll>
</h-view>
</template>
<script>
export default {
name: 'overTimeQueryDetail',
data() {
return {
detailInfo: {
project_number: '',
agent_bp_name: '',
total_price: '',
},
repayLists: [], // 现金流
statu: 'orange',
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.getDetail()
vm.repayPlan()
})
},
methods: {
getDetail() {
let vm = this
let url = process.env.basePath + 'con_repayment_detial'
let param = { project_id: '268227' }
hlsPopup.showLoading('请稍候')
vm.$post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.detailInfo = res.info
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 还款计划
repayPlan() {
let vm = this
let url = $config.basePath + 'con_equip_cashflow_query'
let param = {
contract_id: '271234'
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
console.log(res)
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.repayLists = res.lists.sort(vm.arrSort('times')) // 根据还款期排序
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 根据还款期排序
arrSort(property) {
return function (a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2
}
},
dateConverse(date) {
return date.replace(/\//g, '-')
},
},
}
</script>
<style lang='less' >
#repay-details {
.status {
margin-bottom: 20px;
display: inline-block;
}
.red {
color: red;
border-bottom: 1px solid red;
}
.blue {
color: blue;
border-bottom: 1px solid blue;
}
.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;
}
}
}
.repay-content {
overflow: hidden;
position: absolute;
z-index: 10;
width: 100%;
.header {
background-color: #fff;
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: @headerColor;
}
}
.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.6);
}
}
}
}
}
.scrollContent {
// padding-bottom: 20px;
.header {
//position: relative;
background-color: #fafafa;
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;
}
}
}
.tab-style {
width: 100%;
position: absolute;
}
}
.platform-ios {
#repay-details {
.scrollContent {
// padding-top: 3.32rem;
}
}
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#repay-details {
.scrollContent {
// padding-top: 3.72rem;
}
}
}
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#repay-details {
.scrollContent {
// padding-top: 3.72rem;
}
}
}
}
.plan-content {
background-color: #fff;
padding: 0px 11px;
.plan-list {
position: relative;
background-color: #fff;
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 {
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>
src/pages/overTimeQuery/list.vue 0 → 100644
View file @ ab07fbba
<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" @click="$routeGo()">
<img src="@/assets/userBind/arrow.png">
<span>逾期信息查询</span>
</div>
</h-header>
<div v-if="data === null" class="null">
<div class="display">
<img src="@/assets/messageCenter/noMsg.png" alt="">
</div>
</div>
<div v-if="data !== null" class="wrap has-header">
<div class="search">
<input v-model="searchInput" type="text" placeholder="请输入合同编号">
</div>
</div>
<!-- 全部合同记录 -->
<scroll v-show="data !== null" ref="scroll" :updateData="[showLists]" :pullUp="true"
@pullingUp="loadMore('全部', pagenum, lists)">
<div class="pay-content">
<div v-for="(item, index) in showLists" :key="index" class="contract-item">
<div class="header" @click="toRepayDetail(item)">
<img src="@/assets/contractRepayment/contract.png" alt="">
<h2>{{ item.project_number }}</h2>
<p><img src="@/assets/constractSigning/righticon.png" alt="arrow" style="height: 20px; width: 20px;"></p>
<!-- 看情况去留 -->
<!-- <p v-if="item.contract_status_n === '待首付'" class="green">待首付</p>
<p v-if="item.contract_status_n === '首付还款中'" class="orange">首付还款中</p>
<p v-if="item.contract_status_n === '还款中'" class="blue">还款中</p>
<p v-if="item.contract_status_n === '已结清'" class="black">已结清</p>
<p v-if="item.contract_status_n === '撤销'" class="undo">{{ item.xcmg_contract_status_n }}</p>
<p v-if="item.contract_status_n === '其他'" class="other">{{ item.xcmg_contract_status_n }}</p> -->
</div>
<div class="center">
<div><span>合同履约情况</span>
<p>{{ item.bp_name }}</p>
</div>
<div><span>逾期租金（元）</span>
<p>{{ item.int_rate_n }}</p>
</div>
<div><span>逾期利息（元）</span>
<p>{{ item.lease_times }}期</p>
</div>
<div><span>逾期天数（元）</span>
<p class="bold">{{ parseFloat(item.finance_amount).toFixed(2) | currency }}</p>
</div>
<!-- 看情况去留 -->
<!-- <span v-if="item.con_overdue_status === '已逾期'" class="red">{{ item.con_overdue_status }}</span>
<section @click="toRepayDetail(item.project_id)">
<img src="@/assets/contractRepayment/view.png" alt="">
<span>查看合同明细</span>
</section> -->
</div>
</div>
</div>
</scroll>
</h-view>
</template>
<script>
export default {
name: 'overTimeQueryList',
data() {
return {
data: 1,
lists: [], // 全部记录
showLists: [],
pagenum: 1, // 全部列表页码
searchInput: '', // 搜索内容
bp_type: 'MANAGER', // 用户类型， 从缓存 now_user_bp_bind_id 中获取
}
},
watch: {
searchInput() {
let vm = this
if (vm.timeout) {
clearTimeout(vm.timeout)
}
vm.timeout = setTimeout(() => {
vm.searchs()
}, 1000)
},
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.pagenum = 1
vm.searchInput = ''
vm.lists = []
vm.recordQuery(vm.lists)
})
},
methods: {
// 获取列表
recordQuery(arr) {
let vm = this
let url = $config.basePath + 'con_contract_list_saleman'
let param = {
bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
searchInput: vm.searchInput,
pagenum: 1,
pagesize: 10,
contract_status_n: '全部',
}
vm.hlsPopup.showLoading('数据加载中')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
if (res.result === 'S') {
vm.data = !!res.lists.length ? 1 : null;
res.lists.forEach((data, index, array) => {
arr.push(array[index])
})
vm.showLists = arr // 展示请求到的数据
if (res.lists.length >= 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true)
} else if (res.lists.length === 10) {
vm.$refs.scroll.update(false)
}
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
loadMore() {
let vm = this
vm.pagenum++
vm.pageNum = vm.pagenum
let url = $config.basePath + 'con_contract_list_saleman'
let param = {
bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
searchInput: vm.searchInput,
pagenum: vm.pageNum,
pagesize: 10,
contract_status_n: '全部',
}
vm.hlsPopup.showLoading('请稍候')
vm.hlsHttp.post(url, param).then(function (res) {
vm.hlsPopup.hideLoading()
let returnData = []
if (res.result === 'S') {
returnData = res.lists
if (returnData.length === 0) {
vm.$refs.scroll.update(true)
} else if (returnData.length > 0 && returnData.length < 10) {
returnData.forEach((data, index, array) => {
// 加载更多时，将请求到的数据push到对应数组
vm.lists.push(array[index])
})
vm.$refs.scroll.update(true)
} else if (returnData.length === 10) {
returnData.forEach((data, index, array) => {
vm.lists.push(array[index])
})
vm.$refs.scroll.update(true)
}
} else {
hlsPopup.showLongCenter(res.message)
}
})
},
// 搜索
async searchs() {
let vm = this
let url = $config.basePath + 'con_contract_list_saleman'
let param = {
contract_status_n: '全部',
bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
searchInput: vm.searchInput,
pagenum: 1,
pagesize: 10,
}
vm.hlsPopup.showLoading('请稍候')
let res = await vm.$post(url, param)
if (res.result === 'S') {
vm.hlsPopup.hideLoading()
vm.lists = res.lists
// 展示数据更新通过watch监听，默认展示当前页面请求到的数据
vm.showLists = vm.lists
if (res.lists.length >= 0 && res.lists.length < 10) {
vm.$refs.scroll.update(true)
} else if (res.lists.length === 10) {
vm.$refs.scroll.update(false)
}
return true
} else {
hlsPopup.showLongCenter(res.message)
return false
}
},
// 明细
toRepayDetail(val) {
this.$router.push({
name: 'overTimeQueryDetail',
params: {
},
})
},
},
}
</script>
<style lang='less' >
#contract-records {
.null {
height: 100%;
}
.search {
background-color: #fff;
padding: 8px 12px;
position: relative;
input {
background: url("../../assets/contractStart/search1.png") 320px no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
padding-left: 12px;
border-radius: 4px;
height: 36px;
line-height: 36px;
width: 100%;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888C8F;
}
input::placeholder {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888C8F;
letter-spacing: 0;
}
input:focus {
background: url("../../assets/contractStart/search2.png") 320px no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
border: 2px solid #bcc6ff;
}
}
.pay-content {
padding: 8px 8px;
.contract-item {
height: 178px;
background-color: #fff;
margin-bottom: 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: 30px;
top: 6px;
// width: 57px;
padding: 2px 4px;
// height: 21px;
// line-height: 19px;
text-align: center;
border-radius: 2px;
font-family: PingFangSC-Regular;
font-size: 14px;
}
p.orange {
// width: 30%;
border: 1px solid #FDB62F;
color: #FDB62F;
white-space: nowrap;
}
p.blue {
color: #1D3FFF;
border: 1px solid #1D3FFF;
}
p.green {
color: #1BA261;
border: 1px solid #1BA261;
}
p.black {
color: #4B4A4B;
border: 1px solid #4B4A4B;
}
p.undo {
color: #333399;
border: 1px solid #333399;
}
p.other {
color: #33CCCC;
border: 1px solid #33CCCC;
}
}
.center {
padding-left: 50px;
padding-right: 24px;
position: relative;
div {
display: flex;
padding: 8px 0;
span {
flex: 3;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #4B4A4B;
}
p {
flex: 4;
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: absolute;
//top: 10px;
color: #F04747;
font-family: PingFangSC-Regular;
font-size: 14px;
}
span.red::before {
position: absolute;
bottom: -3px;
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;
}
}
}
}
}
.display {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
// margin-top: -70px;
}
}
.wrap {
width: 100%;
position: absolute;
z-index: 100
}
.content {
position: absolute;
top: 0;
}
.scrollContent {
padding-top: 2.60rem;
padding-bottom: 20px;
}
}
.platform-ios {
#contract-records {
.scrollContent {
padding-top: 3rem;
}
}
}
// iPhoneX适配
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
.platform-ios {
#contract-records {
.scrollContent {
padding-top: 3.4rem;
}
}
}
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
.platform-ios {
#contract-records {
.scrollContent {
padding-top: 3.4rem;
}
.search {
input {
background: url("../../assets/contractStart/search1.png") 320px no-repeat;
background-size: 16px 16px;
background-color: rgba(239, 239, 239, 0.55);
padding: 8px 12px;
border-radius: 4px;
width: 100%;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #888c8f;
}
}
}
}
}
</style>
src/router/index.js
View file @ ab07fbba
......@@ -156,6 +156,10 @@ const NewsInfo = resolve => require.ensure([], () => { resolve(require('@/pages/
// 客户准入审批流
const customerAccessDetail = resolve => require.ensure([], () => { resolve(require('@/pages/customerAccessApply/customerAccess-detail')) }, 'customerAccess-detail')
// 逾期查询
const overTimeQueryList = resolve => require.ensure([], () => { resolve(require('@/pages/overTimeQuery/list')) }, 'overTimeQuery')
const overTimeQueryDetail = resolve => require.ensure([], () => { resolve(require('@/pages/overTimeQuery/detail')) }, 'overTimeQuery')
Vue.use(Router)
export default new Router({
......@@ -384,6 +388,19 @@ export default new Router({
name: 'customerAccessDetail',
meta: { keepAlive: false },
},
// 逾期信息查询
{
path: '/over-time-query-list',
component: overTimeQueryList,
name: 'overTimeQueryList',
meta: { keepAlive: false },
},
{
path: '/over-time-query-detail',
component: overTimeQueryDetail,
name: 'overTimeQueryDetail',
meta: { keepAlive: false },
},
],
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