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="info">
				<view class="cf-content-title">{{info.hosName}}</view>
				<view class="cf-content-info">
					<view class="cf-content-info-left">
						<view>患者</view>
						<view>{{info.name}}</view>
						<view>{{info.sex}}</view>
						<view>{{info.age}}</view>
					</view>
					<view class="cf-content-info-right">
						<view>处方号</view>
						<view>{{info.cfNo}}</view>
					</view>
				</view>
				<view class="cf-content-list">
					<view class="cf-content-item" v-for="item in info.list" :key="item">
						{{item}}
					</view>
				</view>
				<view class="cf-content-total">
					<view>{{info.ts}}</view>
					<view>{{info.fs}}</view>
					<view>{{info.kd}}</view>
				</view>
				<view class="cf-content-doctor">
					<view class="cf-content-doctor-left">
						<view>医生：</view>
						<view>{{info.doctor}}</view>
					</view>
					<view>{{info.date}}</view>
				</view>
				<view class="cf-content-note">{{info.note}}</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType, onMounted } from 'vue'

	const loaded = ref(false)

	const info = ref({
		hosName: '重庆两江新区中医院处方笺',
		name: '陈*丽',
		sex: '女',
		age: '54岁',
		cfNo: '#38660188162',
		list: [
			'熟附片 3g', '丹参 10g', '蜜炙甘草 10g', '大枣 10g', '海藻 10g', '焦南山楂 10g', '熟附片 3g', '丹参 10g', '蜜炙甘草 10g', '大枣 10g', '海藻 10g', '焦南山楂 10g', '焦南山楂 10g',
		],
		ts: '7贴',
		fs: '口服',
		kd: '代煎快递',
		doctor: '孙*山',
		date: '2024-04-22  09:05',
		note: '根据卫生部《处方管理办法》规定，处方当日有效除药品质量原因外，药品一经发出，不得退换',
	})

	const getInfo = async () => {
		loaded.value = true;
		// todo
		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;
			}
		}

		.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>