patrol-gamble-mobile/solve/solve.vue

<template>
	<div class="wrap">
		<div class="map"></div>
		<div class="info">
			<u-row gutter="16">
				<u-col span="3">
					区域：
				</u-col>
				<u-col span="9">
					{{item.area_detail?item.area_detail.value:''}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					河道：
				</u-col>
				<u-col span="9">
					{{item.river?item.river.name:''}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					问题类型：
				</u-col>
				<u-col span="9">
					{{item.ask_type?item.ask_type.name:''}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					上报时间：
				</u-col>
				<u-col span="9">
					{{item.created_at}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					地址：
				</u-col>
				<u-col span="9">
					{{item.address}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					上报人：
				</u-col>
				<u-col span="9">
					{{item.user?item.user.name:''}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					问题描述：
				</u-col>
				<u-col span="9">
					{{item.ask_content}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					驳回原因：
				</u-col>
				<u-col span="9">

				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					照片：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="askImgs" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="askVideos.length>0">
				<u-col span="3">
					视频：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="askVideos" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="askAudios.length>0">
				<u-col span="3">
					音频：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="askAudios" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
		</div>
		<div class="info">
			<u-form :model="form" ref="uForm" :label-width='120'>
				<u-form-item label="处理情况" prop="deal_content">
					<u-input type="textarea" :border="true" placeholder="请输入处理情况" label-position="top"
						v-model="form.deal_content" />
				</u-form-item>
				<u-form-item label="问题影像" prop="picFileList">
					<htz-image-upload :max="9" v-model="picFileList" mediaType="image" :chooseNum="9"
						:sourceType="['album','camera']" :compress="false" :quality="80" :formData="otherData"
						:remove="true" :dataType="1" @uploadSuccess="function(res) { return uploadSuccess(res,'pic')}"
						@imgDelete="function(res) { return imgDelete(res,'pic')}" @uploadFail="uploadFail"
						:action="action"></htz-image-upload>
				</u-form-item>
				<u-form-item label="问题视频" prop="videoFileList">
					<htz-image-upload :max="9" v-model="videoFileList" mediaType="video" :chooseNum="9"
						:sourceType="['album','camera']" :compress="false" :quality="80" :formData="otherData"
						:remove="true" :dataType="1" @uploadSuccess="function(res) { return uploadSuccess(res,'video')}"
						@imgDelete="function(res) { return imgDelete(res,'video')}" @uploadFail="uploadFail"
						:action="action"></htz-image-upload>
				</u-form-item>
				<u-form-item label="问题语音" prop="audioFileList">
					<htz-image-upload :max="9" v-model="audioFileList" mediaType="video" :chooseNum="9"
						:sourceType="['album','camera']" :compress="false" :quality="80" :formData="otherData"
						:remove="true" :dataType="1" @uploadSuccess="function(res) { return uploadSuccess(res,'audio')}"
						@imgDelete="function(res) { return imgDelete(res,'audio')}" @uploadFail="uploadFail"
						:action="action"></htz-image-upload>
				</u-form-item>
			</u-form>
			<view class="btns">
				<u-button type="info" @click="isBack=true">退回</u-button>
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
			<u-modal v-model="isBack" @confirm="sendback"
			 content="是否确认退回？"
			 :show-cancel-button="true"
			 :mask-close-able="true"
			  :show-title="false"></u-modal>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				dealFilesList: [],
				askImgs: [],
				askVideos: [],
				askAudios: [],
				action: "",
				otherData: {
					token: ""
				},
				picFileList: [],
				videoFileList: [], // 存储播放url
				audioFileList: [],
				form: {
					deal_content: "",
					inspection_file_list: [],
					ask_status: 1
				},
				isBack:false

			}
		},
		onReady() {

		},
		onLoad(options) {

			this.action = this.util.HOST + "/api/mobile/upload-file";
			this.otherData.token = uni.getStorageSync("userInfo_token").access_token;
			if (options.id) {
				this.loadInfo(options.id)
			}
		},
		methods: {
			loadInfo(id) {
				var that = this;
				that.util.request({
					api: '/api/mobile/inspection/show',
					method: "get",
					data: {
						id: id
					},
					utilSuccess: function(res) {
						that.item = res
						that.form = res
						console.log(that.form)
						for (var m of res.ask_images) {
							that.askImgs.push(m.uploads[0].url)
						}
						for (var m of res.ask_videos) {
							that.askVideos.push(m.uploads[0].url)
						}
						for (var m of res.ask_voice) {
							that.askAudios.push(m.uploads[0].url)
						}
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			// 文件上传
			uploadSuccess(res, type) {
				console.log(type)
				uni.showLoading({
					title: "上传成功"
				})
				let obj = {}
				let data = JSON.parse(res.data)
				obj.id = data.id
				obj.url = data.url
				if (type == "pic") {
					obj.type = 0
				} else {
					obj.type = 1
				}

				switch (type) {
					case 'video':
						this.videoFileList.push(obj)
						break;
					case 'audio':
						this.audioFileList.push(obj)
						break;
					case 'pic':
						this.picFileList.push(obj)
						break;
					default:
						break;
				}
			},
			imgDelete(res, type) {
				console.log("imgDelete", res)
				let list = []
				list = res.tempFilePaths
				switch (type) {
					case 'video':
						this.videoFileList = list
						break;
					case 'audio':
						this.audioFileList = list
						break;
					case 'pic':
						this.picFileList = list
						break;
					default:
						break;
				}
			},
			uploadFail(res) {
				console.log("uploadFail", res)
			},
			// 退回
			sendback(){
				var that = this;
				this.form.ask_status = 1
				that.util.request({
					api: "/api/mobile/inspection/save",
					method: "POST",
					data: that.form,
					utilSuccess: function(res) {
						uni.showToast({
							icon: "none",
							title: "提交成功",
							complete() {
								that.afterSubmit(res);
							},
							duration: 2000
						})
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			submit() {
				var that = this;
				let pic = []
				let fileListObj = {
					pics: {
						arr: this.picFileList,
						type: 4
					},
					videos: {
						arr: this.videoFileList,
						type: 5
					},
					audios: {
						arr: this.audioFileList,
						type: 7
					}
				}
				for (var m in fileListObj) {
					for (var k of fileListObj[m]['arr']) {
						pic.push({
							upload_id: k.id,
							type: fileListObj[m]['type']
						})
					}
				}
				this.form.inspection_file_list = pic
				this.form.ask_status = 4
				// return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						that.util.request({
							api: "/api/mobile/inspection/save",
							method: "POST",
							data: that.form,
							utilSuccess: function(res) {
								uni.showToast({
									icon: "none",
									title: "提交成功",
									complete() {
										that.afterSubmit(res);
									},
									duration: 2000
								})
							},
							utilFail: function(res) {
								that.util.alert(res);
							}
						});
					} else {
						console.log('验证失败');
					}
				})

			},
			afterSubmit() {
				uni.redirectTo({
					url: "../solve/index"
				})
			},
		}
	}
</script>

<style scoped>
	.wrap {
		background-color: #F3F5F5;
		min-height: 100vh;
		padding-top: 25rpx
	}

	.info {
		padding: 30rpx;
		background-color: #fff;
		margin: 25rpx;
		border-radius: 30rpx;
		margin-top: 0
	}

	.info .u-row {
		margin: 15rpx 0
	}

	.info .u-row .u-col:first-child {
		text-align: right !important;
	}
	.btns{
		text-align: center;
	}
	.btns .u-btn {
		width: 40%;
		display: inline-block;
		margin: 5%;
	}
</style>