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 v-if="'no_check,disagree'.includes(item.status)">
			<view class="btn-box-place"></view>
			<view class="btn-box flex-row" :class="{'btn-box-disagree': item.status == 'disagree'}">
				<view class="u-flex flex-column align-center justify-center" style="width: 120rpx;" @tap="editTap">
					<u-icon name="file-text-fill" color="#909399" size="24" />
					<view style="font-size: 28rpx;color: 909399;">编辑</view>
				</view>
				<view class="u-flex flex-column align-center justify-center" style="width: 120rpx;margin-left: 20rpx;"
					@tap="delTap">
					<u-icon name="trash-fill" color="#909399" size="24" />
					<view style="font-size: 28rpx;color: 909399;">删除</view>
				</view>
				<view style="width: 20rpx;"></view>
				<up-button class="up-button" type="primary" @tap="applyTap">提交审核</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		getDict
	} from '@/common/status/index.js'
	import {delCareApp, postCareStart} from '@/common/config/application-api.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({
						dictValue: value,
						dictType: 'sys_user_sex'
					}).dictLabel ?? '-';
				}
				keyObj.value = value;
			}
		})
		return itemArray;
	})

	//编辑按钮
	function editTap() {
		uni.$u.route('/pages/subpack/pages/apply/apply', {
			id: props.item.applyId
		})
	}
	//删除按钮
	function delTap() {
		uni.showModal({
			title: '提示',
			content: '您确定删除吗？',
			success(res) {
				if (res.confirm) {
					delCareApp({id: props.item.applyId}).then(res=>{
						uni.$u.toast('删除成功');
						uni.$emit('renderApplyList');
						setTimeout(()=>{
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
						
					})
				}
			}
		})
	}
	//审核按钮
	function applyTap() {
		uni.showModal({
			title: '提示',
			content: '您确定提交审核吗？',
			success(res) {
				if (res.confirm) {
					postCareStart({...props.item}).then(res=>{
						uni.$u.toast('送审成功');
						uni.$emit('renderApplyList');
						setTimeout(()=>{
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.u-button--normal) {
		font-size: 28rpx !important;
	}

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

	.btn-box-place {
		height: 130rpx;
	}

	.btn-box {
		padding: 20rpx 36rpx;
		background-color: #fff;
		position: fixed;
		height: 120rpx;
		display: flex;
		align-items: center;
		bottom: 0;
		width: 690rpx;
		z-index: 999999;
	}
	.btn-box-disagree{
		bottom: calc(50px + var(--status-bar-height));
	}
</style>