WenWuGuanJia/shouhu_fenbao/chuangGuan/chuTi.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="出题得分" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<!-- 表单 -->
		<view class="example">
			<uni-forms style="padding: 0 20rpx 0 20rpx" label-position="top" ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="标题" label-width="80px" required name="titVal">
					<uni-easyinput v-model="valiFormData.titVal" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="问题" label-width="100px" required name="problemVal">
					<uni-easyinput v-model="valiFormData.problemVal" placeholder="请输入问题" />
				</uni-forms-item>

				<uni-forms-item label="选项" label-width="100px" required name="optionVal">
					<uni-easyinput v-model="valiFormData.optionVal" placeholder="例如:A1 B:2" />
				</uni-forms-item>
				<uni-forms-item label="答案" label-width="100px" required name="answerVal">
					<uni-easyinput v-model="valiFormData.answerVal" placeholder="请输入正确答案" />
				</uni-forms-item>
				<uni-forms-item label="答案解析" label-width="80px" required name="analysisVal">
					<uni-easyinput type="textarea" v-model="valiFormData.analysisVal" />
				</uni-forms-item>
				<uni-forms-item label="本题关联考点" label-width="110px" required name="associationVal">
					<uni-easyinput type="textarea" v-model="valiFormData.associationVal" />
				</uni-forms-item>
			</uni-forms>
			<view class="text-wrapper_3" @click="submit('valiForm')">
				<view class="tit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/* 表单数据 */
			valiFormData: {
				titVal: '',
				answerVal: '',
				problemVal: '',
				optionVal: '',
				analysisVal: '',
				associationVal: ''
			},
			/* 校验规则 */
			rules: {
				// 对titVal字段进行必填验证
				titVal: {
					// titVal 字段的校验规则
					rules: [
						// 校验 titVal 不能为空
						{
							required: true,
							errorMessage: '请输入标题'
						}
						// 对titVal字段进行长度验证
						// {
						// 	minLength: 1,
						// 	maxLength: 6,
						// 	errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符'
						// }
					],
					// 当前表单域的字段中文名，可不输入
					label: '标题',
					validateTrigger: 'submit'
				},
				/* 问题校验 */
				problemVal: {
					// problemVal 字段的校验规则
					rules: [
						// 校验 problemVal 不能为空
						{
							required: true,
							errorMessage: '请输入问题'
						}
						// 对problemVal字段进行长度验证
						// {
						// 	minLength: 11,
						// 	maxLength: 11,
						// 	errorMessage: '{label}长度为 {minLength}  个字符'
						// }
					],
					// 当前表单域的字段中文名，可不输入
					label: '问题',
					validateTrigger: 'submit'
				},
				/* 选项校验 */
				optionVal: {
					// optionVal 字段的校验规则
					rules: [
						// 校验 optionVal 不能为空
						{
							required: true,
							errorMessage: '请输入选项'
						}
						// 对optionVal字段进行长度验证
						// {
						// 	minLength: 18,
						// 	maxLength: 18,
						// 	errorMessage: '{label}长度为 {minLength}  个字符'
						// }
					]
				},

				/* 答案 解析*/
				analysisVal: {
					rules: [
						// 校验 analysisVal 不能为空
						{
							required: true,
							errorMessage: '请输入答案解析'
						}
					]
				},
				// 答案
				answerVal: {
					rules: [
						// 校验  不能为空
						{
							required: true,
							errorMessage: '请输入正确答案'
						}
					]
				}
			}
		};
	},
	methods: {
		submit() {
			this.$refs.valiForm.validate(['id'], async (err, valiFormData) => {
				if (!err) {
					console.log('校验成功');
					/* 检验成功 */
					const { name, mobile, address, idCard, unit } = this.valiFormData;
					this.$api.applyVolunteer(
						{
							name: name,
							mobile: mobile,
							address: address,
							Unit_name: unit,
							id_card: idCard
						},
						function (res) {
							if (res.code === 0) {
								that.$common.successToShow(res.msg);
							} else {
								that.$common.errorToShow('服务器异常请稍后再试');
							}
							// console.log(res);
						}
					);
				}
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.text-wrapper_3 {
	margin: auto;
	height: 80rpx;
	flex-direction: column;
	width: 240rpx;
	background: url('/static/img/search_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.tit {
	text-align: center;
	font-size: 36rpx;
	line-height: 80rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/deep/.uni-forms-item__error {
	color: red !important;
}
.is-input-border {
	background-color: #f7dfc0 !important;
}
.uni-forms-item__label {
	color: #000000 !important;
}
.example {
	height: 87%;
	margin: 20rpx 32rpx 0 32rpx;
}
.uni-forms {
	padding: 0 20rpx 0 20rpx;
}
.uni-forms-item {
	margin-bottom: 30rpx !important;
}
</style>