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="/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 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="/static/img/information/house.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">房产信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<House></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="/static/img/information/car.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">车辆信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<House></House>
						</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="/static/img/information/car.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">保单信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<House></House>
						</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="/static/img/information/car.png" mode=""></image>
									<text class="size-28 sys-weight-600 m-l20">企业信息</text>
								</view>
							</view>
						</template>
						<view class="content">
							<House></House>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<EnButton is_both :leftText="'保存'" :rightText="'提交'" @onLeftSubmit="onLeftSubmit" @onSubmit="onSubmit">
		</EnButton>
	</view>
</template>

<script>
	import Car from "./components/car.vue"
	import Company from "./components/company.vue"
	import House from "./components/house.vue"
	import Guarantee from "./components/guarantee.vue"

	export default {
		components: {
			Car,
			House,
			Company,
			Guarantee
		},
		data() {
			return {
				show: false,
				showTitlt: false,
				title: '',
				fixedHeight: 0,
				scrollTop: 0,
				informationList: [{
					name: '身份信息',
					explain: '身份证、婚姻、职业、社保信息',
					icon: '/static/img/task/task-identity.png',
					path: '/page_task/identity/identity',
					type: 1,
					is_finish: false
				}, {
					name: '资产信息',
					explain: '房产、车辆等资产',
					icon: '/static/img/task/task-property.png',
					type: 2,
					is_finish: false
				}, {
					name: '申请信息',
					explain: '贷款额度信息',
					icon: '/static/img/task/task-apply.png',
					type: 3,
					is_finish: false
				}, {
					name: '联系人信息',
					explain: '其他联系人',
					icon: '/static/img/task/task-contacts.png',
					type: 4,
					is_finish: false
				}, {
					name: '征信信息',
					explain: '银行征信信息',
					icon: '/static/img/task/task-credit.png',
					type: 5,
					is_finish: false
				}, ]
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		onLoad(options) {
			this.title = options.title
		},
		methods: {
			onAuthentication(item) {
				uni.navigateTo({
					url: `${item.path}?title=${item.name}`
				})
			},
			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>