下面是“微信小程序商品详情页规格属性选择示例代码”的完整攻略:
一、需求描述
商品详情页面中需要实现商品规格属性的选择,包括选择商品颜色、尺码、数量等,类似于淘宝、京东等电商平台的商品详情页,用户可以根据自己的需求选择相应的选项,从而下单购买。
二、实现步骤
- 页面布局
商品详情页包含商品基本信息、商品图片、商品价格、规格属性选择、商品数量选择、加入购物车、立即购买等部分,需要进行页面布局。
- 商品基本信息:如商品标题、商品编号、商品库存等。
- 商品图片:以轮播图的方式展示商品主图和商品细节图,用户可以通过左右滑动轮播图进行查看。
- 商品价格:显示商品价格和优惠信息等。
- 规格属性选择:包括商品颜色、尺码等规格属性,用户可以根据自己的需求选择相应的选项,同时需要动态更新商品价格、商品库存等信息。
- 商品数量选择:用户可以选择购买的商品数量。
-
加入购物车、立即购买等操作:用户可以将选择的商品加入购物车或者进行立即购买操作。
-
网络请求
根据商品详情页中的商品ID,向服务器发送网络请求,获取商品的基本信息、商品图片、商品价格和规格属性等信息,同时需要获取商品的库存信息等。
- 数据处理
将获取的商品规格属性进行处理,包括商品的颜色、尺码等标准化处理,方便后续数据的存储和展示。
- 数据绑定
将处理后的数据进行绑定,使其显示在页面上。
- 事件监听
对选择商品的规格属性、商品数量等操作进行监听,根据用户选择的不同,动态更新商品的价格、库存信息等,并加入购物车或者进行立即购买操作。
三、示例说明
示例一:动态更新商品价格和库存信息
商品规格属性选择的示例代码:
<!-- 商品颜色选择 -->
<view class="product-color">
<text class="title">颜色</text>
<block wx:for="{{ productColors }}" wx:key="index" wx:for-item="item">
<view class="color-item" data-color="{{ item }}"
bindtap="onProductColorTap">{{ item }}</view>
</block>
</view>
<!-- 商品尺码选择 -->
<view class="product-size">
<text class="title">尺码</text>
<block wx:for="{{ productSizes }}" wx:key="index" wx:for-item="item">
<view class="size-item" data-size="{{ item }}"
bindtap="onProductSizeTap">{{ item }}</view>
</block>
</view>
<!-- 商品数量选择 -->
<view class="product-quantity">
<text class="title">数量</text>
<view class="quantity-box">
<image src="/assets/images/minus.png"
bindtap="onQuantityMinusTap"></image>
<input class="quantity-input" type="number"
value="{{ productQuantity }}" bindinput="onQuantityInput">
<image src="/assets/images/plus.png"
bindtap="onQuantityPlusTap"></image>
</view>
</view>
在绑定商品规格属性选择的事件时,需要动态更新商品的价格和库存信息。例如,当选择了“红色”“XL”尺码的商品时,需要根据商品规格属性重新计算商品价格和库存信息。
onProductColorTap: function(e) {
const color = e.currentTarget.dataset.color;
this.setData({
selectedColor: color
});
this.updateProductPriceAndStock();
},
onProductSizeTap: function(e) {
const size = e.currentTarget.dataset.size;
this.setData({
selectedSize: size
});
this.updateProductPriceAndStock();
},
onQuantityInput: function(e) {
const quantity = parseInt(e.detail.value);
if (quantity < 1) {
wx.showToast({
title: '商品数量不少于1',
icon: 'none'
});
this.setData({
productQuantity: 1
});
} else {
this.setData({
productQuantity: quantity
});
this.updateProductPriceAndStock();
}
},
updateProductPriceAndStock: function() {
const color = this.data.selectedColor;
const size = this.data.selectedSize;
const quantity = this.data.productQuantity;
const product = this.data.product;
const selectedProduct = product.products.find(item =>
item.color === color && item.size === size);
if (selectedProduct) {
const price = selectedProduct.price;
const stock = selectedProduct.stock;
const totalPrice = price * quantity;
this.setData({
selectedProduct,
totalPrice,
productStock: stock
});
}
}
示例二:规格属性选择状态切换
商品规格属性选择的示例代码:
<!-- 商品颜色选择 -->
<view class="product-color">
<text class="title">颜色</text>
<block wx:for="{{ productColors }}" wx:key="index" wx:for-item="item">
<view class="color-item" data-color="{{ item }}"
class="{{ item === selectedColor ? 'active' : '' }}"
bindtap="onProductColorTap">{{ item }}</view>
</block>
</view>
<!-- 商品尺码选择 -->
<view class="product-size">
<text class="title">尺码</text>
<block wx:for="{{ productSizes }}" wx:key="index" wx:for-item="item">
<view class="size-item" data-size="{{ item }}"
class="{{ item === selectedSize ? 'active' : '' }}"
bindtap="onProductSizeTap">{{ item }}</view>
</block>
</view>
<!-- 商品数量选择 -->
<view class="product-quantity">
<text class="title">数量</text>
<view class="quantity-box">
<image src="/assets/images/minus.png"
bindtap="onQuantityMinusTap"></image>
<input class="quantity-input" type="number"
value="{{ productQuantity }}" bindinput="onQuantityInput">
<image src="/assets/images/plus.png"
bindtap="onQuantityPlusTap"></image>
</view>
</view>
将选中的商品规格属性的状态进行切换时,需要修改选中商品规格属性的样式。例如,当选中“红色”时,需要将“红色”样式设为激活状态,同时将其他样式设为非激活状态。
onProductColorTap: function(e) {
const color = e.currentTarget.dataset.color;
this.setData({
selectedColor: color
});
this.updateProductPriceAndStock();
},
onProductSizeTap: function(e) {
const size = e.currentTarget.dataset.size;
this.setData({
selectedSize: size
});
this.updateProductPriceAndStock();
},
updateProductPriceAndStock: function() {
const color = this.data.selectedColor;
const size = this.data.selectedSize;
const quantity = this.data.productQuantity;
const product = this.data.product;
const selectedProduct = product.products.find(item =>
item.color === color && item.size === size);
if (selectedProduct) {
const price = selectedProduct.price;
const stock = selectedProduct.stock;
const totalPrice = price * quantity;
this.setData({
selectedProduct,
totalPrice,
productStock: stock,
productColors: product.colors.map(item => ({
color: item.color,
active: item.color === color
})),
productSizes: product.sizes.map(item => ({
size: item.size,
active: item.size === size
}))
});
}
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序商品详情页规格属性选择示例代码 - Python技术站