fix(diy-recommend-code): Card 风格立即分享按钮固定「白底红边框」
之前 Button 背景色由 diyData.buttonBgColor 决定,后端默认 #E4393C 导致 Card 风格的「立即分享」按钮显示为红色实心,与设计参考图不一致。 调整内容: - props default 中 buttonBgColor 默认值改为空字符串 - 新增 isH5Platform 状态(条件编译 H5 段在 created 中标记) - H5 端用 view 替代 button 触发分享,避开浏览器 button 默认样式 - 小程序/APP 端保留 button 以触发 open-type="share" - Card 预设的「立即分享」按钮固定为白底 + 红边 + 红字设计 影响范围:仅 Card 卡片风格(stylePreset === 'card')。
This commit is contained in:
@@ -214,10 +214,14 @@
|
||||
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 立即分享链接按钮:全宽铺满白底红边框,触发微信原生分享 -->
|
||||
<button v-if="value.showShareButton !== false" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? value.buttonBgColor : '#FFFFFF', border: (value.buttonBgColor && /^#[0-9a-f]{3,8}$/i.test(value.buttonBgColor)) ? 'none' : '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
|
||||
<!-- 立即分享链接按钮:Card 风格固定「白底红边框」设计,不读 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: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
|
||||
<text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
|
||||
</button>
|
||||
<view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (nc.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
|
||||
<text :style="{ fontSize: '27rpx', fontWeight: '600', color: nc.codeColor || '#FF6B6B' }">📤 {{ nc.buttonText || '立即分享' }}</text>
|
||||
</view>
|
||||
<!-- showLink -->
|
||||
<view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
|
||||
<text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>
|
||||
@@ -368,7 +372,7 @@ export default {
|
||||
textColor: '#FFFFFF',
|
||||
titleColor: '#333333',
|
||||
codeColor: '#E4393C',
|
||||
buttonBgColor: '#E4393C',
|
||||
buttonBgColor: '', // 默认空:让 Card 风格的立即分享按钮走「白底红边框」分支,匹配设计参考图
|
||||
buttonTextColor: '#FFFFFF',
|
||||
shareButtonBgColor: '#67C23A',
|
||||
titleFontSize: 14,
|
||||
@@ -395,6 +399,8 @@ export default {
|
||||
code: '',
|
||||
shareLink: '',
|
||||
qrcodeUrl: '',
|
||||
/* H5 平台标识:用于在 H5 端用 view 替代 button,避免浏览器 <button> 默认样式覆盖 */
|
||||
isH5Platform: false,
|
||||
/* 状态机 */
|
||||
showConsent: false,
|
||||
loadingCode: false,
|
||||
@@ -636,6 +642,12 @@ export default {
|
||||
},
|
||||
created() {
|
||||
try {
|
||||
// H5 端检测:避开 <button> 默认样式影响(h5 端改用 view 触发)
|
||||
try {
|
||||
// #ifdef H5
|
||||
this.isH5Platform = true;
|
||||
// #endif
|
||||
} catch (e) {}
|
||||
if (this.storeToken) {
|
||||
this._resetAll();
|
||||
var vm = this;
|
||||
|
||||
Reference in New Issue
Block a user