rongzidanbao-ui/work/pages/custom/details.vue

<template>
	<view class="details">
		<view class="detop">
			<view class="headbox">
				<view class="head">{{datainfo.realName.substring(0,1)}}</view>
				<view class="flex1">
					<view class="headt">{{datainfo.realName}}</view>
					<view class="headx">资料更新时间 | {{datainfo.updateTime||datainfo.createTime}}</view>
				</view>
			</view>
			<view class="tit">
				<image :src="titimg"></image>客户基本信息
			</view>
			<view class="txt">身份证号：<text>{{datainfo.idCard}}</text></view>
			<view class="txt">证件有效期：<text>{{datainfo.expirationDate}}</text></view>
			<view class="txt">居住地址：<text>{{datainfo.address}}</text></view>
			<view class="txt">手机号码：<text>{{datainfo.phonenumber}}</text></view>
		</view>
		<!-- 已添加关联企业 -->
		<view class="zhead flexc">
			<view class="tit">
				<image :src="titimg"></image>已添加关联企业
			</view>
			<view class="zheadr flexc" :class="zheList[0].zheflag?'':'act'" @click="getZheFn(0)">
				{{zheList[0].zheflag?'折叠信息':'展开信息'}}
				<image :src="upimg"></image></view>
		</view>
		<!-- 列表 -->
		<block v-if="zheList[0].zheflag">
			<bus-list :datalist="qylist" type="qy"></bus-list>
		</block>
		<!-- 历史申贷记录 -->
		<view class="zhead flexc">
			<view class="tit">
				<image :src="titimg"></image>历史申贷记录
			</view>
			<view class="zheadr flexc" :class="zheList[1].zheflag?'':'act'" @click="getZheFn(1)">
				{{zheList[1].zheflag?'折叠信息':'展开信息'}}
				<image :src="upimg"></image></view>
		</view>
		<!-- 列表 -->
		<block v-if="zheList[1].zheflag">
			<bus-list :datalist="sdjllist" :sdyhlist="sdyhlist" :dblxlist="dblxlist" type="sdjl" @getDetail="getDetail"></bus-list>
		</block>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import busList from "@/work/components/business/list.vue"
	import {getIdCardDet} from "@/api/mine/card.js"
	import {uploadmore} from '@/utils/common.js'
	import {getDictionaryFn} from "@/api/mine/register.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	export default{
		components:{busList},
		data(){
			return{
				titimg:require('@/work/static/images/infotit.png'),
				upimg:require('@/work/static/images/up.png'),
				list:[],
				qylist:[],
				sdjllist:[],
				zheList:[{zheflag:true},{zheflag:true},{zheflag:true},{zheflag:true}],
				type:'qy',
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
				id:'',
				sdyhlist:[],
				dblxlist:[],
				datainfo:{
					idCard:'34282419730618003X',realName:'林振宇',userId:'1'
				}
			}
		},
		onLoad(e) {
			this.id=e.id;
			this.init()
			this.getDataFn()
		},
		methods:{
			checkPermi, checkRole,
			init(){
				// 申贷银行
				getDictionaryFn('shendai_bank').then(res=>{
					if(res.code==200){
						this.sdyhlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				//担保类型
				getDictionaryFn('guarantee_type').then(res=>{
					if(res.code==200){
						this.dblxlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
			},
			getDetail(e){
				this.$tab.navigateTo("/work/pages/business/details?id="+e)
			},
			getZheFn(idx){
				this.zheList[idx].zheflag=!this.zheList[idx].zheflag
			},
			getDataFn(){
				getIdCardDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						if(res.data.sysUserEnterpriseList){
							this.qylist=JSON.parse(JSON.stringify(res.data.sysUserEnterpriseList))||[]
						}
						if(res.data.loanApplicationList){
							this.sdjllist=JSON.parse(JSON.stringify(res.data.loanApplicationList))||[]
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.detop{
	background-color: #ffffff;padding: 0rpx 24rpx 2rpx;
	.headbox{display: flex;align-items: center;padding: 42rpx 12rpx;border-bottom: 2rpx solid #E6E6E6;;
		.head{width: 86rpx;height: 86rpx;background: #00A9F0;border-radius: 10rpx;font-weight: bold;margin-right: 36rpx;flex: 0 0 auto;font-size: 40rpx;display: flex;align-items: center;justify-content: center;color: #FFFFFF;}
		.headt{font-weight: bold;font-size: 40rpx;color: #222327;margin-bottom: 10rpx;}
		.headx{font-weight: 500;font-size: 24rpx;color: #666666;}
			
	}
}
.tit{font-weight: bold;font-size: 30rpx;color: $com-cd3;display: flex;align-items: center;padding-top: 44rpx;margin-bottom:32rpx;padding-left: 14rpx;
	image{width: 30rpx;height: 30rpx;margin-right: 12rpx;}
}
.txt{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 44rpx;padding-left: 14rpx;
	text{color: #666666;font-weight: 500;
		&.txta{color: #28C529;}
	}
}
.flexcw{display: flex;
	.txt{min-width: 50%;padding-right: 20rpx;box-sizing: border-box;}
}
.zhead{padding: 30rpx 40rpx 30rpx 24rpx;
	.tit{margin-bottom: 0;padding-top: 0;flex: 1;}
	.zheadr{font-weight: 500;font-size: 26rpx;flex: 0 0 auto;color: #666666;
		&.act{
			image{transform: rotate(180deg);}
		}
		image{width: 26rpx;height: 22rpx;margin-left: 18rpx;transition: all 0.3;}
	}
}
</style>