wuhb 2 months ago
parent
commit
6a34c44287
3 changed files with 108 additions and 14 deletions
  1. 1 12
      components/upload-image/upload-image.uvue
  2. 106 1
      pages/apply/applyNew.uvue
  3. 1 1
      pages/item/index.uvue

+ 1 - 12
components/upload-image/upload-image.uvue

@@ -177,18 +177,7 @@
 
     // 删除图片
     const handleDelete = (index: number): void => {
-        uni.showModal({
-            title: '确认删除',
-            content: '确定要删除这张图片吗?',
-            success: (res) => {
-                const confirm = res.confirm as boolean
-                if (confirm) {
-                    imageList.value.splice(index, 1)
-                    emit('update:modelValue', imageList.value)
-                    emit('change', imageList.value)
-                }
-            }
-        })
+        emit('delete', index, imageList.value)
     }
 </script>
 

+ 106 - 1
pages/apply/applyNew.uvue

@@ -178,6 +178,7 @@
 				            :modelValue="newMaterial.imageUrls"
 				            businessType="material"
 				            @update:modelValue="handleImageUpdate"
+				            @delete="handleImageDelete"
 				        />
 				    </view>
 				</view>
@@ -212,6 +213,23 @@
 				</scroll-view>
 		    </view>
 		</view>
+		
+		<!-- 删除确认弹窗 -->
+		<view v-if="showDeleteConfirm" class="delete-confirm-modal">
+		    <view class="delete-confirm-mask" @click="showDeleteConfirm = false"></view>
+		    <view class="delete-confirm-content">
+		        <text class="delete-confirm-title">确认删除</text>
+		        <text class="delete-confirm-text">确定要删除这张图片吗?</text>
+		        <view class="delete-confirm-btns">
+		            <view class="delete-confirm-cancel" @click="showDeleteConfirm = false">
+		                <text class="delete-confirm-cancel-text">取消</text>
+		            </view>
+		            <view class="delete-confirm-ok" @click="confirmDeleteImage">
+		                <text class="delete-confirm-ok-text">确定</text>
+		            </view>
+		        </view>
+		    </view>
+		</view>
 	</view>
 </template>
 
@@ -264,6 +282,8 @@ const isSearching = ref<boolean>(false)
 const showAddMaterialModal = ref<boolean>(false)
 const showMeasurePicker = ref<boolean>(false)
 const measureList = ref<UTSJSONObject[]>([])
+const showDeleteConfirm = ref<boolean>(false)
+const deleteImageIndex = ref<number>(0)
 
 type NewMaterial = {
 	itemName: string
@@ -661,6 +681,17 @@ const handleImageUpdate = (value: UploadResponse[]): void => {
     newMaterial.value.imageUrls = value
 }
 
+// 处理图片删除
+const handleImageDelete = (index: number, currentList: UploadResponse[]): void => {
+    deleteImageIndex.value = index
+    showDeleteConfirm.value = true
+}
+
+const confirmDeleteImage = (): void => {
+    newMaterial.value.imageUrls.splice(deleteImageIndex.value, 1)
+    showDeleteConfirm.value = false
+}
+
 // 处理新增物料
 const handleAddMaterial = async (): Promise<void> => {
 	// 验证输入
@@ -1396,4 +1427,78 @@ onMounted(() => {
 					font-size: 24rpx;
 					color: #999999;
 				}
-</style>
+				
+				/* 删除确认弹窗样式 */
+				.delete-confirm-modal {
+					position: fixed;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					z-index: 10000;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				
+				.delete-confirm-mask {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background-color: rgba(0, 0, 0, 0.5);
+				}
+				
+				.delete-confirm-content {
+					position: relative;
+					width: 600rpx;
+					background-color: #ffffff;
+					border-radius: 16rpx;
+					padding: 40rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+				}
+				
+				.delete-confirm-title {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: #333333;
+					margin-bottom: 20rpx;
+				}
+				
+				.delete-confirm-text {
+					font-size: 28rpx;
+					color: #666666;
+					margin-bottom: 40rpx;
+				}
+				
+				.delete-confirm-btns {
+					display: flex;
+					flex-direction: row;
+					gap: 40rpx;
+				}
+				
+				.delete-confirm-cancel {
+					padding: 20rpx 60rpx;
+					background-color: #f5f5f5;
+					border-radius: 12rpx;
+				}
+				
+				.delete-confirm-cancel-text {
+					font-size: 28rpx;
+					color: #666666;
+				}
+				
+				.delete-confirm-ok {
+					padding: 20rpx 60rpx;
+					background-color: #ff4d4f;
+					border-radius: 12rpx;
+				}
+				
+				.delete-confirm-ok-text {
+					font-size: 28rpx;
+					color: #ffffff;
+				}
+ </style>

+ 1 - 1
pages/item/index.uvue

@@ -68,7 +68,7 @@
 
 <script setup lang="uts">
     import { ref, onMounted } from 'vue'
-	import { onLoad, onShow } from '@dcloudio/uni-app';
+	import { onShow } from '@dcloudio/uni-app';
     import { getItemList, getItemTypeListByParentId } from '../../api/apply/index'
 
     type CategoryItem = { id: string; name: string; code: string }