ykz-wx/pages/index/TopCard.vue

<template>
	<view class="top-card">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="card-top" v-if="info">
				<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" @click="jumpAddress">&#xe6ae;</text></view>
					<view class="card-top-right-sex">{{info.sex}} | {{info.text}}</view>
				</view>
			</view>
			<view class="card-bottom" v-if="info">
				<view>
					<view class="label">证件号码</view>
					<view>{{info.idCard}}</view>
				</view>
				<view class="second">
					<view class="label">最近就诊</view>
					<view>{{info.date}}</view>
				</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted, PropType } from 'vue'
	import rest from '@/stores/rest'
	import { aesEncrypt, aesDecrypt } from "@/lib/encryption";
	import * as link from '@/lib/link'
	import {
		formatDate,
		getSexByCardNo,
		maskCardNo,
		maskName,
	} from '@/lib/util'
	import { BasicInfoVO } from '../../lib/type';
	
	const props = defineProps({
		data: {
			type: Object as PropType<any>,
			default: () => ({})
		},
	})


	const showIcon = ref(false)
	const originalInfo = ref({
		name: '',
		address: '',
		addressDetails: '',
		addr: '',
		sex: '',
		text: '近三个月就诊记录',
		idCard: '',
		date: ''
	})
	const info = ref({ ...originalInfo.value })
	const dataList = ref({
		hzsfzh: '',
		hzxm: '',
	})
	const loaded = ref(false)

	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 () => {
		loaded.value = true
		let basicInfo = await rest.get('/app-api/bmfw/findList', { zjhm: dataList.value.hzsfzh }) as BasicInfoVO
		let addressInfo = await rest.get('/default/consignee-info/list', { hzid: dataList.value.hzsfzh }) as BasicInfoVO
		loaded.value = false
		if (Array.isArray(basicInfo.list) && basicInfo.list.length > 0) {
			const firstBasicInfo = basicInfo.list[0]
			originalInfo.value.name = dataList.value.hzxm
			originalInfo.value.sex = getSexByCardNo(dataList.value.hzsfzh)
			originalInfo.value.idCard = dataList.value.hzsfzh
			originalInfo.value.date = formatDate(firstBasicInfo.kfrq, '{y}-{m}-{d}')
		}


		if (Array.isArray(addressInfo.list) && addressInfo.list.length > 0) {
			const firstAddressInfo = addressInfo.list[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
		})
	}

	const jumpAddress = () => {
		link.goAddressList(aesEncrypt(originalInfo.value.idCard))
	}

	onMounted(() => {
		dataList.value.hzxm = props.data.hzxm
		dataList.value.hzsfzh = props.data.zjhm
		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;
		min-height: 340rpx;

		.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-xxl;
					line-height: $uni-line-height-xxl;
					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;
				flex: 0.8;

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