menber-center/pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei.vue

<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="idNumber"><u-input v-model="formData.form.idNumber" :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, // 姓名
			idNumber: null, // 证件号码
		},
		rules: {
			name: [
				{ 
					required: true, 
					message: '请输入缴交对象姓名', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
			idNumber: [
				{ 
					required: true, 
					message: '请输入缴交对象的身份证号/手机号/业务水平认证证书编号', 
					// 可以单个或者同时写两个触发验证方式 
					trigger: 'blur',
				}
			],
		}
	})
	
	function onSubmit() {
		formRef.value.validate((valid) => {
			if (valid) {
				// 查询到的ID
				const id = '1'
				uni.navigateTo({
					url: `/pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo?id=${id}`
				})
			}
		})
	}
	
	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>