Browse Source

修改商品详情整体布局和样式

main
Trae AI 3 days ago
parent
commit
715f007e89
  1. 55
      pages/goods-detail/goods-detail.js
  2. 97
      pages/goods-detail/goods-detail.wxml
  3. 225
      pages/goods-detail/goods-detail.wxss

55
pages/goods-detail/goods-detail.js

@ -467,9 +467,24 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
// 组合显示:格式为"净重信息————件数-价格" // 组合显示:格式为"净重信息————件数-价格"
let display = ''; let display = '';
if (weightSpecDisplay && quantity) { if (weightSpecDisplay && quantity) {
// 检查是否为售空状态,如果是售空状态则显示"售空" // 检查是否为售空状态,如果是售空状态则显示"已售多少件"
if (weightSpecDisplay.includes('售空') || quantity === '售空') { if (weightSpecDisplay.includes('售空') || quantity === '售空') {
display = `${weightSpecDisplay}————售空`; // 尝试从 weightSpecDisplay 或 quantity 中提取库存数量
let soldQuantity = quantity;
if (quantity === '售空') {
// 从 weightSpecDisplay 中提取数字
const quantityMatch = weightSpecDisplay.match(/(\d+)/);
if (quantityMatch) {
soldQuantity = quantityMatch[1];
} else {
soldQuantity = 0;
}
}
display = `${weightSpecDisplay}————已售${soldQuantity}`;
} else if (weightSpecDisplay.includes('剩余售空件')) {
// 替换已有的"剩余售空件"为"已售多少件"
const soldQuantity = weightSpecDisplay.match(/剩余售空(\d+)件/)?.[1] || 0;
display = `${weightSpecDisplay.replace('剩余售空件', `已售${soldQuantity}`)}`;
} else { } else {
if (price) { if (price) {
display = `${weightSpecDisplay}${quantity}件】¥${price}`; display = `${weightSpecDisplay}${quantity}件】¥${price}`;
@ -478,7 +493,18 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
} }
} }
} else if (weightSpecDisplay) { } else if (weightSpecDisplay) {
display = weightSpecDisplay; // 处理只包含净重信息的情况
if (weightSpecDisplay.includes('剩余售空件')) {
const soldQuantity = weightSpecDisplay.match(/剩余售空(\d+)件/)?.[1] || 0;
display = weightSpecDisplay.replace('剩余售空件', `已售${soldQuantity}`);
} else if (weightSpecDisplay.includes('售空')) {
// 尝试从 weightSpecDisplay 中提取库存数量
const quantityMatch = weightSpecDisplay.match(/(\d+)/);
const soldQuantity = quantityMatch ? quantityMatch[1] : 0;
display = `${weightSpecDisplay}————已售${soldQuantity}`;
} else {
display = weightSpecDisplay;
}
} else if (quantity) { } else if (quantity) {
display = `${quantity}`; display = `${quantity}`;
} }
@ -497,9 +523,30 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
} }
} }
// 处理 quantity 字段,确保售空时也有正确的数量值
let processedQuantity = quantity;
if (quantity === '售空' || weightSpecDisplay.includes('售空')) {
// 尝试从 weightSpecDisplay 中提取数字
const quantityMatch = weightSpecDisplay.match(/(\d+)/);
if (quantityMatch) {
processedQuantity = quantityMatch[1];
} else if (quantity !== '售空') {
// 如果 quantity 不是 '售空',则保持原值
processedQuantity = quantity;
} else {
// 尝试从 display 字段中提取数字
const displayMatch = display.match(/(\d+)/);
if (displayMatch) {
processedQuantity = displayMatch[1];
} else {
processedQuantity = 0;
}
}
}
result.push({ result.push({
weightSpec: weightSpecDisplay, weightSpec: weightSpecDisplay,
quantity: quantity, quantity: processedQuantity,
price: price, price: price,
specStatus: specStatus, specStatus: specStatus,
display: display, display: display,

97
pages/goods-detail/goods-detail.wxml

@ -97,13 +97,7 @@
<text wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text> <text wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text>
<text wx:elif="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text> <text wx:elif="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text>
</view> </view>
<view
class="compare-button"
bindtap="onCompareClick"
style="display: flex; align-items: left; margin-right: 20rpx; padding: 8rpx 16rpx; border: 2rpx solid #4a90e2; border-radius: 20rpx; position: relative; left: 68rpx; top: 0rpx"
>
<text style="font-size: 32rpx; color: #4a90e2; margin-right: 8rpx;">对比价格</text>
</view>
<view <view
class="favorite-button" class="favorite-button"
bindtap="onFavoriteClick" bindtap="onFavoriteClick"
@ -121,12 +115,26 @@
<view class="wq-title">规格信息</view> <view class="wq-title">规格信息</view>
<view class="wq-list"> <view class="wq-list">
<block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index"> <block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
<view class="wq-item"> <view class="spec-card">
<!-- 使用display字段显示完整信息,包括已下架标记 --> <!-- 顶部:规格名称 + 价格 -->
<text class="wq-text">{{item.display}}</text> <view class="spec-header">
<text wx:if="{{item.priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text> <text class="spec-name">{{item.weightSpec}}</text>
<text wx:elif="{{item.priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text> <text class="spec-price">¥{{item.price}}</text>
<text wx:if="{{item.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text> </view>
<!-- 底部:降价/库存/下架状态 -->
<view class="spec-footer">
<!-- 降价标识(仅当 priceChangeDirection === 'down' 时显示) -->
<view wx:if="{{item.priceChangeDirection === 'down'}}" class="price-down-tag">
<text class="arrow">↓</text>
<text class="label">降价</text>
</view>
<!-- 已下架标识 -->
<text wx:if="{{item.isOffShelf}}" class="off-shelf-tag">已下架</text>
<!-- 库存信息(未下架且有件数且未售空时显示) -->
<text wx:elif="{{item.quantity && item.quantity !== '售空' && !item.weightSpec.includes('售空') && !item.display.includes('售空')}}" class="stock-info">剩余{{item.quantity}}件</text>
<!-- 售空标识(未下架且售空时显示) -->
<text wx:else class="stock-info">已售{{item.quantity || 0}}件</text>
</view>
</view> </view>
</block> </block>
</view> </view>
@ -375,49 +383,40 @@
</view> </view>
</view> </view>
<!-- 操作按钮区域 --> <!-- 操作按钮区域(替换原有底部按钮) -->
<view class="action-buttons" wx:if="{{!fromSeller}}"> <view class="action-buttons" wx:if="{{!fromSeller}}">
<button <!-- 物流 -->
class="call-button bottom-button" <button class="bottom-button logistics-btn" bindtap="onLogisticsClick">
bindtap="makePhoneCall" <text class="icon">🚚</text>
data-phone="{{goodsDetail.contact_phone}}" <text class="text">物流</text>
>
拨打电话
</button> </button>
<button <!-- 对比 -->
class="chat-button bottom-button" <button class="bottom-button compare-btn" bindtap="onCompareClick">
bindtap="showBargainModal" <text class="icon">⚖️</text>
data-id="{{goodsDetail.id}}" <text class="text">对比</text>
disabled="{{fromChatDetail}}" </button>
wx:if="{{goodsDetail.bargaining === 0 && goodsDetail.status !== 'sold_out' && goodsDetail.status !== 'sold' && goodsDetail.status !== 'out_of_stock' && !goodsDetail.supplyStatus.includes('售空')}}" <!-- 联系 -->
> <button class="bottom-button chat-btn" bindtap="onChat" data-id="{{goodsDetail.id}}">
还价 <text class="icon">💬</text>
<text class="text">联系</text>
</button> </button>
<button <!-- 还价(保留原有显示条件) -->
class="chat-button bottom-button" <button class="bottom-button bargain-btn"
bindtap="navigateToFreightCalculator" wx:if="{{goodsDetail.bargaining === 0 && goodsDetail.status !== 'sold_out' && goodsDetail.status !== 'sold' && goodsDetail.status !== 'out_of_stock' && !goodsDetail.supplyStatus.includes('售空')}}"
data-id="{{goodsDetail.id}}" bindtap="showBargainModal">
wx:if="{{isInternalUser}}" <text class="icon">💰</text>
> <text class="text">还价</text>
运费估算
</button> </button>
<button <!-- 电话 -->
class="chat-button bottom-button" <button class="bottom-button phone-btn" bindtap="makePhoneCall" data-phone="{{goodsDetail.contact_phone}}">
bindtap="onChat" <text class="icon">📞</text>
data-id="{{goodsDetail.id}}" <text class="text">电话</text>
disabled="{{fromChatDetail}}"
>
💬 留言
</button> </button>
</view> </view>
<!-- 返回按钮区域(仅在seller页面查看时显示) -->
<!-- 返回按钮区域(fromSeller 时保留) -->
<view class="action-buttons" wx:if="{{fromSeller}}"> <view class="action-buttons" wx:if="{{fromSeller}}">
<button <button class="back-button bottom-button" bindtap="goBack">返回</button>
class="back-button bottom-button"
bindtap="goBack"
>
返回
</button>
</view> </view>
<!-- 讲价弹窗 --> <!-- 讲价弹窗 -->

225
pages/goods-detail/goods-detail.wxss

@ -413,88 +413,95 @@ video.slider-media .wx-video-volume-icon {
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2); box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2);
} }
/* 底部按钮区域样式 */ /* 底部操作栏 - 图一样式 */
.action-buttons { .action-buttons {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 12px 16px; display: flex;
background-color: #ffffff; background-color: #ffffff;
border-top: 1px solid #f0f0f0; border-top: 2rpx solid #f0f0f0;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06); box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);
z-index: 99; z-index: 99;
display: flex; height: 144rpx; /* 对应 h-18 (72px) */
gap: 8px;
flex-wrap: nowrap;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
} }
.bottom-button { .bottom-button {
flex: 1; flex: 1;
min-width: 0;
height: 48px;
border-radius: 24px;
font-size: 16px;
font-weight: 700;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
background: transparent;
border: none; border: none;
outline: none; border-radius: 0;
transition: all 0.3s ease; padding: 16rpx 0;
margin: 0; margin: 0;
white-space: nowrap; height: 100%;
overflow: hidden; line-height: 1.2;
text-overflow: ellipsis; transition: background-color 0.2s;
padding: 0 12px;
} }
.bottom-button:active { .bottom-button:active {
transform: scale(0.98); background-color: #f5f5f5; /* 默认点击背景 */
opacity: 0.9;
} }
.call-button:active { .bottom-button .icon {
background-color: #4066ff; font-size: 44rpx; /* 约22px,略大于原 text-lg */
border-color: #4066ff; margin-bottom: 6rpx;
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.3);
} }
.call-button.bottom-button { .bottom-button .text {
background-color: #ffffff; font-size: 26rpx; /* 13px */
color: #2f54eb; font-weight: 400;
border: 2px solid #2f54eb;
box-shadow: none;
} }
.call-button.bottom-button:active { /* 物流、对比、联系默认灰色 */
background-color: #f0f4ff; .logistics-btn .icon,
transform: scale(0.98); .logistics-btn .text,
.compare-btn .icon,
.compare-btn .text,
.chat-btn .icon,
.chat-btn .text {
color: #666;
} }
.chat-button.bottom-button:active { /* 还价按钮 - 橙色背景与文字 */
background-color: #d6f7e6; .bargain-btn {
transform: scale(0.98); background-color: #fff7e6; /* 对应 bg-orange-50 */
} }
.bargain-btn .icon,
.call-button.bottom-button { .bargain-btn .text {
background-color: #ffffff; color: #f97316; /* 对应 text-orange-600 */
color: #2f54eb; }
border: 2px solid #2f54eb; .bargain-btn:active {
box-shadow: none; background-color: #ffedd5;
} }
.call-button.bottom-button:active { /* 电话按钮 - 绿色背景与白色文字 */
background-color: #f0f4ff; .phone-btn {
transform: scale(0.98); background-color: #10b981; /* 对应 bg-green-500 */
}
.phone-btn .icon,
.phone-btn .text {
color: #ffffff;
}
.phone-btn:active {
background-color: #059669;
} }
.chat-button.bottom-button:active { /* 返回按钮(来自 seller 时) */
background-color: #d6f7e6; .back-button.bottom-button {
transform: scale(0.98); background-color: #ffffff;
color: #333;
border: 2rpx solid #d9d9d9;
border-radius: 8rpx;
margin: 12rpx 20rpx;
height: auto;
flex: none;
width: auto;
padding: 16rpx 32rpx;
} }
/* 图片预览弹窗 */ /* 图片预览弹窗 */
@ -721,73 +728,103 @@ video.slider-media .wx-video-volume-icon {
border: none; border: none;
} }
/* 净重件数对应信息样式 */ /* 规格信息卡片样式(图一风格) */
.weight-quantity-info { .weight-quantity-info {
background-color: #ffffff; background-color: transparent; /* 去除背景色,卡片自带白色背景 */
margin: 8rpx 16rpx; margin: 16rpx 16rpx 24rpx;
padding: 16rpx;
border-radius: 12rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
border: 1rpx solid #f0f0f0;
} }
.wq-title { .wq-title {
font-size: 16px; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #262626; color: #262626;
margin-bottom: 16rpx; margin-bottom: 16rpx;
padding-bottom: 12rpx; padding-left: 8rpx;
border-bottom: 1rpx solid #f0f0f0;
position: relative;
}
.wq-title::after {
content: '';
position: absolute;
bottom: -1rpx;
left: 0;
width: 60rpx;
height: 4rpx;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 2rpx;
} }
.wq-list { .wq-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12rpx; gap: 16rpx;
} }
.wq-item { .spec-card {
background-color: #f8f9fa; background-color: #ffffff;
padding: 30rpx 20rpx; border: 2rpx solid #f0f0f0;
border-radius: 8rpx; border-radius: 16rpx;
border-left: 4rpx solid #1890ff; padding: 24rpx 20rpx;
transition: all 0.3s ease; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
} }
.wq-item:active { .spec-header {
background-color: #e6f7ff; display: flex;
transform: translateX(4rpx); justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
} }
.wq-text { .spec-name {
line-height: 1.5; font-size: 30rpx;
font-weight: 500;
color: #262626;
line-height: 1.4;
flex: 1;
word-break: break-word;
padding-right: 20rpx;
}
.spec-price {
font-size: 34rpx;
font-weight: 600; font-weight: 600;
color: #595959; color: #ff4d4f;
white-space: nowrap;
} }
.wq-spec { .spec-footer {
font-size: 20px; display: flex;
color: #333333; align-items: center;
gap: 16rpx;
flex-wrap: wrap;
}
.price-down-tag {
display: inline-flex;
align-items: center;
background-color: #f0fff0;
padding: 4rpx 12rpx;
border-radius: 8rpx;
border: 1rpx solid #b7eb8f;
}
.price-down-tag .arrow {
font-size: 28rpx;
color: #52c41a;
margin-right: 4rpx;
font-weight: bold;
}
.price-down-tag .label {
font-size: 24rpx;
color: #52c41a;
font-weight: 500; font-weight: 500;
} }
.wq-price { .off-shelf-tag {
font-size: 18px; font-size: 24rpx;
color: #666666; color: #ff4d4f;
font-weight: 400; background-color: #fff1f0;
margin-left: 10rpx; padding: 4rpx 12rpx;
border-radius: 8rpx;
border: 1rpx solid #ffccc7;
font-weight: 500;
}
.stock-info {
font-size: 24rpx;
color: #8c8c8c;
background-color: #f5f5f5;
padding: 4rpx 12rpx;
border-radius: 8rpx;
} }
/* 价格变化箭头样式 */ /* 价格变化箭头样式 */

Loading…
Cancel
Save