123

uniapp/WorkCameraf/pages/index/index.vue

@@ -35,17 +35,18 @@
       <view class="container">
         <view style="height: 80rpx"></view>
 
-        <!-- 图片预览区域 -->
+        <!-- 图片列表区域 -->
         <view class="preview-box">
-          <text class="preview-title">图片预览 ({{ imageList.length }}/{{ MAX_IMAGES }})</text>
+          <text class="preview-title">图片列表 ({{ imageList.length }}/{{ MAX_IMAGES }})</text>
 
           <!-- 多图预览列表 -->
           <view class="multi-preview-container" v-if="imageList.length > 0">
             <view
               class="preview-item"
+              :class="{ 'preview-item-selected': currentImageIndex === index }"
               v-for="(img, index) in imageList"
               :key="index"
-              @click="handlePreviewImage(index)"
+              @click="handleSelectImage(index)"
             >
               <image :src="img.watermark" mode="aspectFill" class="preview-thumb"></image>
               <view class="delete-btn" @click.stop="removeImage(index)">
@@ -61,12 +62,16 @@
               @click="handleAddMorePhoto"
             >
               <text class="add-icon">+</text>
-              <text class="add-text">继续拍摄</text>
+              <text class="add-text">添加</text>
             </view>
           </view>
+        </view>
 
-          <!-- 单图预览（兼容模式，显示当前选中的图片） -->
+        <!-- 当前图片预览区域 -->
-          <view class="preview-img" v-if="imageSrc">
+        <view class="current-preview-box" v-if="imageSrc">
+          <text class="preview-title">当前图片预览</text>
+          <!-- 单图预览（显示当前选中的图片） -->
+          <view class="preview-img">
             <image
               :src="imageSrc"
               @click="handlePreviewCurrentImage"
@@ -160,28 +165,35 @@
 
         <!-- 底部操作按钮 -->
         <view class="footer">
-          <button type="primary" class="btn-cancel" @click="handleRetakePhoto">
+          <view class="footer-row">
-            重拍
+            <button type="primary" class="btn-action btn-cancel" @click="handleRetakePhoto">
-          </button>
+              重新开始拍摄
-          <button type="primary" class="btn-cancel" @click="handleRetakeCancel">
+            </button>
-            清空
+            <button type="primary" class="btn-action btn-continue" @click="handleAddMorePhoto">
-          </button>
+              继续拍照
-          <button
+            </button>
-            type="primary"
+          </view>
-            class="btn-save"
+          <view class="footer-row">
-            @click="handleSaveImage"
+            <button type="primary" class="btn-action btn-delete" @click="handleDeleteCurrentImage">
-            :disabled="isSubmitting"
+              删除图片
-          >
+            </button>
-            保存图片
+            <button
-          </button>
+              type="primary"
-          <button
+              class="btn-action btn-save"
-            type="primary"
+              @click="handleSaveImage"
-            class="btn-submit"
+              :disabled="isSubmitting"
-            @click="handleSaveAndSubmit"
+            >
-            :disabled="isSubmitting"
+              保存图片
-          >
+            </button>
-            提交数据
+            <button
-          </button>
+              type="primary"
+              class="btn-action btn-submit"
+              @click="handleSaveAndSubmit"
+              :disabled="isSubmitting"
+            >
+              提交数据
+            </button>
+          </view>
         </view>
       </view>
     </uni-popup>
@@ -234,6 +246,7 @@ const originalImageSrc = ref("");
 // 多图支持
 const imageList = ref([]); // 存储多张图片 [{original, watermark, sizeInfo}]
 const MAX_IMAGES = 15; // 最大图片数量
+const currentImageIndex = ref(0); // 当前选中的图片索引
 const imageSizeInfo = ref({
   original: {
     width: 0,
@@ -374,23 +387,56 @@ const addImageToList = async (imgPath) => {
   });
 };
 
-// 删除图片
+// 删除图片（带二次确认弹窗）
 const removeImage = (index) => {
-  if (imageList.value.length > index) {
+  uni.showModal({
-    imageList.value.splice(index, 1);
+    title: '提示',
-    // 更新当前显示的图片
+    content: '确定要删除该图片吗？',
-    if (imageList.value.length > 0) {
+    confirmText: '确定',
-      const newIndex = Math.min(index, imageList.value.length - 1);
+    cancelText: '取消',
-      imageSrc.value = imageList.value[newIndex].watermark;
+    success: (res) => {
-      originalImageSrc.value = imageList.value[newIndex].original;
+      if (res.confirm) {
-    } else {
+        // 用户点击确定，执行删除
-      imageSrc.value = "";
+        if (imageList.value.length > index) {
-      originalImageSrc.value = "";
+          imageList.value.splice(index, 1);
+          // 更新当前显示的图片
+          if (imageList.value.length > 0) {
+            const newIndex = Math.min(index, imageList.value.length - 1);
+            currentImageIndex.value = newIndex;
+            imageSrc.value = imageList.value[newIndex].watermark;
+            originalImageSrc.value = imageList.value[newIndex].original;
+          } else {
+            currentImageIndex.value = 0;
+            imageSrc.value = "";
+            originalImageSrc.value = "";
+          }
+        }
+      }
+      // 用户点击取消，关闭弹窗，不做任何操作
     }
-  }
+  });
 };
 
-// 预览指定索引的图片
+// 删除当前选中的图片（底部按钮调用）
+const handleDeleteCurrentImage = () => {
+  if (imageList.value.length === 0) {
+    uni.showToast({
+      title: '没有可删除的图片',
+      icon: 'none'
+    });
+    return;
+  }
+  removeImage(currentImageIndex.value);
+};
+
+// 选中指定索引的图片（点击缩略图）
+const handleSelectImage = (index) => {
+  currentImageIndex.value = index;
+  imageSrc.value = imageList.value[index].watermark;
+  originalImageSrc.value = imageList.value[index].original;
+};
+
+// 预览指定索引的图片（长按或双击可用）
 const handlePreviewImage = (index) => {
   const urls = imageList.value.map((img) => img.watermark);
   uni.previewImage({
@@ -898,6 +944,15 @@ onLoad(async () => {
   padding: 20rpx;
   margin-bottom: 20rpx;
   text-align: center;
+  border-bottom: 1rpx solid #eee;
+}
+
+/* 当前图片预览区域 */
+.current-preview-box {
+  background: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+  text-align: center;
 }
 
 .preview-title {
@@ -924,6 +979,14 @@ onLoad(async () => {
   border-radius: 8rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  border: 4rpx solid transparent;
+  box-sizing: border-box;
+}
+
+/* 选中状态 */
+.preview-item-selected {
+  border: 4rpx solid #007aff;
+  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
 }
 
 .preview-thumb {
@@ -1055,8 +1118,23 @@ onLoad(async () => {
 
 .footer {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 20rpx;
   margin-top: 40rpx;
+  padding-bottom: 40rpx;
+}
+
+.footer-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.btn-action {
+  flex: 1;
+  font-size: 26rpx;
+  padding: 16rpx 0;
+  margin: 0;
 }
 
 .btn-cancel {
@@ -1064,6 +1142,16 @@ onLoad(async () => {
   color: #fff;
 }
 
+.btn-continue {
+  background: #17a2b8;
+  color: #fff;
+}
+
+.btn-delete {
+  background: #dc3545;
+  color: #fff;
+}
+
 .btn-save {
   background: #28a745;
   color: #fff;
@@ -1075,7 +1163,8 @@ onLoad(async () => {
 }
 
 .btn-save:disabled,
-.btn-submit:disabled {
+.btn-submit:disabled,
+.btn-action:disabled {
   background: #ccc !important;
   color: #999 !important;
   opacity: 0.6;