special/pages/subpack/pages/application/info.vue

<template>
	<view>
		<u-navbar class="u-navbar-box" :title="handleTitle" placeholder bgColor="transparent" autoBack />
		<!-- 小程序不支持动态表单 -->
		<!-- <view>
			<component :is="currentComponent"></component>
		</view> -->
		<!-- 加载组件 -->
		<view>
			<Page1 class="page1" :item="appItem" v-if="judgePageIsShow('page2')" />
			<Page2 class="page2" :item="appItem" v-if="judgePageIsShow('page1')" />
			<Page3 class="page3" :item="appItem" v-if="judgePageIsShow('page3')" />
			<Page4 class="page4" :item="appItem" v-if="judgePageIsShow('page4')" />
		</view>
		<u-tabbar :value="tabbarKey" v-if="judgeTabbarIsShow('tabbar')" @change="tabbarChange" :zIndex="9" fixed
			placeholder safeAre aInsetBottom>
			<u-tabbar-item name="page1" text="基本信息" icon="file-text-fill" />
			<u-tabbar-item name="page4" text="护理打卡" icon="chrome-circle-fill" v-if="judgeTabbarIsShow('page4')" />
			<u-tabbar-item name="page2" text="特困审批" v-if="judgeTabbarIsShow('page2')" icon="chrome-circle-fill" />
			<u-tabbar-item name="page3" text="申请进度" v-if="judgeTabbarIsShow('page3')" icon="hourglass-half-fill" />
		</u-tabbar>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		getCurrentInstance
	} from 'vue';
	import Page1 from './componenets/page1.vue';
	import Page2 from './componenets/page2.vue';
	import Page3 from './componenets/page3.vue';
	import Page4 from './componenets/page4.vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getCareInfo
	} from '@/common/config/application-api.js'
	const {
		proxy
	} = getCurrentInstance();
	const id = ref(0);
	const tabbarKey = ref('page1');
	const appItem = ref({})

	function tabbarChange(key) {
		console.log('key', key);
		if (key === tabbarKey.value) return;
		tabbarKey.value = key;
	}
	const handleTitle = computed(() => {
		if (tabbarKey.value === 'page2') return '特困审批';
		else if (tabbarKey.value === 'page1') return '基本信息';
		else if (tabbarKey.value === 'page3') return '申请进度';
		else if (tabbarKey.value === 'page4') return '护理打卡';
		return '特困表单';
	})
	const roleAuthStatus = {
		village: ['no_check'],
		area: ['wait_assign_company', 'wait_check'],
		nurse: ['assigned'],
		company: ['wait_assign_nurse'],
	}

	function judgePageIsShow(pageName = 'page1') {
		let status = appItem.value.status;
		let dealStatus = appItem.value.dealStatus;
		let roles = proxy.vuex_user.roles;
		let judgeBool = true;
		let roleAuthArray = [];
		roles.map(role => {
			if (roleAuthStatus.hasOwnProperty(role)) roleAuthArray.push(...roleAuthStatus[role]);
		})
		//审批页面只能区民政、公司看到
		if (pageName === 'page2') {
			if (dealStatus == 'complete') judgeBool = false;
			else if (roles.includes('village')) judgeBool = false;
			else if (!roleAuthArray.includes(status)) judgeBool = false;
			else if (roles.includes('nurse')) judgeBool = false;
			//流程记录页面只有除了护理人员之外的人看到	
		} else if (pageName === 'page3') {
			if (roles.includes('nurse')) judgeBool = false;
		} else if (pageName === 'page4') {
			if (!roles.includes('nurse')) judgeBool = false;
		}
		return judgeBool && tabbarKey.value == pageName;
	}
	//tabbar page1 page2 page3
	function judgeTabbarIsShow(pageName = 'page1') {
		let status = appItem.value.status;
		let dealStatus = appItem.value.dealStatus;
		let roles = proxy.vuex_user.roles;
		let roleAuthArray = [];
		roles.map(role => {
			if (roleAuthStatus.hasOwnProperty(role)) roleAuthArray.push(...roleAuthStatus[role]);
		})
		//当只有一个tabbar的时候 比如未审核的时候
		if (pageName === 'tabbar' && status == 'no_check') return false;
		if (pageName === 'page2') {
			if (dealStatus == 'complete') return false;
			else if (roles.includes('village')) return false;
			else if (!roleAuthArray.includes(status)) return false;
			else if (roles.includes('nurse')) return false;
		} else if (pageName === 'page3') {
			if (roles.includes('nurse')) return false;
		} else if (pageName === 'page4') {
			if (!roles.includes('nurse')) return false;
		}
		return true;
	}

	function initData() {
		getCareInfo({
			id: id.value
		}).then(res => {
			appItem.value = res;
			// console.log('getCareInfo=>', res);
		})
	}
	onLoad((params) => {
		if (params.id) {
			id.value = params.id;
			// initData();
		}
	})
	onShow(() => {
		initData();
	})
</script>
<style>
	page {
		background-color: #F6FAFF;
	}
</style>
<style lang="scss" scoped>
	::v-deep {
		.u-navbar__content__title {
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
		}

		.u-navbar__content,
		.u-status-bar {
			background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
		}

		.u-tabbar-item__text {
			font-size: 30rpx;
		}

		.u-tabbar-item__icon {
			.u-icon__icon {
				font-size: 50rpx !important;
			}
		}

		.u-textarea {
			background-color: rgba(245, 248, 252, 1) !important;
			border: none;
		}

		.u-textarea__count {
			background-color: transparent !important;
		}

		.u-steps-item {
			padding-bottom: 50rpx;
		}

		.u-steps-item__line {
			background: repeating-linear-gradient(to bottom,
					#207DFF 0,
					#207DFF 2rpx,
					transparent 4rpx,
					transparent 8rpx) !important;
		}

		.u-steps-item__content {
			margin-top: 0 !important;
			margin-left: 30rpx !important;

			.u-text__value {
				font-size: 32rpx !important;
				color: #222222 !important;
			}
		}

		.up-icon {
			padding: 10rpx;
			border-radius: 5rpx;
			border: 1px dashed rgba(0, 0, 0, 0.6);
			width: 50rpx;
			height: 50rpx;
			justify-content: center;
		}
	}

	.page1 {

		// background-color: red;
		:deep {
			.u-form-item__body {
				background-color: #fff;
				border-radius: 5rpx;
				padding: 10rpx;
				margin-bottom: 20rpx;
			}

			.u-form-item__body__right__content {
				margin-top: 10rpx;
				background-color: #fff;
				border-radius: 5rpx;
				padding: 0 24rpx;
			}

			.u-form-item__body__left__content__label {
				font-weight: 550;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.85);
				padding-left: 24rpx;
			}

			.u-form-item__body__left__content__required {
				left: 0;
			}

			.u-textarea {
				background-color: #fff !important;
				border: none;
				padding: 0;
			}
		}
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>