update goods detail page

pages/goods-detail/goods-detail.js

@@ -727,18 +727,124 @@ Page({
   
   // 显示讲价弹窗
   showBargainModal() {
+    console.log('===== 显示讲价弹窗开始 =====');
+    console.log('当前 goodsDetail:', this.data.goodsDetail);
+    
+    const weightQuantityData = this.data.goodsDetail.weightQuantityData || [];
+    console.log('weightQuantityData:', weightQuantityData);
+    
+    let middlePrice = 800; // 默认值
+    
+    if (weightQuantityData.length > 0) {
+      const selectedSpec = weightQuantityData[0];
+      console.log('选中的规格:', selectedSpec);
+      
+      if (selectedSpec) {
+        // 尝试从多个可能的价格字段获取价格
+        let priceValue = selectedSpec.price;
+        console.log('从 price 字段获取价格:', priceValue);
+        
+        if (!priceValue && selectedSpec.display) {
+          // 从display字段中提取价格，支持多种格式
+          // 匹配 ¥156元、￥156元、¥156、￥156 等格式
+          const priceMatch = selectedSpec.display.match(/[¥￥]([0-9.]+)/);
+          console.log('从 display 字段提取价格:', priceMatch);
+          if (priceMatch && priceMatch[1]) {
+            priceValue = priceMatch[1];
+            console.log('提取到的价格:', priceValue);
+          }
+        }
+        
+        if (priceValue) {
+          // 提取价格数字
+          const priceStr = priceValue.toString();
+          const priceNum = parseFloat(priceStr.replace(/[^0-9.]/g, ''));
+          console.log('价格字符串:', priceStr);
+          console.log('解析后的价格数字:', priceNum);
+          
+          if (!isNaN(priceNum)) {
+            middlePrice = priceNum;
+            console.log('设置 middlePrice 为:', middlePrice);
+          }
+        }
+      }
+    }
+    
+    const minPrice = middlePrice - 5;
+    const maxPrice = middlePrice + 5;
+    const defaultPrice = parseFloat(middlePrice.toFixed(2));
+    
+    console.log('计算后的价格数据:', {
+      middlePrice: middlePrice,
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      defaultPrice: defaultPrice
+    });
+    
     this.setData({
       showBargainModal: true,
-      bargainPrice: '',
-      selectedSpecIndex: 0  // 默认选中第一条规格
+      bargainPrice: defaultPrice,
+      selectedSpecIndex: 0,  // 默认选中第一条规格
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      sliderProgress: 50      // 默认滑块位置
+    }, () => {
+      console.log('setData 完成后的 bargainPrice:', this.data.bargainPrice);
+      console.log('setData 完成后的 minPrice:', this.data.minPrice);
+      console.log('setData 完成后的 maxPrice:', this.data.maxPrice);
+      console.log('===== 显示讲价弹窗结束 =====');
     });
   },
   
   // 选择规格
   selectSpec(e) {
     const index = e.currentTarget.dataset.index;
+    const weightQuantityData = this.data.goodsDetail.weightQuantityData || [];
+    let middlePrice = 800; // 默认值
+    
+    if (weightQuantityData.length > index) {
+      const selectedSpec = weightQuantityData[index];
+      if (selectedSpec) {
+        // 尝试从多个可能的价格字段获取价格
+        let priceValue = selectedSpec.price;
+        if (!priceValue && selectedSpec.display) {
+          // 从display字段中提取价格，支持多种格式
+          // 匹配 ¥156元、￥156元、¥156、￥156 等格式
+          const priceMatch = selectedSpec.display.match(/[¥￥]([0-9.]+)/);
+          if (priceMatch && priceMatch[1]) {
+            priceValue = priceMatch[1];
+          }
+        }
+        
+        if (priceValue) {
+          // 提取价格数字
+          const priceStr = priceValue.toString();
+          const priceNum = parseFloat(priceStr.replace(/[^0-9.]/g, ''));
+          if (!isNaN(priceNum)) {
+            middlePrice = priceNum;
+          }
+        }
+      }
+    }
+    
+    const minPrice = middlePrice - 5;
+    const maxPrice = middlePrice + 5;
+    const currentPrice = parseFloat(middlePrice.toFixed(2));
+    
+    console.log('选择规格 - 价格数据:', {
+      index: index,
+      middlePrice: middlePrice,
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      currentPrice: currentPrice
+    });
+    
     this.setData({
-      selectedSpecIndex: index
+      selectedSpecIndex: index,
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      bargainPrice: currentPrice,
+      sliderProgress: 50
     });
   },
   
@@ -750,11 +856,163 @@ Page({
   // 隐藏讲价弹窗
   hideBargainModal() {
     this.setData({
-      showBargainModal: false,
-      bargainPrice: ''
+      showBargainModal: false
+      // 不重置 bargainPrice，保持其数字类型
+    });
+  },
+  
+  // 减少价格
+  decreasePrice() {
+    const { bargainPrice, minPrice } = this.data;
+    console.log('减少价格:', {
+      bargainPrice: bargainPrice,
+      minPrice: minPrice,
+      canDecrease: bargainPrice > minPrice
+    });
+    
+    if (bargainPrice > minPrice) {
+      const newPrice = parseFloat((bargainPrice - 1).toFixed(2));
+      console.log('计算新价格:', newPrice);
+      this.updatePrice(newPrice);
+    }
+  },
+  
+  // 增加价格
+  increasePrice() {
+    const { bargainPrice, maxPrice } = this.data;
+    console.log('增加价格:', {
+      bargainPrice: bargainPrice,
+      maxPrice: maxPrice,
+      canIncrease: bargainPrice < maxPrice
+    });
+    
+    if (bargainPrice < maxPrice) {
+      const newPrice = parseFloat((bargainPrice + 1).toFixed(2));
+      console.log('计算新价格:', newPrice);
+      this.updatePrice(newPrice);
+    }
+  },
+  
+  // 更新价格和滑块位置
+  updatePrice(newPrice) {
+    const { minPrice, maxPrice } = this.data;
+    const clampedPrice = Math.max(minPrice, Math.min(maxPrice, newPrice));
+    const progress = ((clampedPrice - minPrice) / (maxPrice - minPrice)) * 100;
+    const finalPrice = parseFloat(clampedPrice.toFixed(2));
+    
+    console.log('更新价格:', {
+      inputPrice: newPrice,
+      clampedPrice: clampedPrice,
+      finalPrice: finalPrice,
+      progress: progress
+    });
+    
+    this.setData({
+      bargainPrice: finalPrice,
+      sliderProgress: Math.max(0, Math.min(100, progress))
+    }, () => {
+      console.log('价格更新完成:', this.data.bargainPrice);
+      console.log('bargainPrice 类型:', typeof this.data.bargainPrice);
+    });
+  },
+  
+  // 显示价格输入弹窗
+  showPriceInput() {
+    const currentPrice = this.data.bargainPrice;
+    const priceStr = !isNaN(currentPrice) ? currentPrice.toString() : '0';
+    
+    console.log('显示价格输入弹窗:', {
+      currentPrice: currentPrice,
+      priceStr: priceStr
+    });
+    
+    this.setData({
+      showPriceInputModal: true,
+      tempPrice: priceStr
+    });
+  },
+  
+  // 临时价格输入处理
+  onTempPriceInput(e) {
+    this.setData({
+      tempPrice: e.detail.value
+    });
+  },
+  
+  // 取消价格输入
+  cancelPriceInput() {
+    this.setData({
+      showPriceInputModal: false,
+      tempPrice: ''
+    });
+  },
+  
+  // 确认价格输入
+  confirmPriceInput() {
+    const { tempPrice, minPrice, maxPrice } = this.data;
+    const price = parseFloat(tempPrice);
+    
+    console.log('确认价格输入:', {
+      tempPrice: tempPrice,
+      price: price,
+      minPrice: minPrice,
+      maxPrice: maxPrice,
+      isPriceValid: !isNaN(price)
+    });
+    
+    if (!isNaN(price)) {
+      const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price));
+      console.log('计算后的价格:', clampedPrice);
+      this.updatePrice(clampedPrice);
+    }
+    
+    this.setData({
+      showPriceInputModal: false,
+      tempPrice: ''
     });
   },
   
+  // 滑块开始触摸
+  onSliderStart(e) {
+    // 可以在这里添加触摸开始的逻辑
+  },
+  
+  // 滑块移动
+  onSliderMove(e) {
+    try {
+      const { minPrice, maxPrice } = this.data;
+      if (!minPrice || !maxPrice) return;
+      
+      const touch = e.touches[0];
+      if (!touch) return;
+      
+      const clientX = touch.clientX;
+      
+      const screenWidth = wx.getWindowInfo().windowWidth;
+      const sliderWidth = screenWidth * 0.8;
+      const sliderLeft = (screenWidth - sliderWidth) / 2;
+      
+      let progress = ((clientX - sliderLeft) / sliderWidth) * 100;
+      progress = Math.max(0, Math.min(100, progress));
+      
+      const priceRange = maxPrice - minPrice;
+      const price = Math.round(minPrice + (progress / 100) * priceRange);
+      const clampedPrice = Math.max(minPrice, Math.min(maxPrice, price));
+      
+      this.setData({
+        sliderProgress: progress,
+        bargainPrice: clampedPrice
+      });
+    } catch (error) {
+      console.error('滑块移动错误:', error);
+    }
+  },
+  
+  // 滑块结束触摸
+  onSliderEnd(e) {
+    // 可以在这里添加触摸结束的逻辑
+  },
+  
   // 讲价输入处理
   onBargainInput(e) {
     this.setData({
@@ -765,7 +1023,7 @@ Page({
   // 提交讲价
   submitBargain() {
     const bargainPrice = this.data.bargainPrice;
-    if (!bargainPrice) {
+    if (!bargainPrice || isNaN(bargainPrice)) {
       wx.showToast({
         title: '请输入预期价格',
         icon: 'none'
@@ -903,8 +1161,8 @@ Page({
       
       // 隐藏讲价弹窗
       this.setData({
-        showBargainModal: false,
-        bargainPrice: ''
+        showBargainModal: false
+        // 不重置 bargainPrice，保持其数字类型
       });
       
       // 跳转到聊天页面
@@ -1064,8 +1322,15 @@ Page({
     showCommentModal: false,    // 是否显示评论弹窗
     // 讲价弹窗相关数据
     showBargainModal: false,     // 是否显示讲价弹窗
-    bargainPrice: '',           // 讲价价格
+    bargainPrice: 0,           // 讲价价格，初始化为数字0
     selectedSpecIndex: 0,        // 选中的规格索引，默认选中第一条
+    // 价格调整相关数据
+    minPrice: 0,               // 最低价格，初始化为0
+    maxPrice: 0,               // 最高价格，初始化为0
+    isPriceReasonable: true,     // 价格是否合理
+    sliderProgress: 50,          // 滑块进度
+    showPriceInputModal: false,  // 是否显示价格输入弹窗
+    tempPrice: '',               // 临时价格
     // 删除评论相关数据
     showDeleteConfirmModal: false, // 是否显示删除确认弹窗
     commentToDelete: null,      // 要删除的评论对象

pages/goods-detail/goods-detail.wxml

@@ -470,14 +470,51 @@
         </view>
         
         <view class="bargain-price-section">
-          <text class="bargain-hint">请输入您想要商品的价格</text>
-          <input 
-            class="bargain-modal-input" 
-            type="digit"
-            placeholder="请输入价格（可以输入中文）"
-            value="{{bargainPrice}}"
-            bindinput="onBargainInput"
-          />
+          <!-- 价格调整区域 -->
+          <view class="price-adjustment-container">
+            <view class="price-controls">
+              <button class="price-btn minus-btn" bindtap="decreasePrice" disabled="{{bargainPrice <= minPrice}}">
+                -
+              </button>
+              <view class="price-display">
+                <text class="price-label" style="width: 150rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx; height: 40rpx">可接受价格</text>
+                <text class="price-value">{{bargainPrice}}</text>
+                <button class="edit-btn" bindtap="showPriceInput" style="width: 204rpx; height: 54rpx; display: block; box-sizing: border-box; left: -54rpx; top: 3rpx; position: relative">✏️</button>
+              </view>
+              <button class="price-btn plus-btn" bindtap="increasePrice" disabled="{{bargainPrice >= maxPrice}}" style="position: relative; left: -97rpx; top: 5rpx">
+                +
+              </button>
+            </view>
+            
+            
+            <!-- 价格滑块 -->
+            <view class="price-slider-container">
+              <text class="slider-min-price">¥{{minPrice}}</text>
+              <view class="slider-track" bindtouchstart="onSliderStart" bindtouchmove="onSliderMove" bindtouchend="onSliderEnd">
+                <view class="slider-progress" style="width: {{sliderProgress}}%"></view>
+                <view class="slider-thumb" style="left: {{sliderProgress}}%"></view>
+              </view>
+              <text class="slider-max-price">¥{{maxPrice}}</text>
+            </view>
+          </view>
+          
+          <!-- 价格输入弹窗 -->
+          <view wx:if="{{showPriceInputModal}}" class="price-input-modal">
+            <view class="price-input-content">
+              <text class="price-input-title">输入价格</text>
+              <input 
+                class="price-input" 
+                type="digit"
+                placeholder="请输入价格"
+                value="{{tempPrice}}"
+                bindinput="onTempPriceInput"
+              />
+              <view class="price-input-buttons">
+                <button class="price-input-cancel" bindtap="cancelPriceInput">取消</button>
+                <button class="price-input-confirm" bindtap="confirmPriceInput">确认</button>
+              </view>
+            </view>
+          </view>
         </view>
       </view>
       

pages/goods-detail/goods-detail.wxss

@@ -1436,19 +1436,22 @@ video.slider-media .wx-video-volume-icon {
   z-index: 100;
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
   animation: fadeIn 0.3s ease-out;
 }
 
 .bargain-modal-container {
+  width: 100%;
   background: white;
-  width: 80%;
-  max-width: 500rpx;
+  border-top-left-radius: 32rpx;
+  border-top-right-radius: 32rpx;
   padding: 40rpx;
-  border-radius: 20rpx;
+  padding-bottom: 60rpx;
   display: flex;
   flex-direction: column;
   animation: slideUp 0.3s ease-out;
+  max-height: 80vh;
+  overflow-y: auto;
 }
 
 .bargain-modal-title {
@@ -1530,17 +1533,256 @@ video.slider-media .wx-video-volume-icon {
   cursor: not-allowed;
 }
 
-/* 讲价弹窗规格选择样式 */
-.bargain-spec-section {
-  margin-bottom: 30rpx;
+/* 讲价弹窗价格调整样式 */
+.price-adjustment-container {
+  width: 100%;
+}
+
+.price-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  padding: 24rpx;
+  background-color: #f8f9fa;
+  border-radius: 16rpx;
+  border: 1rpx solid #e9ecef;
+}
+
+.price-btn {
+  width: 50rpx;
+  height: 50rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  border: 2rpx solid #dee2e6;
+  background-color: #ffffff;
+  color: #495057;
+  transition: all 0.3s ease;
+  margin: 0;
+}
+
+.price-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.price-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.minus-btn:active:not(:disabled) {
+  border-color: #ff6b6b;
+  color: #ff6b6b;
+}
+
+.plus-btn:active:not(:disabled) {
+  border-color: #4ecdc4;
+  color: #4ecdc4;
+}
+
+.price-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20rpx;
 }
 
-.bargain-spec-title {
+.price-label {
   font-size: 28rpx;
-  color: #262626;
-  font-weight: 600;
-  margin-bottom: 16rpx;
-  display: block;
+  color: #6c757d;
+  margin-right: 16rpx;
+}
+
+.price-value {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #212529;
+  font-family: 'Arial', sans-serif;
+}
+
+.edit-btn {
+  font-size: 32rpx;
+  background: none;
+  border: none;
+  margin: 0 0 0 16rpx;
+  padding: 0;
+  transition: transform 0.3s ease;
+}
+
+.edit-btn:active {
+  transform: scale(1.1);
+}
+
+.price-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff3cd;
+  color: #856404;
+  padding: 16rpx;
+  border-radius: 12rpx;
+  margin-bottom: 24rpx;
+  border: 1rpx solid #ffeaa7;
+}
+
+.tip-icon {
+  font-size: 32rpx;
+  margin-right: 12rpx;
+}
+
+.tip-text {
+  font-size: 26rpx;
+  line-height: 1.4;
+}
+
+.price-slider-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.slider-min-price, .slider-max-price {
+  font-size: 24rpx;
+  color: #6c757d;
+  min-width: 80rpx;
+}
+
+.slider-min-price {
+  text-align: right;
+  margin-right: 16rpx;
+}
+
+.slider-max-price {
+  text-align: left;
+  margin-left: 16rpx;
+}
+
+.slider-track {
+  flex: 1;
+  height: 8rpx;
+  background-color: #e9ecef;
+  border-radius: 4rpx;
+  position: relative;
+  cursor: pointer;
+}
+
+.slider-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #ff6b6b;
+  border-radius: 4rpx;
+  transition: width 0.1s ease;
+}
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 32rpx;
+  height: 32rpx;
+  background-color: #ffffff;
+  border: 4rpx solid #ff6b6b;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
+  transition: all 0.3s ease;
+}
+
+.slider-thumb:active {
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
+}
+
+/* 价格输入弹窗样式 */
+.price-input-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 110;
+}
+
+.price-input-content {
+  background-color: #ffffff;
+  width: 80%;
+  max-width: 500rpx;
+  padding: 40rpx;
+  border-radius: 20rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
+}
+
+.price-input-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #212529;
+  text-align: center;
+  margin-bottom: 32rpx;
+}
+
+.price-input {
+  width: 100%;
+  height: 80rpx;
+  border: 2rpx solid #dee2e6;
+  border-radius: 12rpx;
+  padding: 0 20rpx;
+  font-size: 32rpx;
+  box-sizing: border-box;
+  margin-bottom: 32rpx;
+  background-color: #f8f9fa;
+  transition: all 0.3s ease;
+}
+
+.price-input:focus {
+  border-color: #ff6b6b;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 4rpx rgba(255, 107, 107, 0.1);
+}
+
+.price-input-buttons {
+  display: flex;
+  gap: 20rpx;
+}
+
+.price-input-cancel, .price-input-confirm {
+  flex: 1;
+  padding: 20rpx 0;
+  font-size: 32rpx;
+  border-radius: 12rpx;
+  transition: all 0.3s ease;
+  border: none;
+  margin: 0;
+}
+
+.price-input-cancel {
+  background-color: #f8f9fa;
+  color: #495057;
+}
+
+.price-input-cancel:active {
+  background-color: #e9ecef;
+  transform: scale(0.98);
+}
+
+.price-input-confirm {
+  background-color: #ff6b6b;
+  color: #ffffff;
+}
+
+.price-input-confirm:active {
+  background-color: #ff5252;
+  transform: scale(0.98);
 }
 
 .bargain-spec-scroll {