patrol-gamble-mobile/inspect/info.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="deal info">
			<u-row gutter="16">
				<u-col span="3">
					处理人：
				</u-col>
				<u-col span="9">
					{{item.deal_user?item.deal_user_id.name:''}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					扣分：
				</u-col>
				<u-col span="9">
					{{item.dec_score}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					情况核实：
				</u-col>
				<u-col span="9">
					{{item.deal_content}}
				</u-col>
			</u-row>
			<u-row gutter="16">
				<u-col span="3">
					处理照片：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="dealImgs" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="dealVideos.length>0">
				<u-col span="3">
					处理视频：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="dealVideos" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
			<u-row gutter="16" v-if="dealAudios.length>0">
				<u-col span="3">
					处理音频：
				</u-col>
				<u-col span="9">
					<htz-image-upload v-model="dealAudios" :max="9" :remove="false" :add="false"></htz-image-upload>
				</u-col>
			</u-row>
		</div>
		<div class="info line">
			<u-time-line>
				<u-time-line-item nodeTop="2" v-for="log in item.logs">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<view class="u-node">
							<!-- 此处为uView的icon组件 -->
							<u-icon name="checkmark-circle-fill" color="deepskyblue" :size="36"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-desc">{{log.content}}
							</view>
							<view class="u-order-time">{{log.created_at}}</view>
						</view>
					</template>
				</u-time-line-item>
				
			</u-time-line>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				dealFilesList: [],
				askImgs:[],
				askVideos:[],
				askAudios:[],
				dealImgs:[],
				dealVideos:[],
				dealAudios:[]
			}
		},
		onReady() {

		},
		onLoad(options) {

			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
						// console.log(that.fileListObj)
						// for(var m in that.fileListObj){
						// 	console.log("m",m,res[m])
						// 	for(var k of res[m]){
						// 		console.log("k",k)
						// 		that.fileListObj[m]['arr'].push(k.uploads[0].url)
						// 	}
						// }
						// console.log(that.fileListObj)
						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)
						}
						for(var m of res.deal_images){
							that.dealImgs.push(m.uploads[0].url)
						}
						for(var m of res.deal_videos){
							that.dealVideos.push(m.uploads[0].url)
						}
						for(var m of res.deal_voice){
							that.dealAudios.push(m.uploads[0].url)
						}
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			}
		}
	}
</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;
	}
</style>