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" v-for="(img,index) in dealFilesList">
					<u-image @click="imgListPreview(img.files.url)" style="margin:20rpx 0" width="100%" height="300rpx"
						:src="img.files.url"></u-image>
				</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">

				</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: []
			}
		},
		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
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			imgListPreview(item) {
				var urlList = []
				urlList.push(item) //push中的参数为 :src="item.img_url" 中的图片地址
				uni.previewImage({
					indicator: "number",
					loop: true,
					urls: urlList
				})
			},
		}
	}
</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>