You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
378 lines
12 KiB
378 lines
12 KiB
3 years ago
|
<template>
|
||
|
|
<!-- 还款记录页面 -->
|
||
|
|
<view>
|
||
|
|
<!-- 统计信息框 -->
|
||
|
|
<view class="border-b">
|
||
|
|
<uni-forms class="">
|
||
|
|
<uni-forms-item labelWidth="95" label="还款期数">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.repaymentSum" placeholder="已还款期数"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item labelWidth="95" label="逾期期数">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.overdueSum" placeholder="逾期期数"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item labelWidth="95" label="逾期利息(元)">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.overdueInterest" placeholder="逾期利息(元)"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item labelWidth="95" label="逾期额度(元)">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.currentSum" placeholder="逾期额度(元)"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item labelWidth="95" label="还款额度(元)">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.alreadyPaymentSum" placeholder="还款额度(元)"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item labelWidth="95" label="剩余额度(元)">
|
||
|
|
<uni-easyinput disabled type="text" :inputBorder="true" v-model="statisticsData.remainSum" placeholder="剩余额度(元)"></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-forms>
|
||
|
|
</view>
|
||
|
|
<view id="tabInList">
|
||
|
|
<me-tabs v-model="tabIndex" :tabs="tabs" @change="searchTabChange"></me-tabs>
|
||
|
|
</view>
|
||
|
|
<view class="pick-border cu-bar bg-white search" :class="scrolltop ? 'fixed' : ''" :style="[{top:CustomBar + 'px'}]">
|
||
|
|
|
||
|
|
<picker style="width: 100%;" mode="date" :value="listParams" @change="relatedtimeChange">
|
||
|
|
<view class="picker-view flex-between">
|
||
|
|
<text class="wd100">{{listParams ? listParams : '请选择应还款日'}}</text>
|
||
|
|
<!-- <text class="cuIcon-unfold lg text-gray"></text> -->
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
<!-- 列表 -->
|
||
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @topclick="topClick">
|
||
|
|
<view class="cu-list menu-avatar">
|
||
|
|
<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in listData" :key="index"
|
||
|
|
@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
|
||
|
|
<view class="good-list">
|
||
|
|
<view class="charge" :id="'index-' + item.name" :data-index="item.name">
|
||
|
|
<navigator @tap="handle(item,'watch')" hover-class='none' :url="watchShow?'/workBenchPages/pages/repaymentRecord/repaymentRecord?item='+JSON.stringify(item):''"
|
||
|
|
class="nav-li" navigateTo :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
|
||
|
|
<view class="charge-title flex-between">
|
||
|
|
<text>{{item.name}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="charge-text">
|
||
|
|
<view>
|
||
|
|
<text>应还款日：</text>
|
||
|
|
<text class="mgl30">{{item.repaymentDate}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>实际还款日：</text>
|
||
|
|
<text class="mgl30">{{item.actualRepaymentDate}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>担保额度(元)：</text>
|
||
|
|
<text class="mgl30">{{item.guaranteeAmount||''}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>本次还款(元)：</text>
|
||
|
|
<text class="mgl30">{{item.currentRepayment}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>本次利息(元)：</text>
|
||
|
|
<text class="mgl30">{{item.interest}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>其他费用(元)：</text>
|
||
|
|
<text class="mgl30">{{item.otherExpenses}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>还款总额(元)：</text>
|
||
|
|
<text class="mgl30">{{item.totalRepayment}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>减免金额(元)：</text>
|
||
|
|
<text class="mgl30">{{item.deductionAmount}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>逾期天数：</text>
|
||
|
|
<text class="mgl30">{{item.overdueDays}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>状态：</text>
|
||
|
|
<text class="mgl30">{{item.repaymentVal}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>提交人：</text>
|
||
|
|
<text class="mgl30">{{item.submitterName}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>提交时间：</text>
|
||
|
|
<text class="mgl30">{{item.createTime}}</text>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<text>还款备注：</text>
|
||
|
|
<text class="mgl30">{{item.repaymentNotes}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</mescroll-body>
|
||
|
|
<mx-date-picker :show="showPicker" :type="type"
|
||
|
|
:value="value" :show-tips="true"
|
||
|
|
:show-seconds="true" @confirm="onSelected" @cancel="onSelected" @reset="onReset"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
|
|
export default {
|
||
|
|
mixins: [MescrollMixin], // 使用mixin
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabs:[
|
||
|
|
{name:'全部', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'待还款', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已还款', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'已逾期', num:1, y:0, curPageLen:0, hasNext:true},
|
||
|
|
{name:'未到期', num:1, y:0, curPageLen:0, hasNext:true}
|
||
|
|
],
|
||
|
|
tabIndex: 0, // 当前菜单下标
|
||
|
|
preIndex: 0, // 前一个菜单下标
|
||
|
|
navTop: null, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
|
||
|
|
isShowSticky: false, // 是否悬浮
|
||
|
|
TabCur: 0,
|
||
|
|
scrollLeft: 0,
|
||
|
|
CustomBar: this.CustomBar,
|
||
|
|
listCurID: '',
|
||
|
|
listData: [],
|
||
|
|
status:'',// 状态
|
||
|
|
total: 1,
|
||
|
|
scrolltop: false,
|
||
|
|
listTouchStart: 0,
|
||
|
|
listTouchDirection: null,
|
||
|
|
modalName: null,
|
||
|
|
getItem:{},// 获取传递的数据
|
||
|
|
statisticsData:{},// 统计信息
|
||
|
|
TypeList: [
|
||
|
|
{
|
||
|
|
label: '待还款',
|
||
|
|
id: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '已还款',
|
||
|
|
id: 2
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '已逾期',
|
||
|
|
id: 3
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '未到期',
|
||
|
|
id: 4
|
||
|
|
},
|
||
|
|
],
|
||
|
|
watchShow:false,
|
||
|
|
selectTime:'',
|
||
|
|
listParams:'',// 绑定时间展示
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.upCallback({
|
||
|
|
size:10,num:1
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onLoad(opention) {
|
||
|
|
// 读取携带的item
|
||
|
|
this.getItem = JSON.parse(opention.item)
|
||
|
|
this.statistics()// 统计信息
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 根据参数，处理接口
|
||
|
|
let arr = uni.getStorageSync('routerArr')
|
||
|
|
if(arr.join().includes('保后查看')){
|
||
|
|
this.watchShow = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
relatedtimeChange(e) {
|
||
|
|
this.listParams = e.detail.value
|
||
|
|
let that = this
|
||
|
|
if (this.timer) {
|
||
|
|
clearTimeout(this.timer);
|
||
|
|
this.timer = null;
|
||
|
|
}
|
||
|
|
this.timer = setTimeout(function () {
|
||
|
|
that.upCallback({num:1,size:10,search:e.detail.value})
|
||
|
|
},800)
|
||
|
|
},
|
||
|
|
// 统计信息
|
||
|
|
statistics(){
|
||
|
|
this.$http.get('/api-guarantee/al-repayment-entry/repaymentStatistics',{
|
||
|
|
insuranceId:this.getItem.id,
|
||
|
|
guaranteeAmount:this.getItem.guaranteeAmount,
|
||
|
|
}).then(res=>{
|
||
|
|
this.statisticsData = res.data
|
||
|
|
})
|
||
|
|
},
|
||
|
|
searchTabChange(e){
|
||
|
|
if(e==0)this.status = ''
|
||
|
|
else{this.status = e}
|
||
|
|
this.upCallback({
|
||
|
|
num:1,size:10
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/*下拉刷新的回调 */
|
||
|
|
downCallback() {
|
||
|
|
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
|
||
|
|
// loadSwiper();
|
||
|
|
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
||
|
|
this.mescroll.resetUpScroll()
|
||
|
|
},
|
||
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
||
|
|
upCallback(page) {
|
||
|
|
this.$http.get('/api-guarantee/al-repayment-entry/repaymentList',{
|
||
|
|
page: page.num?page.num:1,
|
||
|
|
size: page.size?page.size:10,
|
||
|
|
status:this.status?this.status:'',
|
||
|
|
insuranceId:this.getItem.id,// 上个列表带来的
|
||
|
|
CustomerNumberOrName:page.search?page.search:''
|
||
|
|
}).then(res => {
|
||
|
|
if(page.num == 1) this.listData = []; //如果是第一页需手动制空列表
|
||
|
|
res.data.list.map(e =>{
|
||
|
|
e.repaymentVal = this.TypeList[e.repaymentStatus-1].label
|
||
|
|
})
|
||
|
|
this.listData = this.listData.concat(res.data.list); //追加新数据
|
||
|
|
this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
|
||
|
|
}).catch(()=>{
|
||
|
|
//联网失败, 结束加载
|
||
|
|
this.mescroll.endErr();
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 搜索框--结合防抖
|
||
|
|
searchList(e){
|
||
|
|
let that = this
|
||
|
|
if (this.timer) {
|
||
|
|
clearTimeout(this.timer);
|
||
|
|
this.timer = null;
|
||
|
|
}
|
||
|
|
this.timer = setTimeout(function () {
|
||
|
|
that.upCallback({num:1,size:10,search:e.detail.value})
|
||
|
|
},800)
|
||
|
|
},
|
||
|
|
// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
|
||
|
|
setNavTop(){
|
||
|
|
let view = uni.createSelectorQuery().select('#tabInList');
|
||
|
|
view.boundingClientRect(data => {
|
||
|
|
this.navTop = data.top // 到屏幕顶部的距离
|
||
|
|
}).exec();
|
||
|
|
},
|
||
|
|
// mescroll-uni的滚动事件 (需在up配置onScroll:true才生效)
|
||
|
|
// 而mescroll-body最简单只需在onPageScroll处理即可
|
||
|
|
scroll(){
|
||
|
|
// 菜单悬浮的原理: 监听滚动条的位置大于某个值时,控制顶部菜单的显示和隐藏
|
||
|
|
if (this.mescroll.getScrollTop() >= this.navTop) {
|
||
|
|
this.isShowSticky = true // 显示悬浮菜单
|
||
|
|
} else {
|
||
|
|
this.isShowSticky = false // 隐藏悬浮菜单
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// ListTouch触摸开始
|
||
|
|
ListTouchStart(e) {
|
||
|
|
this.listTouchStart = e.touches[0].pageX
|
||
|
|
},
|
||
|
|
|
||
|
|
// ListTouch计算方向
|
||
|
|
ListTouchMove(e) {
|
||
|
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
|
||
|
|
},
|
||
|
|
|
||
|
|
// ListTouch计算滚动
|
||
|
|
ListTouchEnd(e) {
|
||
|
|
if (this.listTouchDirection == 'left') {
|
||
|
|
this.modalName = e.currentTarget.dataset.target
|
||
|
|
} else {
|
||
|
|
this.modalName = null
|
||
|
|
}
|
||
|
|
this.listTouchDirection = null
|
||
|
|
},
|
||
|
|
// 预留，以防后面变卦又要了
|
||
|
|
handle(item,str){
|
||
|
|
// if(str == 'del'){
|
||
|
|
// uni.showModal({
|
||
|
|
// title:'删除',
|
||
|
|
// content:'确定删除该记录？',
|
||
|
|
// success(res) {
|
||
|
|
// if (res.confirm) {
|
||
|
|
// // 调接口
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
// 非删除则传递参数
|
||
|
|
// uni.setStorageSync('loanItem',JSON.stringify(item))
|
||
|
|
// uni.setStorageSync('loanHandle',str)
|
||
|
|
// 查看仅跳转
|
||
|
|
// if(str=='watch') return
|
||
|
|
// // 编辑，新增的跳转
|
||
|
|
// this.goto('/workBenchPages/pages/repaymentRecord/repaymentRecord')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.pick-border{
|
||
|
|
// width: 95%;
|
||
|
|
margin: auto;
|
||
|
|
border: 2rpx solid #00B9FF;
|
||
|
|
-webkit-border-radius: 20rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0 50rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
/deep/ .picker-view{
|
||
|
|
width: 100%;
|
||
|
|
margin-left: 0;
|
||
|
|
text-align: center;
|
||
|
|
border: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/deep/ .cu-bar{
|
||
|
|
min-height: 72rpx;
|
||
|
|
}
|
||
|
|
.cu-bar .search-form{
|
||
|
|
border: 2rpx solid #00B9FF;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 0 50rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
input{
|
||
|
|
height: 72rpx;
|
||
|
|
line-height: 72rpx;
|
||
|
|
padding: 0 40rpx;
|
||
|
|
}
|
||
|
|
.cuIcon-search{
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.add-customer{
|
||
|
|
padding: 0 50rpx;
|
||
|
|
button{
|
||
|
|
background-color: #00B9FF;
|
||
|
|
border-radius: 30rpx;
|
||
|
|
.mar-icon{
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sideBtn{
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
::v-deep .uni-easyinput{
|
||
|
|
width: 90%!important;
|
||
|
|
margin-left: 10%!important;
|
||
|
|
}
|
||
|
|
.border-b{
|
||
|
|
border-bottom:1px solid #e6e6e6;
|
||
|
|
}
|
||
|
|
</style>
|