Browse Source

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

pull/11/head
Default User 2 months ago
parent
commit
c21423050e
  1. 358
      pages/goods-update/goods-update.js
  2. 47
      pages/goods-update/goods-update.wxml
  3. 66
      pages/goods-update/goods-update.wxss

358
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}`;
}
// 构建显示文本
let displayText = '';
if (weightSpecDisplay && quantityDisplay) {
// 如果有净重和件数,格式为:净重XX-XX——XXX件
displayText = `${weightSpecDisplay}——${quantityDisplay}`;
} else if (weightSpecDisplay) {
// 只有净重
displayText = weightSpecDisplay;
} else if (quantityDisplay) {
// 只有件数
displayText = quantityDisplay;
}
if (displayText) {
result.push({ display: displayText });
console.log(`添加显示文本: ${displayText}`);
if (weightSpecDisplay || quantityDisplay || itemPrice || itemCostprice) {
result.push({
weightSpec: weightSpecDisplay,
quantity: quantityDisplay,
price: itemPrice,
costprice: itemCostprice
});
console.log(`添加显示对象: weightSpec=${weightSpecDisplay}, quantity=${quantityDisplay}, price=${itemPrice}, costprice=${itemCostprice}`);
}
}
@ -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
});
}, 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
duration: 2000
});
}
}, 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) {
wx.showToast({
title: '没有内容可预览',
icon: 'none'
});
// 过滤出图片URL
const imageUrls = urls.filter(url => !isVideoUrl(url));
// 如果没有图片URL,不打开预览
if (imageUrls.length === 0) {
return;
}
this.setData({
showImagePreview: true,
previewImageUrls: urls,
previewImageIndex: parseInt(index || 0)
wx.previewImage({
urls: imageUrls,
current: imageUrls[currentIndex]
});
this.resetZoom();
},
// 关闭图片预览
closeImagePreview: function() {
this.setData({
showImagePreview: false
});
this.resetZoom();
},
// 重置缩放状态
resetZoom: function() {
this.setData({
scale: 1,
lastScale: 1,
offsetX: 0,
offsetY: 0,
initialTouch: null
});
// 移除图片
removeImage: function(e) {
const type = e.currentTarget.dataset.type;
const index = e.currentTarget.dataset.index;
if (type === 'edit') {
const editSupply = this.data.editSupply;
const newImageUrls = editSupply.imageUrls.filter((item, i) => i !== index);
this.setData({
'editSupply.imageUrls': newImageUrls
});
}
},
// 图片预览切换
onPreviewImageChange: function(e) {
this.setData({
previewImageIndex: e.detail.current
// 保存图片
saveImageToPhotosAlbum: function(e) {
const url = e.currentTarget.dataset.url;
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,
lastScale: newScale,
offsetX: 0,
offsetY: 0,
lastTapTime: 0 // 重置双击状态
scale: this.data.scale === 1 ? 2 : 1,
isScaling: false
});
this.data.doubleTapTimer && clearTimeout(this.data.doubleTapTimer);
this.setData({
doubleTapTimer: null,
lastTapTime: 0
});
} else {
// 单击事件,设置延迟来检测是否会成为双击
if (this.data.doubleTapTimer) {
clearTimeout(this.data.doubleTapTimer);
}
// 单击事件
this.setData({
lastTapTime: currentTime
});
this.data.doubleTapTimer && clearTimeout(this.data.doubleTapTimer);
this.setData({
lastTapTime: currentTime,
doubleTapTimer: setTimeout(() => {
// 确认是单击,关闭图片预览
this.closeImagePreview();
this.setData({ lastTapTime: 0 });
}, 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 (touches.length === 1) {
// 单指:准备拖动
// 记录初始触摸点
if (e.touches.length === 1) {
// 单指触摸,记录初始位置
this.setData({
initialTouch: {
x: touches[0].clientX,
y: touches[0].clientY
x: e.touches[0].clientX,
y: e.touches[0].clientY
}
});
} else if (touches.length === 2) {
// 双指:记录起始距离,准备缩放
const distance = this.calculateDistance(touches[0], touches[1]);
} else if (e.touches.length === 2) {
// 双指触摸,计算初始距离
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 (touches.length === 1 && this.data.initialTouch && this.data.scale !== 1) {
if (e.touches.length === 2 && this.data.isScaling) {
// 双指缩放
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 deltaY = touches[0].clientY - this.data.initialTouch.y;
const currentX = e.touches[0].clientX;
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));
newOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, newOffsetY));
this.setData({
offsetX: deltaX,
offsetY: deltaY
});
// 更新初始触摸点,以便下一次移动计算
this.setData({
offsetX: newOffsetX,
offsetY: newOffsetY,
initialTouch: {
x: touches[0].clientX,
y: touches[0].clientY
x: currentX,
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: true
isScaling: false
});
}
},
// 处理触摸结束事件
handleTouchEnd: function(e) {
// 图片加载完成事件
onPreviewImageLoad: function() {
// 图片加载完成后可以进行一些操作
},
// 关闭图片预览弹窗
closeImagePreview: function() {
this.setData({
isScaling: false,
lastScale: this.data.scale,
initialTouch: null
showImagePreview: false
});
}
});
})

47
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>

66
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;
padding: 16rpx 20rpx;
border-radius: 8rpx;
border-left: 4rpx solid #1890ff;
background-color: #ffffff;
padding: 20rpx 24rpx;
border-radius: 12rpx;
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;
transform: translateX(4rpx);
background-color: #f0f5ff;
transform: translateY(1rpx);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}
.wq-text {
font-size: 28rpx;
color: #595959;
line-height: 1.5;
font-weight: 500;
font-size: 32rpx;
color: #262626;
line-height: 1.4;
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 {
font-size: 28rpx;
color: #595959;
.grid-item {
font-size: 36rpx;
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;
}
Loading…
Cancel
Save