diff --git a/src/main/java/io/v/nutz/web/commons/controller/FileServerController.java b/src/main/java/io/v/nutz/web/commons/controller/FileServerController.java index deacca5..332f85d 100644 --- a/src/main/java/io/v/nutz/web/commons/controller/FileServerController.java +++ b/src/main/java/io/v/nutz/web/commons/controller/FileServerController.java @@ -126,10 +126,20 @@ public class FileServerController { String filepath = sys_file.getString("filepath"); String suffix = FileUtil.extName(fullFileName).toUpperCase(); String prefix = FileUtil.getPrefix(fullFileName); + + // 构建兼容的文件名（用于 Content-Disposition） + String encodedFileName = new String(fullFileName.getBytes("UTF-8"), "ISO8859-1"); + if (IMGTYPES.contains(suffix)) { - response.setContentType("image/jpg"); - response.setHeader("Content-Disposition", "attachment;filename=" + new String(fullFileName.getBytes("utf-8"), "ISO8859-1")); + String mimeType = getMimeTypeBySuffix(suffix); + // 在获取输出流后立即设置 Content-Type 和 Content-Disposition + response.setHeader("Content-Type", mimeType); + response.setHeader("Content-Disposition", "inline; filename=\"" + encodedFileName + "\""); ftpService.download(filepath, response.getOutputStream()); + +// response.setContentType("image/jpg"); +// response.setHeader("Content-Disposition", "attachment;filename=" + new String(fullFileName.getBytes("utf-8"), "ISO8859-1")); +// ftpService.download(filepath, response.getOutputStream()); } else if (PDFTYPE.equals(suffix)) { response.setHeader("Content-Disposition", "attachment;filename=" + new String(fullFileName.getBytes("utf-8"), "ISO8859-1")); response.setContentType("application/pdf"); @@ -152,6 +162,20 @@ public class FileServerController { } } + + // 新增辅助方法：根据后缀返回标准 MIME 类型 + private String getMimeTypeBySuffix(String suffix) { + return switch (suffix) { + case "PNG" -> "image/png"; + case "JPG", "JPEG" -> "image/jpeg"; + case "GIF" -> "image/gif"; + case "WEBP" -> "image/webp"; + case "BMP" -> "image/bmp"; + default -> "image/jpeg"; // fallback + }; + } + + /** * 生成pdf * diff --git a/src/main/resources/views/mobile/staffmanage/birthday/index.html b/src/main/resources/views/mobile/staffmanage/birthday/index.html index dbd5131..5a8fc6b 100644 --- a/src/main/resources/views/mobile/staffmanage/birthday/index.html +++ b/src/main/resources/views/mobile/staffmanage/birthday/index.html @@ -43,7 +43,7 @@ layout("/mobile/platform.html"){ position: fixed; top: 5px; left: 5px; - width: 125px; + width: 115px; height: 27px; background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.25); @@ -308,15 +308,14 @@ layout("/mobile/platform.html"){ transform: translateY(0) scale(0.95); } - /* ==================== 优惠券模态框（优化版） ==================== */ .coupon-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0,0,0,0.9); - backdrop-filter: blur(15px); + /*background: rgba(0,0,0,0.9);*/ + /*backdrop-filter: blur(15px);*/ display: flex; justify-content: center; align-items: center; @@ -335,9 +334,9 @@ layout("/mobile/platform.html"){ .coupon-wrapper { position: relative; - width: 100%; - max-width: 420px; - max-height: 85vh; + width: 90vw; + /*max-width: 420px;*/ + max-height: 90vh; transform: scale(0.85) translateY(25px); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 25px 60px rgba(0,0,0,0.7)); @@ -363,25 +362,21 @@ layout("/mobile/platform.html"){ position: relative; border: 3px solid #ffd700; box-shadow: 0 15px 40px rgba(255,215,0,0.35); - max-height: 85vh; + max-height: 90vh; display: flex; flex-direction: column; } - /* 图片区域 - 可滚动 */ .coupon-image-area { flex: 1; - min-height: 0; /* 关键：允许flex子元素滚动 */ - overflow-y: auto; - -webkit-overflow-scrolling: touch; - background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + min-height: 0; /* 允许 flex 容器收缩 */ display: flex; - flex-direction: column; + justify-content: center; align-items: center; - justify-content: flex-start; - gap: 15px; - color: #fff; - text-align: center; + background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); + position: relative; + overflow: hidden; + box-sizing: border-box; } .coupon-image-area::before { @@ -403,7 +398,7 @@ layout("/mobile/platform.html"){ width: 100%; height: auto; display: block; - border-radius: 16px; + border-radius: 5px; margin: 0 auto; object-fit: contain; background: #fff; @@ -415,7 +410,7 @@ layout("/mobile/platform.html"){ .coupon-footer { background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); color: #ffd700; - padding: 12px 18px; + padding: 4px 2px; text-align: center; font-size: 0.85em; line-height: 1.6; @@ -575,8 +570,8 @@ layout("/mobile/platform.html"){ .envelope-text { font-size: 0.88em; } .envelope-content { padding: 2px; } .gift-button-main button { width: 170px; padding: 12px 12px; font-size: 1em; } - .coupon-wrapper { padding: 10px; } - .coupon-footer { font-size: 0.8em; padding: 10px 12px; } + .coupon-wrapper { padding: 10px;width: 85% } + .coupon-footer { font-size: 0.6em; padding: 4px 2px; } } /* 隐藏滚动条 */ @@ -592,7 +587,7 @@ layout("/mobile/platform.html"){
- +
会员专享
@@ -648,25 +643,12 @@ layout("/mobile/platform.html"){
-
- 生日福利券 -
-
-
🎂
-
{{ userName }}
-
- 生日快乐！
感谢您的辛勤付出 -
-
{{ unionName }} 敬上
-
- 请配置您的福利券图片 -
-
+ 生日福利券
- 💡 使用提示：长按保存此贺卡图片，领取生日蛋糕券，享用生日长寿面 + 💡 使用提示：请截图保存保存此贺卡图片，领取生日蛋糕券，享用生日长寿面
@@ -698,7 +680,7 @@ layout("/mobile/platform.html"){ return { // 用户信息 userName: '', - unionName: '杭州医学院校工会', + unionName: '杭州医学院工会', // 配置（可自定义） config: { @@ -761,7 +743,7 @@ layout("/mobile/platform.html"){ this.config.customBg = '/file_server/fileStreamPreview?id=' + resp.data.picUrl } if (resp.data.birthdayUrl) { - this.config.couponImageSrc = '/file_server/fileStreamPreview?id=' + resp.data.birthdayUrl + this.config.couponImageSrc = window.location.origin + '/file_server/fileStreamPreview?id=' + resp.data.birthdayUrl } } }, @@ -1038,6 +1020,8 @@ layout("/mobile/platform.html"){ // 显示优惠券 this.showCoupon = true; + this.adjustModalPadding(); + // 按钮动画 gsap.to('.gift-button-main button', { duration: 0.2, @@ -1046,44 +1030,75 @@ layout("/mobile/platform.html"){ repeat: 1 }); - this.$nextTick(() => { + /*this.$nextTick(() => { if (this.config.couponImageSrc) { - const container = document.getElementById('couponImageContainer'); - if (!container) return; + // const container = document.getElementById('couponImageContainer'); + // if (!container) return; + // + // container.innerHTML = ''; + // + // const img = new Image(); + // img.onload = () => { + // const wrapper = container.parentElement; + // const footer = wrapper.querySelector('.coupon-footer'); + // const footerHeight = footer ? footer.offsetHeight : 0; + // const maxHeight = 85 * window.innerHeight / 100 - 40; // 85vh - padding + // + // + // // if (window.innerWidth < 375) { + // // container.style.maxHeight = (maxHeight - footerHeight - 10) + 'px'; + // // img.style.maxWidth = '85%'; + // // img.style.width = '100%'; + // // } else { + // // img.style.maxWidth = '100%'; + // // img.style.width = '100%'; + // // } + // // img.style.height = '85vh'; + // // img.style.display = 'block'; + // // img.style.objectFit = 'contain'; + // // img.style.margin = '0 auto'; + // // img.style.borderRadius = '16px'; + // // img.style.background = '#fff'; + // // img.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; + // + // // container.appendChild(img); + // }; - container.innerHTML = ''; - - const img = new Image(); - img.onload = () => { - const wrapper = container.parentElement; - const footer = wrapper.querySelector('.coupon-footer'); - const footerHeight = footer ? footer.offsetHeight : 0; - const maxHeight = 85 * window.innerHeight / 100 - 40; // 85vh - padding - - // 设置图片容器最大高度，为底部文字留空间 - container.style.maxHeight = (maxHeight - footerHeight - 10) + 'px'; - - img.style.maxWidth = '100%'; - img.style.width = '100%'; - img.style.height = 'auto'; - img.style.display = 'block'; - img.style.objectFit = 'contain'; - img.style.margin = '0 auto'; - img.style.borderRadius = '16px'; - img.style.background = '#fff'; - img.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)'; - - container.appendChild(img); - }; - - img.onerror = () => { - container.innerHTML = '
福利券图片加载失败
请检查路径
'; - }; - - img.src = this.config.couponImageSrc; + // img.src = this.config.couponImageSrc; } // 如果没有图片，使用默认内容，已经在HTML中定义 - }); + });*/ + }, + + adjustModalPadding() { + const modal = document.querySelector('.coupon-modal'); + if (!modal) return; + + // 获取状态栏高度（Android）或 safe-area（iOS） + const statusBarHeight = window.innerHeight - document.documentElement.clientHeight; + + if (statusBarHeight > 0) { + modal.style.paddingTop = statusBarHeight + 'px'; + } + }, + + downLoadImg() { + const imageUrl = window.location.origin + this.config.couponImageSrc; + + dd.biz.util.downloadFile({ + url: imageUrl, + name: '一个图片.jpg', + onProgress: function(msg){ + // 文件下载进度回调 + }, + onSuccess : function(result) { + this.showToastMsg('图片下载成功'); + }, + onFail : function(result) { + console.log(result) + this.showToastMsg('图片失败'); + } + }) }, closeCoupon() {