<template>
<div>
<!--还款计划详情-->
<div class="content-text">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="用户基本信息" name="1">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">银行账号户主名称：{{loanBackedDetails.basicInfoVo.name}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">手机号码：{{loanBackedDetails.basicInfoVo.phone}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">身份证号：{{loanBackedDetails.basicInfoVo.idCard}}</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="计划还款情况" name="4">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">计划编号：{{loanBackedDetails.planAndBackVo.planNo}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">计划还款期数：第{{loanBackedDetails.planAndBackVo.planIndex}}期</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">计划还款时间：{{dateFormatText(loanBackedDetails.planAndBackVo.planDate)}}
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">计划还款状态：{{getStatus(loanBackedDetails.planAndBackVo.status)}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">应还金额：{{loanBackedDetails.planAndBackVo.planAmt}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">计划还款本金：{{loanBackedDetails.planAndBackVo.planBen}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">计划还款利息：{{loanBackedDetails.planAndBackVo.planXi}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">计划还款服务费：{{loanBackedDetails.planAndBackVo.planFu}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">已还本金：{{loanBackedDetails.planAndBackVo.backedBen}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">已还利息：{{loanBackedDetails.planAndBackVo.backedXi}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">已还服务费：{{loanBackedDetails.planAndBackVo.backedFu}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">已减免金额：{{loanBackedDetails.planAndBackVo.derateAmt ? loanBackedDetails.planAndBackVo.derateAmt : 0}}</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="还款情况" name="2">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">还款编号：{{loanBackedDetails.backVo.backedNo}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">借款编号：{{loanBackedDetails.backVo.bizNo}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">客户编号：{{loanBackedDetails.backVo.clientNo}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">还款日期：{{dateFormatText(loanBackedDetails.backVo.gmtCreated)}}
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">还款账号：{{loanBackedDetails.backVo.bankAccount}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">还款账户：{{loanBackedDetails.backVo.bankOwner}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">还款金额：{{loanBackedDetails.backVo.backedAmt}} 元</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">还款类型：{{this.$enumUtils.toMsg('BackedTransferTypeEnum', loanBackedDetails.backVo.backedType)}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">还款单创建人：{{loanBackedDetails.backVo.creator}}</div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="还款凭证" name="3">
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content bg-purple"><img :src="loanBackedDetails.backVo.attach" style="width: 120px;height: 120px" v-if="loanBackedDetails.backVo.attach!=null" @click="changeImage"></div>
</el-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="还款结果" name="4">
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">还款单状态：{{this.$enumUtils.toMsg('XmRaiseBackedStatus', loanBackedDetails.backVo.statusStr)}}</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple">处理结果：{{(loanBackedDetails.backVo.result==null?"未处理":this.$enumUtils.toMsg('SuccessAndFail', loanBackedDetails.backVo.result))}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">确认人：{{loanBackedDetails.backVo.confirmer}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">线下转账备注：{{loanBackedDetails.backVo.memo}}</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple">确认描述：{{loanBackedDetails.backVo.confirmDesc}}</div>
</el-col>
</el-row>
<br/>
<el-row>
<el-button type="primary" @click="confirmBacked" round
:disabled = "loanBackedDetails.backVo.status !== 'SUBMITED'" >确认还款单</el-button>
<el-button type="primary" @click="refuseBacked" round
:disabled = "loanBackedDetails.backVo.status !== 'SUBMITED'">驳回还款单</el-button>
<el-button type="primary" round @click="goBack">返回</el-button>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
<template>
<!--转账还款单确认驳回-->
<confirmRefuseDailog
v-if="ui.confirmRefuseDailog.visible"
:dialogVisible.sync="ui.confirmRefuseDailog.visible"
:btnType="ui.confirmRefuseDailog.btnType"
:backedNo="ui.confirmRefuseDailog.backedNo">
</confirmRefuseDailog>
<!--图片放大-->
<imageDailog
v-if="ui.imageDailog.visible"
:dialogVisible.sync="ui.imageDailog.visible"
:img="ui.imageDailog.img">
</imageDailog>
</template>
</div>
</template>
<script>
import * as moment from "moment";
import confirmRefuseDailog from "./ByhConfirmRefuseDailog";
import imageDailog from "../common/ImageDailog";
export default {
name: "ByhLoanBackedDetails",
components: {
confirmRefuseDailog,
imageDailog,
},
data() {
return {
activeNames: ['1', '2', '3','4'],
ui: {
confirmRefuseDailog:{
visible: false,
backedNo:'',
btnType:'',
},
imageDailog:{
visible: false,
img:'',
},
},
loanBackedDetails: {
basicInfoVo:{
companyAddress: "",
companyName: "",
firstName: "",
firstPhone: "",
houseAddress: "",
idCard: "",
name: "",
phone: ""
},
backVo:{
backedAmt: "",
backedDate: "",
backedNo: "",
backedTime: "",
backedType: "",
backedTypeStr: "",
bankAccount: "",
bankOwner: "",
bindNo: "",
bizNo: "",
bizType: "",
bizTypeStr: "",
cardBankAccount: "",
cardBankCode: "",
cardBankName: "",
cardCertNo: "",
cardOwnerMobile: "",
cardOwnerName: "",
clientNo: "",
confirmDesc: "",
confirmer: "",
creator: "",
gmtConfirm: "",
gmtCreated: "",
memo: "",
result: "",
resultStr: "",
status: "",
statusStr: ""
},
planAndBackVo:{
backedBen: "",
backedFu: "",
backedXi: "",
certNo: "",
clientCell: "",
clientName: "",
clientNo: "",
handler: "",
loanNo: "",
orderNo: "",
planAmt: "",
planBen: "",
planDate: "",
planFu: "",
planIndex: "",
planNo: "",
planXi: "",
remainAmt: "",
remindDate: "",
status: "",
statusStr: ""
},
},
}
},
mounted() {
//获取还款单详情
this.$$get(`/detail/transfer?backNo=${this.$route.query.backedNo}`+'&clientNo='+this.$route.query.clientNo)
.then(res => {
if (res.data.code !=200 )
throw res.data.message;
if(res.data.result.basicInfoVo != null ){
this.loanBackedDetails.basicInfoVo = res.data.result.basicInfoVo ;
}
if(res.data.result.planAndBackVo !=null){
this.loanBackedDetails.planAndBackVo = res.data.result.planAndBackVo ;
}
if( res.data.result.backVo !=null){
this.loanBackedDetails.backVo = res.data.result.backVo ;
}
})
.catch(err => this.$$msg.err(err));
this.loginName = localStorage.getItem("loginName")
},
methods: {
//确认还款单
confirmBacked(){
this.ui.confirmRefuseDailog = {
visible: true,
backedNo: this.loanBackedDetails.backVo.backedNo,
btnType: 'CONFIRM'
}
},
//驳回还款单
refuseBacked(){
this.ui.confirmRefuseDailog = {
visible: true,
backedNo: this.loanBackedDetails.backVo.backedNo,
btnType: 'REFUSE'
}
},
//放大图片
changeImage(){
this.ui.imageDailog = {
visible: true,
img: this.loanBackedDetails.backVo.attach,
}
},
//折叠情况
handleChange(val) {
},
dateFormatText: function (param) {
return moment(param).format("YYYY-MM-DD HH:mm:ss");
},
getStatus(value) {
if (value === 'BACKING') {
return '回款中';
} else if (value === 'SETTLED') {
return '已结清';
} else if (value === 'OVERDUED') {
return '已逾期';
}
},
goBack() {
this.$router.push({
path: 'ByhLoanBackedList',
query: {
flag: true,
bizNo: this.$route.query.bizNo,
status: this.$route.query.status,
bankAccount: this.$route.query.bankAccount,
gmtCreatedStart: this.$route.query.gmtCreatedStart,
gmtCreatedEnd: this.$route.query.gmtCreatedEnd,
current: this.$route.query.current,
}
})
},
}
}
</script>
<style scoped>
</style>