chore:蓝色背景弧度向上移动,分享二维码改成名片样式

This commit is contained in:
2026-10-13 16:17:49 +08:00
parent 389d87b82c
commit 9b540ecfad
2 changed files with 30 additions and 8 deletions

View File

@@ -32,7 +32,7 @@
</view>
<view class="ca-item" @tap="openShare">
<text class="ca-icon iconfont icon-erweima"></text>
<text>分享二维码</text>
<text>名片样式</text>
</view>
<view class="ca-item" @tap="goList">
<text class="ca-icon iconfont icon-shuaxin"></text>
@@ -355,7 +355,7 @@ export default {
<style lang="scss" scoped>
.card-detail {
min-height: 100vh;
// 参考图: 蓝色渐隐到白底(非灰底)
// 参考图: 蓝色以下为白底(非灰底)
background-color: #ffffff;
padding: 0 0 60rpx;
box-sizing: border-box;
@@ -372,16 +372,20 @@ export default {
padding-top: 40rpx;
}
// 蓝色背景层: 顶部与导航栏 #2aa5ff 无缝衔接, 下沿长距离渐隐进白底
// bottom: 0 —— 蓝色一直铺到卡片下沿, 靠渐变尾巴收掉, 与参考图一致
// 蓝色背景层: 纯色(无渐变), 顶部与导航栏 #2aa5ff 无缝衔接, 下沿是一条向下凸的弧线
// 弧度做法: 底部两角用「横向 240rpx + 纵向 44rpx」的椭圆圆角, 两侧各一条大弧线
// (中段被白卡完全盖住, 所以漏出来的只有左右两条弧边, 和参考图一致)
// bottom: 48rpx —— 弧线最低点比卡片下沿上提 48rpx(向上移一点); 想再高/再低改这个值即可
.card-wrap-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
bottom: 48rpx;
z-index: 0;
background: linear-gradient(180deg, #2aa5ff 0%, #0d7bf0 52%, rgba(13, 123, 240, 0) 100%);
background-color: #2aa5ff;
border-bottom-left-radius: 240rpx 44rpx;
border-bottom-right-radius: 240rpx 44rpx;
pointer-events: none;
}

View File

@@ -118,10 +118,28 @@ export default {
}
});
},
// 详情路由只认字符串 card_id(后端文档 1.3.2), 行数据里可能写成 card_id / cardId
cardIdOf(item) {
if (!item) return '';
const raw = item.card_id || item.cardId;
return raw ? String(raw) : '';
},
goDetail(item) {
if (!item.card_id) return;
const cardId = this.cardIdOf(item);
if (!cardId) {
// 之前这里是静默 return: 命中时点名片毫无反应, 用户只会认为"点不进去"
console.warn('[card/list] 该行缺少 card_id, 无法打开详情; 可用字段:',
item ? Object.keys(item) : item);
uni.showToast({ title: '该名片缺少编号,无法打开', icon: 'none' });
return;
}
uni.navigateTo({
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(item.card_id)
url: '/pages_tool/card/detail?card_id=' + encodeURIComponent(cardId),
// navigateTo 默认无界面反馈(页面未注册/栈满都会静默失败), 显式暴露错误
fail: err => {
console.error('[card/list] 打开名片详情失败:', err);
uni.showToast({ title: '打开失败,请稍后重试', icon: 'none' });
}
});
},
goCreate() {