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="dataList">
				<view class="cf-content-title">{{dataList.hosName}}</view>
				<view class="cf-content-info">
					<view class="cf-content-info-left">
						<view>患者</view>
						<view>{{dataList.name}}</view>
						<view>{{dataList.sex}}</view>
						<view>{{dataList.age}}</view>
					</view>
					<view class="cf-content-info-right">
						<view>处方号</view>
						<view>{{dataList.cfNo}}</view>
					</view>
				</view>
				<view class="cf-content-list">
					<view class="cf-content-item" v-for="item in dataList.list" :key="item">
						<view>{{item.ypmc}}</view>
						<view>{{ item.jl+item.ypdw }}</view>
					</view>
				</view>
				<view class="cf-content-total">
					<view>{{dataList.ts}}</view>
					<view>{{dataList.fs}}</view>
					<view>{{dataList.kd}}</view>
				</view>
				<view class="cf-content-doctor">
					<view class="cf-content-doctor-left">
						<view>医生：</view>
						<view>{{dataList.doctor}}</view>
					</view>
					<view>{{dataList.date}}</view>
				</view>
				<view class="cf-content-note">{{dataList.note}}</view>
			</view>
		</pub-loading-view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, PropType } from 'vue'
	
	const props = defineProps({
		dataList: {
			type: Object as PropType<any>,
			default: () => ({})
		},
	})
	const loaded = ref(false)
	
</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>