assess-app/page_task/property/property.vue

<template>
	<view class="total-page page-env-160 page-box container task-bg">
		<Nav :title="title" :genre="4" is_fixed :opacity="scrollTop"></Nav>
		<view class="m-t30" :style="{top:`${$tools.topHeight()+10}px`}">
			<view class="m-lr30">
				<!-- 			<view class="">
					<view class="collapse-title page-box-bg-fff r-30 p-30 m-lr30" @click="show = !show">
						<view class="row-justify-sb center">
							<view class="row-c">
								<image class="wh-60" src="/page_task/static/img/information/house.png" mode=""></image>
								<text class="size-28 sys-weight-600 m-l20">房产信息</text>
							</view>
						</view>
					</view>
					<view class="content sys-list-background-color p-lr30" v-if="show">
						<House></House>
					</view>
				</view> -->
				<uni-collapse ref="collapse" accordion class="sys-from-background-color">
					<uni-collapse-item titleBorder="none" :border="true" :open="true" :rightLength="houseList.length"
						v-show="propertyKey.indexOf('house_item')>=0"
						class="collapse-item-house page-box-bg-fff p-30 r-30">
						<template v-slot:title>
							<view class="row-justify-sb center">
								<view class="row-c">
									<image class="wh-60" src="/page_task/static/img/information/house.png" mode="">
									</image>
									<text class="size-28 sys-weight-600 m-l20">房产信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<House v-model="houseList" :show-keys="propertyKey" @onResize="onResizeInit"></House>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="true" :rightLength="carList.length"
						v-show="propertyKey.indexOf('car_item')>=0" class="collapse-item-car    p-30 r-30">
						<template v-slot:title class="page-box-bg-fff">
							<view class="row-justify-sb center">
								<view class="row-c">
									<image class="wh-60" src="/page_task/static/img/information/car.png" mode="">
									</image>
									<text class="size-28 sys-weight-600 m-l20">车辆信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<property-car v-model="carList" :show-keys="propertyKey"
								@onResize="onResizeInit"></property-car>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="true" :rightLength="insuranceList.length"
						v-show="propertyKey.indexOf('insurance_item')>=0"
						class="collapse-item-guarantee  page-box-bg-fff p-30 r-30">
						<template v-slot:title>
							<view class="row-justify-sb center">
								<view class="row-c">
									<image class="wh-60" src="/page_task/static/img/information/car.png" mode="">
									</image>
									<text class="size-28 sys-weight-600 m-l20">保单信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<property-guarantee v-model="insuranceList" :show-keys="propertyKey"
								@onResize="onResizeInit"></property-guarantee>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="true" v-show="propertyKey.indexOf('firm_item')>=0"
						:rightLength="firmList.length" class="collapse-item-company page-box-bg-fff p-30 r-30">
						<template v-slot:title>
							<view class="row-justify-sb center">
								<view class="row-c">
									<image class="wh-60" src="/page_task/static/img/information/car.png" mode="">
									</image>
									<text class="size-28 sys-weight-600 m-l20">企业信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<property-company v-model="firmList" :show-keys="propertyKey"
								@onResize="onResizeInit"></property-company>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<EnButton :text="'保存'" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import House from "./components/house.vue"
	import PropertyCar from "@/page_task/property/components/car.vue";
	import PropertyGuarantee from "@/page_task/property/components/guarantee.vue";
	import PropertyCompany from "@/page_task/property/components/company.vue";
	import tools from "@/service/tools";

	export default {
		components: {
			PropertyCompany,
			PropertyGuarantee,
			PropertyCar,
			House,
		},
		data() {
			return {
				title: '',
				fixedHeight: 0,
				scrollTop: 0,
				propertyKey: [],
				propertyData: [],
				houseList: [],
				insuranceList: [],
				firmList: [],
				carList: [],
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},

		onLoad(options) {
			this.title = options.title
			let propertyData = uni.getStorageSync('propertyData')
			let propertyKey = uni.getStorageSync('propertyKey')
			this.propertyData = propertyData
			this.propertyKey = propertyKey
			this.setPropertyData()

		},
		methods: {
			setPropertyData() {
				if (this.propertyData.length > 0) {
					this.propertyData.forEach(item => {
						if (item.property_type * 1 === 1) {
							this.houseList.push(item)
						} else if (item.property_type * 1 === 2) {
							this.carList.push(item)
						} else if (item.property_type * 1 === 3) {
							this.insuranceList.push(item)
						} else if (item.property_type * 1 === 4) {
							this.firmList.push(item)
						}
					})
				}
			},
			onResizeInit() {
				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.collapse.resize()
					})
				}, 200)
			},
			onSubmit() {
				let propertyData = []
				for (let i in this.houseList) {
					propertyData.push(this.houseList[i])
				}
				for (let i in this.carList) {
					propertyData.push(this.carList[i])
				}
				for (let i in this.insuranceList) {
					propertyData.push(this.insuranceList[i])
				}
				for (let i in this.firmList) {
					propertyData.push(this.firmList[i])
				}
				uni.$emit('putPropertyInfo', propertyData)
				setTimeout(() => {
					tools.leftClick()
				}, 50)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info_button {
		width: 130rpx;
		height: 60rpx;
		border: none;
		line-height: 60rpx;
	}

	.property_content {
		width: 100%;
		position: absolute;
	}

	/deep/ .uni-collapse {
		background-color: #EEF1F7 !important;
		border-radius: 30rpx;
	}

	uni-collapse-item {
		margin-bottom: 20rpx;
	}

	button::after {
		border: none;
	}

	.collapse-item-house {
		background: linear-gradient(180deg, rgba(255, 92, 0, 0.1) 0%, rgba(255, 255, 255, 1) 60rpx);
	}

	.collapse-item-car {
		background: linear-gradient(180deg, rgba(0, 163, 255, 0.1) 0%, rgba(255, 255, 255, 1) 60rpx);
	}

	.collapse-item-guarantee {
		background: linear-gradient(180deg, rgba(0, 255, 194, 0.1) 0%, rgba(255, 255, 255, 1) 60rpx);
	}

	.collapse-item-company {
		background: linear-gradient(180deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 255, 255, 1) 60rpx);
	}
</style>