展开代缴个人会费页面设计

pages.json

@@ -285,6 +285,17 @@
 					"titleNView": true
 				}
 			}
+		},
+		{
+			"path" : "pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei",
+			"style" : 
+			{
+				"navigationBarTitleText" : "代缴个人会费",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="container">
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="120" :label-style="{fontWeight: 'bold', fontSize: '26rpx'}">
+				<u-form-item label="姓名" prop="name"><u-input v-model="formData.form.name" :border="true"  type="text" placeholder="请输入缴交对象姓名"/></u-form-item>
+				<u-form-item label="证件号码" prop="number"><u-input v-model="formData.form.number" :border="true" type="text" placeholder="请输入缴交对象的身份证号/手机号/业务水平认证证书编号"/></u-form-item>
+			</u-form>
+		</view>
+		<view class="bottom-box">
+			<u-button type="primary" shape="circle" @click="onSubmit">查询</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, reactive } from 'vue'
+	import { onLoad, onReady } from '@dcloudio/uni-app'
+	
+	const formRef = ref()
+	const formData = reactive({
+		form: {
+			name: null, // 姓名
+			number: null, // 证件号码
+		},
+		rules: {
+			name: [
+				{ 
+					required: true, 
+					message: '请输入缴交对象姓名', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			number: [
+				{ 
+					required: true, 
+					message: '请输入缴交对象的身份证号/手机号/业务水平认证证书编号', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+		}
+	})
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+			}
+		})
+	}
+	
+	onReady(() => {
+		formRef.value.setRules(formData.rules)
+	})
+	
+	onLoad(() => {
+		console.log('onLoad')
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		
+		.form-box {
+			padding: 20rpx 0;
+		}
+		.bottom-box {
+			margin-top: 100rpx;
+			padding: 0 50rpx;
+		}
+	}
+</style>

pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

@@ -57,10 +57,10 @@
 		</view>
 		<view class="buttom-block"></view>
 		<view class="bottom-box">
-			<view class="button">
+			<view class="button" @click="onDaiJiaoGeRenHuiFei()">
 				代缴个人会费
 			</view>
-			<view class="button">
+			<view class="button" @click="onDaiJiaoDanWeiHuiFei()">
 				代缴单位会费
 			</view>
 		</view>
@@ -128,6 +128,12 @@
 			url: `/pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao?id=${val.id}`
 		})
 	}
+	function onDaiJiaoGeRenHuiFei() {
+		uni.navigateTo({
+			url: '/pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei'
+		})
+	}
+	function onDaiJiaoDanWeiHuiFei() {}
 	
 	onLoad(() => {
 		console.log('onLoad')