Huiqitong/src/pages/index/subform.vue

<template>
	<u-navbar :title="titleData.title" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar>
	<view class="container">
		<u-form labelPosition="top">
			<u-form-item :label="item.title" :prop="item.type" v-for="(item,index) in titleData.question" :key="index">
				<u-input v-model="item.answer" v-if="item.type === 'input'" />
				<u-textarea v-model="item.answer" v-if="item.type === 'textarea'" placeholder="请输入内容"
					autoHeight></u-textarea>
				<u-radio-group v-model="item.answer" v-if="item.type === 'radio'" placement="column"
					@change="groupChange">
					<u-radio :customStyle="{marginBottom: '16rpx'}" v-for="(item, index) in item.choose" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
				<u-checkbox-group v-model="item.answer" v-if="item.type === 'checkbox'" placement="column"
					>
					<u-checkbox :customStyle="{marginBottom: '16rpx'}" v-for="(item, index) in item.choose" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
		</u-form>
	</view>
	<view class="baombut">
		<view class="buttt" @click="submit">
			确认提交
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		specialSign
	} from '@/api/index'

	const titleData = ref({})
	const ztid = ref('')

	
	function processCheckboxAnswers(arr) {
	  return arr.map(item => {
	    // 基础对象结构
	    const result = { id: item.id };
	    
	    // 处理answer属性
	    if (item.type === 'checkbox' && typeof item.answer === 'object') {
	      // 将对象值转为逗号分隔的字符串（带中文引号）
	      result.answer = Object.values(item.answer)
	        .map(val => `'${val}'`)
	        .join(',');
	    } else {
	      // 非checkbox类型或answer非对象的情况
	      result.answer = item.answer;
	    }
	    
	    return result;
	  });
	}

	// 提交方法  
	function submit() {
		let istrue = true
		titleData.value.question.forEach((ele) => {
			if (ele.answer === '' || !ele.answer) {
				uni.showToast({
					title: '请填写选择完整',
					duration: 3000,
					icon:'error'
				})
				istrue = false
			}
		})
		if(istrue) {
			let param = {
				special_list_id: ztid.value,
				form_id: titleData.value.form_id,
				answer: processCheckboxAnswers(titleData.value.question)
			}
			specialSign(param).then((res)=> {
				if(res.code === 1) {
					uni.showToast({
						title: '提交成功！',
						duration: 2000
					})
					setTimeout(()=> {
						uni.navigateBack()
					},2000)
				} else {
					uni.showToast({
						title: res.msg,
					})
				}
			})
		}
	}

	onLoad(async (param) => {
		ztid.value = param.id
		titleData.value = JSON.parse(param.form)
	})
</script>

<style scoped lang="scss">
	.container {
		background-color: #F1F3F9;
		height: calc(100vh - 350rpx);
		width: 100%;
		padding: 0 48rpx;
		box-sizing: border-box;
		overflow-y: auto;

		.titlepart {
			display: flex;
			align-items: baseline;
			margin-bottom: 40rpx;

			.title {
				font-family: Source Han Sans;
				font-weight: 550;
				font-size: 36rpx;
				color: #0c092a;
				margin-left: 20rpx;
			}
		}

		.text {
			margin-top: 32rpx;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: 300;
			line-height: 60rpx;
			letter-spacing: normal;
			color: #3d3d3d;
		}

		.fbtime {
			font-family: Roboto;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 142rpx;
			letter-spacing: normal;
			/* 外部/SCMP Grey/nobel */
			/* 样式描述：06 Small Grey txt */
			color: #a1a1a1;
		}

		:deep(.u-input) {
			background-color: #FFFFFF;
		}

		:deep(.u-form-item__body__left__content__label) {
			white-space: nowrap;
			font-family: Source Han Sans;
			font-size: 28rpx;
			color: #0C092A;
		}
	}

	.baombut {
		width: 100%;
		padding: 36rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		.buttt {
			width: 574rpx;
			height: 96rpx;
			border-radius: 248rpx;
			background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%);
			font-family: Source Han Sans;
			font-size: 36rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>