<template>
|
<div class="main">
|
<h3 class="top-title">订单详情
|
<el-button size="mini"
|
@click="goBack"
|
class="back-btn">
|
<i class="el-icon-back">返回列表</i>
|
</el-button></h3>
|
|
<FormInfo title="个人信息"
|
:info="personInfo"
|
:keys="hebaoCustomerHeader"
|
:loading="loading"></FormInfo>
|
|
<FormInfo title="商品信息"
|
:info="goodsInfo"
|
:keys="hebaoGoodsHeader"
|
:loading="loading1"></FormInfo>
|
|
<p class="section-title">联系人信息</p>
|
<TableList :isAutoIndex="false"
|
:isShowPages="false"
|
:loading="loading"
|
:list="relationList"
|
:header="heBaoRelationInfoHeader"
|
@doAction="doAction"></TableList>
|
|
<p class="section-title">还款计划</p>
|
<ul class="dis-flex">
|
<li class="flex1">应还总金额：{{form.totalAmount || '-'}}</li>
|
<li class="flex1"> 已还总金额：{{form.actualTotalAmount || '-'}}</li>
|
<li class="flex1">当前逾期欠款：{{form.overdueAmount || '-'}}</li>
|
</ul>
|
|
<TableList :isAutoIndex="false"
|
:isShowPages="false"
|
:loading="loading2"
|
:list="records"
|
:header="heBaoRepayInfoHeader"
|
@doAction="doAction"></TableList>
|
|
</div>
|
</template>
|
<script>
|
/**
|
* 订单查询列表-详情
|
*/
|
import {
|
heBaoselectHeBaoGoodsInfo,
|
heBaoSelectHeBaoPersonInfo,
|
heSelectHeBaoRepayInfo
|
} from '@comprehensive/serve/public'
|
import {
|
heBaoRepayInfoHeader,
|
heBaoRelationInfoHeader
|
} from '@comprehensive/utils/tableHeaders'
|
import TabContent from './components/TabContent'
|
import HeaderSteps from './components/HeaderSteps'
|
import ScrollToTab from './components/ScrollToTab'
|
import FormInfo from './components/FormInfo'
|
import TableList from './components/TableList'
|
import {
|
hebaoCustomerHeader,
|
hebaoGoodsHeader
|
} from '@comprehensive/utils/formHeaders'
|
export default {
|
components: {
|
TabContent,
|
HeaderSteps,
|
ScrollToTab,
|
FormInfo,
|
TableList
|
},
|
data() {
|
return {
|
form: {},
|
trackInfo: {},
|
list: [],
|
records: [],
|
hebaoCustomerHeader,
|
hebaoGoodsHeader,
|
heBaoRepayInfoHeader,
|
heBaoRelationInfoHeader,
|
serialNo: '',
|
loading: false,
|
loading1: false,
|
loading2: false,
|
dialogComplainVisible: false,
|
personInfo: {},
|
goodsInfo: {},
|
relationList: []
|
}
|
},
|
created() {
|
},
|
mounted() {
|
this.init()
|
this.setEleHeight()
|
window.addEventListener('resize', this.setEleHeight)
|
},
|
methods: {
|
async init() {
|
this.serialNo = this.$route.params.id
|
await this.getPersonInfo()
|
await this.getGoodsInfo()
|
this.getrepayInfo()
|
},
|
|
async getPersonInfo() {
|
this.loading = true
|
const res = await heBaoSelectHeBaoPersonInfo({
|
busiNo: this.serialNo
|
})
|
if (res.code == '00') {
|
this.personInfo = res.result
|
this.relationList = res.result.relationList
|
}
|
this.loading = false
|
},
|
async getGoodsInfo() {
|
this.loading1 = true
|
const res = await heBaoselectHeBaoGoodsInfo({
|
busiNo: this.serialNo
|
})
|
if (res.code == '00') {
|
this.goodsInfo = res.result
|
this.personInfo = {...this.personInfo, mobileNo: res.result.mobileNo || ''}
|
}
|
this.loading1 = false
|
},
|
|
async getrepayInfo() {
|
this.loading2 = true
|
const res = await heSelectHeBaoRepayInfo({ busiNo: this.serialNo })
|
if (res.code == '00') {
|
this.form = res.result
|
this.records = res.result.repayDetailList
|
}
|
this.loading2 = false
|
},
|
// 表单事件回调
|
doAction(name, item, { label }) {
|
if (name === 'lastAction') {
|
}
|
},
|
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight
|
this.clientHeight = clientHeight || 600
|
},
|
|
// 返回列表
|
goBack() {
|
window.history.go(-1)
|
}
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, treeList } = this
|
return treeList[tabIndex] || {}
|
}
|
},
|
watch: {
|
// $route() {
|
// this.init()
|
// }
|
},
|
beforeRouteEnter(to, from, next) {
|
next(vm => {
|
vm.$store.commit('SET_detailBackRoute', from.path)
|
})
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.setEleHeight)
|
}
|
}
|
</script>
|
|
<style lang="postcss" scoped>
|
.main {
|
padding: 0 30px 30px;
|
background: #fff;
|
& .section-title {
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
& .btn-block {
|
margin-bottom: 20px;
|
}
|
|
& .top-title {
|
font-size: 16px;
|
border-bottom: solid 2px #eeeeee;
|
color: #000;
|
padding: 16px 20px;
|
margin-bottom: 10px;
|
font-weight: 500;
|
& .back-btn {
|
float: right;
|
}
|
}
|
|
& .dis-flex {
|
width: 50%;
|
padding: 20px 0;
|
display: flex;
|
align-items: center;
|
|
& .flex1 {
|
flex: 1;
|
}
|
|
& .flex2 {
|
flex: 2;
|
}
|
}
|
}
|
</style>
|
