c-zhouhf1/zhgh_hmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pref#hmc_生日祝福、短信优化

Browse Source
This commit is contained in:
Paidax
2026-01-04 16:29:02 +08:00
parent 857819741f
commit 74db3e484d
2 changed files with 115 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/mobile/staffmanage/birthday/index.html
+89 -74
View File
@@ -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"){
<div class="bg-overlay"></div>
<!-- 工会Logo -->
<div class="union-logo">杭州医学院校工会</div>
<div class="union-logo">杭州医学院工会</div>
<!-- 教师标识 -->
<div class="teacher-badge">会员专享</div>
@@ -648,25 +643,12 @@ layout("/mobile/platform.html"){
<div class="coupon-content-box">
<!-- 图片区域（可滚动） -->
<div class="coupon-image-area" id="couponImageContainer">
<div v-if="config.couponImageSrc" style="width: 100%; max-width: 100%;">
<img :src="config.couponImageSrc" alt="生日福利券" />
</div>
<div v-else style="padding: 25px; text-align: center; color: #fff; width: 100%;">
<div style="font-size: 2.4em; margin-bottom: 18px;">🎂</div>
<div style="font-size: 1.4em; font-weight: bold; margin-bottom: 12px;">{{ userName }}</div>
<div style="font-size: 1.1em; opacity: 0.95; line-height: 1.7; margin-bottom: 12px;">
生日快乐！<br>感谢您的辛勤付出
</div>
<div style="font-size: 0.9em; opacity: 0.75;">{{ unionName }} 敬上</div>
<div style="font-size: 0.85em; opacity: 0.65; margin-top: 18px;">
请配置您的福利券图片
</div>
</div>
<img :src="config.couponImageSrc" alt="生日福利券" />
</div>
<!-- 底部提示区域 - 固定在最底部 -->
<div class="coupon-footer">
<strong>💡 使用提示：</strong>长按保存此贺卡图片，领取生日蛋糕券，享用生日长寿面
<strong>💡 使用提示：</strong>请截图保存保存此贺卡图片，领取生日蛋糕券，享用生日长寿面
</div>
</div>
</div>
@@ -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 = '<div style="padding:25px;color:#fff;text-align:center;font-size:1.1em;">福利券图片加载失败<br>请检查路径</div>';
};
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() {