فهرست منبع

feat(license): 添加许可证图片加载失败占位图

- 在娱乐许可证页面添加图片加载失败时的占位图显示
- 在食品经营许可证页面添加图片加载失败时的占位图显示
- 统一占位图样式,使用居中图标和背景色
- 优化图片组件错误状态展示体验
congxuesong 2 هفته پیش
والد
کامیت
bb96ceb10f
2فایلهای تغییر یافته به همراه44 افزوده شده و 2 حذف شده
  1. 22 1
      src/views/licenseManagement/entertainmentLicense.vue
  2. 22 1
      src/views/licenseManagement/foodBusinessLicense.vue

+ 22 - 1
src/views/licenseManagement/entertainmentLicense.vue

@@ -9,7 +9,15 @@
     </div>
     <div class="license-container" v-if="licenseImage">
       <div class="license-display">
-        <el-image :src="licenseImage" fit="contain" class="license-image" :preview-src-list="[licenseImage]" />
+        <el-image :src="licenseImage" fit="contain" class="license-image" :preview-src-list="[licenseImage]">
+          <template #error>
+            <div class="empty-image-box">
+              <el-icon class="empty-icon">
+                <Picture />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
       </div>
     </div>
     <div v-else class="empty-license">
@@ -633,6 +641,19 @@ const getStatusText = (status: string) => {
   border-radius: 8px;
   box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
 }
+.empty-image-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--el-fill-color-lighter);
+  border-radius: 8px;
+  .empty-icon {
+    font-size: 64px;
+    color: var(--el-text-color-placeholder);
+  }
+}
 .empty-license {
   display: flex;
   align-items: center;

+ 22 - 1
src/views/licenseManagement/foodBusinessLicense.vue

@@ -9,7 +9,15 @@
     </div>
     <div class="license-container" v-if="licenseImage">
       <div class="license-display">
-        <el-image :src="licenseImage" fit="contain" class="license-image" :preview-src-list="[licenseImage]" />
+        <el-image :src="licenseImage" fit="contain" class="license-image" :preview-src-list="[licenseImage]">
+          <template #error>
+            <div class="empty-image-box">
+              <el-icon class="empty-icon">
+                <Picture />
+              </el-icon>
+            </div>
+          </template>
+        </el-image>
       </div>
     </div>
     <div v-else class="empty-license">
@@ -634,6 +642,19 @@ const getStatusText = (status: string) => {
   border-radius: 8px;
   box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
 }
+.empty-image-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--el-fill-color-lighter);
+  border-radius: 8px;
+  .empty-icon {
+    font-size: 64px;
+    color: var(--el-text-color-placeholder);
+  }
+}
 .empty-license {
   display: flex;
   align-items: center;