special/pages/subpack/pages/application/componenets/page2.vue

<template>
	<view>
		<view class="info-dot">护理申请</view>
		<view class="info-list">
			<view class="info-item" v-for="(item, index) in itemHandle" :key="index">
				<text class="info-item-label">{{item.name}}</text>
				<text class="info-item-content text-overflow">{{item.value??'-'}}</text>
			</view>
		</view>
		<view class="info-dot">护理需求</view>
		<view class="info-list">
			<view class="info-item flex-column" style="align-items: flex-start;">
				<view class="info-item-label">护理需求</view>
				<view class="info-item-content info-item-content2">
					<up-textarea v-model="item.careNeeds" disabled placeholder="-" count />
				</view>
			</view>
			<view class="info-item flex-column" style="align-items: flex-start;">
				<view class="info-item-label">备注</view>
				<view class="info-item-content info-item-content2">
					<up-textarea v-model="item.remark" disabled placeholder="-" count />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
			getDict
		} from '@/common/status/index.js'
	
	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})
	const objKeyValue = reactive([{
			name: '姓名',
			key: 'personName'
		},
		{
			name: '首选性别',
			key: 'nurseGender'
		},
		{
			name: '所在医院',
			key: 'hospital'
		},
		{
			name: '详细地址',
			key: 'address'
		},
		{
			name: '预计天数',
			key: 'careDays'
		},
		{
			name: '申请日期',
			key: 'applyDate'
		},
	])
	//中间层 - item和objKeyValue
	const itemHandle = computed(()=>{
		let itemArray = uni.$u.deepClone(objKeyValue);
		itemArray.map(keyObj=>{
			if(props.item.hasOwnProperty(keyObj.key)){
				let value = props.item[keyObj.key];
				if(keyObj.key === 'nurseGender'){
					value = getDict('sys_user_sex', {dictValue: value}).dictLabel??'-';
				}
				keyObj.value = value;
			}
		})
		return itemArray;
	})




</script>

<style lang="scss" scoped>
	.info-dot{
		position: relative;
		margin: 20rpx;
		padding-left: 20rpx;
		font-size: 36rpx;
		color: #0B0B0B;
	}
	.info-dot::before{
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		top: calc(50% - 6rpx);
		left: 0;
		background: #4794FF;
	}

	.info-list {
		margin: 24rpx !important;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.info-item {
		display: flex;
		align-items: center;

		&-label {
			font-size: 28rpx;
			color: #716D89;
			width: 160rpx;
			padding: 20rpx 0;
		}

		&-content {
			width: 590rpx;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1px solid rgba(136, 136, 136, 0.10);
			padding: 20rpx 0;
		}

		&-content2 {
			padding-top: 0 !important;
			width: 650rpx;
			border: none;
		}
	}

	.info-item:last-child {
		&-content {
			border-bottom: none;
		}
	}
</style>