修改

src/views/enterprisePurchase/index.vue

@@ -83,10 +83,7 @@
             </el-form-item>
 
             <el-form-item label="按钮图标：">
-              <div class="upload-placeholder-square" @click="triggerUpload('rightBtnIcon')">
-                <img v-if="form.rightBtnIcon" :src="form.rightBtnIcon" class="form-preview-img-square" style="width: 24px; height: 24px" />
-                <el-icon v-else class="upload-icon"><Plus /></el-icon>
-              </div>
+              <UploadImage v-model="form.rightBtnIcon" :limit="1" width="32px" height="32px" />
               <div class="field-tip">建议尺寸: 32*32, 格式: PNG/SVG</div>
             </el-form-item>
 
@@ -117,21 +114,15 @@
             <span class="section-desc">尺寸要求：790 * 460，支持上传本地图片并设置跳转链接</span>
           </div>
           <div class="left-ad-container">
-            <div
-              class="left-ad-preview-wrapper"
-              :class="{ expanded: leftAdHover }"
-              @mouseenter="leftAdHover = true"
-              @mouseleave="leftAdHover = false"
-            >
-              <img v-if="leftAdForm.leftAdImage" :src="leftAdForm.leftAdImage" class="left-ad-img" alt="左侧广告" />
-              <div v-else class="left-ad-empty" @click="triggerUpload('leftAd')">
-                <el-icon :size="40"><Plus /></el-icon>
-                <p>点击上传广告图</p>
-              </div>
-              <div class="ad-actions" v-show="leftAdHover && leftAdForm.leftAdImage">
-                <el-button type="primary" icon="Edit" circle @click="triggerUpload('leftAd')" title="更换图片" />
-                <el-button type="danger" icon="Delete" circle @click="handleDeleteLeftAd" title="删除图片" />
-              </div>
+            <div class="left-ad-preview-wrapper">
+              <UploadImage
+                v-model="leftAdForm.leftAdImage"
+                :limit="1"
+                width="790px"
+                height="460px"
+                imageText="上传广告图"
+                @change="onLeftAdImageChange"
+              />
             </div>
 
             <div class="left-ad-settings" v-if="leftAdForm.leftAdImage">
@@ -1022,10 +1013,7 @@
     <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增轮播图' : '修改轮播图'" width="800px" destroy-on-close>
       <el-form :model="carouselForm" label-width="100px" class="dialog-form-inner">
         <el-form-item label="轮播图片：">
-          <div class="upload-placeholder" @click="triggerUpload('carousel')">
-            <img v-if="carouselForm.image" :src="carouselForm.image" class="form-preview-img" />
-            <el-icon v-else class="upload-icon"><Plus /></el-icon>
-          </div>
+          <UploadImage v-model="carouselForm.image" :limit="1" width="552px" height="190px" />
           <div class="upload-tip">推荐尺寸：552 * 190，支持上传本地图片</div>
         </el-form-item>
         <el-form-item label="跳转地址：">
@@ -1056,10 +1044,7 @@
               <el-input v-model="categoryForm.name" placeholder="如：办公电脑 / 办公打印 / 电脑组件" />
             </el-form-item>
             <el-form-item label="图标：">
-              <div class="upload-placeholder-square" @click="triggerUpload('categoryIcon')">
-                <img v-if="categoryForm.icon" :src="categoryForm.icon" class="form-preview-img-square" />
-                <el-icon v-else class="upload-icon"><Plus /></el-icon>
-              </div>
+              <UploadImage v-model="categoryForm.icon" :limit="1" width="48px" height="48px" />
               <div class="upload-tip">推荐尺寸：16 * 16，支持上传透明背景 PNG</div>
             </el-form-item>
             <el-form-item label="同步分类：">
@@ -1138,10 +1123,7 @@
           <el-input v-model="headerForm.title" placeholder="如：公共采购" />
         </el-form-item>
         <el-form-item label="分类图标：">
-          <div class="upload-placeholder-square" @click="triggerUpload('headerIcon')">
-            <img v-if="headerForm.icon" :src="headerForm.icon" class="form-preview-img-square" style="width: 20px; height: 20px" />
-            <el-icon v-else class="upload-icon"><Plus /></el-icon>
-          </div>
+          <UploadImage v-model="headerForm.icon" :limit="1" width="48px" height="48px" />
           <div class="upload-tip">建议尺寸：20*20，透明背景 PNG</div>
         </el-form-item>
         <el-form-item label="跳转地址：">
@@ -1348,10 +1330,7 @@
           </div>
         </el-form-item>
         <el-form-item label="封面图片：">
-          <div class="upload-placeholder-square" style="width: 272px; height: 80px" @click="triggerUpload('scenarioImg')">
-            <img v-if="scenarioForm.image" :src="scenarioForm.image" style="width: 100%; height: 100%; object-fit: cover" />
-            <el-icon v-else class="upload-icon"><Plus /></el-icon>
-          </div>
+          <UploadImage v-model="scenarioForm.image" :limit="1" width="272px" height="80px" />
           <div class="upload-tip">建议尺寸：272 * 80</div>
         </el-form-item>
         <el-form-item label="跳转链接：">
@@ -1374,10 +1353,7 @@
           <el-input v-model="recommendForm.subTitle" placeholder="请输入副标题" maxlength="12" show-word-limit />
         </el-form-item>
         <el-form-item label="分类图标：">
-          <div class="upload-placeholder-square" style="width: 64px; height: 64px" @click="triggerUpload('recommendIcon')">
-            <img v-if="recommendForm.icon" :src="recommendForm.icon" style="width: 100%; height: 100%; object-fit: contain" />
-            <el-icon v-else class="upload-icon"><Plus /></el-icon>
-          </div>
+          <UploadImage v-model="recommendForm.icon" :limit="1" width="64px" height="64px" />
           <div class="upload-tip">建议尺寸：32 * 32，透明背景 PNG</div>
         </el-form-item>
         <el-form-item label="数据类型：">
@@ -1424,10 +1400,7 @@
           <el-input v-model="quickEntryForm.name" placeholder="请输入入口名称（建议4-5个字）" maxlength="6" show-word-limit />
         </el-form-item>
         <el-form-item label="图标：">
-          <div class="upload-placeholder-square" @click="triggerUpload('quickEntryIcon')">
-            <img v-if="quickEntryForm.icon" :src="quickEntryForm.icon" class="form-preview-img-square" style="width: 24px; height: 24px" />
-            <el-icon v-else class="upload-icon"><Plus /></el-icon>
-          </div>
+          <UploadImage v-model="quickEntryForm.icon" :limit="1" width="48px" height="48px" />
           <div class="upload-tip">建议尺寸: 48*48, 格式: PNG/SVG</div>
         </el-form-item>
         <el-form-item label="标签文字：">
@@ -1451,12 +1424,11 @@
     <div class="footer-actions">
       <el-button type="primary" class="btn-confirm" @click="handleMainSave">保存当前页配置</el-button>
     </div>
-    <!-- 隐藏的文件选择框 -->
-    <input type="file" ref="fileInput" style="display: none" accept="image/*" @change="onFileChange" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import UploadImage from '@/components/upload-image/index.vue';
 import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import {
@@ -1723,7 +1695,7 @@ const startPlaceholderScroll = () => {
 };
 
 // 广告图模块逻辑
-const leftAdHover = ref(false);
+
 const carouselList = ref<CarouselVO[]>([]);
 
 // 获取轮播图列表
@@ -1865,7 +1837,7 @@ const moveRow = async (index: number, direction: number) => {
 // 颜色转换工具：Hex 转 RGBA
 const hexToRgba = (hex, opacity) => {
   if (!hex) return `rgba(255, 255, 255, ${opacity})`;
-  let r = parseInt(hex.slice(1, 3), 16) ;
+  let r = parseInt(hex.slice(1, 3), 16);
   let g = parseInt(hex.slice(3, 5), 16);
   let b = parseInt(hex.slice(5, 7), 16);
   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
@@ -1875,43 +1847,12 @@ const handleSelectSearch = () => {
   // 模拟搜索过滤，computed 会自动处理
 };
 
-// 文件上传相关
-const fileInput = ref(null);
-const uploadTarget = ref(''); // 'leftAd' | 'carousel' | 'categoryIcon' | 'headerIcon'
-
-const triggerUpload = (target) => {
-  uploadTarget.value = target;
-  fileInput.value.click();
-};
-
-const onFileChange = (e) => {
-  const file = e.target.files[0];
-  if (!file) return;
-
-  const reader = new FileReader();
-  reader.onload = (event) => {
-    const base64 = event.target.result;
-    if (uploadTarget.value === 'leftAd') {
-      leftAdForm.leftAdImage = base64 as any;
-    } else if (uploadTarget.value === 'carousel') {
-      carouselForm.image = base64 as any;
-    } else if (uploadTarget.value === 'rightBtnIcon') {
-      form.rightBtnIcon = base64 as any;
-    } else if (uploadTarget.value === 'categoryIcon') {
-      categoryForm.icon = base64 as any;
-    } else if (uploadTarget.value === 'headerIcon') {
-      headerForm.icon = base64 as any;
-    } else if (uploadTarget.value === 'scenarioImg') {
-      scenarioForm.image = base64 as any;
-    } else if (uploadTarget.value === 'quickEntryIcon') {
-      quickEntryForm.icon = base64 as any;
-    } else if (uploadTarget.value === 'recommendIcon') {
-      recommendForm.icon = base64 as any;
-    }
-    ElMessage.success('图片上传成功');
-    e.target.value = '';
-  };
-  reader.readAsDataURL(file);
+// 左侧广告图片变更处理
+const onLeftAdImageChange = (file: any) => {
+  if (!file || !file.url) {
+    // 图片被删除
+    handleDeleteLeftAd();
+  }
 };
 
 // ==================== 左侧广告单例配置 ====================