angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity

feat(share): 微信浏览器字号调整问题处理

This commit is contained in:
woody 2025-08-01 18:10:01 +08:00
parent ba4ece9907
commit 80e4378d9e
2 changed files with 103 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
pages/mine/share/index.vue
View File

@ -7,39 +7,52 @@
<!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
<template v-if="!isWechat || (isWechat && !generatedImageUrl)">
<!-- 背景图片，替代CSS background -->
<image
<img
class="share-bg-image"
src="/static/images/share-bg.jpg"
mode="scaleToFill"
crossorigin="anonymous"
@load="onBackgroundImageLoad"
@error="onBackgroundImageError"
></image>
/>
<view class="share-wrapper">
<view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
<view class="qr-code-outer">
<image
<img
class="qr-code"
:src="qrCodeImage"
mode="aspectFit"
v-if="qrCodeImage"
></image>
/>
<view v-else class="qr-code-placeholder">
<view class="loader"></view>
</view>
</view>
<text
<div
style="
font-size: 30rpx;
font-size: 26rpx;
color: #fff;
font-weight: bold;
margin-top: 20rpx;
margin-top: 10rpx;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
"
>{{ desensitization(userInfo.memberCode) }}</text
>
<button class="share-button" @click="sharePage">
{{ isWechat ? '长按保存图片' : '保存图片并分享' }}
</button>
{{ desensitization(userInfo.memberCode) }}
</div>
<div v-if="!isWechat" class="share-button" @click="sharePage">
保存图片并分享
</div>
<img
v-if="isWechat"
class="share-btn"
style="margin-top: 50rpx"
src="/static/images/share-btn.svg"
mode="scaleToFill"
/>
</view>
<!-- <image
class="share-bg-logo"
@ -357,7 +370,7 @@ export default {
.share-wrapper {
position: absolute;
z-index: 2;
bottom: 260rpx;
bottom: 280rpx;
display: flex;
flex-direction: column;
align-items: center;
@ -378,6 +391,7 @@ export default {
flex-direction: column;
align-items: center;
margin: 0 auto;
text-align: center;
}
.portal-frame.is-loaded {
@ -444,43 +458,25 @@ export default {
color: #888;
}
/* Unified style for both the real button and the fake one (which is a view) */
.share-button {
margin-top: 28rpx; /* 从32rpx减小到28rpx */
width: 280rpx; /* 设置固定宽度 */
height: 72rpx; /* 从88rpx减小到72rpx */
line-height: 72rpx;
margin-top: 58rpx; /* 从32rpx减小到28rpx */
width: 380rpx; /* 设置固定宽度 */
color: #fff;
border-radius: 36rpx; /* 从44rpx减小到36rpx */
font-size: 26rpx; /* 从30rpx减小到26rpx */
font-size: 16rpx; /* 从30rpx减小到26rpx */
font-weight: 500;
/* 更精细的渐变 */
padding: 12rpx 0;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
// box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
border: none;
padding: 0;
border-radius: 70rpx;
text-align: center;
transition: all 0.3s ease;
letter-spacing: 1rpx;
}
/* The real button needs to override some uni-app defaults */
button.share-button {
padding: 0;
line-height: 72rpx; /* 更新行高到72rpx */
border: none;
}
.share-button:active {
transform: translateY(1rpx);
box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
background: linear-gradient(
135deg,
#5a67d8 0%,
#6b46c1 100%
); /* 按下时的渐变 */
}
/* 微信环境全屏覆盖样式 */
.wechat-fullscreen-overlay {
position: absolute;

68
static/images/share-btn.svg Normal file
View File

@ -0,0 +1,68 @@
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="40" viewBox="0 0 160 40">
<defs>
<!-- 科技感渐变背景 -->
<linearGradient id="techGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
<stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
<stop offset="70%" style="stop-color:#7C3AED;stop-opacity:1" />
<stop offset="100%" style="stop-color:#5B21B6;stop-opacity:1" />
</linearGradient>
<!-- 科技感光效 -->
<radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.4" />
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.2" />
<stop offset="100%" style="stop-color:#4C1D95;stop-opacity:0" />
</radialGradient>
<!-- 边框光效 -->
<linearGradient id="borderGlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.6" />
<stop offset="50%" style="stop-color:#DDD6FE;stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#A78BFA;stop-opacity:0.6" />
</linearGradient>
</defs>
<!-- 主背景 - 圆角矩形 -->
<rect x="1" y="1" width="158" height="38" rx="8" ry="8" fill="url(#techGradient)" stroke="url(#borderGlow)" stroke-width="1"/>
<!-- 科技感光效层 -->
<rect x="1" y="1" width="158" height="38" rx="8" ry="8" fill="url(#glowEffect)"/>
<!-- 科技感装饰线条 -->
<g opacity="0.4">
<!-- 左上角装饰 -->
<path d="M8 8 L18 8 L18 13" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
<circle cx="8" cy="8" r="1.5" fill="#A78BFA"/>
<!-- 右下角装饰 -->
<path d="M152 32 L142 32 L142 27" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
<circle cx="152" cy="32" r="1.5" fill="#A78BFA"/>
<!-- 中间装饰点 -->
<circle cx="30" cy="28" r="0.8" fill="#DDD6FE" opacity="0.7"/>
<circle cx="130" cy="12" r="0.8" fill="#C4B5FD" opacity="0.6"/>
<circle cx="140" cy="18" r="0.8" fill="#A78BFA" opacity="0.8"/>
<!-- 额外科技感元素 -->
<path d="M25 15 L35 15" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
<path d="M125 25 L135 25" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
<circle cx="45" cy="12" r="0.5" fill="#F3F0FF" opacity="0.4"/>
<circle cx="115" cy="28" r="0.5" fill="#F3F0FF" opacity="0.4"/>
</g>
<!-- 主文字 -->
<text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
font-size="14" font-weight="500" fill="white">
长按保存图片
</text>
<!-- 文字光效 -->
<text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
font-size="14" font-weight="500" fill="white" opacity="0.3"
style="filter: blur(1px);">
长按保存图片
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB