ykz-wx/pages/index/TopCard.vue

<template>
	<view class="top-card" v-if="info">
		<view class="card-top">
			<image mode="heightFix" src="/static/image/head.png" />
			<view class="card-top-right">
				<view class="card-top-right-name">{{info.name}}<text class="iconfont" @click="onClick">{{ showIcon ? '&#xe8bf;' : '&#xe901;' }}</text></view>
				<view>{{info.addr}}<text class="iconfont">&#xe6ae;</text></view>
				<view class="card-top-right-sex">{{info.sex}} | {{info.text}}</view>
			</view>
		</view>
		<view class="card-bottom">
			<view>
				<view class="label">证件号码</view>
				<view>{{info.idCard}}</view>
			</view>
			<view class="second">
				<view class="label">最近就诊</view>
				<view>{{info.date}}</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import rest from '@/stores/rest'
	import {
		getSexByCardNo,
		maskCardNo,
		maskName,
		} from '@/lib/util'
	
	
	const showIcon = ref(false)
	const originalInfo = ref({
		name: '',
		address: '',
		addressDetails:'',
		addr: '',
		sex: '',
		text: '近三个月就诊记录',
		idCard: '',
		date: ''
	})
	const info = ref({ ...originalInfo.value})
	const dataList = ref({
		hzsfzh: '510224196901293189',
		hzxm: '刘秀碧',
	})
	
	const onClick = ()=> {
		showIcon.value = !showIcon.value
		onUpdate(showIcon.value)
	}
	
	
	// 地址信息拼接
	const addressInfSplice = (basic:string, details:string, isShow) => {
	    if (isShow) {
	        return basic + details;
	    } else {
	        return basic + '*'.repeat(details.length);
	    }
	}
	
	const getInfo = async () => {
		// todo 基础信息
		let basicInfo = await rest.get('/app-api/bmfw/findList',dataList.value) as BasicInfoVO
		console.log("基础信息", basicInfo)
		// todo 地址信息
		let addressInfo = await rest.get('/default/consignee-info/list',{hzid:dataList.value.hzsfzh})
		console.log("地址信息", addressInfo)
		   if (Array.isArray(basicInfo) && basicInfo.length > 0) {
			const firstBasicInfo = basicInfo[0]
			originalInfo.value.name = firstBasicInfo.hzxm
			originalInfo.value.sex = getSexByCardNo(firstBasicInfo.hzsfzh)
			originalInfo.value.idCard = firstBasicInfo.hzsfzh
			originalInfo.value.date = firstBasicInfo.cfListDtos?.[0]?.kfrq || ''
		}
	
	
		if (Array.isArray(addressInfo) && addressInfo.length > 0) {
		    const firstAddressInfo = addressInfo[0]
		    originalInfo.value.address = `${firstAddressInfo.province || ''}${firstAddressInfo.city || ''}${firstAddressInfo.area || ''}`
			originalInfo.value.addressDetails = firstAddressInfo.shrdzxxdz
		}
		onUpdate(false)
	}
	
	const onUpdate = (isMasked: boolean) => {
	    Object.assign(info.value, {
	        name: isMasked ? maskName(originalInfo.value.name) : originalInfo.value.name,
	        addr: addressInfSplice(originalInfo.value.address, originalInfo.value.addressDetails, !isMasked),
	        idCard: isMasked ? maskCardNo(originalInfo.value.idCard) : originalInfo.value.idCard,
	        sex: getSexByCardNo(originalInfo.value.idCard),
	        date: originalInfo.value.date
	    })
	}
	
	onMounted(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.top-card {
		border-radius: 0px 0px $uni-spacing-row-s2 $uni-spacing-row-s2;
		background: $uni-color-primary;
		padding: $uni-spacing-col-s2 $page-row-spacing $uni-spacing-col-s4;
		border: 1px solid $uni-border-color;

		.card-top {
			@include flex;
			margin-bottom: $uni-spacing-col-s4;
			color: #fff;

			image {
				width: 140rpx;
				height: 140rpx;
				display: block;
				margin-right: $uni-spacing-row-s4;
			}

			.card-top-right {
				flex: 1;
				line-height: $uni-line-height-base;

				.iconfont {
					margin-left: 8rpx;
				}

				.card-top-right-name {
					font-size: $uni-font-size-xxxl;
					line-height: $uni-line-height-xxxl;
					display: flex;
					align-items: center;
					.iconfont {
						line-height: $uni-line-height-xxxl;
						font-size: 32rpx;
					}
				}

				.card-top-right-sex {
					font-size: $uni-font-size-sm;
					line-height: $uni-line-height-sm;
				}
			}
		}

		.card-bottom {
			background-color: #fff;
			color: $uni-text-color;
			border-radius: $uni-spacing-row-s2;
			padding: $uni-spacing-row-s4;
			line-height: $uni-line-height-base;
			@include flex;

			>view {
				flex: 1;
				@include flex;
				flex-direction: column;
			}

			.label {
				color: $uni-text-color-grey;
				margin-bottom: 24rpx;
			}

			.second {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					background: $uni-border-color;
					width: 1px;
					height: 80rpx;
					-webkit-transform: scaleX(0.5);
					transform: scaleX(0.5);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
				}
			}
		}
	}
</style>