处方单的信息脱敏展示

pages/index/TopCard.vue

@@ -3,7 +3,7 @@
 		<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">&#xe8bf;</text></view>
+				<view class="card-top-right-name">{{info.name}}<text class="iconfont" @click="onClick">{{ showIcon ? '&#xe8bf;' : '&#xe901;' }}</text></view>
 				<view>{{info.addr}}<text class="iconfont">&#xe602;</text></view>
 				<view class="card-top-right-sex">{{info.sex}} | {{info.text}}</view>
 			</view>
@@ -21,13 +21,20 @@
 	</view>
 </template>
 <script lang="ts" setup>
-	import { PropType } from 'vue'
+	import { PropType, ref } from 'vue'
+	
+	const emit = defineEmits(['update'])
 	defineProps({
 		info: {
 			type: Object as PropType<any>,
 			default: () => ({}),
 		},
 	})
+	const showIcon = ref(false)
+	const onClick = ()=> {
+		showIcon.value = !showIcon.value
+		emit('update',showIcon.value)
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -60,6 +67,12 @@
 				.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 {

pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="home">
-		<TopCard :info="info" />
+		<TopCard :info="info" @update="onUpdate" />
 		<!-- tab导航栏 -->
 		<view class="tabs">
 			<view v-for="(item, index) in navList" :key="index" class="tab" :class="{'is-active': tabCurId === item.id}"
@@ -33,19 +33,24 @@
 	import {
 		getSexByCardNo,
 		maskCardNo,
-	} from '@/lib/util'
-
+		maskName,
+		} from '@/lib/util'
+	
 
 	const topCardRef = ref()
-	const info = ref({
-		name: '陈*丽',
-		addr: '成都市大竹林街道*************',
-		sex: '女',
+	const originalInfo = ref({
+		name: '',
+		address: '',
+		addressDetails:'',
+		addr: '',
+		sex: '',
 		text: '近三个月就诊记录',
-		idCard: '************** 9253',
-		date: '2024-04-22'
+		idCard: '',
+		date: ''
 	})
-	const tabCurId = ref(3)//当前tab选中Id
+	const info = ref({ ...originalInfo.value})
+	
+	const tabCurId = ref(2)//当前tab选中Id
 	// const loaded = ref(false)
 	// const status = ref('loading')
 	// const loadText = ref('数据加载中...')
@@ -85,43 +90,56 @@
 		let _inx = e.detail.current;
 		tabClick(_inx);
 	}
-
+	
 	const dataList = ref({
 		hzsfzh: '510224196901293189',
 		hzxm: '刘秀碧',
 	})
 	const cfDataList = ref([]) // 处方列表
-
+	
 	// 地址信息拼接
-	const addressInfSplice = (basic : string, details : string, isShow) => {
-		if (isShow) {
-			return basic + details;
-		} else {
-			return basic + '*'.repeat(details.length);
-		}
+	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
+		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 })
+		let addressInfo = await rest.get('/default/consignee-info/list',{hzid:dataList.value.hzsfzh})
 		console.log("地址信息", addressInfo)
-		info.value.name = basicInfo[0].hzxm
-		if (basicInfo.cfListDtos && basicInfo.cfListDtos.length > 0) {
-			info.value.date = basicInfo.cfListDtos[0].kfrq;
+		   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 || ''
 		}
-		info.value.idCard = maskCardNo(basicInfo[0].hzsfzh)
-		info.value.sex = getSexByCardNo(basicInfo[0].hzsfzh)
+
+
 		if (Array.isArray(addressInfo) && addressInfo.length > 0) {
-			let address = (addressInfo[0].province || '') + (addressInfo[0].city || '') + (addressInfo[0].area || '')
-			info.value.addr = addressInfSplice(address, addressInfo[0].shrdzxxdz, false)
-		} else {
-			info.value.addr = ''
+		    const firstAddressInfo = addressInfo[0]
+		    originalInfo.value.address = `${firstAddressInfo.province || ''}${firstAddressInfo.city || ''}${firstAddressInfo.area || ''}`
+			originalInfo.value.addressDetails = firstAddressInfo.shrdzxxdz
 		}
-		cfDataList.value = basicInfo[0].cfListDtos
+		cfDataList.value = basicInfo[0]?.cfListDtos || []
 		console.log("处方列表", cfDataList.value)
+		onUpdate(false)
+	}
+
+	const onUpdate = (isMasked: boolean) => {
+	    info.value.name = isMasked ? maskName(originalInfo.value.name) : originalInfo.value.name
+	    info.value.addr = addressInfSplice(originalInfo.value.address, originalInfo.value.addressDetails, !isMasked)
+	    info.value.idCard = isMasked ? maskCardNo(originalInfo.value.idCard) : originalInfo.value.idCard
+	    info.value.sex = getSexByCardNo(originalInfo.value.idCard)
+	    info.value.date = originalInfo.value.date
+
+	    console.log("onUpdate", info.value)
 	}
 
 	onMounted(() => {