parking_inspection/pages/report/report.vue

<template>
	<view class="f-padding">
		<u-navbar
		 :title="title" 
		 title-color="#fff"
		 :border-bottom="false"
		 :custom-back="customBack"
		 back-icon-color="#CCE8FF" 
		 :background="{background: 'linear-gradient(99deg, #7A4398 0%, #5A5DB9 100%)' }"></u-navbar>
		<u-form :model="form" ref="uForm">
			<u-form-item label="路段/停车场：" prop="roadName" required :label-width="labelWidth">
				<u-input v-model="form.roadName" type="select" :border="true" placeholder="请选择" @click="selectShow = true" />
				<u-select v-model="selectShow" :list="roadList" value-name="roadNo" label-name="roadName" @confirm="selectConfirm"></u-select>
			</u-form-item>
			<u-form-item label="维修内容" prop="exceprionDes" required :label-width="labelWidth">
				<u-input type="textarea" :border="true" maxlength="200" v-model="form.exceprionDes" />
			</u-form-item>
			<u-form-item label="图片说明" :label-width="labelWidth" :border-bottom="false">
				<u-upload ref="uploadRef" :action="action" max-count="5"></u-upload>
			</u-form-item>
		</u-form>
		<u-button type="primary" @click="submit" style="margin-top: 20vh;">提交</u-button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				title:'问题上报',
				labelWidth:190,
				action:this.config.upFileUrl,
				selectShow:false,
				selectList:[],
				roadList:[],
				form:{
					roadName:'',
					roadNo:'',
					exceprionDes:'',
					imgList:[]
				},
				rules:{
					roadName: [
						{ 
							required: true, 
							message: '请选择路段', 
							trigger: ['change','blur'],
						}
					],
					exceprionDes: [
						{ 
							required: true, 
							message: '请输入姓名', 
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onLoad(){
			
		},
		onShow(){
			this.getRoadAllList();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			customBack(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			getRoadAllList(){
				this.$u.api.getRoadAllList().then(res=>{
					if(res.code==200){
						this.roadList = res.data;
						// console.log('getDeviceStatis',res);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					console.log('res',res);
				}).catch(err=>{
					console.log('err',err);
				})
			},
			selectConfirm(e){
				// console.log('e',e);
				this.form.roadNo = e[0].value;
				this.form.roadName = e[0].label;
				// console.log('this.form',this.form);
			},
			submit(){
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// delete this.dealForm.selectedUserList;
						let files = [];
						// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
						files = this.$refs.uploadRef.lists.filter(val => {
							return val.progress == 100;
						})
						console.log('files',files);
						// 如果您不需要进行太多的处理，直接如下即可
						// files = this.$refs.uUpload.lists;
						files.forEach(function(item){
							if(item.response.data){that.form.imgList.push(item.response.data.url)}
						});
						this.$u.api.report(this.form).then(res=>{
							console.log('res',res);
							this.form = {};
							uni.showToast({
								icon:'none',
								title:res.msg,
								duration:1500,
							});
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index',
								})
							},1500)
						}).catch(err=>{
							uni.showToast({
								icon:'none',
								title:err.msg
							})
							console.log('err',err);
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import  './report.scss'
</style>