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

<template>
	<view class="details">
		<view class="search">
			<uni-icons type="bars" size="30" @click="returnList"></uni-icons>
		</view>
		<scroll-view class="top-menu-view" scroll-x="true">
			<view class="menu-topic-view" v-for="(item, key) in tabOptions" :key="key" @click="active=key">
				<view :class="active==key ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-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">
				</van-tab>
			</van-tabs>
		</van-sticky> -->
		<view>
			<view class="hclist" v-if="active==0">
				<view class="menu-list">
					<view class="list-cell list-cell-arrow" v-for="(item, i) in jbxxs" :key="i">
						<view class="menu-item-box">
							<view>{{item.name}}</view>
							<view class="text-right">{{infoObj[item.prop]}}</view>
						</view>
					</view>
				</view>
				<!-- <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">
				<scroll-view v-if="sheets.length" class="top-menu-view" scroll-x="true">
					<view class="menu-topic-view" v-for="ypitem in sheets" :key="ypitem.sheet"
						@click="ywyptab=ypitem.sheet">
						<view :class="ywyptab==ypitem.sheet ? 'menu-topic-act' : 'menu-topic'">
							<text class="menu-topic-text">{{ypitem.type}}</text>
							<view class="menu-topic-bottom">
								<view class="menu-topic-bottom-color"></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- <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">
					</van-tab>
				</van-tabs> -->
				<view class="swiper-item" v-for="ypitem in sheets" :key="ypitem.sheet">
					<view v-if="ywyptab==ypitem.sheet">
						<img :src="ypitem.photo" width="100%" />
						压占{{ ypitem.type }}面积共{{ ypitem.mjj }}平方米
						<view class="list-cell">
							<uni-row>
								<uni-col :span="8" v-for="(item, i) in tdxzTable" :key="i">{{item.label}}</uni-col>
							</uni-row>
						</view>
						<view class="list-cell">
							<uni-row v-for="(row, index) in ypitem.data_list" :key="index">
								<uni-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>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
			<view class="hclist" v-if="active==2">
				<view class="example-body">
					<uni-file-picker v-model="fileList" limit="9" title="最多选择9张图片"></uni-file-picker>
				</view>

			</view>
			<view class="hclist" v-if="active==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">
						<uni-file-picker v-model="checkform.fileList" title="添加照片或文件"></uni-file-picker>

					</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>
		</view>
		<div class="btns">
			<button type="primary" size="mini" @click=" toggle">举证说明</button>
			<button type="primary" size="mini" :disabled=" !qrdis" @click="affirm(0)">确认</button>
			<button type="primary" size="mini" :disabled=" !qrdis" @click="affirm(1)">退回</button>
			<button type="primary" size="mini" @click="save">保存</button>
			<button type="primary" size="mini" :disabled=" !tjdis" @click="tj">提交</button>
		</div>
		<uni-popup ref="popup" background-color="#fff">
			<uni-popup-dialog type="info" title="举证说明" :content="nowobj.notes"></uni-popup-dialog>
		</uni-popup>
	</view>


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

	} from "../config";
	export default {
		name: "list",
		data() {
			return {
				nowobj: {},
				active: 0,
				tabOptions: ['基本信息', '业务研判', '实地拍照', '核查信息'],
				loading: false,
				steps: [],
				qrdis: false,
				tjdis: 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) {
				this.nowobj = 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);
				});
				this.steps = [];
				getStep({
					dkjdxxId: id
				}).then((res) => {
					this.steps = res.data;
					this.qrdis = this.steps.find((x) => x.auditflowStep.includes('WYQR'))
					this.tjdis = this.steps.find((x) => x.auditflowStep.includes('TJ'))

				});
				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);
				// });
			},
			toggle() {
				this.$refs.popup.open('center')
			},
			affirm(confirmState) {
				uni.$globalData = this.nowobj
				this.$tab.navigateTo('/pages/index/common/edit?confirmState=' + confirmState)
			},
			tj() {
				uni.$globalData = this.nowobj
				this.$tab.navigateTo('/pages/index/common/tjDialog')
			},



		},
	};
</script>

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

		.uni-icons {
			position: absolute;
			right: 20rpx;
			top: 70rpx;
		}

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

		.hclist {
			height: 40vh;
			overflow-x: hidden;
			overflow-y: auto;
			background: #fff;
			padding: 10rpx;


		}

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

	}
</style>
<style scoped lang="scss">
	@import "./tabs.scss";

	.menu-list {
		margin: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>