ykz-wx/pages/index/CfContent.vue

<template>
	<view class="cf-content">
		<pub-loading-view :loaded="loaded" height="100%">
			<view class="cf-content-section" v-if="recipeContent">
				<view class="cf-content-title">{{recipeContent.hosName}}</view>
				<view class="cf-content-info">
					<view class="cf-content-info-left">
						<view>患者</view>
						<view>{{recipeContent.name}}</view>
						<view>{{recipeContent.sex}}</view>
						<view>{{recipeContent.age}}</view>
					</view>
					<view class="cf-content-info-right">
						<view>处方号</view>
						<view>{{recipeContent.cfNo}}</view>
					</view>
				</view>
				<view class="cf-content-list">
					<view class="cf-content-item" v-for="item in recipeContent.list" :key="item">
						<view>{{item.ypmc}}</view>
						<view>{{ item.jl+item.ypdw }}</view>
					</view>
				</view>
				<view class="cf-content-total">
					<view>{{recipeContent.ts}}</view>
					<view>{{recipeContent.fs}}</view>
					<view>{{recipeContent.kd}}</view>
				</view>
				<view class="cf-content-doctor">
					<view class="cf-content-doctor-left">
						<view>医生：</view>
						<view>{{recipeContent.doctor}}</view>
					</view>
					<view>{{recipeContent.date}}</view>
				</view>
				<view class="cf-content-note">{{recipeContent.note}}</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'
	import rest from '@/stores/rest'
	import { RecipeContentVO } from '../../lib/type'
	
	import { 
		getSexByCardNo,
		getAgeByCardNo,
		formatDate,
		DictLabelFYFSYF,
		DictLabelFYFSLX,
		maskName,
		} from '@/lib/util'

	defineProps({
		info: {
			type: Object as PropType<any>,
			default: () => ({}),
		},
	})

	const loaded = ref(false)
	const recipeContent = ref({
		hosName: '',
		name: '',
		sex: '',
		age: '',
		cfNo: '',
		list: [],
		ts: '',
		fs: '',
		kd: '',
		doctor: '',
		date: '',
		note: '根据卫生部《处方管理办法》规定，处方当日有效除药品质量原因外，药品一经发出，不得退换',
	})

	const getInfo = async () => {
		loaded.value = true
		try {
			const res = await rest.get('/app-api/bmfw/findCfYp', { ptwybh: '2024_1857595040975118338' }) as RecipeContentVO
			
			recipeContent.value = {
				hosName: res.yljgmc,
				name: res.patient.hzxm,
				sex: getSexByCardNo(res.patient.zjhm),
				age: `${getAgeByCardNo(res.patient.zjhm)}岁`,
				cfNo: `#${res.yncfbh}`,
				list: res.detail,
				ts: `${res.cfts}贴`,
				fs: DictLabelFYFSYF(res.fyfsyf),
				kd: DictLabelFYFSLX(res.fyfslx),
				doctor: maskName(res.doctor.nickname),
				date: formatDate(res.createTime, '{y}-{m}-{d} {h}:{i}'),
				note: '根据卫生部《处方管理办法》规定，处方当日有效除药品质量原因外，药品一经发出，不得退换'
			}
			
		} catch (e) {
			console.log(e)
		} finally {
			loaded.value = false
		}
	}

	onMounted(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.cf-content {
		background: #fff;
		padding: $uni-spacing-col-s3 $page-row-spacing;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		text-align: center;

		.cf-content-title {
			font-size: $uni-font-size-xl;
			line-height: $uni-line-height-xl;
			font-weight: 600;
		}

		.cf-content-info {
			@include flex-between;
			border-bottom: 1px dashed $uni-border-color;
			padding: 32rpx 24rpx;

			.cf-content-info-left,
			.cf-content-info-right {
				@include flex;

				>view {
					&+view {
						margin-left: 16rpx;
					}
				}
			}
		}

		.cf-content-list {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 16rpx 20rpx;

			.cf-content-item {
				font-size: $uni-font-size-base;
				line-height: $uni-line-height-base;
				font-weight: 600;
				margin: 20rpx 8rpx;
				width: calc((100% - 48rpx)/3);
				text-align: left;
				display: flex;
				>view {
					&+view {
						margin-left: 8rpx;
					}
				}
			}
		}

		.cf-content-total {
			@include flex;
			padding: 0 24rpx 40rpx;
			border-bottom: 1px dashed $uni-border-color;
			color: $uni-text-color-grey;

			>view {
				&+view {
					margin-left: 32rpx;
				}
			}
		}

		.cf-content-doctor {
			// color: $uni-text-color-light;
			padding: 16rpx 24rpx 40rpx;
			@include flex-between;

			.cf-content-doctor-left {
				@include flex;
			}
		}

		.cf-content-note {
			color: $uni-text-color-light;
			padding: 0 24rpx 32rpx;
			text-align: left;
			font-size: $uni-font-size-sm;
			line-height: $uni-line-height-sm;
		}
	}
</style>