wikiboss/shanghaipeiwan
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

fix(ui): 优化大神详情页底部操作栏布局（不再挤压换行）

浏览代码 
- 左侧「私聊/收藏/举报」独立成 bar-actions 组：固定 76rpx 宽、flex-shrink:0、文案 nowrap，杜绝被价格块挤压换行
- 价格块改为右对齐两行展示：小字标签「当前选定」+ 金额(独立 ¥ 符号，大号加粗)，不再与标签挤在一行
- 「立即预约」按钮 flex-shrink:0 + min-width 220rpx，胶囊圆角(999rpx)，保证任何机型都可点且不被压缩
- 未认证大神的提示改为独立的 guest-tip（右对齐、单行）
- 底部栏高度改为 min-height+内边距并保留安全区；暖色主题同步补充 summary-sym/guest-tip 配色
- 新增回归护栏 detail-bottom-bar.spec.ts（99 套件/681 用例全绿）
这个提交包含在：
xcbyy
2026-10-19 16:00:37 +08:00
父节点 d5c50aabe6
当前提交 4119bfc303
共有 2 个文件被更改，包括 136 次插入 和 44 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

145
pwuniapp/pages/expert/detail.vue
查看文件

@@ -170,27 +170,33 @@
<!-- 底部固定栏 (限制居中与安全区) -->
<view class="bottom-bar">
<view class="icon-action btn-active" @click="chatOnline">
<image class="action-svg" :src="ICONS.chat" mode="aspectFit" />
<text class="action-text">私聊</text>
</view>
<view class="icon-action btn-active" @click="toggleFavorite">
<image class="action-svg" :src="isFav ? ICONS.starFilled : ICONS.starOutline" mode="aspectFit" />
<text class="action-text" :class="{ 'fav-active': isFav }">{{ isFav ? '已收藏' : '收藏' }}</text>
</view>
<view class="icon-action btn-active" @click="openReportModal">
<image class="action-svg" :src="ICONS.shield" mode="aspectFit" />
<text class="action-text">举报</text>
<view class="bar-actions">
<view class="icon-action btn-active" @click="chatOnline">
<image class="action-svg" :src="ICONS.chat" mode="aspectFit" />
<text class="action-text">私聊</text>
</view>
<view class="icon-action btn-active" @click="toggleFavorite">
<image class="action-svg" :src="isFav ? ICONS.starFilled : ICONS.starOutline" mode="aspectFit" />
<text class="action-text" :class="{ 'fav-active': isFav }">{{ isFav ? '已收藏' : '收藏' }}</text>
</view>
<view class="icon-action btn-active" @click="openReportModal">
<image class="action-svg" :src="ICONS.shield" mode="aspectFit" />
<text class="action-text">举报</text>
</view>
</view>
<template v-if="isCompanion">
<view class="price-summary">
<text class="summary-label">当前选定：</text>
<text class="summary-price">¥{{ currentSelectedService ? currentSelectedService.price : expert.price }}</text>
<text class="summary-label">当前选定</text>
<view class="summary-price-row">
<text class="summary-sym">¥</text>
<text class="summary-price">{{ currentSelectedService ? currentSelectedService.price : expert.price }}</text>
</view>
</view>
<button class="btn-book btn-active" @click="goToOrder">立即预约</button>
</template>
<view v-else class="price-summary">
<text class="summary-label">该用户尚未认证为大神，暂不可预约</text>
<view v-else class="guest-tip">
<text class="guest-tip-text">该用户尚未认证为大神，暂不可预约</text>
</view>
</view>
@@ -1131,70 +1137,112 @@ const submitReportTicket = async () => {
bottom: 0;
left: 0;
right: 0;
height: calc(120rpx + env(safe-area-inset-bottom));
padding: 0 32rpx env(safe-area-inset-bottom);
min-height: calc(112rpx + env(safe-area-inset-bottom));
padding: 12rpx 24rpx calc(12rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
background-color: rgba(21, 29, 48, 0.95);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
gap: 20rpx;
gap: 12rpx;
z-index: 100;
max-width: 450px;
margin: 0 auto;
.icon-action {
/* 左侧三个图标动作：固定宽度，绝不换行/被压缩 */
.bar-actions {
display: flex;
flex-direction: column;
align-items: center;
width: 80rpx;
gap: 6rpx;
flex-shrink: 0;
.action-svg {
width: 36rpx;
height: 36rpx;
}
.action-text {
font-size: 18rpx;
color: #94A3B8;
margin-top: 4rpx;
.icon-action {
width: 76rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&.fav-active {
color: #F59E0B;
font-weight: 600;
.action-svg {
width: 36rpx;
height: 36rpx;
}
.action-text {
font-size: 20rpx;
color: #94A3B8;
margin-top: 4rpx;
white-space: nowrap;
line-height: 1.2;
&.fav-active {
color: #F59E0B;
font-weight: 600;
}
}
}
}
/* 价格块：右对齐、两行（标签 + 金额），不换行 */
.price-summary {
flex: 1;
margin-left: auto;
flex-shrink: 0;
display: flex;
align-items: baseline;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 0 4rpx;
.summary-label {
font-size: 22rpx;
font-size: 20rpx;
color: #64748B;
white-space: nowrap;
line-height: 1.2;
}
.summary-price {
font-size: 36rpx;
.summary-price-row {
display: flex;
align-items: baseline;
}
.summary-sym {
font-size: 22rpx;
font-weight: 700;
color: #10B981;
margin-left: 6rpx;
margin-right: 2rpx;
}
.summary-price {
font-size: 38rpx;
font-weight: 700;
color: #10B981;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
}
.btn-book {
flex-shrink: 0;
min-width: 220rpx;
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
color: #FFF;
font-size: 28rpx;
font-size: 30rpx;
font-weight: 700;
border-radius: 44rpx;
height: 80rpx;
line-height: 80rpx;
padding: 0 48rpx;
box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4);
border-radius: 999rpx;
height: 84rpx;
line-height: 84rpx;
padding: 0 36rpx;
margin: 0;
white-space: nowrap;
box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4);
}
.guest-tip {
margin-left: auto;
flex: 1;
text-align: right;
.guest-tip-text {
font-size: 22rpx;
color: #94A3B8;
}
}
}
@@ -1591,11 +1639,20 @@ const submitReportTicket = async () => {
.summary-label {
color: #78716C;
}
.summary-sym {
color: #EA580C;
}
.summary-price {
color: #EA580C;
}
}
.guest-tip {
.guest-tip-text {
color: #57534E;
}
}
.btn-book {
background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35);