pc端品牌活动图片预览整改

src/main/resources/views/platform/zhgh/welfare/select/optionSelect.js

@@ -75,7 +75,11 @@ const optionSelect = {
                                     class="option-tag" type="primary" effect="plain">已选择
                             </el-tag>
 
-                            <div class="option-image">
+                            <div class="option-image" role="button" :tabindex="option.imgUrl ? 0 : -1"
+                                 aria-label="预览福利图片" :aria-disabled="option.imgUrl ? 'false' : 'true'"
+                                 @click.stop="previewOptionImage(option.imgUrl)"
+                                 @keydown.enter.stop.prevent="previewOptionImage(option.imgUrl)"
+                                 @keydown.space.stop.prevent="previewOptionImage(option.imgUrl)">
                                 <el-image :src="option.imgUrl" fit="cover"></el-image>
                             </div>
 
@@ -605,6 +609,15 @@ const optionSelect = {
             }
         },
 
+        previewOptionImage(url) {
+            if (!url) return
+            // 福利图片地址可能没有扩展名，直接预览原图，不触发福利选择。
+            const image = new Image()
+            image.src = url
+            const viewer = new Viewer(image, {zIndex: 99999, title: false, hidden: () => viewer.destroy()})
+            viewer.show()
+        },
+
         // 显示选项详情
         showOptionDetail(option) {
             // 阻止事件冒泡，避免触发父元素的点击事件
@@ -886,6 +899,7 @@ const optionSelect = {
             height: 3px;
             background: linear-gradient(90deg, var(--primary-color), #66b1ff);
             z-index: 1;
+            pointer-events: none;
         }
 
         /* 选项标签 */
@@ -894,6 +908,7 @@ const optionSelect = {
             top: 8px;
             right: 8px;
             z-index: 2;
+            pointer-events: none;
             border-radius: 12px;
             font-size: 12px;
             font-weight: 500;
@@ -918,6 +933,10 @@ const optionSelect = {
             background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent);
         }
 
+        /deep/ .option-image[aria-disabled="false"] {
+            cursor: zoom-in;
+        }
+
         /deep/ .option-image .el-image {
             width: 100%;
             height: 100%;