Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(diy-recommend-code): Gradient 风格立即分享按钮改胶囊形 + 黄橙渐变

Browse Source 
之前后端 diyData.buttonBgColor 默认 #E4393C 会覆盖 Gradient 风格的
linear-gradient 默认值，导致「立即分享」按钮显示为红色实心。

调整内容：
- 复制按钮顶部距 12rpx → 16rpx（更均匀）
- 立即分享按钮 marginTop 20rpx → 16rpx（紧凑布局）
- 立即分享按钮圆角 16rpx → 40rpx（胶囊形）
- 立即分享按钮固定走 linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)，
  不再读 diyData.buttonBgColor（避免被后端默认色覆盖）
- H5 端 view fallback 同步（与 Card 风格统一处理）

影响范围：仅 Gradient 渐变风格（stylePreset === 'gradient'）。
This commit is contained in:
ZF Sun
2026-08-07 17:21:12 +08:00
parent 8b331e53d3
commit 1420b7435e
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components-diy/diy-recommend-code.vue
View File

@@ -96,24 +96,29 @@
<text style="font-size:20rpx;color:#FFFFFF;font-weight:600;">已获得推荐码</text>
</view>
</view>
<!-- 推荐码+复制按钮区域：浅米黄色背景 -->
<!-- 推荐码+复制按钮区域：浅米黄色背景，圆角紧凑 -->
<view style="margin-top:24rpx;background:#FFF8F0;border-radius:16rpx;padding:32rpx 20rpx 24rpx;position:relative;z-index:1;">
<!-- 推荐码居中显示 -->
<view style="text-align:center;">
<text :style="{ fontSize: px2rpx(Math.max(16, Math.min(48, (Number(value.codeFontSize) || 28) * 0.93))) + 'rpx', fontWeight: '900', color: value.codeColor || '#DC143C', letterSpacing: '2rpx', fontFamily: 'Courier New, monospace' }">{{ code || value.placeholderCode || 'ABCD1234' }}</text>
</view>
<!-- 复制推荐码按钮：白色小按钮，红边框，在推荐码下方居中 -->
<view style="margin-top:12rpx;display:flex;justify-content:center;">
<view style="margin-top:16rpx;display:flex;justify-content:center;">
<view @tap="copyRecommendCode" :style="{ width: 'fit-content', height: '60rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#DC143C'), borderRadius: '30rpx', padding: '0 32rpx', gap: '8rpx' }">
<text style="font-size:22rpx;">📋</text>
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">复制推荐码</text>
</view>
</view>
</view>
<!-- 立即分享链接按钮：黄橙渐变，小圆角，触发微信原生分享 -->
<button v-if="value.showShareButton !== false" open-type="share" @tap="onShareClick" :style="{ marginTop: '20rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? value.buttonBgColor : 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '16rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
<text :style="{ fontSize: '28rpx', fontWeight: '700', color: value.buttonTextColor || '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
<!-- 立即分享链接按钮：黄橙渐变，胶囊形圆角，紧凑布局
固定走 linear-gradient，不读 diyData.buttonBgColor（避免被后端默认色覆盖）
H5 端用 view 触发（避免 button 默认样式），小程序/APP 端保留 button 以触发 open-type=share -->
<button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
<text :style="{ fontSize: '28rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
</button>
<view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
<text :style="{ fontSize: '28rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ nc.buttonText || '立即分享' }}</text>
</view>
<!-- showLink -->
<view v-if="isFeatureOn(value.showLink)" style="margin-top:20rpx;text-align:center;position:relative;z-index:1;">
<text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>