2026-03-04 14:31:07 +08:00
|
|
|
|
<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>
|
2026-03-27 17:29:18 +08:00
|
|
|
|
<van-collapse-item key="重要信息一览" title="重要信息一览" name="重要信息一览" v-if="showImportantInfo">
|
|
|
|
|
|
<speticaltag :dataSource="importantInfoList" type="special" />
|
|
|
|
|
|
</van-collapse-item>
|
2026-03-04 14:31:07 +08:00
|
|
|
|
<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>
|
2026-03-27 17:29:18 +08:00
|
|
|
|
<van-collapse-item key="催收信息" title="催收信息" name="催收信息" v-if="showTaskDetail">
|
|
|
|
|
|
<speticaltag :dataSource="taskDetail" type="special" />
|
2026-03-04 14:31:07 +08:00
|
|
|
|
</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],
|
2026-03-27 17:29:18 +08:00
|
|
|
|
baseInfo: {},
|
|
|
|
|
|
importantInfoList: [],
|
2026-03-04 14:31:07 +08:00
|
|
|
|
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
|
2026-03-27 17:29:18 +08:00
|
|
|
|
const str = String(deptId).substring(0, 3)
|
2026-03-04 14:31:07 +08:00
|
|
|
|
return str
|
|
|
|
|
|
},
|
2026-03-27 17:29:18 +08:00
|
|
|
|
showImportantInfo() {
|
|
|
|
|
|
return this.orgNum === '932'
|
|
|
|
|
|
},
|
|
|
|
|
|
showTaskDetail() {
|
|
|
|
|
|
return this.orgNum === '932'
|
2026-03-04 14:31:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
callFn() {
|
|
|
|
|
|
this.init();
|
|
|
|
|
|
},
|
|
|
|
|
|
init() {
|
|
|
|
|
|
let custId = sessionStorage.getItem('custId')
|
|
|
|
|
|
getPersonInfo(custId).then(res => {
|
|
|
|
|
|
if (res.code == 200) {
|
2026-03-27 17:29:18 +08:00
|
|
|
|
this.baseInfo = res.data.custInfoRetail || {}
|
|
|
|
|
|
this.importantInfoList = this.buildImportantInfoList(this.baseInfo, res.data.importantInfoLoan932List || [])
|
|
|
|
|
|
this.taskDetail = this.formatTaskDetail(res.data.taskDetail || [])
|
2026-03-04 14:31:07 +08:00
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-03-27 17:29:18 +08:00
|
|
|
|
return data || ''
|
2026-03-04 14:31:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
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();
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
2026-03-27 17:29:18 +08:00
|
|
|
|
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
|
|
|
|
|
|
},
|
2026-03-04 14:31:07 +08:00
|
|
|
|
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>
|
