|
<template>
|
<div class="overdue">
|
<div class="top" :style="{background:$store.state.defaultBgColor}">
|
<van-nav-bar title="风控订单" left-text="返回" left-arrow @click-left="onClickLeft" style="line-height: 43px;" class="navBar">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size: 25px;"></i>
|
<span slot="right" @click="isShow = true;">筛选</span>
|
</van-nav-bar>
|
<div class="tabBar">
|
<div class="tabBar_item" @click="changeOrderType(1)">
|
<p>投诉订单</p>
|
<p class="line" v-show="orderTypeNum == 1"></p>
|
</div>
|
<div class="tabBar_item" @click="changeOrderType(2)">
|
<p>风险订单</p>
|
<p class="line" v-show="orderTypeNum == 2"></p>
|
</div>
|
</div>
|
</div>
|
<div class="type">
|
<div class="type_item" v-show="orderTypeNum == 1">
|
<p class="type_num">{{unHandleNum}}笔</p>
|
<p class="complaint">投诉中</p>
|
</div>
|
<div class="type_item" v-show="orderTypeNum == 1" >
|
<p class="type_num">{{handleNum}}笔</p>
|
<p class="deal">已处理</p>
|
</div>
|
<div class="type_item" v-show="orderTypeNum != 1">
|
<p class="type_num">{{unHandleNum + handleNum}}笔</p>
|
<p>风险订单</p>
|
</div>
|
</div>
|
<!-- 订单列表-->
|
<div class="list">
|
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="10" class="loadMore">
|
<div class="list_item" v-for="(item, index) in list" :key="index" @click="go(item)">
|
<div class="list_item_left">
|
<p class="leftTop">{{item.userName}} <span>{{item.userMblNo}}</span></p>
|
<p>订单状态：{{item.orderStatus}}</p>
|
<p>订单号：{{item.orderId}}</p>
|
<p>办单日期：{{item.creTime | dealCreTime}}</p>
|
<p v-show="orderTypeNum == 1">投诉日期：{{item.noticeTime | dealNoticeTime}}</p>
|
<p v-show="orderTypeNum != 1">风险识别日期：{{item.noticeTime | dealNoticeTime}}</p>
|
</div>
|
<div class="list_item_right">
|
<div class="list_item_right_top" v-if="orderTypeNum == 1">
|
<p class="typeText" :class="item.status == 1 ? 'activetypeText' : ''" v-if="orderTypeNum == 1">{{item.status | dealStatus}}</p>
|
<p class="typebtn" v-if="orderTypeNum == 1">({{item.type}})</p>
|
</div>
|
<p class="typeTextFx" v-show="orderTypeNum != 1">{{item.type}}风险</p>
|
<p class="btn" :style="{background:$store.state.defaultBgColor}" @click.stop="dealOrderStatus(item.orderId)" v-if="orderTypeNum == 1 && item.status == 0">已处理</p>
|
<p class="btn" :style="{background:$store.state.defaultBgColor}" @click.stop="haveRead(item.orderId)" v-if="orderTypeNum != 1 && item.status == 0">已读</p>
|
</div>
|
</div>
|
</van-list>
|
</div>
|
<v-button-circle icon='icondaochu' title='导出' @click="exportFile"></v-button-circle>
|
<!-- 筛选弹出层-->
|
<v-filter v-model="isShow"
|
:belongArr="belongArr"
|
:periodsArr="periodsArr"
|
:riskLevelArr="riskLevelArr"
|
:riskTypeArr="riskTypeArr"
|
customTitle="分期本金"
|
:hasSearch="true"
|
@search="(v)=>search(v,true)">
|
</v-filter>
|
<!-- 无订单展示-->
|
<div class="overdue-pic" v-if="noOrder">
|
<div class="overdue-pic-img">
|
<img src="../../../assets/imgs/yqpic.png" alt="暂无逾期">
|
</div>
|
<p class="overdue-pic-text">您目前无风控订单，请继续保持~</p>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { XHeader } from 'vux';
|
import {dateFormat} from 'vux';
|
export default {
|
name: 'message',
|
components: {
|
XHeader
|
},
|
data() {
|
return {
|
orderTypeNum: 1, //控制订单类型切换
|
list: [],// 订单列表
|
isShow: false, //控制筛选弹出层
|
belongArr: [], // 所属代理、渠道、商户、门店
|
periodsArr: [],// 期数
|
riskLevelArr: [],// 风险级别
|
riskTypeArr: [],// 风险种类
|
loading: false, // 上拉加载状态
|
finished: false,// 上拉加载无更多数据
|
id: '', // 上拉加载时最后一条数据orderId
|
unHandleNum: '', // 未处理订单
|
handleNum: '',// 已处理订单
|
obj: '',
|
noOrder: false
|
}
|
},
|
computed: {
|
},
|
created() {
|
this.init()
|
this.getList()
|
this.loading = true
|
},
|
filters: {
|
dealStatus(val) {
|
return val == 0 ? '投诉中' : '已处理'
|
},
|
dealCreTime(val) {
|
return dateFormat(val)
|
},
|
dealNoticeTime(val) {
|
return dateFormat(val)
|
}
|
},
|
methods: {
|
// 筛选条件数据初始化
|
init() {
|
this.$api.riskInit().then(res => {
|
this.periodsArr = res.body.insTermVoList
|
this.belongArr = res.body.orgBaseInfVoList
|
this.riskLevelArr = res.body.riskTypeList
|
this.riskTypeArr = res.body.typeList
|
})
|
},
|
// 获取风控订单列表
|
getList(type, obj) {
|
let data = {
|
chanList: [],
|
endAmt: '',
|
startDay: "",
|
endDay: "",
|
insTerm: '',
|
merList: [],
|
mgrList: [],
|
orderId: this.id || '', // 如果有最后一条数据orderId，执行为上拉加载，如不存在该字段为空。
|
orderType: type || 1,
|
queryStr: "",
|
riskType: '',
|
startAmt: '',
|
storeList: [],
|
type: ""
|
}
|
// 筛选条件下data对象值变化
|
if (this.obj) {
|
data.chanList = this.obj.chanList
|
data.merList = this.obj.merList
|
data.mgrList = this.obj.mgrList
|
data.storeList = this.obj.storeList
|
data.startDay = this.obj.startDay
|
data.endDay = this.obj.endDay
|
data.insTerm = this.obj.insTerm
|
data.startAmt = this.obj.startAmt
|
data.endAmt = this.obj.endAmt
|
data.queryStr = this.obj.queryStr
|
data.riskType = this.obj.riskLevelArrCode
|
data.type = this.obj.riskTypeArrCode
|
}
|
this.$api.riskList(data).then(res => {
|
this.unHandleNum = res.body.unHandleNum
|
this.handleNum = res.body.handleNum
|
if (this.id) {
|
this.list = [...this.list, ...res.body.items]
|
this.loading = false
|
if (!res.body.items.length) {
|
this.finished = true
|
this.id = ''
|
}
|
} else {
|
this.list = res.body.items
|
if (!res.body.items.length) {
|
this.loading = false
|
this.noOrder = true
|
}
|
}
|
this.loading = false
|
})
|
},
|
// 返回上一级
|
onClickLeft() {
|
this.$router.go(-1)
|
},
|
// 切换风控订单类型
|
changeOrderType(num) {
|
this.finished = false
|
this.id = ''
|
if (num == 1) {
|
this.orderTypeNum = 1
|
this.getList(1)
|
} else {
|
this.orderTypeNum = 2
|
this.getList(2)
|
}
|
|
},
|
// 上拉加载获取最后一条数据id再查询
|
onLoad() {
|
this.id = this.list[this.list.length - 1].orderId
|
this.getList(this.orderTypeNum)
|
},
|
// 处理投诉订单
|
dealOrderStatus(id) {
|
this.$api.riskHandle({orderId: id}).then(res => {
|
this.getList(this.orderTypeNum)
|
this.$notify({type: 'success', message: '处理成功'})
|
this.finished = false
|
})
|
},
|
// 已读风险订单
|
haveRead(id) {
|
this.$api.riskHandle({orderId: id}).then(res => {
|
this.getList(this.orderTypeNum)
|
this.$notify({type: 'success', message: '处理成功'})
|
this.finished = false
|
})
|
},
|
// 筛选
|
search(v,isClear){
|
this.obj = v
|
this.getList(this.orderTypeNum)
|
this.isShow = false
|
},
|
// 导出订单列表
|
exportFile() {
|
if (!this.list.length) {
|
this.$notify('暂无数据导出')
|
return
|
}
|
this.$api.riskExport({orderType: this.orderTypeNum}).then((res) => {
|
this.$notify({type: 'success', message: '导出成功'})
|
}).catch((err) => {})
|
},
|
// 根据不同的typeId进入详情页
|
go(item) {
|
let path = ''
|
if (item.prodId == '30000003') {// 用户贴息
|
path = `product/hb-detail?id=${item.orderId}`
|
} else if (item.prodId == '30000009') { // 商品消费
|
path = `product/hb-detail?id=${item.orderId}`
|
} else if (item.prodId == '30000010') { // 商户贴息
|
path = `product/shtx-detail?id=${item.orderId}`
|
} else if (item.prodId == '30000012') { // 运营商消费花呗分期
|
path = `product/xyg-hb-detail?id=${item.orderId}`
|
} else if (item.prodId == '30000008') { // 商户收款
|
path = `product/dmf-detail?id=${item.orderId}`
|
}
|
this.$router.push(path)
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.overdue{
|
background: #F5F5F7;
|
width: 100vw;
|
height: 100vh;
|
font-family: PingFang SC;
|
.top {
|
width: 100vw;
|
height: 124px;
|
background: linear-gradient(180deg, #9072EB, #6F61D7);
|
/deep/ .van-nav-bar {
|
color: #fff;
|
background:rgba(255,0,0,0);
|
border: none;
|
}
|
/deep/ .van-nav-bar__title {
|
color: #fff;
|
}
|
/deep/ .van-hairline--bottom::after {
|
border-bottom-width: 0;
|
}
|
.tabBar {
|
width: 100vw;
|
height: 36px;
|
display: flex;
|
justify-content: space-around;
|
.tabBar_item {
|
height: 15px;
|
font-size: 15px;
|
font-weight: bold;
|
color: #FFFFFF;
|
.line {
|
width: 32px;
|
height: 2px;
|
display: block;
|
background: #FFFFFF;
|
border-radius: 1px;
|
margin: 0 auto;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.type {
|
width: 95%;
|
height: 72px;
|
background: #FFFFFF;
|
box-shadow: 0px 3px 8px 0px rgba(217, 208, 231, 0.3);
|
border-radius: 3px;
|
margin: 0 auto;
|
margin-top: -30px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
.type_item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
color: #999;
|
.type_num {
|
font-size: 18px;
|
color: #333333;
|
font-weight: bold;
|
margin-bottom: 8px;
|
}
|
.complaint {
|
font-size: 14px;
|
color: #FF7A7A;
|
}
|
.deal {
|
font-size: 14px;
|
color: #71CD9F;
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
margin-top: 20px;
|
.loadMore {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-content: center;
|
align-items: center;
|
}
|
.list_item {
|
width: 95%;
|
height: 121px;
|
margin-right: calc(100% - 100vw);
|
background: #FFFFFF;
|
box-shadow: 0px 0px 7px 0px rgba(217, 208, 231, 0.28);
|
border-radius: 3px;
|
margin-bottom: 10px;
|
padding: 16px 16px 12px 19px;
|
box-sizing: border-box;
|
display: flex;
|
flex-shrink: 0;
|
.list_item_left {
|
width: 75%;
|
height: 12px;
|
font-size: 12px;
|
font-weight: 500;
|
color: #999999;
|
display: flex;
|
flex-direction: column;
|
.leftTop {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333333;
|
margin-top: 0px;
|
span {
|
margin-left: 13px;
|
}
|
}
|
p {
|
margin-top: 6px;
|
}
|
}
|
.list_item_right {
|
width: 25%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
.list_item_right_top {
|
// width: 100%;
|
.typeText {
|
height: 16px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #FF7A7A;
|
text-align: center;
|
}
|
}
|
.typeTextFx {
|
height: 16px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #FF7A7A;
|
text-align: center;
|
}
|
.activetypeText {
|
color: #71CD9F;
|
}
|
.typebtn {
|
font-size: 12px;
|
font-family: PingFang SC;
|
color: #999999;
|
margin-top: 5px;
|
text-align: center;
|
}
|
.btn {
|
width: 77px;
|
height: 28px;
|
background: linear-gradient(90deg, #8F6AFF, #9459EC);
|
box-shadow: 0px 4px 7px 0px rgba(99, 19, 232, 0.25);
|
border-radius: 14px;
|
font-size: 14px;
|
font-weight: 500;
|
color: #FFFFFF;
|
text-align: center;
|
line-height: 28px;
|
}
|
}
|
}
|
}
|
.overdue-pic{
|
margin-top: 117px;
|
text-align: center;
|
&-img{
|
width: 100%;
|
img{
|
width: 164px;
|
height: 112px;
|
display: inline-block;
|
}
|
}
|
&-text{
|
font-size: 14px;
|
color: #333333;
|
margin-top: 24px;
|
}
|
}
|
}
|
</style>
|
