修改goods-update页面规格信息显示样式，实现垂直对齐

pages/goods-update/goods-update.js

@@ -161,13 +161,15 @@ function formatDateTime(dateString) {
   return dateString;
 }
 
-// 处理净重件数对应数据
+// 处理净重件数对应数据，支持逗号分隔的价格与规格一一对应
-function processWeightAndQuantityData(weightSpecString, quantityString, specString) {
+function processWeightAndQuantityData(weightSpecString, quantityString, specString, price = '', costprice = '') {
   console.log('===== 处理净重、件数和规格数据 =====');
   console.log('输入参数:');
   console.log('- weightSpecString:', weightSpecString, '(类型:', typeof weightSpecString, ')');
   console.log('- quantityString:', quantityString, '(类型:', typeof quantityString, ')');
   console.log('- specString:', specString, '(类型:', typeof specString, ')');
+  console.log('- price:', price, '(类型:', typeof price, ')');
+  console.log('- costprice:', costprice, '(类型:', typeof costprice, ')');
   
   // 如果没有数据，返回空数组
   if (!weightSpecString && !quantityString && !specString) {
@@ -197,16 +199,40 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
     console.log('将数量转换为数组:', quantityArray);
   }
   
+  // 处理销售价格字符串，支持逗号分隔的多个价格
+  let priceArray = [];
+  if (price && typeof price === 'string') {
+    // 支持多种逗号分隔符：英文逗号、中文逗号、全角逗号
+    priceArray = price.split(/[,，、]/).map(item => item.trim()).filter(item => item);
+    console.log('从字符串分割得到销售价格数组:', priceArray);
+  } else if (price) {
+    priceArray = [String(price)];
+    console.log('将销售价格转换为数组:', priceArray);
+  }
+  
+  // 处理采购价格字符串，支持逗号分隔的多个价格
+  let costpriceArray = [];
+  if (costprice && typeof costprice === 'string') {
+    // 支持多种逗号分隔符：英文逗号、中文逗号、全角逗号
+    costpriceArray = costprice.split(/[,，、]/).map(item => item.trim()).filter(item => item);
+    console.log('从字符串分割得到采购价格数组:', costpriceArray);
+  } else if (costprice) {
+    costpriceArray = [String(costprice)];
+    console.log('将采购价格转换为数组:', costpriceArray);
+  }
+  
   // 获取最大长度，确保一一对应
-  const maxLength = Math.max(weightSpecArray.length, quantityArray.length);
+  const maxLength = Math.max(weightSpecArray.length, quantityArray.length, priceArray.length, costpriceArray.length);
   console.log('最大长度:', maxLength);
   const result = [];
   
   for (let i = 0; i < maxLength; i++) {
     const weightSpec = weightSpecArray[i] || '';
     const quantity = quantityArray[i] || '';
+    const itemPrice = priceArray[i] || '';
+    const itemCostprice = costpriceArray[i] || '';
     
-    console.log(`处理第${i}组数据: weightSpec=${weightSpec}, quantity=${quantity}`);
+    console.log(`处理第${i}组数据: weightSpec=${weightSpec}, quantity=${quantity}, price=${itemPrice}, costprice=${itemCostprice}`);
     
     // 处理净重规格显示格式 - 根据内容类型添加相应前缀
     let weightSpecDisplay = '';
@@ -217,7 +243,7 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
       } else {
         // 否则，根据内容自动判断添加前缀
         if (weightSpec.includes('-')) {
-          // 如果包含"-"，认为是净重范围，添加"净重"前缀
+          // 如果包含"-", 认为是净重范围，添加"净重"前缀
           weightSpecDisplay = `净重${weightSpec}`;
         } else {
           // 否则，认为是毛重，添加"毛重"前缀
@@ -233,22 +259,14 @@ function processWeightAndQuantityData(weightSpecString, quantityString, specStri
       quantityDisplay = `${quantity}件`;
     }
     
-    // 构建显示文本
+    if (weightSpecDisplay || quantityDisplay || itemPrice || itemCostprice) {
-    let displayText = '';
+      result.push({ 
-    if (weightSpecDisplay && quantityDisplay) {
+        weightSpec: weightSpecDisplay, 
-      // 如果有净重和件数，格式为：净重XX-XX——XXX件
+        quantity: quantityDisplay, 
-      displayText = `${weightSpecDisplay}——${quantityDisplay}`;
+        price: itemPrice, 
-    } else if (weightSpecDisplay) {
+        costprice: itemCostprice 
-      // 只有净重
+      });
-      displayText = weightSpecDisplay;
+      console.log(`添加显示对象: weightSpec=${weightSpecDisplay}, quantity=${quantityDisplay}, price=${itemPrice}, costprice=${itemCostprice}`);
-    } else if (quantityDisplay) {
-      // 只有件数
-      displayText = quantityDisplay;
-    }
-    
-    if (displayText) {
-      result.push({ display: displayText });
-      console.log(`添加显示文本: ${displayText}`);
     }
   }
   
@@ -516,7 +534,7 @@ Page({
             quantityString: quantityString
           });
           
-          const weightQuantityData = processWeightAndQuantityData(weightSpecString, quantityString, '');
+          const weightQuantityData = processWeightAndQuantityData(weightSpecString, quantityString, '', product.price, product.costprice);
           
           console.log('=== 处理结果调试信息 ===');
           console.log('weightSpecString:', weightSpecString);
@@ -612,13 +630,36 @@ Page({
           console.log('最终是否已下架:', isSoldOut);
           console.log('最终状态:', finalStatus);
           
+          // 提取第一个规格的价格信息作为默认价格
+          let defaultPrice = product.price;
+          let defaultCostprice = product.costprice;
+          
+          // 如果有规格数据，提取第一个规格的价格信息
+          if (weightQuantityData && weightQuantityData.length > 0) {
+            // 处理销售价格
+            if (product.price && typeof product.price === 'string') {
+              const priceArray = product.price.split(/[,，、]/).map(item => item.trim()).filter(item => item);
+              if (priceArray.length > 0) {
+                defaultPrice = priceArray[0];
+              }
+            }
+            // 处理采购价格
+            if (product.costprice && typeof product.costprice === 'string') {
+              const costpriceArray = product.costprice.split(/[,，、]/).map(item => item.trim()).filter(item => item);
+              if (costpriceArray.length > 0) {
+                defaultCostprice = costpriceArray[0];
+              }
+            }
+          }
+          
           // 转换商品数据格式
           const formattedGoods = {
             id: productIdStr,
             productId: productIdStr,
             // 直接使用数据库字段名
             name: product.productName || product.name || '商品名称',
-            price: product.price,
+            price: defaultPrice,
+            costprice: defaultCostprice,
             minOrder: minOrder,
             yolk: product.yolk,
             spec: spec,
@@ -663,7 +704,10 @@ Page({
             // 确保reservedCount字段使用我们计算得到的值，放在最后以覆盖其他来源的值
             reservedCount: finalReservationCount,
             // 添加新鲜程度字段
-            freshness: product.freshness || ''
+            freshness: product.freshness || '',
+            // 确保价格字段使用我们提取的第一个规格价格
+            price: defaultPrice,
+            costprice: defaultCostprice
           };
           
           console.log('最终formattedGoods.status:', formattedGoods.status);
@@ -1473,202 +1517,204 @@ Page({
       if (type === 'edit') {
         const editSupply = this.data.editSupply;
         const newImageUrls = [...editSupply.imageUrls, ...filePaths];
-        
         this.setData({
-          [`editSupply.imageUrls`]: newImageUrls
+          'editSupply.imageUrls': newImageUrls
         });
       }
       
       wx.showToast({
         title: '上传成功',
         icon: 'success',
-        duration: 1500
+        duration: 2000
-      });
-    }, 1500);
-  },
-  
-  // 删除图片
-  deleteImage: function(e) {
-    const index = e.currentTarget.dataset.index;
-    const type = e.currentTarget.dataset.type;
-    
-    if (type === 'edit') {
-      const editSupply = this.data.editSupply;
-      const newImageUrls = editSupply.imageUrls.filter((item, idx) => idx !== index);
-      
-      this.setData({
-        [`editSupply.imageUrls`]: newImageUrls
       });
-    }
+    }, 1000);
   },
   
   // 预览图片
   previewImage: function(e) {
     const urls = e.currentTarget.dataset.urls;
-    const index = e.currentTarget.dataset.index;
+    const currentIndex = e.currentTarget.dataset.index;
     
-    if (!urls || urls.length === 0) {
+    // 过滤出图片URL
-      wx.showToast({
+    const imageUrls = urls.filter(url => !isVideoUrl(url));
-        title: '没有内容可预览',
+    
-        icon: 'none'
+    // 如果没有图片URL，不打开预览
-      });
+    if (imageUrls.length === 0) {
       return;
     }
     
-    this.setData({
+    wx.previewImage({
-      showImagePreview: true,
+      urls: imageUrls,
-      previewImageUrls: urls,
+      current: imageUrls[currentIndex]
-      previewImageIndex: parseInt(index || 0)
     });
-    this.resetZoom();
   },
   
-  // 关闭图片预览
+  // 移除图片
-  closeImagePreview: function() {
+  removeImage: function(e) {
-    this.setData({
+    const type = e.currentTarget.dataset.type;
-      showImagePreview: false
+    const index = e.currentTarget.dataset.index;
-    });
-    this.resetZoom();
-  },
     
-  // 重置缩放状态
+    if (type === 'edit') {
-  resetZoom: function() {
+      const editSupply = this.data.editSupply;
-    this.setData({
+      const newImageUrls = editSupply.imageUrls.filter((item, i) => i !== index);
-      scale: 1,
+      this.setData({
-      lastScale: 1,
+        'editSupply.imageUrls': newImageUrls
-      offsetX: 0,
+      });
-      offsetY: 0,
+    }
-      initialTouch: null
-    });
   },
   
-  // 图片预览切换
+  // 保存图片
-  onPreviewImageChange: function(e) {
+  saveImageToPhotosAlbum: function(e) {
-    this.setData({
+    const url = e.currentTarget.dataset.url;
-      previewImageIndex: e.detail.current
+    
+    wx.downloadFile({
+      url: url,
+      success: function(res) {
+        if (res.statusCode === 200) {
+          wx.saveImageToPhotosAlbum({
+            filePath: res.tempFilePath,
+            success: function() {
+              wx.showToast({
+                title: '保存成功',
+                icon: 'success',
+                duration: 2000
+              });
+            },
+            fail: function(err) {
+              console.error('保存图片失败:', err);
+              wx.showToast({
+                title: '保存失败',
+                icon: 'none',
+                duration: 2000
+              });
+            }
+          });
+        }
+      },
+      fail: function(err) {
+        console.error('下载图片失败:', err);
+        wx.showToast({
+          title: '下载失败',
+          icon: 'none',
+          duration: 2000
+        });
+      }
     });
-    // 切换图片时重置缩放状态
-    this.resetZoom();
   },
   
-  // 处理图片点击事件（单击/双击判断）
+  // 处理图片点击事件
   handleImageTap: function(e) {
+    console.log('图片点击事件:', e);
+    // 双击放大图片的逻辑
     const currentTime = Date.now();
-    const lastTapTime = this.data.lastTapTime || 0;
+    const lastTapTime = this.data.lastTapTime;
     
-    // 判断是否为双击（300ms内连续点击）
     if (currentTime - lastTapTime < 300) {
       // 双击事件
-      if (this.data.doubleTapTimer) {
-        clearTimeout(this.data.doubleTapTimer);
-      }
-      
-      // 切换放大/缩小状态
-      const newScale = this.data.scale === 1 ? 2 : 1;
       this.setData({
-        scale: newScale,
+        scale: this.data.scale === 1 ? 2 : 1,
-        lastScale: newScale,
+        isScaling: false
-        offsetX: 0,
+      });
-        offsetY: 0,
+      this.data.doubleTapTimer && clearTimeout(this.data.doubleTapTimer);
-        lastTapTime: 0 // 重置双击状态
+      this.setData({
+        doubleTapTimer: null,
+        lastTapTime: 0
       });
     } else {
-      // 单击事件，设置延迟来检测是否会成为双击
+      // 单击事件
-      if (this.data.doubleTapTimer) {
+      this.setData({
-        clearTimeout(this.data.doubleTapTimer);
+        lastTapTime: currentTime
-      }
+      });
-      
+      this.data.doubleTapTimer && clearTimeout(this.data.doubleTapTimer);
       this.setData({
-        lastTapTime: currentTime,
         doubleTapTimer: setTimeout(() => {
-          // 确认是单击，关闭图片预览
+          this.setData({ lastTapTime: 0 });
-          this.closeImagePreview();
         }, 300)
       });
     }
   },
   
-  // 计算两点之间的距离
+  // 触摸开始事件
-  calculateDistance: function(touch1, touch2) {
-    const dx = touch2.clientX - touch1.clientX;
-    const dy = touch2.clientY - touch1.clientY;
-    return Math.sqrt(dx * dx + dy * dy);
-  },
-  
-  // 处理触摸开始事件
   handleTouchStart: function(e) {
-    const touches = e.touches;
+    // 记录初始触摸点
-    
+    if (e.touches.length === 1) {
-    if (touches.length === 1) {
+      // 单指触摸，记录初始位置
-      // 单指：准备拖动
       this.setData({
         initialTouch: {
-          x: touches[0].clientX,
+          x: e.touches[0].clientX,
-          y: touches[0].clientY
+          y: e.touches[0].clientY
         }
       });
-    } else if (touches.length === 2) {
+    } else if (e.touches.length === 2) {
-      // 双指：记录起始距离，准备缩放
+      // 双指触摸，计算初始距离
-      const distance = this.calculateDistance(touches[0], touches[1]);
+      const x1 = e.touches[0].clientX;
+      const y1 = e.touches[0].clientY;
+      const x2 = e.touches[1].clientX;
+      const y2 = e.touches[1].clientY;
+      const distance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
       this.setData({
         startDistance: distance,
-        isScaling: true,
+        lastScale: this.data.scale,
-        lastScale: this.data.scale
+        isScaling: true
       });
     }
   },
   
-  // 处理触摸移动事件
+  // 触摸移动事件
   handleTouchMove: function(e) {
-    const touches = e.touches;
+    if (e.touches.length === 2 && this.data.isScaling) {
-    
+      // 双指缩放
-    if (touches.length === 1 && this.data.initialTouch && this.data.scale !== 1) {
+      const x1 = e.touches[0].clientX;
+      const y1 = e.touches[0].clientY;
+      const x2 = e.touches[1].clientX;
+      const y2 = e.touches[1].clientY;
+      const currentDistance = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
+      const scale = this.data.lastScale * (currentDistance / this.data.startDistance);
+      // 限制缩放范围
+      const limitedScale = Math.min(Math.max(scale, 0.5), 3);
+      this.setData({
+        scale: limitedScale
+      });
+    } else if (e.touches.length === 1 && this.data.initialTouch && this.data.scale !== 1) {
       // 单指拖动（只有在缩放状态下才允许拖动）
-      const deltaX = touches[0].clientX - this.data.initialTouch.x;
+      const currentX = e.touches[0].clientX;
-      const deltaY = touches[0].clientY - this.data.initialTouch.y;
+      const currentY = e.touches[0].clientY;
-      
+      const deltaX = currentX - this.data.initialTouch.x;
-      // 计算新的偏移量
+      const deltaY = currentY - this.data.initialTouch.y;
-      let newOffsetX = this.data.offsetX + deltaX;
-      let newOffsetY = this.data.offsetY + deltaY;
-      
-      // 边界限制
-      const windowWidth = wx.getSystemInfoSync().windowWidth;
-      const windowHeight = wx.getSystemInfoSync().windowHeight;
-      const maxOffsetX = (windowWidth * (this.data.scale - 1)) / 2;
-      const maxOffsetY = (windowHeight * (this.data.scale - 1)) / 2;
       
-      newOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, newOffsetX));
+      this.setData({
-      newOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, newOffsetY));
+        offsetX: deltaX,
+        offsetY: deltaY
+      });
       
+      // 更新初始触摸点，以便下一次移动计算
       this.setData({
-        offsetX: newOffsetX,
-        offsetY: newOffsetY,
         initialTouch: {
-          x: touches[0].clientX,
+          x: currentX,
-          y: touches[0].clientY
+          y: currentY
         }
       });
-    } else if (touches.length === 2) {
+    }
-      // 双指缩放
+  },
-      const currentDistance = this.calculateDistance(touches[0], touches[1]);
-      const scale = (currentDistance / this.data.startDistance) * this.data.lastScale;
-      
-      // 限制缩放范围在0.5倍到3倍之间
-      const newScale = Math.max(0.5, Math.min(3, scale));
   
+  // 触摸结束事件
+  handleTouchEnd: function(e) {
+    if (this.data.isScaling) {
       this.setData({
-        scale: newScale,
+        isScaling: false
-        isScaling: true
       });
     }
   },
   
-  // 处理触摸结束事件
+  // 图片加载完成事件
-  handleTouchEnd: function(e) {
+  onPreviewImageLoad: function() {
+    // 图片加载完成后可以进行一些操作
+  },
+  
+  // 关闭图片预览弹窗
+  closeImagePreview: function() {
     this.setData({
-      isScaling: false,
+      showImagePreview: false
-      lastScale: this.data.scale,
-      initialTouch: null
     });
   }
-});
+})

pages/goods-update/goods-update.wxml

@@ -76,6 +76,31 @@
       </view>
     </view>
 
+    <!-- 规格信息 -->
+    <view class="weight-quantity-info" wx:if="{{(goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0) || goodsDetail.specInfo || goodsDetail.spec}}">
+      <view class="wq-title">规格信息</view>
+      <view class="wq-grid-list">
+        <block wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
+          <view class="wq-grid-row" wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
+            <text class="grid-item weight-spec-item">{{item.weightSpec}}</text>
+            <text class="grid-item quantity-item">【{{item.quantity}}】</text>
+            <text class="grid-item costprice-item" wx:if="{{item.costprice && item.costprice !== '暂无'}}">¥{{item.costprice}}元</text>
+            <text class="grid-item price-item" wx:if="{{item.price && item.price !== '暂无'}}">¥{{item.price}}元</text>
+          </view>
+        </block>
+        <block wx:elif="{{goodsDetail.specInfo && goodsDetail.specInfo.length > 0}}">
+          <view class="wq-grid-row" wx:for="{{goodsDetail.specInfo}}" wx:key="index">
+            <text class="grid-item weight-spec-item" colspan="4">{{item}}</text>
+          </view>
+        </block>
+        <block wx:else>
+          <view class="wq-grid-row">
+            <text class="grid-item weight-spec-item" colspan="4">{{goodsDetail.spec || '暂无规格信息'}}</text>
+          </view>
+        </block>
+      </view>
+    </view>
+
     <!-- 商品详细信息网格 -->
     <view class="info-grid">
       <view class="info-row">
@@ -117,28 +142,6 @@
       </view>
     </view>
     
-    <!-- 规格信息 -->
-    <view class="weight-quantity-info" wx:if="{{(goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0) || goodsDetail.specInfo || goodsDetail.spec}}">
-      <view class="wq-title">规格信息</view>
-      <view class="wq-list">
-        <block wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
-          <view class="wq-item" wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
-            <text class="wq-text">{{item.display}}</text>
-          </view>
-        </block>
-        <block wx:elif="{{goodsDetail.specInfo && goodsDetail.specInfo.length > 0}}">
-          <view class="wq-item" wx:for="{{goodsDetail.specInfo}}" wx:key="index">
-            <text class="wq-text">{{item}}</text>
-          </view>
-        </block>
-        <block wx:else>
-          <view class="wq-item">
-            <text class="wq-text">{{goodsDetail.spec || '暂无规格信息'}}</text>
-          </view>
-        </block>
-      </view>
-    </view>
-    
     <!-- 货源描述 -->
     <view class="goods-description" wx:if="{{goodsDetail.description || goodsDetail.remark || true}}">
       <view class="wq-title">货源描述</view>

pages/goods-update/goods-update.wxss

@@ -784,7 +784,7 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .wq-title {
-  font-size: 32rpx;
+  font-size: 40rpx;
   font-weight: 600;
   color: #262626;
   margin-bottom: 16rpx;
@@ -811,23 +811,27 @@ video.slider-media .wx-video-volume-icon {
 }
 
 .wq-item {
-  background-color: #f8f9fa;
+  background-color: #ffffff;
-  padding: 16rpx 20rpx;
+  padding: 20rpx 24rpx;
-  border-radius: 8rpx;
+  border-radius: 12rpx;
-  border-left: 4rpx solid #1890ff;
+  border: 2rpx solid #e8f4ff;
   transition: all 0.3s ease;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 }
 
 .wq-item:active {
-  background-color: #e6f7ff;
+  background-color: #f0f5ff;
-  transform: translateX(4rpx);
+  transform: translateY(1rpx);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 }
 
 .wq-text {
-  font-size: 28rpx;
+  font-size: 32rpx;
-  color: #595959;
+  color: #262626;
-  line-height: 1.5;
+  line-height: 1.4;
-  font-weight: 500;
+  font-weight: 600;
+  display: block;
+  text-align: left;
 }
 
 /* 货源描述样式 */
@@ -1485,28 +1489,56 @@ video.slider-media .wx-video-volume-icon {
   border-radius: 2rpx;
 }
 
-.wq-list {
+.wq-grid-list {
   display: flex;
   flex-direction: column;
   gap: 12rpx;
 }
 
-.wq-item {
+.wq-grid-row {
   background-color: #f8f9fa;
   padding: 16rpx 20rpx;
   border-radius: 8rpx;
   border-left: 4rpx solid #1890ff;
   transition: all 0.3s ease;
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  gap: 12rpx;
+  align-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
 }
 
-.wq-item:active {
+.wq-grid-row:active {
   background-color: #e6f7ff;
   transform: translateX(4rpx);
 }
 
-.wq-text {
+.grid-item {
-  font-size: 28rpx;
+  font-size: 36rpx;
-  color: #595959;
   line-height: 1.5;
   font-weight: 500;
+  display: inline-block;
+  align-self: center;
+  justify-self: start;
+}
+
+.weight-spec-item {
+  color: #595959;
+  justify-self: start;
+}
+
+.quantity-item {
+  color: #595959;
+  justify-self: start;
+}
+
+.costprice-item {
+  color: #595959;
+  justify-self: start;
+}
+
+.price-item {
+  color: #ff4d4f;
+  justify-self: start;
 }