feat(group): 优化团购管理图片上传功能

- 隐藏团购管理菜单项
- 改进图片上传区域UI，增加上传数量提示
- 添加计算属性uploadedImageCount统计成功上传图片数
- 优化上传组件样式，隐藏关闭提示图标
- 增加上传区域滚动条样式控制
- 控制上传区域在达到最大上传数时隐藏上传按钮

src/assets/json/authMenuList.json

@@ -37,7 +37,7 @@
         "icon": "ShoppingBag",
         "title": "团购管理",
         "isLink": "",
-        "isHide": false,
+        "isHide": true,
         "isFull": false,
         "isAffix": false,
         "isKeepAlive": false

src/views/groupPackageManagement/newGroup.vue

@@ -14,33 +14,33 @@
             <h3 style="font-weight: bold">基础信息：</h3>
             <!-- 团购图片上传 prop="imageValueStr" 本地服务测不了上传图片 先去掉必填-->
             <el-form-item label="图片">
-              <el-upload
-                ref="uploadRef"
-                v-model:file-list="storeInfoModel.imageValueStr"
-                list-type="picture-card"
-                :accept="'.jpg,.png'"
-                :limit="uploadMaxCount"
-                :auto-upload="false"
-                :disabled="hasUnuploadedImages"
-                multiple
-                :on-change="handleUploadChange"
-                :on-exceed="handleUploadExceed"
-                :on-preview="handlePictureCardPreview"
-                :before-remove="handleBeforeRemove"
-                :on-remove="handleRemove"
-                :show-file-list="true"
-              >
-                <template #trigger>
-                  <div
-                    v-if="(storeInfoModel.imageId?.length || 0) < uploadMaxCount"
-                    class="upload-trigger-card el-upload--picture-card"
-                  >
-                    <el-icon>
-                      <Plus />
-                    </el-icon>
-                  </div>
-                </template>
-              </el-upload>
+              <div class="upload-area" :class="{ 'upload-full': uploadedImageCount >= uploadMaxCount }">
+                <el-upload
+                  ref="uploadRef"
+                  v-model:file-list="storeInfoModel.imageValueStr"
+                  list-type="picture-card"
+                  :accept="'.jpg,.png'"
+                  :limit="uploadMaxCount"
+                  :auto-upload="false"
+                  :disabled="hasUnuploadedImages"
+                  multiple
+                  :on-change="handleUploadChange"
+                  :on-exceed="handleUploadExceed"
+                  :on-preview="handlePictureCardPreview"
+                  :before-remove="handleBeforeRemove"
+                  :on-remove="handleRemove"
+                  :show-file-list="true"
+                >
+                  <template #trigger>
+                    <div v-if="uploadedImageCount < uploadMaxCount" class="upload-trigger-card el-upload--picture-card">
+                      <el-icon>
+                        <Plus />
+                      </el-icon>
+                      <div class="upload-tip">({{ uploadedImageCount }}/{{ uploadMaxCount }})</div>
+                    </div>
+                  </template>
+                </el-upload>
+              </div>
             </el-form-item>
             <!-- 团购名称 -->
             <el-form-item label="团购名称" prop="groupName">
@@ -991,6 +991,11 @@ const visibleGroups = computed(() => {
   return lifeGroupBuyThalis.value.map((group, index) => ({ group, originalIndex: index }));
 });
 
+// 计算属性：获取已成功上传的图片数量
+const uploadedImageCount = computed(() => {
+  return storeInfoModel.value.imageValueStr.filter((file: any) => file.status === "success" && file.imageId).length;
+});
+
 // 计算属性：检查是否有未上传完成的图片
 const hasUnuploadedImages = computed(() => {
   // 检查是否有正在上传的文件
@@ -2232,15 +2237,65 @@ const handleImageParam = (list: any[], result: any[]) => {
       opacity: 0.5;
     }
   }
+
+  /* 上传项悬停和聚焦时显示状态标签 */
+  .el-upload-list__item:hover .el-upload-list__item-status-label {
+    display: inline-flex !important;
+    opacity: 1 !important;
+  }
+  .el-upload-list__item.is-success:focus .el-upload-list__item-status-label {
+    display: inline-flex !important;
+    opacity: 1 !important;
+  }
+
+  /* 隐藏关闭提示图标 */
+  .el-icon--close-tip {
+    display: none !important;
+  }
 }
 .upload-trigger-card {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   font-size: 28px;
   color: #8c939d;
+  .upload-tip {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #8c939d;
+  }
+}
+
+/* 上传区域样式 */
+.upload-area {
+  min-height: 300px;
+  padding: 20px;
+  :deep(.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label) {
+    display: inline-flex !important;
+    opacity: 1 !important;
+  }
+  :deep(.el-upload-list__item.is-success:focus .el-upload-list__item-status-label) {
+    display: inline-flex !important;
+    opacity: 1 !important;
+  }
+  :deep(.el-upload-list--picture-card .el-icon--close-tip) {
+    display: none !important;
+  }
+  &.upload-full {
+    :deep(.el-upload--picture-card) {
+      display: none !important;
+    }
+  }
+}
+
+/* 上传滚动条样式 */
+.upload-scrollbar {
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+  }
 }
 
 /* 表单容器 */