413 lines
15 KiB
Vue
413 lines
15 KiB
Vue
<template>
|
||
<div class="main_box">
|
||
<navbar title="个人客户详情"></navbar>
|
||
<div class="wrapper">
|
||
<div class="wrapper_top">
|
||
<div :class="baseInfo.custGender == '男' ? 'left_icon_man' : 'left_icon_woman'">
|
||
<van-icon name="manager user_icon"></van-icon>
|
||
</div>
|
||
<div class="top_right">
|
||
<div class="name_box">{{ baseInfo.custName }}</div>
|
||
<div class="top_item">
|
||
<span class="top_right_left">身份证号：</span>
|
||
<span>{{ baseInfo.custIdc }}</span>
|
||
</div>
|
||
<div class="top_item">
|
||
<span class="top_right_left">性别：</span>
|
||
<span>{{ baseInfo.custGender }}</span>
|
||
</div>
|
||
<div class="top_item">
|
||
<span class="top_right_left">联系方式：</span>
|
||
<span>{{ baseInfo.custPhone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="home_main">
|
||
<!-- <div class="home_main_item" v-for="(item, index) in dhList" @click="handleClickItem(item)">
|
||
<div class="main_left">
|
||
<van-icon :name="item.icon" class="home_main_icon"></van-icon>
|
||
<div class="main_title">{{ item.title }}</div>
|
||
</div>
|
||
<van-icon name="arrow" class="next_icon"></van-icon>
|
||
</div> -->
|
||
<van-collapse v-model="activeNames" accordion>
|
||
<van-collapse-item key="重要信息一览" title="重要信息一览" name="重要信息一览" v-if="showImportantInfo">
|
||
<speticaltag :dataSource="importantInfoList" type="special" />
|
||
</van-collapse-item>
|
||
<van-collapse-item v-for="(item, index) in dhList" :key="index" :title="item.title"
|
||
:name="item.title">
|
||
<indexcharts v-if="activeNames == '个人基本信息' && item.title == '个人基本信息'"></indexcharts>
|
||
<address1 v-if="activeNames == '地址信息' && item.title == '地址信息'" addressType="1"></address1>
|
||
<products v-if="activeNames == '签约产品' && item.title == '签约产品'" productType="2"></products>
|
||
<selfremark v-if="activeNames == '自定义备注' && item.title == '自定义备注'"
|
||
:speciallabel="baseInfo.label" :custId="baseInfo.custId" custType="0" @callFn="callFn">
|
||
</selfremark>
|
||
<remark v-if="activeNames == '省行客户标签' && item.title == '省行客户标签'" :flag="true" custType="ls">
|
||
</remark>
|
||
<history v-if="activeNames == '走访记录' && item.title == '走访记录'" :custIdc="baseInfo.custIdc"
|
||
historyType="2"></history>
|
||
<family v-if="activeNames == '关系图谱' && item.title == '关系图谱'" :childIdCard="baseInfo.custIdc">
|
||
</family>
|
||
<speticaltag v-if="activeNames == '特色客户标签' && item.title == '特色客户标签' && showTag"
|
||
:custIdc="baseInfo.custIdc"></speticaltag>
|
||
</van-collapse-item>
|
||
<van-collapse-item key="特色客户标签" title="特色客户标签" name="特色客户标签" v-if="showTag">
|
||
<speticaltag :custIdc="baseInfo.custIdc" />
|
||
</van-collapse-item>
|
||
<van-collapse-item key="催收信息" title="催收信息" name="催收信息" v-if="showTaskDetail">
|
||
<speticaltag :dataSource="taskDetail" type="special" />
|
||
</van-collapse-item>
|
||
</van-collapse>
|
||
</div>
|
||
<!-- <div class="tjzf" @click="handleAddShow">添加走访</div> -->
|
||
</div>
|
||
<van-dialog v-model="show" title="添加走访" show-cancel-button @confirm="handleClickTjzf()">
|
||
<van-field readonly :value="value" is-link placeholder="请选择" @click="showPicker = true"></van-field>
|
||
<van-popup v-model="showPicker" position="bottom">
|
||
<van-picker show-toolbar :columns="columns" @confirm="onConfirm"
|
||
@cancle="showPicker = false"></van-picker>
|
||
</van-popup>
|
||
</van-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import navbar from '../../components/navbar/navbar.vue';
|
||
import { getPersonInfo, getIndustryTree } from "@/service/api/custome";
|
||
import {
|
||
Tab,
|
||
Tabs,
|
||
Icon,
|
||
Button,
|
||
Search,
|
||
Field,
|
||
Popup,
|
||
Picker,
|
||
Collapse,
|
||
CollapseItem
|
||
} from 'vant';
|
||
import { mapGetters } from 'vuex'
|
||
import indexcharts from "@/views/details/indexcharts.vue";
|
||
import speticalTag from "@/views/details/speticalTag.vue";
|
||
import address from "@/views/customer/address.vue";
|
||
import products from "@/views/customer/products.vue";
|
||
import selfremark from "@/views/customer/selfremark.vue";
|
||
import remark from "@/views/customer/remark.vue";
|
||
import history from "@/views/customer/history.vue";
|
||
import family from "@/views/customer/family.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeNames: [],
|
||
navTitle: '企业客户详情',
|
||
custGender: '女',
|
||
dhList: [
|
||
{ title: '个人基本信息' }, { title: '地址信息' }, { title: '签约产品' }, { title: '自定义备注' }, { title: '省行客户标签' },
|
||
{ title: '走访记录' }, { title: '关系图谱' }
|
||
],
|
||
show: false,
|
||
value: '',
|
||
showPicker: false,
|
||
columns: [1, 2, 23, 4, 5],
|
||
baseInfo: {},
|
||
importantInfoList: [],
|
||
taskDetail: [],
|
||
industryOptions: []
|
||
}
|
||
},
|
||
components: {
|
||
navbar: navbar,
|
||
VanTab: Tab,
|
||
VanTabs: Tabs,
|
||
VanIcon: Icon,
|
||
VanButton: Button,
|
||
VanSearch: Search,
|
||
VanField: Field,
|
||
VanPopup: Popup,
|
||
VanPicker: Picker,
|
||
VanCollapse: Collapse,
|
||
VanCollapseItem: CollapseItem,
|
||
indexcharts,
|
||
address1: address,
|
||
products,
|
||
remark,
|
||
history,
|
||
family,
|
||
selfremark,
|
||
speticaltag: speticalTag
|
||
},
|
||
created() {
|
||
this.initIndustryTree()
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
showTag() {
|
||
const arr = ['931'] // 莲都
|
||
const { deptId = '' } = this.userInfo
|
||
const str = String(deptId).substring(0, 3)
|
||
return arr.includes(str) ? true : false
|
||
},
|
||
orgNum() {
|
||
const { deptId = '' } = this.userInfo
|
||
const str = String(deptId).substring(0, 3)
|
||
return str
|
||
},
|
||
showImportantInfo() {
|
||
return this.orgNum === '932'
|
||
},
|
||
showTaskDetail() {
|
||
return this.orgNum === '932'
|
||
}
|
||
},
|
||
methods: {
|
||
callFn() {
|
||
this.init();
|
||
},
|
||
init() {
|
||
let custId = sessionStorage.getItem('custId')
|
||
getPersonInfo(custId).then(res => {
|
||
if (res.code == 200) {
|
||
this.baseInfo = res.data.custInfoRetail || {}
|
||
this.importantInfoList = this.buildImportantInfoList(this.baseInfo, res.data.importantInfoLoan932List || [])
|
||
this.taskDetail = this.formatTaskDetail(res.data.taskDetail || [])
|
||
}
|
||
})
|
||
},
|
||
initIndustryBusiStr(data) {
|
||
if (data) {
|
||
for (let i = 0; i < this.industryOptions.length; i++) {
|
||
if (this.industryOptions[i].value == data) {
|
||
return this.industryOptions[i].label;
|
||
} else {
|
||
for (let j = 0; j < this.industryOptions[i].children.length; j++) {
|
||
if (this.industryOptions[i].children[j].value == data) {
|
||
return this.industryOptions[i].children[j].label;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return data || ''
|
||
},
|
||
initIndustryTree() {
|
||
getIndustryTree().then((res) => {
|
||
this.industryOptions = res.data.map((item) => {
|
||
return {
|
||
value: item.code,
|
||
label: item.name,
|
||
children: item.industryTrees,
|
||
};
|
||
});
|
||
this.industryOptions.forEach((item) => {
|
||
item.children.forEach((el) => {
|
||
el.value = el.code;
|
||
el.label = el.name;
|
||
});
|
||
});
|
||
this.belonBusiList = res.data.map((item) => {
|
||
return {
|
||
text: item.name,
|
||
id: item.code,
|
||
children: item.industryTrees,
|
||
};
|
||
});
|
||
this.belonBusiList.forEach((item) => {
|
||
item.children.forEach((el) => {
|
||
el.text = el.name;
|
||
el.id = el.code;
|
||
});
|
||
});
|
||
this.belonBusiList.forEach((item) => {
|
||
item.children.unshift({
|
||
text: "请选择",
|
||
id: "",
|
||
});
|
||
});
|
||
this.init();
|
||
});
|
||
},
|
||
buildImportantInfoList(baseInfo, loanInfoList) {
|
||
const result = [
|
||
{ value: '年龄', label: baseInfo.custAge || '' },
|
||
{ value: '婚姻状况', label: baseInfo.isMarried || '' },
|
||
{ value: '年收入', label: baseInfo.custSalary || '' },
|
||
{ value: '资产情况', label: baseInfo.asset || '' },
|
||
{ value: '信用状况', label: baseInfo.credit || '' },
|
||
{ value: '行业名称', label: this.initIndustryBusiStr(baseInfo.belongBusi) }
|
||
]
|
||
loanInfoList.forEach((loanInfo, index) => {
|
||
result.push({ value: `贷款信息${index + 1}`, label: '', isSection: true })
|
||
result.push(
|
||
{ value: '客户号', label: loanInfo.custId || '' },
|
||
{ value: '客户内码', label: loanInfo.custIsn || '' },
|
||
{ value: '合同号', label: loanInfo.contractNo || '' },
|
||
{ value: '合同起始日', label: loanInfo.conStartDt || '' },
|
||
{ value: '合同终止日', label: loanInfo.conEndDt || '' },
|
||
{ value: '贷款余额', label: loanInfo.loanBal || '' },
|
||
{ value: '贷款利率', label: loanInfo.loanRate || '' },
|
||
{ value: '担保方式', label: loanInfo.assureWay || '' },
|
||
{ value: '贷款用途', label: loanInfo.loanPurpose || '' },
|
||
{ value: '归属支行', label: loanInfo.orgCode || '' },
|
||
{ value: '数据日期', label: loanInfo.dataDate || '' }
|
||
)
|
||
})
|
||
return result
|
||
},
|
||
formatTaskDetail(taskSource) {
|
||
if (!taskSource.length) {
|
||
return []
|
||
}
|
||
const taskDetail = taskSource[0] || {}
|
||
const result = []
|
||
for (let i in taskDetail) {
|
||
if (i !== 'info') {
|
||
result.push({
|
||
value: i,
|
||
label: taskDetail[i],
|
||
isImage: i === '照片存放地址'
|
||
})
|
||
} else if (taskDetail.info) {
|
||
for (let j in taskDetail.info) {
|
||
result.push({
|
||
value: j,
|
||
label: taskDetail.info[j],
|
||
isImage: j === '照片存放地址'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
return result
|
||
},
|
||
handleClickItem(item) {
|
||
if (item.title == "个人基本信息") {
|
||
sessionStorage.setItem('detailType', item.title);
|
||
this.$router.push('/indexcharts');
|
||
} else if (item.title == '地址信息') {
|
||
let addressType = '1'
|
||
sessionStorage.setItem('addressType', addressType);
|
||
this.$router.push('/address');
|
||
} else if (item.title == '签约产品') {
|
||
sessionStorage.setItem('productType', '2');
|
||
this.$router.push('/products');
|
||
} else if (item.title == '自定义备注') {
|
||
sessionStorage.setItem('remarkType', '2');
|
||
this.$router.push('/remark');
|
||
} else if (item.title == '走访记录') {
|
||
sessionStorage.setItem('custIdc', this.baseInfo.custIdc);
|
||
sessionStorage.setItem('historyType', '2');
|
||
this.$router.push('/history');
|
||
} else if (item.title == '关系图谱') {
|
||
sessionStorage.setItem('idCard', this.baseInfo.custIdc);
|
||
this.$router.push('/family');
|
||
}
|
||
},
|
||
handleAddShow() {
|
||
this.show = true
|
||
},
|
||
onConfirm() {
|
||
this.showPicker = false
|
||
},
|
||
handleClickTjzf() { },
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.wrapper {
|
||
padding-top: 46px;
|
||
min-height: 100vh;
|
||
font-size: 16px;
|
||
padding-bottom: 60px;
|
||
}
|
||
|
||
.wrapper_top {
|
||
background-color: #fff;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
}
|
||
|
||
.left_icon_man {
|
||
background-color: rgb(35, 114, 235);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 5px 5px;
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.left_icon_woman {
|
||
background-color: rgb(252, 123, 80);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 5px 5px;
|
||
width: 45px;
|
||
height: 45px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.user_icon {
|
||
font-size: 30px;
|
||
color: #fff;
|
||
}
|
||
|
||
.top_right {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.name_box {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.top_item {
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.top_right_left {
|
||
color: rgb(89, 89, 89);
|
||
}
|
||
|
||
.home_main {
|
||
background-color: #ffffff;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.home_main_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px 15px 15px 0;
|
||
border-bottom: 1px solid rgba(89, 89, 89, 0.1);
|
||
}
|
||
|
||
.main_left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.home_main_icon {
|
||
font-size: 30px;
|
||
color: rgb(98, 132, 221);
|
||
}
|
||
|
||
.main_title {
|
||
margin-left: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tjzf {
|
||
width: 90%;
|
||
height: 45px;
|
||
background-color: rgb(57, 133, 218);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 5%;
|
||
margin-top: 30px;
|
||
color: #fff;
|
||
}
|
||
</style>
|