From 715f007e89097ba009dd925fa259f49fb2a6b38f Mon Sep 17 00:00:00 2001
From: Trae AI <trae@example.com>
Date: Wed, 4 Mar 2026 15:44:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=95=86=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=95=B4=E4=BD=93=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goods-detail/goods-detail.js   |  55 ++++++-
 pages/goods-detail/goods-detail.wxml |  97 ++++++------
 pages/goods-detail/goods-detail.wxss | 225 ++++++++++++++++-----------
 3 files changed, 230 insertions(+), 147 deletions(-)

diff --git a/pages/goods-detail/goods-detail.js b/pages/goods-detail/goods-detail.js
index f731524..69156d3 100644
--- a/pages/goods-detail/goods-detail.js
+++ b/pages/goods-detail/goods-detail.js
@@ -467,9 +467,24 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
     // 组合显示：格式为"净重信息————件数-价格"
     let display = '';
     if (weightSpecDisplay && 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 {
         if (price) {
           display = `${weightSpecDisplay}【${quantity}件】￥${price}元`;
@@ -478,7 +493,18 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
         }
       }
     } 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) {
       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({
       weightSpec: weightSpecDisplay,
-      quantity: quantity,
+      quantity: processedQuantity,
       price: price,
       specStatus: specStatus,
       display: display,
diff --git a/pages/goods-detail/goods-detail.wxml b/pages/goods-detail/goods-detail.wxml
index 5a988d1..cda32d2 100644
--- a/pages/goods-detail/goods-detail.wxml
+++ b/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:elif="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text>
         </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 
           class="favorite-button"
           bindtap="onFavoriteClick"
@@ -121,12 +115,26 @@
       <view class="wq-title">规格信息</view>
       <view class="wq-list">
         <block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
-          <view class="wq-item">
-            <!-- 使用display字段显示完整信息，包括已下架标记 -->
-            <text class="wq-text">{{item.display}}</text>
-            <text wx:if="{{item.priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text>
-            <text wx:elif="{{item.priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text>
-            <text wx:if="{{item.isOffShelf}}" style="color: red; margin-left: 20rpx;">已下架</text>
+          <view class="spec-card">
+            <!-- 顶部：规格名称 + 价格 -->
+            <view class="spec-header">
+              <text class="spec-name">{{item.weightSpec}}</text>
+              <text class="spec-price">¥{{item.price}}</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>
         </block>
       </view>
@@ -375,49 +383,40 @@
     </view>
   </view>
 
-  <!-- 操作按钮区域 -->
+  <!-- 操作按钮区域（替换原有底部按钮） -->
   <view class="action-buttons" wx:if="{{!fromSeller}}">
-    <button 
-      class="call-button bottom-button"
-      bindtap="makePhoneCall"
-      data-phone="{{goodsDetail.contact_phone}}"
-    >
-      拨打电话
+    <!-- 物流 -->
+    <button class="bottom-button logistics-btn" bindtap="onLogisticsClick">
+      <text class="icon">🚚</text>
+      <text class="text">物流</text>
     </button>
-    <button 
-      class="chat-button bottom-button"
-      bindtap="showBargainModal"
-      data-id="{{goodsDetail.id}}"
-      disabled="{{fromChatDetail}}"
-      wx:if="{{goodsDetail.bargaining === 0 && goodsDetail.status !== 'sold_out' && goodsDetail.status !== 'sold' && goodsDetail.status !== 'out_of_stock' && !goodsDetail.supplyStatus.includes('售空')}}"
-    >
-      还价
+    <!-- 对比 -->
+    <button class="bottom-button compare-btn" bindtap="onCompareClick">
+      <text class="icon">⚖️</text>
+      <text class="text">对比</text>
+    </button>
+    <!-- 联系 -->
+    <button class="bottom-button chat-btn" bindtap="onChat" data-id="{{goodsDetail.id}}">
+      <text class="icon">💬</text>
+      <text class="text">联系</text>
     </button>
-    <button 
-      class="chat-button bottom-button"
-      bindtap="navigateToFreightCalculator"
-      data-id="{{goodsDetail.id}}"
-      wx:if="{{isInternalUser}}"
-    >
-      运费估算
+    <!-- 还价（保留原有显示条件） -->
+    <button class="bottom-button bargain-btn"
+      wx:if="{{goodsDetail.bargaining === 0 && goodsDetail.status !== 'sold_out' && goodsDetail.status !== 'sold' && goodsDetail.status !== 'out_of_stock' && !goodsDetail.supplyStatus.includes('售空')}}"
+      bindtap="showBargainModal">
+      <text class="icon">💰</text>
+      <text class="text">还价</text>
     </button>
-    <button 
-      class="chat-button bottom-button"
-      bindtap="onChat"
-      data-id="{{goodsDetail.id}}"
-      disabled="{{fromChatDetail}}"
-    >
-      💬 留言
+    <!-- 电话 -->
+    <button class="bottom-button phone-btn" bindtap="makePhoneCall" data-phone="{{goodsDetail.contact_phone}}">
+      <text class="icon">📞</text>
+      <text class="text">电话</text>
     </button>
   </view>
-  <!-- 返回按钮区域（仅在seller页面查看时显示） -->
+
+  <!-- 返回按钮区域（fromSeller 时保留） -->
   <view class="action-buttons" wx:if="{{fromSeller}}">
-    <button 
-      class="back-button bottom-button"
-      bindtap="goBack"
-    >
-      返回
-    </button>
+    <button class="back-button bottom-button" bindtap="goBack">返回</button>
   </view>
 
   <!-- 讲价弹窗 -->
diff --git a/pages/goods-detail/goods-detail.wxss b/pages/goods-detail/goods-detail.wxss
index 1a3de16..0480f44 100644
--- a/pages/goods-detail/goods-detail.wxss
+++ b/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);
 }
 
-/* 底部按钮区域样式 */
+/* 底部操作栏 - 图一样式 */
 .action-buttons {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 12px 16px;
+  display: flex;
   background-color: #ffffff;
-  border-top: 1px solid #f0f0f0;
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
+  border-top: 2rpx solid #f0f0f0;
+  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.06);
   z-index: 99;
-  display: flex;
-  gap: 8px;
-  flex-wrap: nowrap;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
+  height: 144rpx; /* 对应 h-18 (72px) */
 }
 
 .bottom-button {
   flex: 1;
-  min-width: 0;
-  height: 48px;
-  border-radius: 24px;
-  font-size: 16px;
-  font-weight: 700;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  background: transparent;
   border: none;
-  outline: none;
-  transition: all 0.3s ease;
+  border-radius: 0;
+  padding: 16rpx 0;
   margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0 12px;
+  height: 100%;
+  line-height: 1.2;
+  transition: background-color 0.2s;
 }
 
 .bottom-button:active {
-  transform: scale(0.98);
-  opacity: 0.9;
+  background-color: #f5f5f5; /* 默认点击背景 */
 }
 
-.call-button:active {
-  background-color: #4066ff;
-  border-color: #4066ff;
-  box-shadow: 0 4px 12px rgba(47, 84, 235, 0.3);
+.bottom-button .icon {
+  font-size: 44rpx;  /* 约22px，略大于原 text-lg */
+  margin-bottom: 6rpx;
 }
 
-.call-button.bottom-button {
-  background-color: #ffffff;
-  color: #2f54eb;
-  border: 2px solid #2f54eb;
-  box-shadow: none;
+.bottom-button .text {
+  font-size: 26rpx;  /* 13px */
+  font-weight: 400;
 }
 
-.call-button.bottom-button:active {
-  background-color: #f0f4ff;
-  transform: scale(0.98);
+/* 物流、对比、联系默认灰色 */
+.logistics-btn .icon,
+.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;
-  transform: scale(0.98);
+/* 还价按钮 - 橙色背景与文字 */
+.bargain-btn {
+  background-color: #fff7e6; /* 对应 bg-orange-50 */
 }
-
-.call-button.bottom-button {
-  background-color: #ffffff;
-  color: #2f54eb;
-  border: 2px solid #2f54eb;
-  box-shadow: none;
+.bargain-btn .icon,
+.bargain-btn .text {
+  color: #f97316; /* 对应 text-orange-600 */
+}
+.bargain-btn:active {
+  background-color: #ffedd5;
 }
 
-.call-button.bottom-button:active {
-  background-color: #f0f4ff;
-  transform: scale(0.98);
+/* 电话按钮 - 绿色背景与白色文字 */
+.phone-btn {
+  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 {
-  background-color: #d6f7e6;
-  transform: scale(0.98);
+/* 返回按钮（来自 seller 时） */
+.back-button.bottom-button {
+  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;
 }
 
-/* 净重件数对应信息样式 */
+/* 规格信息卡片样式（图一风格） */
 .weight-quantity-info {
-  background-color: #ffffff;
-  margin: 8rpx 16rpx;
-  padding: 16rpx;
-  border-radius: 12rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
-  border: 1rpx solid #f0f0f0;
+  background-color: transparent; /* 去除背景色，卡片自带白色背景 */
+  margin: 16rpx 16rpx 24rpx;
 }
 
 .wq-title {
-  font-size: 16px;
+  font-size: 32rpx;
   font-weight: 600;
   color: #262626;
   margin-bottom: 16rpx;
-  padding-bottom: 12rpx;
-  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;
+  padding-left: 8rpx;
 }
 
 .wq-list {
   display: flex;
   flex-direction: column;
-  gap: 12rpx;
+  gap: 16rpx;
 }
 
-.wq-item {
-  background-color: #f8f9fa;
-  padding: 30rpx 20rpx;
-  border-radius: 8rpx;
-  border-left: 4rpx solid #1890ff;
-  transition: all 0.3s ease;
+.spec-card {
+  background-color: #ffffff;
+  border: 2rpx solid #f0f0f0;
+  border-radius: 16rpx;
+  padding: 24rpx 20rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 
-.wq-item:active {
-  background-color: #e6f7ff;
-  transform: translateX(4rpx);
+.spec-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
 }
 
-.wq-text {
-  line-height: 1.5;
+.spec-name {
+  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;
-  color: #595959;
+  color: #ff4d4f;
+  white-space: nowrap;
 }
 
-.wq-spec {
-  font-size: 20px;
-  color: #333333;
+.spec-footer {
+  display: flex;
+  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;
 }
 
-.wq-price {
-  font-size: 18px;
-  color: #666666;
-  font-weight: 400;
-  margin-left: 10rpx;
+.off-shelf-tag {
+  font-size: 24rpx;
+  color: #ff4d4f;
+  background-color: #fff1f0;
+  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;
 }
 
 /* 价格变化箭头样式 */