Applet/pages/report/index.vue

<template>
	<view class="container">
		<uni-forms ref="baseForm" :modelValue="formData" :label-width="100">
			<uni-forms-item v-for="item in fileds" :label="item.title" :name="item.name"  :key="item.name">
				<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" />
			</uni-forms-item>
		</uni-forms>
		<button class="btn" type="primary" @click="submitForm">提交</button>
	</view>
</template>

<script>
	import request from '../../api/report.js';
	export default {
		data() {
			return {
				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' },
				]
			}
		},
		async mounted() {
			const res = await request.getGbStatus();
			if (res.data) {
				uni.showToast({
					title: '不能重复报道',
					icon: 'error',
					duration: 2000,
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1000)
				return;
			}
			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() {
				const res = await request.submitgb(this.formData);
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000,
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000)
				}
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {}
	}
</script>

<style>
	.uni-forms {
		width: 90%;
		margin: 10px auto;
	}
	.btn {
		width: 90%;
		margin: 0 auto;
	}
</style>