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

src/main/resources/static/components/plugins/sysUpload/index.vue

@@ -347,6 +347,19 @@ module.exports = {
 
     // 预览图片
     handlePreview(file) {
+      if (this.upload_mode === "image") {
+        // 回显记录的名称可能是无扩展名的下载地址；图片模式直接预览缩略图地址。
+        const url = file.url || (this.upload_result_type === "url" && file.response?.data)
+        if (!url) {
+          this.$message.warning("暂无可预览的图片")
+          return
+        }
+        const image = new Image()
+        image.src = url
+        const viewer = new Viewer(image, {zIndex: 99999, title: false, hidden: () => viewer.destroy()})
+        viewer.show()
+        return
+      }
       const suffix = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase()
       const fileId = file.response.data.substring(file.response.data.lastIndexOf("=") + 1)
       const buildFile = {

src/main/resources/views/platform/zhghh5/welfare/select/index.html

@@ -707,9 +707,8 @@ layout("/layouts/platform_h5.html"){
                         :key="option.id"
                         class="welfare-option"
                         :class="{ selected: projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0 }"
-                        @click="projectInfo.isCheckBox === 'radio' && !isDeadlinePassed ? selectRadioOption(option.id) : null"
                 >
-                    <div class="welfare-option-image">
+                    <div class="welfare-option-image" @click.stop="previewOptionImage(option.imgUrl)">
                         <van-image :src="option.imgUrl" fit="cover" width="100%" height="100%" radius="4px"></van-image>
                         <div class="welfare-tag"
                              v-if="projectInfo.isCheckBox === 'radio' ? selectedRadioId === option.id : option.selectNum > 0">
@@ -717,7 +716,8 @@ layout("/layouts/platform_h5.html"){
                         </div>
                     </div>
 
-                    <div class="welfare-option-content">
+                    <div class="welfare-option-content"
+                         @click="projectInfo.isCheckBox === 'radio' && !isDeadlinePassed ? selectRadioOption(option.id) : null">
                         <div class="welfare-option-title">{{ option.optionName }}</div>
 
                         <!-- 查看详情按钮 -->
@@ -846,6 +846,10 @@ layout("/layouts/platform_h5.html"){
             </div>
         </van-action-sheet>
 
+        <van-image-preview :value="showOptionImagePreview" :images="optionPreviewImages"
+                           closeable :show-index="false" :close-on-popstate="false"
+                           @input="visible => { if (!visible) closeOptionImagePreview() }"></van-image-preview>
+
         <!-- 选项详情弹窗 -->
         <van-popup v-model="showOptionDetailDialog" round closeable close-icon="close" position="bottom"
                    :close-on-click-overlay="false"
@@ -932,6 +936,8 @@ layout("/layouts/platform_h5.html"){
                 isSubmitting: false,
                 hasSubmittedBefore: false, // 是否之前提交过
                 showOptionDetailDialog: false, // 选项详情弹窗
+                showOptionImagePreview: false,
+                optionPreviewImages: [],
                 selectedOption: null, // 当前选中的选项
                 popupHistoryOwner: "welfare-select-" + Date.now(),
                 detailScale: 1,
@@ -1347,6 +1353,21 @@ layout("/layouts/platform_h5.html"){
             },
 
             // 显示选项详情
+            previewOptionImage(url) {
+                if (!url || this.showOptionImagePreview) return
+                // 图片预览不修改选项状态，返回键只关闭当前预览层。
+                this.$set(this, "optionPreviewImages", [url])
+                this.$set(this, "showOptionImagePreview", true)
+                window.mobilePopupHistory.open(this.popupHistoryOwner, "optionImage")
+            },
+
+            closeOptionImagePreview() {
+                if (!this.showOptionImagePreview) return
+                // 先隐藏，防止关闭动画期间的重复点击触发多次历史回退。
+                this.$set(this, "showOptionImagePreview", false)
+                window.mobilePopupHistory.close(this.popupHistoryOwner, "optionImage")
+            },
+
             showOptionDetail(option) {
                 this.selectedOption = option
                 this.showOptionDetailDialog = true
@@ -1370,6 +1391,9 @@ layout("/layouts/platform_h5.html"){
             },
 
             closePopupFromHistory(popupId) {
+                if (popupId === "optionImage") {
+                    this.$set(this, "showOptionImagePreview", false)
+                }
                 if (popupId === "optionDetail") {
                     this.showOptionDetailDialog = false
                 }