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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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 accordion class="">
					<uni-collapse-item titleBorder="none" :border="false"
						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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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"></House>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="false" 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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/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"></property-car>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="false"
						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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/car.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">保单信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<property-guarantee></property-guarantee>
						</view>
					</uni-collapse-item>
					<uni-collapse-item titleBorder="none" :border="false"
						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="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/information/car.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">企业信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<property-company></property-company>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<EnButton is_both :leftText="'保存'" :rightText="'提交'" @onLeftSubmit="onLeftSubmit" @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";

	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)
            }
          })
        }
      },
			onLeftSubmit() {
				console.log('预览');
			},
			onSubmit() {
				console.log('提交资料');
			},
		}
	}
</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>