pinganxiaoyuan/monitorMobile/pages/earlyWarning/handlingSuggestions.vue

<template>
	<view class="handlingSuggestions">
		<view class="formBox">
			<u-form :model="form" ref="uForm" labelPosition="top" labelWidth="100">
				<u-form-item label="处理意见" prop="remark" required>
					<u--textarea v-model="form.remark" placeholder="请输入处理意见"></u--textarea>
				</u-form-item>
			</u-form>
		</view>

		<view class="btn">
			<u-button shape="circle" type="primary" @click="submit">确定</u-button>
			<u-button style="margin-top: 30rpx;" shape="circle" :plain="true" :hairline="true">取消</u-button>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				form: {
					remark: '',
				},
				rules: {
					remark: [{
						required: true,
						message: '请输入处理意见',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}]
				}
			}
		},
		methods: {
			submit() {
				uni.navigateTo({
				  url: '/pages/earlyWarning/processingResults'
				});
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style lang="scss" scoped>
	.handlingSuggestions {
		height: 100%;
		position: relative;
		.formBox {
			background: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			::v-deep .u-form-item__body__left__content__label{
				margin-left: 8rpx!important;
			}
			::v-deep .u-form-item__body__right{
				margin-top: 24rpx!important;
			}
		}
		.btn {
			width: 100%;
			position: absolute;
			bottom: 50rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			.u-button--primary {
				background: #2388FF;
			}
			.u-button {
				height:90rpx;
				font-size: 32rpx;
				font-weight: 700;
			}
		}
	}
</style>