hainan_2024/h5/pages/premarital/form/form.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	import TitleComponent from '../src/title.vue'

	const mountedAction = () => {

	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}
	const number_type_array = [{
			value: 1,
			label: '身份证'
		},
		{
			value: 2,
			label: '军官证'
		},
		{
			value: 3,
			label: '港澳台'
		},
		{
			value: 4,
			label: '护照'
		},
	]

	const getEndDate = () => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	const input_data_default = {
		'国籍': '中国',
		'证件类型': 0,
		'证件号': "",
		'姓名': "",
		'生日': getEndDate(),
		'民族': "",
		'现地址': "",
		'详细地址': "",
		'户籍地址': "",
		'工作单位': "",
		'文化程度': "",
		'职业': "",
		'出生地': "",
		'配偶姓名': "",
		'配偶证件类型': 0,
		'配偶证件号': "",
		'血缘关系': "无",
		'邮政编码': "",
		'手机号码': "",
	}
	const input_data = ref(JSON.parse(JSON.stringify(input_data_default)))
	const bindPickerChange = (e, key) => {
		input_data.value[key] = e.detail.value
	}
	const bindDateChange = (e, key) => {
		input_data.value[key] = e.detail.value
	}
	const radioChange = (e, key) => {
		input_data.value[key] = e.detail.value
	}
	const editDoneClick = () => {
		let post_data = JSON.parse(JSON.stringify(input_data.value))
		post_data['证件类型'] = number_type_array[input_data.value['证件类型']].value
		post_data['配偶证件类型'] = number_type_array[input_data.value['配偶证件类型']].value
		// for (let i in post_data) {
		// 	if (!post_data[i]) {
		// 		return uni.$lu.toast(`请填写${i}`)
		// 	}
		// }
		HunQianQuestionSubmit(post_data)
	}
	const HunQianQuestionSubmit = async (post_data) => {
		const response = await $api('HunQianQuestionSubmit', {
			person_id: $store.getUser()?.person_id,
			content: post_data
		})
		$response(response, () => {
			uni.navigateTo({
				url: '/pages/main/combo/combo'
			})
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="page_wrapper">
			<TitleComponent title="信息登记"></TitleComponent>
			<view class="form_wrapper">
				<view v-for="(i,k) in input_data" :key="k" class="form_item_wrapper">
					<view class="form_title_wrapper">{{ k }}</view>
					<view class="form_input_wrapper">
						<template v-if="['证件类型','配偶证件类型'].includes(k)">
							<view class="select_wrapper">
								<picker class="select_picker_wrapper" @change="(e)=>{bindPickerChange(e, k)}" :value="input_data[k]"
									:range="number_type_array" range-key="label">
									<view>{{ number_type_array[input_data[k]].label }}</view>
								</picker>
								<view class="select_icon_wrapper">
									<uni-icons color="#808080" type="right" size="20"></uni-icons>
								</view>
							</view>
						</template>
						<template v-else-if="k === '生日'">
							<picker mode="date" :value="input_data[k]" :end="getEndDate" @change="(e)=>{bindDateChange(e, k)}">
								<view>{{ input_data[k] }}</view>
							</picker>
						</template>
						<template v-else-if="k === '血缘关系'">
							<view>
								<radio-group class="radio_wrapper" @change="(e)=>{radioChange(e, k)}">
									<view class="radio_item_wrapper">
										<radio style="transform:scale(0.7)" value="无" :checked="input_data[k] === '无'" />无
									</view>
									<view class="radio_item_wrapper">
										<radio style="transform:scale(0.7)" value="有" :checked="input_data[k] === '有'" />有
									</view>
								</radio-group>
							</view>
						</template>
						<template v-else>
							<input v-model="input_data[k]" :placeholder="`请输入${k}`" />
						</template>
					</view>
				</view>
			</view>
			<view @click="editDoneClick()" class="button_wrapper">提交</view>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>
<style scoped>
	.radio_item_wrapper {
		margin-right: 30rpx;
		display: flex;
		align-items: center;
	}

	.radio_wrapper {
		display: flex;
		align-items: center;
	}

	.select_icon_wrapper {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	}

	.select_picker_wrapper {
		position: relative;
		z-index: 9;
		width: 100%;
	}

	.select_wrapper {
		position: relative;
	}

	.form_wrapper {
		margin-top: 20rpx;
	}

	.form_input_wrapper {
		width: calc(100% - 140rpx - 20px);
		margin-left: 20px;
	}

	.form_title_wrapper {
		width: 140rpx;
	}

	.form_item_wrapper {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 26rpx;
		border-bottom: 1rpx solid #cccccc80;
	}

	.button_wrapper {
		background: #279EA3;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		width: 600rpx;
		border-radius: 10rpx;
		margin: 50rpx auto 0;
	}

	.page_wrapper {
		padding-top: 20rpx;
		width: calc(100% - 50rpx);
		margin: 0 auto;
	}
</style>