CKQ/pages/risk/review/form/form.vue

<template>
	<div class="body">		
		<uni-forms ref="form" label-position="top" :rules="rules" :model="form">
			<uni-forms-item label="是否通过" required>
				<text class="status-item"
				 :class="form.status==1?'active':''"
				 @click="form.status=1"
				>通过</text>
				<text class="status-item"
				 :class="form.status==2?'active':''"
				 @click="form.status=2"
				>不通过</text>
			</uni-forms-item>
			<uni-forms-item label="整改人" name="user" required>
				<uni-data-select
					v-model="form.user"
					:localdata="users"
				></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="描述" name="desc" required>
				<uni-easyinput type="textarea" autoHeight v-model="form.desc" placeholder="请输入描述"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="附件">
				<div class="upload-container">
					<image @click="upload" class="upload" src="/static/icon/upload.png" mode="widthFix"></image>
					<p class="tip">注：单个附件上传不超过10M，附件累计不超过20M</p>					
				</div>
			</uni-forms-item>
		</uni-forms>	
		<view class="footer" @click="onSubmit">提交</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				status: [
				  { value: 0, text: "否" },
				  { value: 1, text: "是" }
				],
				users:[
				  { value: 0, text: "张三" },
				  { value: 1, text: "李四" }					
				],
				rules:{
					user:{
						rules:[
							{
								required: true,
								errorMessage: '请选择整改人',
							},						
						],
					},
					desc:{
						rules:[
							{
								required: true,
								errorMessage: '请填写描述',
							},						
						]						
					}
				},
				form:{
					status:1,
					password:"",
					desc:""
				}
			}
		},
		methods: {
			upload(){
				uni.chooseFile({
					success: (files) => {
						const tempFilePaths = files.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	height: 100vh;
	box-sizing: border-box;
	padding:21rpx 16rpx;
	background-color: #F3F5FB;
	.status-item{
		padding: 22rpx 32rpx;
		background-color: #fff;
		font-size: 28rpx;
		line-height: 1;
		display: inline-block;
		color: #434343;
		margin-right: 20rpx;
		border-radius: 2px;
		&.active{
			background: rgba(22, 141, 236, 0.16);
			color:#168DEC ;
		}
	}
	::v-deep .uni-forms-item__content{
		.uni-easyinput,.uni-select{
			background-color: #fff;
		}	
	}
	.upload-container{
		.upload{
			width: 216rpx;
			display: block;
		}
		.tip{
			font-size: 24rpx;
			line-height: 28rpx;
			color: #999999;
			padding-top: 20rpx;
		}
	}
	.footer{
		width: 100%;
		height: 136upx;
		background: #FFFFFF;
		border-radius: 16upx 16upx 0px 0px;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
		color: #168DEC;
		font-size: 32upx;
		padding-top: 20upx;
		letter-spacing: 2px;
	}
}
</style>