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.
288 lines
8.0 KiB
288 lines
8.0 KiB
<template> |
|
<!-- 催收业务 --> |
|
<view> |
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" @scroll="scroll" @topclick="topClick"> |
|
<view class="flex-around mat15 pick-border" @click="onShowDatePicker('range')"> |
|
<view> |
|
<text v-if="startTime == ''" type="primary" @click="onShowDatePicker('range')">选择日期范围</text> |
|
<text v-else @click="onShowDatePicker('range')">{{startTime}} — {{endTime}}</text> |
|
</view> |
|
</view> |
|
<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 hover-class='none' :url="watchShow?'/workBenchPages/pages/collectionRecord/collectionRecord?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.code }}</text> |
|
</view> |
|
<view> |
|
<text>客户名称：</text> |
|
<text class="mgl30">{{item.name}}</text> |
|
</view> |
|
<view> |
|
<text>逾期本金(元)：</text> |
|
<text class="mgl30">{{item.overdueAmount }}</text> |
|
</view> |
|
<view> |
|
<text>逾期利息(元)：</text> |
|
<text class="mgl30">{{item.overdueInterest }}</text> |
|
</view> |
|
<view> |
|
<text>逾期费用(元)：</text> |
|
<text class="mgl30">{{item.otherExpenses }}</text> |
|
</view> |
|
<view> |
|
<text>逾期次数：</text> |
|
<text class="mgl30">{{item.overduePeriods }}</text> |
|
</view> |
|
<view> |
|
<text>催收日期：</text> |
|
<text class="mgl30">{{item.collectionTime }}</text> |
|
</view> |
|
<view> |
|
<text>催收人：</text> |
|
<text class="mgl30">{{item.collectionUserName }}</text> |
|
</view> |
|
<view> |
|
<text>催收方式：</text> |
|
<text class="mgl30">{{means[item.collectionMethod]}}</text> |
|
</view> |
|
<view> |
|
<text>催收反馈：</text> |
|
<text class="mgl30">{{item.collectionFeedback }}</text> |
|
</view> |
|
</view> |
|
</navigator> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</mescroll-body> |
|
<mx-date-picker :show="showPicker" :type="type" |
|
:value="value" :show-tips="true" :begin-text="'开始'" :end-text="'结束'" |
|
:show-seconds="true" @confirm="onSelected" @cancel="onSelected" @reset="onReset"/> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; |
|
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"; |
|
export default{ |
|
mixins: [MescrollMixin], // 使用mixin |
|
components: { |
|
MxDatePicker |
|
}, |
|
data() { |
|
return { |
|
searchTab:0, |
|
stagridCol: 2, |
|
gridBorder: false, |
|
range: [], |
|
type: 'rangetime', |
|
value: '', |
|
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, |
|
statusType:[ |
|
'还款中','已逾期','已还清','已结项' |
|
], |
|
means:['电话催收','上门/外访'], |
|
startTime:'', |
|
endTime:'', |
|
getItem:{}, |
|
showPicker:false, |
|
watchShow:false |
|
|
|
}; |
|
}, |
|
created() { |
|
let arr = uni.getStorageSync('routerArr') |
|
if(arr.join().includes('催收查看')){ |
|
this.watchShow = true |
|
} |
|
}, |
|
onLoad(option) { |
|
this.getItem = JSON.parse(option.item) |
|
}, |
|
onShow() { |
|
this.upCallback({ |
|
num:1,size:10 |
|
}) |
|
}, |
|
methods:{ |
|
onShowDatePicker(type){//显示 |
|
this.type = type; |
|
this.showPicker = true; |
|
this.value = this[type]; |
|
}, |
|
onSelected(e) {//选择 |
|
this.showPicker = false; |
|
if(e) { |
|
this[this.type] = e.value; |
|
//选择的值 |
|
this.startTime = this.range[0].replace(/\//g, "-") |
|
this.endTime = this.range[1].replace(/\//g, "-") |
|
this.upCallback({ |
|
num:1,size:10 |
|
}) |
|
} |
|
}, |
|
onReset(){ |
|
this.showPicker = false; |
|
this.range = [] |
|
this.startTime = '' |
|
this.endTime = '' |
|
this.upCallback({ |
|
num:1,size:10 |
|
}) |
|
}, |
|
searchDaysChange(e){ |
|
this.createFixedTimeVal = e.detail.value |
|
this.createFixedTime = this.searchDays[e.detail.value].value |
|
this.upCallback({ |
|
num:1,size:10 |
|
}) |
|
}, |
|
|
|
relatedtimeChange(e) { |
|
this.startTime = e.detail.value |
|
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.post('/api-guarantee/al-collection/collection/list',{ |
|
page: page.num?page.num:1, |
|
size: page.size?page.size:10, |
|
startTime:this.startTime, |
|
endTime:this.endTime, |
|
insuranceId:this.getItem.id |
|
}).then(res => { |
|
if(page.num == 1) this.listData = []; //如果是第一页需手动制空列表 |
|
res.data.list.map(e =>{ |
|
e.statusVal = this.statusType[e.status] |
|
}) |
|
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) |
|
}, |
|
// 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 |
|
}, |
|
// 抄送请去PC |
|
// 还款记录 |
|
// repayment(item){ |
|
// // 携带参数跳转页面 |
|
// let data = JSON.stringify(item) |
|
// uni.navigateTo({ |
|
// url: '/workBenchPages/pages/afterLoanSee/afterLoanSee?item='+data |
|
// }) |
|
// } |
|
} |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.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; |
|
} |
|
|
|
.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; |
|
} |
|
</style>
|
|
|