feat: 点检图片问题修复

src/pages/spotCheckOrder/addForm.vue

@@ -76,6 +76,18 @@
 									:class="{'error': item.numberNeedSwitch && !item.records}" 
 								  />
 							</view>
+							<view class="image" style="margin-top: 20rpx;">
+								<view class="image-list" :key="refreshKey">
+									<view class="image-item" v-for="(element,index) in item.imgList" :key="index">
+										<image :src="element" mode=""></image>
+										<u-icon name="close-circle-fill" color="red" class="close" size="36" @click="delImage(index)">
+										</u-icon>
+									</view>
+								</view>
+								<view class="image-item image-item1" @click="chooseImage(item)">
+									<image src="../../static/images/photo.png" mode=""></image>
+								</view>
+							</view>
 							<!-- <view class="dec">
 							    <view style="margin-right: 20rpx;">是否符合:</view>
 							    <input type="radio" v-model="item.isConform1" value="true"> 是
@@ -112,6 +124,7 @@
 	import * as spotCheckOrderApi from "@/api/spotCheckOrder"
 	import * as dictApi from "@/api/dict"
 	import { useCountStore } from '@/store'
+	import * as uploadApi from "@/api/upload"
 
 	const { proxy } = getCurrentInstance()
 	// 获取自定义的store
@@ -119,6 +132,7 @@
 
 	const loading = ref(false)
 	const type = ref('')
+	const imgList = ref([])
 	const list = ref([{
 		name: 'apple',
 		disabled: false
@@ -145,6 +159,7 @@
 	const field = ref('')
 	const maintenanceShift = ref([])
 	const subList = ref([])
+	const refreshKey = ref(0);
 	// 扫描设备条码
 	function chickRightButton(field) {
 		uni.scanCode({
@@ -303,6 +318,41 @@
 		}
 		singleColumnShow.value = false
 	}
+	
+	function chooseImage(dataItem) {
+		uni.chooseImage({
+			count: 1, // 默认9
+			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+			success: (res) => {
+				let filePath = res.tempFilePaths[0]
+				proxy.$modal.loading()
+				uploadApi.uploadFile({
+					filePath: filePath,
+					name: 'file',
+					formData: {
+						'user': 'test'
+					},
+				}).then(ret => {
+					if(dataItem['imgList']){
+						dataItem['imgList'].push(ret.data)
+					}else{
+						dataItem['imgList'] = [ret.data]
+					}
+					proxy.$modal.closeLoading()
+				}).catch((err) => {
+					proxy.$modal.closeLoading()
+				});
+			},
+		});
+	}
+	
+	// 删除图片
+	function delImage(index) {
+		imgList.value.splice(index, 1)
+	}
+	
+	
 	onLoad(async (option) => {
 		if (option.type) type.value = option.type;
 		maintenanceShift.value = await dictApi.getDict('maintenance_shift')
@@ -413,4 +463,50 @@
     text-align: center;
     font-size: 28rpx;
 }
+
+.image {
+	padding: 0px 30rpx;
+	padding-bottom: 30rpx;
+	display: flex;
+	align-items: center;
+
+	flex-wrap: wrap;
+
+	.image-list {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+}
+	.image-item {
+		width: 210rpx;
+		height: 210rpx;
+		margin-right: 20rpx;
+		position: relative;
+		border: 1px solid rgba(230, 230, 230, 0.5);
+		margin-bottom: 20rpx;
+		border-radius: 20rpx;
+		overflow: hidden;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+
+		.close {
+			position: absolute;
+			right: 0px;
+			top: 0px;
+		}
+	}
+
+	.image-item1 {
+		border: none;
+		margin-right: 0px;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
 </style>