From dc2acf7a49bb4598de8dc3876994f02937c75576 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?= <15778543+xufeiyang6017@user.noreply.gitee.com> Date: Sun, 22 Feb 2026 15:22:28 +0800 Subject: [PATCH] update goods detail page --- pages/goods-detail/goods-detail.js | 283 ++++++++++++++++++++++++++- pages/goods-detail/goods-detail.wxml | 53 ++++- pages/goods-detail/goods-detail.wxss | 266 +++++++++++++++++++++++-- 3 files changed, 573 insertions(+), 29 deletions(-) diff --git a/pages/goods-detail/goods-detail.js b/pages/goods-detail/goods-detail.js index 76c209c..3f8d330 100644 --- a/pages/goods-detail/goods-detail.js +++ b/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, // 要删除的评论对象 diff --git a/pages/goods-detail/goods-detail.wxml b/pages/goods-detail/goods-detail.wxml index 932fe94..d8f60de 100644 --- a/pages/goods-detail/goods-detail.wxml +++ b/pages/goods-detail/goods-detail.wxml @@ -470,14 +470,51 @@ - 请输入您想要商品的价格 - + + + + + + 可接受价格 + {{bargainPrice}} + + + + + + + + + ¥{{minPrice}} + + + + + ¥{{maxPrice}} + + + + + + + 输入价格 + + + + + + + diff --git a/pages/goods-detail/goods-detail.wxss b/pages/goods-detail/goods-detail.wxss index 18e4b46..c89e215 100644 --- a/pages/goods-detail/goods-detail.wxss +++ b/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 {