zhapp/pages/quote/modules/imageData.vue

<template>
	<view class="image dis f-wrap j-s">
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>行驶证主页</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList1" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList1')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList1')"></image>
			</view>
			<view v-if="imageCollection.imgList1.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('C01','carImageListId','imgList1')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>行驶证副页</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList2" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList2')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList2')"></image>
			</view>
			<view v-if="imageCollection.imgList2.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('D01','carImageListId','imgList2')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>车主身份证正面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList3" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList3')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'ownerImageListId','imgList3')"></image>
			</view>
			<view v-if="imageCollection.imgList3.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('C02','ownerImageListId','imgList3')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>车主身份证反面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList4" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList4')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'ownerImageListId','imgList4')"></image>
			</view>
			<view v-if="imageCollection.imgList4.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('D02','ownerImageListId','imgList4')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>投保人身份证正面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList5" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList5')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'policyHolderImageListId','imgList5')"></image>
			</view>
			<view v-if="imageCollection.imgList5.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('C03','policyHolderImageListId','imgList5')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>投保人身份证反面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList6" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList6')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'policyHolderImageListId','imgList6')"></image>
			</view>
			<view v-if="imageCollection.imgList6.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('D03','policyHolderImageListId','imgList6')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>被保人身份证正面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList7" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList7')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'insuredPersonImageListId','imgList7')"></image>
			</view>
			<view v-if="imageCollection.imgList7.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('C04','insuredPersonImageListId','imgList7')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
		<view class="item dis f-c a-start mb-2">
			<view class="header-title mb-1">
				<text>被保人身份证反面</text>
			</view>
			<view class="image-view" v-for="(image,index) in imageCollection.imgList8" :key="index">
				<image class="file-img" :src="image.downloadUrl" mode=""
					@tap="previewImage(image.downloadUrl,'imgList8')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'insuredPersonImageListId','imgList8')"></image>
			</view>
			<view v-if="imageCollection.imgList8.length==0" class="image-file dis f-c a-c j-c "
				:disabled="!isUploadEnabled" @tap="chooseImage('D04','insuredPersonImageListId','imgList8')">
				<u-icon name="camera-fill" color="#999" size="28"></u-icon>
				<text>上传</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'name', //插件名称
		props: {
			//影像数据集合
			imageCollection: {
				type: Object,
				default: () => {},
			},
			// 控制是否允许上传
			isUploadEnabled: {
				type: Boolean,
				default: false,
			}
		},
		computed: {},
		data() {
			return {

			};
		},
		methods: {
			previewImage(e, imglist) {
				this.$emit('previewImage', e, imglist)
			},
			chooseImage(type, imageIdList, imgurl) {
				this.$emit('chooseImage', type, imageIdList, imgurl)
			},
			delCheckImage(e, carImageListId, imgList) {
				this.$emit('delCheckImage', e, carImageListId, imgList)
			},
		}
	};
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
	.image {
		padding: 20rpx;
		box-sizing: border-box;

		.item {
			width: 48%;

			.header-title {
				font-size: 30rpx;
				color: #333;
			}

			.image-file {
				position: relative;
				width: 100%;
				height: 204rpx;
				background: #D9D9D9;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				>text {
					font-size: 30rpx;
					color: #333;
				}
			}

			.image-view {
				position: relative;
				width: 100%;
				height: 204rpx;
				background: #D9D9D9;
				border-radius: 10rpx 10rpx 10rpx 10rpx;

				.file-img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.delimgicon {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}

	}

	.image-file[disabled] {
		opacity: 0.5;
		/* 降低透明度表示禁用 */
		pointer-events: none;
		/* 禁止点击事件 */
	}
</style>