Applet/pages/report/index.vue

<template>
	<view class="container">
		<uni-forms ref="baseForm" :modelValue="formData" :label-width="110" :rules="rules">
			<uni-forms-item v-for="item in fileds" :label="item.title" :name="item.name" :key="item.name" required>
				<uni-easyinput v-if="!item.formatter && !item.type" type="text" v-model="formData[item.name]" :placeholder="`请输入${item.title}`" />
				<uni-data-checkbox v-model="formData[item.name]" v-if="item.formatter && item.type == 'checkbox'" :multiple="item.multiple || false" :localdata="item.dict" />
				<text class="msg" v-if="item.name == 'baobaoloudong'">例：XX社区 + XX小区 + X栋</text>
			</uni-forms-item>
		</uni-forms>
		<button :disabled="btnText == '已报到'" class="btn" type="primary" @click="submitForm">{{ btnText }}</button>
	</view>
</template>

<script>
	import request from '../../api/report.js';
	export default {
		data() {
			return {
				btnText: '提交',
				formData: {},
				fileds: [
					{ name: 'name', title: '姓名' },
					{ name: 'sex', title: '性别', formatter: 'dict:user_sex_type', type: 'checkbox' },
					{ name: 'workUnit', title: '工作单位' },
					{ name: 'baobaoloudong', title: '包保楼栋' },
					{ name: 'phone', title: '联系电话' },
					{ name: 'jianrensanzhang', title: '是否兼任三长', formatter: 'dict:jianrensanzhang_type', type: 'checkbox' },
				],
				rules: {
					name: {
						rules:[{ required: true, errorMessage: '请填写姓名' }]
					},
					sex: {
						rules:[{ required: true, errorMessage: '请选择性别' }]
					},
					phone: {
						rules:[{ required: true, errorMessage: '请填写联系电话' }]
					},
					workUnit: {
						rules:[{ required: true, errorMessage: '请填写工作单位' }]
					},
					baobaoloudong: {
						rules:[{ required: true, errorMessage: '请填写包保楼栋' }]
					},
					jianrensanzhang: {
						rules:[{ required: true, errorMessage: '请选择是否兼任三长' }]
					},
				}
			}
		},
		async mounted() {
			const res = await request.getGbStatus();
			if (res.data) {
				this.formData = { ...res.data, sex: String(res.data.sex), jianrensanzhang: String(res.data.jianrensanzhang) };
				this.btnText = '已报到';
			}
			await this.setDict();
		},
		onShow() {},
		methods: {
			async setDict() {
				this.fileds = await Promise.all(this.fileds.map(async e => {
					if (e.formatter && e.formatter.includes('dict')) {
						const dictType = e.formatter.split(':')[1];
						const res = await request.getDict(dictType);
						if (res.code == 200) e.dict = res.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
					}
					return e;
				}));
			},
			async submitForm() {
				this.$refs.baseForm.validate().then(async valid=>{
					const res = await request.submitgb(this.formData);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000,
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {}
	}
</script>

<style>
	.uni-forms {
		width: 90%;
		margin: 10px auto;
	}
	.btn {
		width: 90%;
		margin: 0 auto;
	}
	.msg {
		color: red;
		font-size: 12px;
	}
</style>