zhapp/pages/quote/imageGalleryPage.vue

<template>
	<view class="page">
		<u-sticky zIndex="999" customNavHeight="0">
			<uni-NavBar headerTitle="报价详情" background="#fff" borderBottom="1rpx solid #eee" :isSlot="false"
				:rightSlot="true">
			</uni-NavBar>
		</u-sticky>
		<view class="content">
			<imageDataVue @previewImage="previewImage" @delCheckImage="delCheckImage" :imageCollection="imageCollection"
				@chooseImage="chooseImage" :isUploadEnabled='true'></imageDataVue>
		</view>
		<view class="footer dis a-c j-s">
			<view class="btn btns dis a-c j-c" @click="cancel">
				取消
			</view>
			<view class="btn dis a-c j-c " @click="submit">
				确定
			</view>
		</view>
		<!-- 图片预览组件 -->
		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
	</view>
</template>

<script>
	import store from '@/store';
	import previewImage from '@/components/previewImage/previewImage.vue'; //引用插件
	import imageDataVue from './modules/imageData.vue'; //影像信息
	export default {
		components: {
			previewImage,
			imageDataVue
		},
		data() {
			return {
				modificationFlag: false, //影像修改标识
				previewImgs: [], //图片预览数组
				carImageListId: [], //车
				ownerImageListId: [], //车主
				policyHolderImageListId: [], //投保人
				insuredPersonImageListId: [], //被保人
				imageCollection: {
					imgList1: [],
					imgList2: [],
					imgList3: [],
					imgList4: [],
					imgList5: [],
					imgList6: [],
					imgList7: [],
					imgList8: [],
				},
			}
		},
		onShow() {

		},
		async onLoad(options) {
			if (options) {
				await this.imageEcho(options.quoteNo) // 影像获取
				console.log(this.imageCollection);
			}
		},
		methods: {
			//取消
			cancel() {
				uni.navigateBack(-1)
			},
			//确定
			submit() {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (this.modificationFlag) { //修改后替换上级页面内容
					prevPage.$vm.modificationFlag = this.modificationFlag; //修改影像标识
					prevPage.$vm.carImageListId = this.carImageListId;
					prevPage.$vm.ownerImageListId = this.ownerImageListId;
					prevPage.$vm.policyHolderImageListId = this.policyHolderImageListId;
					prevPage.$vm.insuredPersonImageListId = this.insuredPersonImageListId;
				}
				uni.navigateBack(-1)

			},
			//删除图片
			delCheckImage(param, IdList, srcList) {
				this[IdList].map((ele, index) => {
					if (param.imageId === ele.imageId) {
						this[IdList].splice(index, 1);
					}
					return ele;
				});
				this[srcList].map((ele, index) => {
					if (param.imageId === ele.imageId) {
						this[srcList].splice(index, 1);
					}
					return ele;
				});
			},
			//影像预览
			previewImage(e, type) {
				this.previewImgs = this.imageCollection[type];
				var current = e;
				this.$refs.previewImage.open(current); // 传入当前选中的图片地址或序号
			},
			async chooseImage(type, imageIdList, imgurl) {
				let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed']
				});

				if (chooseImageRes) {
					let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
					if (!size) {
						this.$refs.uToast.show({
							title: '上传图片大小不能超过 5MB!',
							type: 'error',
						})
						return false
					};
					uni.uploadFile({
						url: this.$base.baseUrl + '/file/upload',
						filePath: chooseImageRes.tempFilePaths[0],
						name: "file",
						formData: {
							'type': 'image',
						},
						header: {
							Authorization: store.state.token,
							system_code: store.state.system_code ? store.state.system_code : ''
						},
						success: async (imgRes) => {
							let data = JSON.parse(imgRes.data);
							if (data.code == "200") {
								if (this[imageIdList].some(v => v.imageCode == type)) {
									this[imageIdList].map(val => {
										if (val.imageCode == type) {
											val.imageBase64List[0].imageId = data.data.id;
										}
									})
								} else {
									this[imageIdList].push({
										imageBase64List: [{
											imageId: data.data.id
										}],
										imageCode: type,
									})
								}
								this.imageCollection[imgurl].push(data.data);
								this.modificationFlag = true;
							}
						}
					})
				}

			},
			//影像查询
			async imageEcho(quotenos) {
				this.imageCollection = {
					imgList1: [],
					imgList2: [],
					imgList3: [],
					imgList4: [],
					imgList5: [],
					imgList6: [],
					imgList7: [],
					imgList8: [],
				};
				let res = await this.$http.get('/order/taskImages/selectByQuoteNo?quoteNo=' + quotenos);
				if (res.code == "200") {
					res.data.images.forEach((keys) => {
						if (keys.downloadUrl) {
							switch (keys.imageType) {
								case 'C01':
									this.carImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList1.push(keys);
									break;
								case 'D01':
									this.carImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList2.push(keys);
									break;
								case 'C02':
									this.ownerImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList3.push(keys);
									break;
								case 'D02':
									this.ownerImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList4.push(keys);
									break;
								case 'C03':
									this.policyHolderImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList5.push(keys);
									break;
								case 'D03':
									this.policyHolderImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList6.push(keys);
									break;
								case 'C04':
									this.insuredPersonImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList7.push(keys);
									break;
								case 'D04':
									this.insuredPersonImageListId.push({
										imageBase64List: [{
											imageId: keys.imageId
										}],
										imageCode: keys.imageType,
									})
									this.imageCollection.imgList8.push(keys);
									break;
								default:
									break;
							}
						}
					});

				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx 35rpx;
		box-sizing: border-box;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 25rpx 30rpx 55rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 254, 245, 0.7) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		backdrop-filter: blur(12rpx);

		.btn {
			width: 100%;
			background: #FDE935;
			padding: 25rpx 20rpx;
			box-sizing: border-box;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			margin: 0 10rpx;
		}

		//操作按钮特殊样式
		.btns {
			background: rgba(253, 233, 53, 0.2);
			border: 1rpx solid #FDE935;
			padding: 22rpx 20rpx;
		}
	}
</style>