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.previewUrl" mode=""
					@tap="previewImage(image.previewUrl,'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 "
				@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.previewUrl" mode="" @tap="previewImage($event,'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 "
				@tap="chooseImage('C01','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.previewUrl" mode="" @tap="previewImage($event,'imgList3')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList3')"></image>
			</view>
			<view v-if="imageCollection.imgList3.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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.previewUrl" mode="" @tap="previewImage($event,'imgList4')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList4')"></image>
			</view>
			<view v-if="imageCollection.imgList4.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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.previewUrl" mode="" @tap="previewImage($event,'imgList5')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList5')"></image>
			</view>
			<view v-if="imageCollection.imgList5.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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.previewUrl" mode="" @tap="previewImage($event,'imgList6')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList6')"></image>
			</view>
			<view v-if="imageCollection.imgList6.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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.previewUrl" mode="" @tap="previewImage($event,'imgList7')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList7')"></image>
			</view>
			<view v-if="imageCollection.imgList7.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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.previewUrl" mode="" @tap="previewImage($event,'imgList8')"></image>
				<image class="delimgicon" src="/static/icon/delimgicon.png" mode=""
					@tap="delCheckImage(image,'carImageListId','imgList8')"></image>
			</view>
			<view v-if="imageCollection.imgList8.length==0" class="image-file dis f-c a-c j-c "
				@tap="chooseImage('C01','carImageListId','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: () => {},
			},
		},
		computed: {},
		data() {
			return {

			};
		},
		methods: {
			previewImage(e, imglist) {
				console.log(e, );
				console.log(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;
			}

			.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;
				}
			}
		}

	}
</style>