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>
|
<text :style="{ fontSize: '24rpx', color: value.codeColor || '#FF6B6B', fontWeight: '600' }">复制推荐码</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 立即分享链接按钮:全宽铺满白底红边框,触发微信原生分享 -->
|
<!-- 立即分享链接按钮:Card 风格固定「白底红边框」设计,不读 buttonBgColor
|
||||||
<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' }">
|
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>
|
<text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
|
||||||
</button>
|
</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 -->
|
<!-- showLink -->
|
||||||
<view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
|
<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>
|
<text @tap="copyLink" style="font-size:22rpx;color:#999;text-decoration:underline;">{{ formatShareLink }}</text>
|
||||||
@@ -368,7 +372,7 @@ export default {
|
|||||||
textColor: '#FFFFFF',
|
textColor: '#FFFFFF',
|
||||||
titleColor: '#333333',
|
titleColor: '#333333',
|
||||||
codeColor: '#E4393C',
|
codeColor: '#E4393C',
|
||||||
buttonBgColor: '#E4393C',
|
buttonBgColor: '', // 默认空:让 Card 风格的立即分享按钮走「白底红边框」分支,匹配设计参考图
|
||||||
buttonTextColor: '#FFFFFF',
|
buttonTextColor: '#FFFFFF',
|
||||||
shareButtonBgColor: '#67C23A',
|
shareButtonBgColor: '#67C23A',
|
||||||
titleFontSize: 14,
|
titleFontSize: 14,
|
||||||
@@ -395,6 +399,8 @@ export default {
|
|||||||
code: '',
|
code: '',
|
||||||
shareLink: '',
|
shareLink: '',
|
||||||
qrcodeUrl: '',
|
qrcodeUrl: '',
|
||||||
|
/* H5 平台标识:用于在 H5 端用 view 替代 button,避免浏览器 <button> 默认样式覆盖 */
|
||||||
|
isH5Platform: false,
|
||||||
/* 状态机 */
|
/* 状态机 */
|
||||||
showConsent: false,
|
showConsent: false,
|
||||||
loadingCode: false,
|
loadingCode: false,
|
||||||
@@ -636,6 +642,12 @@ export default {
|
|||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
try {
|
try {
|
||||||
|
// H5 端检测:避开 <button> 默认样式影响(h5 端改用 view 触发)
|
||||||
|
try {
|
||||||
|
// #ifdef H5
|
||||||
|
this.isH5Platform = true;
|
||||||
|
// #endif
|
||||||
|
} catch (e) {}
|
||||||
if (this.storeToken) {
|
if (this.storeToken) {
|
||||||
this._resetAll();
|
this._resetAll();
|
||||||
var vm = this;
|
var vm = this;
|
||||||
|
|||||||
Reference in New Issue
Block a user