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

<template>
	<view class="details">
		<view class="detop">
			<view class="headbox">
				<view class="head">林</view>
				<view class="flex1">
					<view class="headt">林振宇</view>
					<view class="headx">资料更新时间 | 2023年5月24日</view>
				</view>
			</view>
			<view class="tit">
				<image :src="titimg"></image>客户基本信息
			</view>
			<view class="txt">身份证号：<text>34282419730618003X</text></view>
			<view class="txt">证件有效期：<text>2017.12.27 - 2037.12.27</text></view>
			<view class="txt">居住地址：<text>安徽省安庆市潜山市梅城镇</text></view>
			<view class="txt">手机号码：<text>18705568888</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" 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 {uploadmore} from '@/utils/common.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:[{tit:'123'}],
				qylist:[{tit:123},{tit:123},],
				sdjllist:[{tit:123}],
				zheList:[{zheflag:true},{zheflag:true},{zheflag:true},{zheflag:true}],
				type:'qy',
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt:'',
			}
		},
		methods:{
			checkPermi, checkRole,
			getDetail(){
				this.$tab.navigateTo("/work/pages/business/details")
			},
			getZheFn(idx){
				this.zheList[idx].zheflag=!this.zheList[idx].zheflag
			},
		}
	}
</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>