assess-app/page_task/task_details/module/property.vue

<template>
	<view class="text-color-333" style="position: relative;left: -15rpx;">
		<view class="property content p-30 sys-background-fff r-30">
			<view v-for="(property,propertyKey) in propertyList" class=" size-26">
				<!-- 房产信息 -->
				<view v-if="property.property_type===1" class="">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">房产信息</text>
					</view>
					<view class="property-box-one r-20 m-t30 p-20">
						<view class="" v-if="verifyKey('property_owner')">
							<text class="size-32 color-11003B sys-weight-600">{{property.data.property_owner}}</text>
							<text class="size-24 color-6E6686 m-l10">产权人</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule" v-if="verifyKey('house_city')">{{property.data.house_city}}</text>
							<text class="capsule" v-if="verifyKey('build_date')">{{property.data.build_date}}年建</text>
							<text class="capsule"
								v-if="verifyKey('covered_area')">{{property.data.covered_area}}m²</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="" v-if="verifyKey('deed_num')">
								<text class="text-color-666">房产证号</text>
								<text class="m-l10">{{property.data.deed_num}}</text>
							</view>
							<view class="row-c m-tb20" v-if="verifyKey('is_pay')">
								<image class="wh-30 m-r20" src="/page_task/static/img/task-details/money.png"
									mode="aspectFill">
								</image>
								<text>{{property.data.is_pay===1?'已支付材料费':'未支付材料费'}}</text>
							</view>
							<view class="row m-t20" v-if="verifyKey('house_city')">
								<image class="wh-30 m-r20 p-t6" src="/page_task/static/img/task-details/address-two.png"
									mode="aspectFill">
								</image>
								<view class="flex">
									<text
										class="flex">{{property.data.house_city}}{{property.data.house_address}}</text>
									<!--									<image class="card r-20 m-t20" src="/page_task/static/img/task-details/front.png"-->
									<!--										mode="aspectFill">-->
									<!--									</image>-->
								</view>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20" v-if="verifyKey('certificate_img')">
								<view class="m-b20">房产证件</view>
								<view class="row-c">
									<!--									<image class="picture m-r20 r-10" :src="property.data.certificate_img"-->
									<!--										mode="aspectFill">-->
									<!--									</image>-->
									<en-image @onShowImg="onPreviewImage" :img="property.data.certificate_img"></en-image>
								</view>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20"
								v-if="property.data.property && property.data.property.length>0">
								<view class="m-b20">房产关联图片</view>
								<view class="row-c">
									<!--									<image class="picture m-r20 r-10" :src="property.data.property" mode="aspectFill">-->
									<!--									</image>-->
									<en-image @onShowImg="onPreviewImage" :img="property.data.property"></en-image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 保单信息 -->
				<view v-else-if="property.property_type===2" class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">保单信息</text>
					</view>
					<view class="property-box-two r-20 m-t30 p-20" v-if="verifyKey('insurance_name')">
						<view class="">
							<text class="size-32 color-11003B sys-weight-600">{{property.data.insurance_name}}</text>
							<text class="size-24 color-6E6686 m-l10">公司</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text"
								v-if="verifyKey('insurance_type')">{{property.data.insurance_type}}</text>
							<text class="capsule two-text"
								v-if="verifyKey('year_money')">{{property.data.year_money}}元/年</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="" v-if="verifyKey('validity_date')">
								<text class="text-color-666">有效期</text>
								<text class="m-l10">{{property.data.validity_date}}</text>
							</view>
							<view class="row-c m-tb20" v-if="verifyKey('is_fees')">
								<image class="wh-30 m-r20" src="/page_task/static/img/task-details/money.png"
									mode="aspectFill">
								</image>
								<text>{{property.data.is_fees===1?'满足缴费情况':'未满足缴费情况'}}</text>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20" v-if="verifyKey('insurance_img')">
								<view class="m-b20">保单照片</view>
								<view class="row-c">
									<en-image @onShowImg="onPreviewImage" :img="property.data.insurance_img"></en-image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 车辆信息 -->
				<view v-else-if="property.property_type===3" class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">车辆信息</text>
					</view>
					<view class="property-box-three r-20 m-t30 p-20">
						<view class="" v-if="verifyKey('brand_name')">
							<text class="size-32 color-11003B sys-weight-600">{{property.data.brand_name}}</text>
							<text class="size-24 color-6E6686 m-l10">品牌</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text" v-if="verifyKey('colour')">{{property.data.colour}}</text>
							<text class="capsule two-text"
								v-if="verifyKey('register_date')">{{property.data.register_date}}年登记</text>
							<text class="capsule two-text"
								v-if="verifyKey('car_price')">{{property.data.car_price}}万元</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="" v-if="verifyKey('car_num')">
								<text class="text-color-666">车牌号</text>
								<text class="m-l10">{{property.data.car_num}}</text>
							</view>
							<view class="m-tb16" v-if="verifyKey('car_vin')">
								<text class="text-color-666">车架号</text>
								<text class="m-l10">{{property.data.car_vin}}</text>
							</view>
							<view class="" v-if="verifyKey('car_type')">
								<text class="text-color-666">车牌类型</text>
								<text class="m-l10">{{property.data.car_type===1?'运营车':'非运营车'}}</text>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20">
								<view class="row-c" v-if="verifyKey('register_img')">
									<view class="">
										<text class="size-24">行驶证</text>
										<en-image @onShowImg="onPreviewImage" :img="property.data.register_img"></en-image>
									</view>
									<view class="m-l20" v-if="verifyKey('driving_img')">
										<text class="size-24">车辆登记证</text>
										<en-image  @onShowImg="onPreviewImage":img="property.data.driving_img"></en-image>
									</view>
								</view>
								<view class="row-c" v-if="verifyKey('car_img')">
									<view class="">
										<view class="size-24 m-t20">车辆照片</view>
										<view class="row-c m-t10" style="flex-wrap: wrap;">
											<en-image @onShowImg="onPreviewImage" :img="property.data.car_img"></en-image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 企业信息 -->
				<view v-else-if="property.property_type===4" class="m-t30">
					<view class="row-c">
						<view class="dot"></view>
						<text class="sys-weight-600 m-l10">企业信息</text>
					</view>
					<view class="property-box-four r-20 m-t30 p-20">
						<view class="" v-if="verifyKey('firm_name')">
							<text class="size-32 color-11003B sys-weight-600">{{property.data.firm_name}}</text>
						</view>
						<view class="size-26 m-tb10">
							<text class="capsule two-text"
								v-if="verifyKey('establish_city')">{{property.data.establish_city}}</text>
							<text class="capsule two-text"
								v-if="verifyKey('establish_date')">{{property.data.establish_date}}成立</text>
						</view>
						<view class="sys-background-fff r-20 p-20">
							<view class="" v-if="verifyKey('year_tax')">
								<text class="text-color-666">年交税额</text>
								<text class="m-l10">{{property.data.year_tax}}元</text>
							</view>
							<view class="m-tb16" v-if="verifyKey('year_invoice')">
								<text class="text-color-666">年开票额</text>
								<text class="m-l10">{{property.data.year_invoice}}元</text>
							</view>
							<view class="" v-if="verifyKey('tax_grade_name')">
								<text class="text-color-666">税务登记</text>
								<text class="m-l10">{{property.data.tax_grade_name}}级</text>
							</view>
							<view class="row-c m-tb20" v-if="verifyKey('is_end_tax')">
								<image class="wh-30 m-r20" src="/page_task/static/img/task-details/money.png"
									mode="aspectFill">
								</image>
								<text>{{property.data.is_end_tax===1?'无税务断缴情况':'有税务断缴情况'}}</text>
							</view>
							<view class="row m-t20" v-if="verifyKey('establish_address')">
								<image class="wh-30 m-r20 p-t6" src="/page_task/static/img/task-details/address-two.png"
									mode="aspectFill">
								</image>
								<view class="flex">
									<text class="flex">{{property.data.establish_address}}</text>
									<image class="card r-20 m-t20" src="/page_task/static/img/task-details/front.png"
										mode="aspectFill"></image>
								</view>
							</view>
							<view class="sys-from-background-color m-t20 p-20 r-20" v-if="verifyKey('firm_img')">
								<view class="size-24">企业照片</view>
								<view class="row-c m-t10" style="flex-wrap: wrap;">
									<en-image @onShowImg="onPreviewImage" :img="property.data.firm_img"></en-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<en-blank v-if="propertyList.length<=0"></en-blank>
		</view>
	</view>
</template>

<script>
	import EnImage from "@/components/en-utils/en-image/en-image.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		components: {
			EnBlank,
			EnImage
		},
		props: {
			propertyList: {
				default: []
			},
			propertyKey: {
				default: []
			}
		},
		data() {
			return {}
		},
		methods: {
      onPreviewImage(url){
        this.$emit('onShowImg',url)
      },
			verifyKey(key) {
				return this.propertyKey.indexOf(key) >= 0
			}
		},
	}
</script>

<style lang="scss" scoped>
	.property {
		padding-top: 90rpx;
		background-image: url('/page_task/static/img/task-details/bg-four.png');
		background-repeat: no-repeat;
		background-size: 100% auto;


		.bg-box {
			width: 710rpx;
			height: 80rpx;
		}

		.dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #0FB160;
		}
	}

	.property-box-one {
		position: relative;
		background: linear-gradient(161deg, #B0FDB3 0%, #5EDE9D 100%);

	}

	.property-box-two {
		position: relative;
		background: linear-gradient(161deg, #FFE2E2 0%, #FBCACA 100%);

		.two-text {
			background: #D06565;
		}

		.picture {
			width: 160rpx;
			height: 190rpx;
			display: block;
		}
	}

	.property-box-three {
		position: relative;
		background: linear-gradient(161deg, #CDE7FD 0%, #B6D2FB 100%);

		.two-text {
			background: #2E86F4;
		}

		.picture {
			width: 160rpx;
			height: 90rpx;
			display: block;
			border-radius: 10rpx;
		}
	}

	.property-box-four {
		position: relative;
		background: linear-gradient(161deg, #F4DCBD 0%, #EEC398 100%);

		.two-text {
			background: #C37929;
		}

		.picture {
			width: 160rpx;
			height: 90rpx;
			display: block;
			border-radius: 10rpx;
		}
	}

	.property-icon {
		position: absolute;
		right: 40rpx;
		top: 12rpx;
	}

	.capsule {
		color: #fff;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 99rpx;
		background: #0FB160;
		text-align: center;
		padding: 0 20rpx;
		margin-right: 10rpx;
	}

	.card {
		width: 160rpx;
		height: 90rpx;
		display: block;
	}
</style>