Browse Source

实现动态价格输入框功能并优化样式

pull/11/head
徐飞洋 2 months ago
parent
commit
c75b79701f
  1. 122
      pages/goods-update/goods-update.js
  2. 30
      pages/goods-update/goods-update.wxml
  3. 20
      pages/goods-update/goods-update.wxss

122
pages/goods-update/goods-update.js

@ -762,20 +762,45 @@ Page({
// 打开编辑弹窗(实际执行打开操作的内部方法) // 打开编辑弹窗(实际执行打开操作的内部方法)
openEditModal: function(goodsDetail) { openEditModal: function(goodsDetail) {
const spec = goodsDetail.spec || '';
let specArray = [];
let priceArray = [];
// 分割规格字符串,支持多种逗号分隔符:英文逗号、中文逗号、全角逗号
if (spec) {
specArray = spec.split(/[,,、]/).map(item => item.trim()).filter(item => item);
}
// 处理价格字段
const price = goodsDetail.price || '';
if (price) {
if (typeof price === 'string' && price.includes(',')) {
// 如果价格是字符串且包含逗号,分割成数组
priceArray = price.split(',').map(item => item.trim()).filter(item => item);
} else {
// 如果只有一个价格,为所有规格设置相同的价格
priceArray = Array(specArray.length).fill(String(price));
}
}
// 创建editSupply对象
const editSupply = {
id: goodsDetail.id || goodsDetail.productId,
imageUrls: goodsDetail.imageUrls || [],
name: goodsDetail.name || '',
spec: spec,
specArray: specArray, // 新增:规格数组
priceArray: priceArray, // 新增:价格数组
minOrder: goodsDetail.minOrder || '',
yolk: goodsDetail.yolk || '',
region: goodsDetail.region || '',
grossWeight: goodsDetail.grossWeight || '',
product_contact: goodsDetail.product_contact || '',
contact_phone: goodsDetail.contact_phone || ''
};
this.setData({ this.setData({
editSupply: { editSupply: editSupply,
id: goodsDetail.id || goodsDetail.productId,
imageUrls: goodsDetail.imageUrls || [],
name: goodsDetail.name || '',
price: goodsDetail.price || '',
minOrder: goodsDetail.minOrder || '',
yolk: goodsDetail.yolk || '',
spec: goodsDetail.spec || '',
region: goodsDetail.region || '',
grossWeight: goodsDetail.grossWeight || '',
product_contact: goodsDetail.product_contact || '',
contact_phone: goodsDetail.contact_phone || ''
},
showEditModal: true showEditModal: true
}); });
}, },
@ -792,21 +817,53 @@ Page({
console.log('保存编辑'); console.log('保存编辑');
const editSupply = this.data.editSupply; const editSupply = this.data.editSupply;
// 验证必填字段 // 处理价格字段,将价格数组合并成字符串
if (!editSupply.price) { let priceStr = '';
wx.showToast({ if (editSupply.priceArray && editSupply.priceArray.length > 0) {
title: '请填写销售价格', // 移除空值
icon: 'none', const validPrices = editSupply.priceArray.filter(price => price && price.trim() !== '');
duration: 2000
}); // 验证必填字段
return; if (validPrices.length === 0) {
} wx.showToast({
title: '请填写销售价格',
icon: 'none',
duration: 2000
});
return;
}
// 验证价格是否为有效数字 // 验证价格是否为有效数字
const priceNum = parseFloat(editSupply.price); for (const price of validPrices) {
if (isNaN(priceNum) || priceNum < 0) { const priceNum = parseFloat(price);
if (isNaN(priceNum) || priceNum < 0) {
wx.showToast({
title: '请填写有效的价格',
icon: 'none',
duration: 2000
});
return;
}
}
// 合并价格数组为字符串
priceStr = validPrices.join(',');
} else if (editSupply.price) {
// 兼容旧的单个价格字段
const priceNum = parseFloat(editSupply.price);
if (isNaN(priceNum) || priceNum < 0) {
wx.showToast({
title: '请填写有效的价格',
icon: 'none',
duration: 2000
});
return;
}
priceStr = editSupply.price;
} else {
// 没有价格
wx.showToast({ wx.showToast({
title: '请填写有效的价格', title: '请填写销售价格',
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}); });
@ -850,7 +907,7 @@ Page({
// 使用新的快速更新接口,只更新价格、联系人和电话 // 使用新的快速更新接口,只更新价格、联系人和电话
const updateData = { const updateData = {
productId: productId, productId: productId,
price: editSupply.price, price: priceStr,
product_contact: editSupply.product_contact || '', product_contact: editSupply.product_contact || '',
contact_phone: editSupply.contact_phone || '', contact_phone: editSupply.contact_phone || '',
}; };
@ -1104,6 +1161,17 @@ Page({
}); });
}, },
// 价格输入处理(用于动态生成的价格输入框)
onEditPriceInput: function(e) {
const index = e.currentTarget.dataset.index;
const value = e.detail.value;
// 更新价格数组中的对应元素
this.setData({
[`editSupply.priceArray[${index}]`]: value
});
},
// 打开规格选择弹窗(编辑模式) // 打开规格选择弹窗(编辑模式)
onEditSpecChange: function() { onEditSpecChange: function() {
console.log('打开规格选择弹窗(编辑模式)'); console.log('打开规格选择弹窗(编辑模式)');

30
pages/goods-update/goods-update.wxml

@ -209,9 +209,33 @@
<scroll-view scroll-y="true" style="height: calc(100vh - 160rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 160rpx 60rpx 40rpx; box-sizing: border-box;"> <scroll-view scroll-y="true" style="height: calc(100vh - 160rpx); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 160rpx 60rpx 40rpx; box-sizing: border-box;">
<view> <view>
<!-- 动态生成多个价格输入框 -->
<view class="edit-form-label">销售价格</view> <block wx:if="{{editSupply.specArray && editSupply.specArray.length > 1}}">
<input class="edit-form-input" type="text" placeholder="请输入销售价格" bindinput="onEditInput" data-field="price" value="{{editSupply.price}}"></input> <view class="dynamic-price-container">
<view class="price-item" wx:for="{{editSupply.specArray}}" wx:key="index">
<view class="spec-label">{{item}}</view>
<input
class="edit-form-input price-input"
type="text"
placeholder="请输入价格"
bindinput="onEditPriceInput"
data-index="{{index}}"
value="{{editSupply.priceArray[index] || ''}}"
></input>
</view>
</view>
</block>
<!-- 单个规格时显示普通输入框 -->
<block wx:else>
<input
class="edit-form-input"
type="text"
placeholder="请输入销售价格"
bindinput="onEditPriceInput"
data-index="0"
value="{{editSupply.priceArray[0] || editSupply.price || ''}}"
></input>
</block>
<view class="edit-form-label">联系人</view> <view class="edit-form-label">联系人</view>
<view class="edit-form-select" bindtap="openSalesPersonModal"> <view class="edit-form-select" bindtap="openSalesPersonModal">

20
pages/goods-update/goods-update.wxss

@ -277,9 +277,25 @@ video.slider-media .wx-video-volume-icon {
align-items: flex-start; align-items: flex-start;
} }
.dynamic-price-container {
margin-bottom: 30rpx;
}
.price-item { .price-item {
display: flex; margin-bottom: 20rpx;
align-items: center; }
.spec-label {
font-size: 28rpx;
color: #666;
margin-bottom: 10rpx;
display: block;
word-wrap: break-word;
word-break: break-all;
}
.price-input {
width: 100%;
} }
.goods-info::after { .goods-info::after {

Loading…
Cancel
Save