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>
				<view class="preview" v-if="form.attachList.length>0">
					<image :src="attach.path" mode="widthFix" v-for="(attach,index) in form.attachList" :key="index"></image>
				</view>
			</uni-forms-item>
		</uni-forms>	
		<view class="footer" @click="onSubmit">提交</view>
	</div>
</template>

<script>
	import {uploadFile,uploadFiles,uploadApi} from '@/api/upload.js'
	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:"",
					attachList:[]
				}
			}
		},
		methods: {
			upload(){
				uni.chooseImage({
					success: (files) => {
						const tempFilePaths = files.tempFilePaths;
						const tempFiles = files.tempFiles
						const formData = new FormData()
						formData.append('file', tempFilePaths)
						// uploadApi({
						// 	formData
						// })
					}
				});
			},
			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>