keysass_app/pages/index/testtraining/teacherSign.vue

<template>
	<view class="boxsxx">
		<!-- <image src="http://image.bjkeyware.com/static/index/renliwb/627teacherbg.png" class="topbg" mode=""></image> -->

		<view class="tscontent">
			<view class="contitle">北京关键科技股份有限公司&河南科技大学</view>
			<view class="contitle">2024“软件可靠性测试”暑期师资培训</view>
			<view class="signTable">— 报名表 —</view>
			<view class="contentc">
				为深入贯彻党的二十大和全国新型工业化推进大会精神，落实《关于加强和改进工业和信息化人才队伍建设的实施意见》等文件精神。本次师资培训由北京关键科技股份有限公司邀请政府领导、高校软件学院院长、公司内部高级培训讲师提供培训，并根据《软件可靠性测试产业人才岗位能力要求》标准对独立软件的功能、性能和接口等各项需求进行动态测试，对软件以及单元之间的功能、接口、数据结构和逻辑等进行动态测试，以促进产业需求与人才培养对接为目标，决定举办暑期师资培训（双师型）。现将有关通知如下：
			</view>
			<view class="contentc1">
				<text>主办单位</text>：北京关键科技股份有限公司、河南科技大学软件学院
			</view>
			<view class="contentc1">
				<text>项目联系人</text>：王博洋 15210997991
			</view>
			<view class="lineewewe"></view>
			<!-- 表单 -->
			<u-form :model="form" ref="uForm" label-position="top" class="uformclass" :rules="rules">
				<u-form-item :class="{'lastcl' : index == detailForm.length-1}" v-for="(it,index) in detailForm" :key="it.key" :label="`${index + 1}.${it[it.key]}`">
					<u-input v-if="it.type == 'input'" border v-model="form[it.key]"  />
					<u-radio-group v-if="it.type == 'radio'" wrap v-model="form[it.key]" >
						<u-radio v-for="(item, i) in it.value" :key="item" :name="item">
							{{ item }}
						</u-radio>
					</u-radio-group>
					<u-input v-if="it.type == 'textarea'" type="textarea" border v-model="form[it.key]"  />
				</u-form-item>
			</u-form>

			<!-- 表单 -->
			<view class="lineewewe"></view>
			<view class="signbtn" v-if="trainClassId " @click="submitte">
				提交报名
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				detailForm: [],
				trainClassId: null,
				rules: {}
			};
		},
		onLoad() {
			this.getformDe()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getformDe() {
				this.http.quickGet('/train/trainTeacherClass', false).then(res => {
					if (res.data && res.data.code == 200) {
						this.detailForm = JSON.parse(res.data.data)
						this.trainClassId = res.data.trainClassId
					} else {
						this.$refs.uToast.show({
							title: "当前暂无师资培训班开班，请耐心等待开班通知",
							icon: 'none'
						})
					}

					// 动态设置校验规则--不生效后续处理，暂时先提交时校验不为空
					// this.detailForm.map((it) => {
					// 	if (it.type == 'radio') {
					// 		this.$set(this.rules, it.key, [{
					// 			required: true,
					// 			message: `请选择一项`,
					// 			trigger: 'change'
					// 		}])
					// 	} else {
					// 		this.$set(this.rules, it.key, [{
					// 			required: true,
					// 			message: `请输入${it[it.key]}`,
					// 			trigger: 'blur'
					// 		}])
					// 	}
					// })
				}).catch(error => {
					console.log(error);
					this.$refs.uToast.show({
						title: '',
						icon: 'none'
					})
				})
			},
			submitte() {
				// 设置rules不生效,暂时先循环校验空值
				// this.detailForm.forEach(it => {
				// 	if (!this.form[it.key]) {
				// 		console.log("不完整");
				// 		return uni.showToast({
				// 			title: '请将报名表填写完整',
				// 			icon: 'none'
				// 		})
				// 	}
				// })
				const toggle = this.detailForm.some((item,index)=>{
					console.log(item);
					if(!this.form[item.key] && (item.key != "suggestion")){
							return item
					}
					}
				)
				console.log(toggle);	
				if(toggle){
					uni.showToast({
						title: '请将报名表填写完整',
						icon: 'none'
					})
					return
				}
				// 处理json数据
				const newData = JSON.parse(JSON.stringify(this.detailForm))
				newData.forEach((it) => {
					it.value = this.form[it.key]
				})
				let data = {
					mobile: this.form.mobile,
					studentName: this.form.name,
					trainClassId: this.trainClassId,
					data: JSON.stringify(newData),
					classType: '3'
				}
				this.http.quickPost(`/train/training/offApply`, data, false).then(res => {
					if (res.data.data.code == 200) {
						this.$refs.uToast.show({
							title: '报名成功',
							type: 'success',
							duration: 2000,
							url: 'pages/index/testtraining/testtraining'
						})
						this.form = {}
					} else {
						this.$refs.uToast.show({
							title: res.data.data.msg,
							type: 'warning',
						})
					}
				}).catch(error => {
					this.$refs.uToast.show({
						title: '报名失败',
						type: 'error',
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>

	.boxsxx {
		background-color: #FFFFFF;

		.topbg {
			width: 100%;
			height: 250rpx;
		}


		.tscontent {
			padding: 40rpx;
			box-sizing: border-box;

			.contitle {
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				text-align: center;
				margin-bottom: 10rpx;
			}

			.signTable {
				font-weight: bold;
				font-size: 34rpx;
				color: #1B68DE;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.contentc {
				font-weight: 500;
				font-size: 24rpx;
				color: #4D4D4D;
				line-height: 47rpx;
				text-indent: 2em;
			}

			.contentc1 {
				font-weight: 500;
				font-size: 24rpx;
				color: #4D4D4D;
				line-height: 47rpx;

				text {
					font-weight: 800;
				}
			}

			.lineewewe {
				width: 100%;
				height: 2rpx;
				background: #f2f2f2;
				margin: 40rpx 0;
			}

			.signbtn {
				width: 100%;
				height: 75rpx;
				background: linear-gradient(90deg, #5EA6FD, #1A81F9);
				border-radius: 4rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 75rpx;
			}

			::v-deep .uformclass {
				.u-border-bottom:after {
					border: none !important;
				}

				.u-input {
					background: #F8F9FA !important;
					border-radius: 4rpx !important;
					border: 1px solid #F8F9FA !important;
				}

				.u-form-item--left {
					font-weight: bold !important;
					font-size: 28rpx !important;
					color: #000000 !important;
				}

				.u-form-item--left__content__label {
					line-height: 40rpx;
				}

				.u-form-item--left__content__label::before {
					content: '*';
					color: #EF3D3D;
					margin-right: 10rpx;
				}
				// .u-form>*{
				// 	background-color: #1A81F9;
				// }
			}
			::v-deep .lastcl {
				.u-form-item--left__content__label::before {
					content: '';
					color: #EF3D3D;	
					margin-right: 10rpx;
				}
			}
		}

	}
</style>