feat(application): 特困审批页面样式调整

- 为 Page1、Page2、Page3 组件添加 class 属性
- 更新 tabbar 图标
- 调整页面背景色
- 优化特困审批页面布局和样式- 添加审批流程相关组件

pages.json

@@ -31,6 +31,12 @@
 			}
 		}
 	],
+	"preloadRule": {
+		"pages/tabbar/application/application": {
+			"network": "all",
+			"packages": ["pages/subpack"]
+		}
+	},
 	"subPackages": [{
 		"root": "pages/subpack",
 		"pages": [{
@@ -67,6 +73,13 @@
 					"navigationStyle": "custom",
 					"navigationBarTitleText": "申请详情-流程相关"
 				}
+			},
+			{
+				"path": "pages/application/choose",
+				"style": {
+					"navigationStyle": "custom",
+					"navigationBarTitleText": "选择护理公司/人员"
+				}
 			}
 		]
 	}],

pages/subpack/pages/application/componenets/page1.vue

@@ -1,12 +1,78 @@
 <template>
-	<view>
-		
+	<view class="page1-warp">
+		<up-form labelPosition="top" :model="formData" ref="formRef">
+			<up-form-item label="指派任务" labelWidth="auto" required>
+				<view class="flex-row justify-between align-center" style="width: 100%;">
+					<!-- <view>
+						<view class="">护理公司</view>
+						<view>请选择护理公司</view>
+					</view> -->
+					<view>
+						<view class="flow-tips">护理人员</view>
+						<view class="flow-tips-content">请选择护理人员</view>
+					</view>
+					<up-icon size="28" class="up-icon" name="plus" @tap="goToChoosePage" />
+				</view>
+			</up-form-item>
+			<up-form-item label="护理拍照" labelWidth="auto" required>
+				<view class="flex-row justify-between align-center" style="width: 100%;">
+					<u-upload :sizeType="['compressed']" :capture="['camera']"/>
+				</view>
+			</up-form-item>
+			<up-form-item label="审批意见" labelWidth="auto" required>
+				<up-textarea v-model="formData.remark" placeholder="请输入您的审批意见" count />
+			</up-form-item>
+		</up-form>
+		<view class="flex-row btn-box">
+			<up-button class="up-button" type="error" style="width: 250rpx;">‌退回</up-button>
+			<view class="btn-place"></view>
+			<up-button class="up-button" type="primary">通过</up-button>
+		</view>
 	</view>
 </template>
 
 <script setup>
-	
+	import {
+		ref,
+		reactive
+	} from 'vue';
+
+	// 使用 ref 创建响应式引用  
+	const formRef = ref(null);
+	const formData = reactive({
+		remark: ''
+	})
+
+	function goToChoosePage() {
+		uni.$u.route('/pages/subpack/pages/application/choose')
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.page1-warp {
+		padding: 24rpx 0;
+	}
+
+	.flow-tips {
+		font-size: 30rpx;
+		color: #222222;
+	}
+
+	.flow-tips-content {
+		font-size: 24rpx;
+		margin-top: 4rpx;
+		color: rgba(34, 34, 34, .3);
+	}
+
+	.btn-box {
+		padding: 20rpx 36rpx;
+		background-color: #fff;
+		position: fixed;
+		bottom: calc(50px + var(--status-bar-height) + 20rpx);
+		width: 690rpx;
+
+		.btn-place {
+			width: 100rpx;
+		}
+	}
 </style>

pages/subpack/pages/application/info.vue

@@ -7,14 +7,14 @@
 		</view> -->
 		<!-- 加载组件 -->
 		<view>
-			<Page1 v-show="tabbarIndex === 0" />
-			<Page2 v-show="tabbarIndex === 1" />
-			<Page3 v-show="tabbarIndex === 2" />
+			<Page1 class="page1" v-show="tabbarIndex === 0" />
+			<Page2 class="page2" v-show="tabbarIndex === 1" />
+			<Page3 class="page3" v-show="tabbarIndex === 2" />
 		</view>
 		<up-tabbar :value="tabbarIndex" @change="tabbarChange" fixed placeholder safeAreaInsetBottom>
-			<up-tabbar-item text="特困审批" icon="home" />
-			<up-tabbar-item text="基本信息" icon="home" />
-			<up-tabbar-item text="申请进度" icon="home" />
+			<up-tabbar-item text="特困审批" icon="chrome-circle-fill" />
+			<up-tabbar-item text="基本信息" icon="file-text-fill" />
+			<up-tabbar-item text="申请进度" icon="hourglass-half-fill" />
 		</up-tabbar>
 	</view>
 </template>
@@ -28,8 +28,7 @@
 	import Page1 from './componenets/page1.vue';
 	import Page2 from './componenets/page2.vue';
 	import Page3 from './componenets/page3.vue';
-	// 假设 Page1 和 Page2 已经通过某种方式导入或全局注册
-	// const components = ref([Page1, Page2);
+	
 	// 计算属性来确定要渲染的组件名称
 	// const pages = [Page1, Page2, Page3];
 	// const currentComponent = computed(() => pages[tabbarIndex.value]);
@@ -48,7 +47,7 @@
 </script>
 <style>
 	page {
-		background-color: #F6F8FD;
+		background-color: #F6FAFF;
 	}
 </style>
 <style lang="scss" scoped>
@@ -86,7 +85,46 @@
 				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%);
 	}