rsmonitoring-app/pages/index/common/hcDetails.vue

<template>
	<view class="details">
		<view class="search">
			<van-icon name="wap-nav" @click="returnList" />
		</view>
		<van-sticky :offset-top="-10">
			<van-tabs sticky v-model="active" class="tabs">
				<van-tab v-for="(item, key) in tabOptions" :key="key" :title="item">
					<view class="hclist" v-if="key==0">
						<van-cell v-for="(item, i) in jbxxs" :key="i" :title="item.name" :value="infoObj[item.prop]" />
					</view>
					<view class="hclist" v-if="active==1">
						<van-tabs sticky v-if="sheets.length" v-model="ywyptab">
							<van-tab v-for="ypitem in sheets" :key="ypitem.sheet" :title="ypitem.type"
								:name="ypitem.sheet">
								<view>
									<img :src="ypitem.photo" width="100%" />
									压占{{ ypitem.type }}面积共{{ ypitem.mjj }}平方米
									<van-cell>
										<van-row>
											<van-col :span="8" v-for="(item, i) in tdxzTable"
												:key="i">{{item.label}}</van-col>
										</van-row>
									</van-cell>
									<van-cell>
										<van-row v-for="(row, index) in ypitem.data_list" :key="index">
											<van-col :span="8" v-for="(item, i) in tdxzTable" :key="i">
												<div v-if="item.slot == 'ratio'">
													{{ ((row.yzmj / ypitem.yzmj) * 100).toFixed(2) }}%
												</div>
												<span v-else>{{ row[item.prop] }}</span>
											</van-col>
										</van-row>
									</van-cell>
								</view>
							</van-tab>
						</van-tabs>

					</view>
					<view class="hclist" v-if="key==2">
						<van-uploader v-model="fileList" multiple :after-read="afterRead" />
					</view>
					<view class="hclist" v-if="key==3">
						<uni-forms ref="form" :model="checkform" labelWidth="80px">
							<uni-forms-item label="实际地类" name="nickName">
								<uni-data-select v-model="checkform.phonenumber" :localdata="range"></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="核查初判" name="phonenumber">
								<uni-data-select v-model="checkform.phonenumber" :localdata="range"></uni-data-select>
							</uni-forms-item>
							<uni-forms-item label="其它材料" name="email">
								<van-uploader v-model="checkform.fileList" multiple :after-read="afterRead" />
							</uni-forms-item>
							<uni-forms-item label="其它说明" name="sex" required>
								<uni-easyinput v-model="checkform.phonenumber" type="textarea" placeholder="请输入其它说明" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</van-tab>
			</van-tabs>
		</van-sticky>
		<div class="btns">
			<button type="primary" @click="">举证说明</button>
			<button type="primary" @click="">退回</button>
			<button type="primary" @click="save">保存</button>
			<button type="primary" @click="tj">提交</button>
		</div>

	</view>


</template>
<script>
	import {
		getDkjbxx,
		getDkjbywy,
		confirm,
		hcWork,
		getHcInfo,
		tjWork,
		getTjInfo
	} from "@/api/dkjbxx.js";
	import {
		jbxxs,
		tdxzTable,

	} from "../config";
	export default {
		name: "list",
		data() {
			return {
				active: 0,
				tabOptions: ['基本信息', '业务研判', '实地拍照', '核查信息'],
				loading: false,
				jbxxs: jbxxs,
				tdxzTable: tdxzTable,

				activeName: "jbxx",
				infoObj: {},
				activities: [],
				//业务研判
				ywyptab: "1",
				sheets: [],
				//上传拍照
				fileList: [],
				checkform: {},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

			};
		},
		mounted() {},
		methods: {
			handleClick(val) {
				let id = val.dkjdxxId
				getDkjbxx(id).then((res) => {
					this.infoObj = res.data;
				});
				getDkjbywy(id).then((res) => {
					if (res.data) {
						this.sheets = JSON.parse(res.data.sheetJson);
						this.ywyptab = this.sheets[0].sheet;
					}
					console.log(this.sheets);
				});
				getHcInfo({
					dkid: id,
					auditflowStep: 'WYDC',
					auditflowId: '',
					fieldworkId: ''

				}).then((res) => {
					this.checkform = res.data;
				});
				getTjInfo({
					dkid: id,
					auditflowStep: 'WYTJ',
					auditflowId: '',
					fieldworkId: ''

				}).then((res) => {
					// this.tjinfo = res.data;
				});
			},
			returnList() {
				this.$emit('returnList')
			},
			reset() {

			},
			afterRead(files, detail) {
				// files.forEach(element => {
				//   setTimeout(() => {
				//     element.status = null;
				//   }, 2000);
				// });
			}


		},
	};
</script>

<style lang="scss">
	.details {
		width: 100%;

		.van-icon {
			position: absolute;
			right: 20rpx;
			top: 70rpx;
			width: 70rpx;
			line-height: 74rpx;
			font-size: 60rpx;
		}

		// position: relative;
		.tabs {
			margin-bottom: 20rpx;
		}

		.hclist {
			height: 30vh;
			overflow-x: hidden;
			overflow-y: auto;


		}

		.btns {
			width: 100%;
			position: absolute;
			bottom: 200rpx;
			display: flex;
		}

	}
</style>