pages.json

@@ -296,6 +296,39 @@
 					"titleNView": true
 				}
 			}
+		},
+		{
+			"path" : "pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo",
+			"style" : 
+			{
+				"navigationBarTitleText" : "查询结果",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
+		},
+		{
+			"path" : "pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei",
+			"style" : 
+			{
+				"navigationBarTitleText" : "代缴单位会费",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
+		},
+		{
+			"path" : "pages/daiJiaoDanWeiChaXunJieGuo/daiJiaoDanWeiChaXunJieGuo",
+			"style" : 
+			{
+				"navigationBarTitleText" : "单位会费缴交",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/daiJiaoDanWeiChaXunJieGuo/daiJiaoDanWeiChaXunJieGuo.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="container">
+		<view class="info-box">
+			<view class="info-item-box flex">
+				<view class="label">
+					机构名称
+				</view>
+				<view class="text">
+					{{ info.name }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					支付项目
+				</view>
+				<view class="text">
+					{{ info.payProject }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					类型
+				</view>
+				<view class="text">
+					{{ info.type }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					年份
+				</view>
+				<view class="text">
+					{{ info.year }}年
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					金额
+				</view>
+				<view class="text">
+					{{ info.price }}元
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					会籍有效期
+				</view>
+				<view class="text">
+					{{ info.periodOfValidity }}
+				</view>
+			</view>
+			<view class="info-item-box row">
+				<view class="label">
+					描述:
+				</view>
+				<view class="text" v-html="info.remark"></view>
+			</view>
+		</view>
+		<view class="bottom-box">
+			<u-button type="error" shape="circle" @click="onSubmit">支付</u-button>
+		</view>
+	</view>
+</template>
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const id = ref()
+	
+	const info = ref({
+		name: '某某某机构', // 机构名称
+		payProject: '2024年度普通会员单位会费', // 支付项目
+		type: '普通会员单位会费', // 类型
+		year: '2024', // 年份
+		price: '1000', // 金额
+		periodOfValidity: '2024.1.1-2024.12.31',
+		remark: '根据《协会章程》规定，会费标准如下:<br/>1、副会长单位:50000元/年;<br/>2、常务理事及理事单位:10000元/年;<br/>3、普通会员单位:1000元/年;单位会员会籍为每年1月1日至12月31日。<br/>会员可享受以下权利:<br/>1、协会的选举权、被选举权和表决权;<br/>2、优先参加协会组织开展的各类活动;<br/>3、获得协会服务的优先权;<br/>4、对协会工作的批评建议权和监督权;<br/>5、请求协会维护合法权益;<br/>6、入会自愿、退会自由。'
+	})
+	
+	function onSubmit() {
+		console.log('点击缴费');
+	}
+	
+	onLoad((load) => {
+		id.value = load.id
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 20rpx;
+		.info-box {
+			padding: 30rpx;
+			background-color: $uni-bg-color-grey;
+			border-radius: $uni-card-border-radius;
+			.info-item-box {
+				font-size: $uni-title-font-size-2;
+				border-bottom: 1rpx solid #E6E6E6;
+				height: 82rpx;
+				.label {
+					font-weight: bold;
+				}
+			}
+			.flex {
+				display: flex;
+				align-items: center;
+				.label {
+					width: 30%;
+				}
+				.text {
+					width: 70%;
+				}
+			}
+			.row {
+				.label {
+					line-height: 62rpx;
+				}
+				.text {
+					line-height: 42rpx;
+					font-size: $uni-title-font-size-3;
+					font-weight: bold;
+				}
+			}
+		}
+	
+		.bottom-box {
+			padding: 20rpx;
+			
+			position: absolute;
+			bottom: 50rpx;
+			width: 95%;
+		}
+	}
+</style>

pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="container">
+		<view class="form-box">
+			<u-form :model="formData.form" ref="formRef" label-width="160" :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-item label="缴费年限" prop="year"><u-input v-model="formData.form.year" :border="true" type="select" @click="showYear = true" placeholder="请选择缴费时间"/></u-form-item>
+			</u-form>
+		</view>
+		<u-select v-model="showYear" :list="yearList" @confirm="onYearConfirm"></u-select>
+		<view class="bottom-box">
+			<u-button type="error" 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, // 机构备案证号
+			year: null // 缴费年限
+		},
+		rules: {
+			name: [
+				{ 
+					required: true, 
+					message: '请输入缴交对象机构名称', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			number: [
+				{ 
+					required: true, 
+					message: '请输入缴交对象机构备案证号', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'blur',
+				}
+			],
+			year: [
+				{ 
+					required: true, 
+					message: '请输入缴费年限', 
+					// 可以单个或者同时写两个触发验证方式 
+					trigger: 'change',
+				}
+			],
+		}
+	})
+	const showYear = ref(false)
+	const yearList = ref([
+		{
+			value: '2025',
+			label: '2025'
+		},
+		{
+			value: '2024',
+			label: '2024'
+		}
+	])
+	function onYearConfirm(val) {
+		formData.form.year = val[0].value
+	}
+	
+	function onSubmit() {
+		formRef.value.validate((valid) => {
+			if (valid) {
+				// 查询到的ID
+				const id = '1'
+				uni.navigateTo({
+					url: `/pages/daiJiaoDanWeiChaXunJieGuo/daiJiaoDanWeiChaXunJieGuo?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>

pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo.vue

@@ -0,0 +1,139 @@
+<template>
+	<view class="container">
+		<view class="info-box">
+			<view class="info-item-box flex">
+				<view class="label">
+					姓名
+				</view>
+				<view class="text">
+					{{ info.name }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					证件号码
+				</view>
+				<view class="text">
+					{{ info.idNumber }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					业务水平认证证书编号
+				</view>
+				<view class="text">
+					{{ info.certificateNumber }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					信用信息卡号
+				</view>
+				<view class="text">
+					{{ info.creditCardNumber }}
+				</view>
+			</view>
+			<view class="info-item-box flex">
+				<view class="label">
+					缴费年份
+				</view>
+				<view class="text" @click="showYear = true">
+					{{ info.year }}（可拉下选中缴费时间）
+				</view>
+			</view>
+		</view>
+		<u-select v-model="showYear" :list="yearList" @confirm="onYearConfirm"></u-select>
+		<view class="bottom-box">
+			<u-button type="error" shape="circle" @click="onSubmit">点击缴费</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	
+	const id = ref()
+	
+	const info = ref({
+		name: 'xxxxxxxxxx', // 姓名
+		idNumber: 'xxxxxxxxxx', // 证件号码
+		tel: 'xxxxxxxxxx', // 手机号码
+		certificateNumber: 'xxxxxxxxxx', // 业务水平认证证书编号
+		creditCardNumber: 'xxxxxxxxxx', // 信用信息卡号
+		year: '2024',
+	})
+	
+	const showYear = ref(false)
+	const yearList = ref([
+		{
+			value: '2025',
+			label: '2025'
+		},
+		{
+			value: '2024',
+			label: '2024'
+		}
+	])
+	function onYearConfirm(val) {
+		info.value.year = val[0].value
+	}
+	
+	function onSubmit() {
+		console.log('点击缴费');
+	}
+	
+	onLoad((load) => {
+		id.value = load.id
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: $uni-bg-color;
+		padding: 0 20rpx;
+		.info-box {
+			padding: 30rpx;
+			background-color: $uni-bg-color-grey;
+			border-radius: $uni-card-border-radius;
+			.info-item-box {
+				font-size: $uni-title-font-size-2;
+				border-bottom: 1rpx solid #E6E6E6;
+				height: 82rpx;
+				.label {
+					font-weight: bold;
+				}
+			}
+			.flex {
+				display: flex;
+				align-items: center;
+				.label {
+					width: 40%;
+				}
+				.text {
+					width: 60%;
+				}
+			}
+			.row {
+				.label {
+					line-height: 62rpx;
+				}
+				.text {
+					line-height: 42rpx;
+					font-size: $uni-title-font-size-3;
+					font-weight: bold;
+				}
+			}
+		}
+	
+		.bottom-box {
+			padding: 20rpx;
+			
+			position: absolute;
+			bottom: 50rpx;
+			width: 95%;
+		}
+	}
+</style>

pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei.vue

@@ -3,7 +3,7 @@
 		<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-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">
@@ -20,7 +20,7 @@
 	const formData = reactive({
 		form: {
 			name: null, // 姓名
-			number: null, // 证件号码
+			idNumber: null, // 证件号码
 		},
 		rules: {
 			name: [
@@ -31,7 +31,7 @@
 					trigger: 'blur',
 				}
 			],
-			number: [
+			idNumber: [
 				{ 
 					required: true, 
 					message: '请输入缴交对象的身份证号/手机号/业务水平认证证书编号', 
@@ -45,6 +45,11 @@
 	function onSubmit() {
 		formRef.value.validate((valid) => {
 			if (valid) {
+				// 查询到的ID
+				const id = '1'
+				uni.navigateTo({
+					url: `/pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo?id=${id}`
+				})
 			}
 		})
 	}

pages/geRenHuiFeiJiaoJiao/geRenHuiFeiJiaoJiao.vue

@@ -30,7 +30,7 @@
 					年份
 				</view>
 				<view class="text">
-					{{ info.year }}
+					{{ info.year }}年
 				</view>
 			</view>
 			<view class="info-item-box flex">
@@ -72,7 +72,7 @@
 		username: '某某某',
 		payProject: '2024年度个人会费',
 		type: '个人会费',
-		year: '2024年',
+		year: '2024',
 		price: '200',
 		periodOfValidity: '2024.05.1-2025.4.30',
 		remark: '根据《协会章程》规定,个人会费200元/年/人,会员会籍为每年5月1日至4月30日。<br/>个人会员可享受以下会员服务:<br/>1、免费使用网络教育培训系统【系统已上线121个视频课程77本电子书,涵盖:政策法规、职业素养、商务礼仪、客户服务销售技能、市场营销、团队管理、办公软件等多个知识领域】<br/>2、优先优惠参加协会组织的公开培训课<br/>更多优惠请关注协会微信号【gzreavip】'

pages/huiFeiJiaoJiao/huiFeiJiaoJiao.vue

@@ -133,7 +133,11 @@
 			url: '/pages/daiJiaoGeRenHuiFei/daiJiaoGeRenHuiFei'
 		})
 	}
-	function onDaiJiaoDanWeiHuiFei() {}
+	function onDaiJiaoDanWeiHuiFei() {
+		uni.navigateTo({
+			url: '/pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei'
+		})
+	}
 	
 	onLoad(() => {
 		console.log('onLoad')