menber-center/pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei.vue

<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-item label="代缴人姓名" prop="giver">
					<u-input disabled v-model="formData.form.giver" :border="false" type="text" />
				</u-form-item>
				<u-form-item label="代缴人联系方式" prop="giverPhone">
					<u-input disabled v-model="formData.form.giverPhone" :border="false" type="text" />
				</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'
	import { dept } from '@/api/cost.js'
import { msgError } from '../../utils/common'
	
	const formRef = ref()
	const formData = reactive({
		form: {
			name: null, // 机构名称
			number: null, // 机构备案证号
			year: null, // 缴费年限
			giver: "", //默认当前用户名
			giverPhone: "" //默认当前用户手机号
		},
		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) {
				dept(formData.form).then(res => {
					if(res && res.code === 0) {
						const data = res.data
						if (data.canPay) {
							uni.navigateTo({
								url: `/pages/daiJiaoDanWeiChaXunJieGuo/daiJiaoDanWeiChaXunJieGuo?name=${formData.form.name}&number=${formData.form.number}&year=${formData.form.year}&price=${data.duePrice}&userId=${data.userId}&giver=${formData.form.giver}&giverPhone=${formData.form.giverPhone}`
							})
						} else {
							msgError('无法代支付')
						}
					} else {
						msgError(res.message)
					}
				})
			}
		})
	}
	
	onReady(() => {
		formRef.value.setRules(formData.rules)
	})
	
	onLoad(() => {
		yearList.value = []
		const year = new Date().getFullYear()
		const user = uni.getStorageSync("USER_INFO")
		formData.form.giver = user.name
		formData.form.giverPhone = user.phone
		for (let i = 0; i < 10; i++) {
			yearList.value.push({
				value: `${year - i}`,
				label: `${year - i}`
			})
		}
		// 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>