微信小程序购物车简单实现的功能: 1、商品单选及全选,全选不包括下架商品及库存不足商品; 2、商品单选及全选,同时计算商品总价及商品数量; 3、商品数量增加及减少,商品数量最少为1件; 4、商品数量增加减少时,同时计算商品总价及商品数量;请提供相关代码和注释
时间: 2024-10-24 09:12:56 浏览: 38
微信小程序实现购物车功能
5星 · 资源好评率100%
微信小程序中的购物车功能实现可以分为几个步骤,这里我会给出一个简单的示例代码,使用JavaScript语言和WXML模板。假设我们有一个`Product`类表示商品,包含`id`, `name`, `price`, `stock`等属性。
```html
<!-- WXML -->
<view class="cart">
<!-- 商品列表 -->
<block wx:for="{{ products }}" wx:key="*this">
<view class="product-item">
<input type="checkbox" value="{{ item.id }}" bindchange="onSelectChange" :checked="{{ isSelected(item.id) }}">
<text>{{ item.name }}</text>
<text>价格: {{ item.price }} 元</text>
<text>库存: {{ item.stock }} 件</text>
<button bindtap="onAdd">+</button>
<button bindtap="onSubtract">-</button>
<!-- 总价展示 -->
<text class="total-price">{{ item.price * item.stock }}</text>
</view>
</block>
<!-- 购物车总计 -->
<view class="cart-summary">
<text>总价: {{ totalPrice }}</text>
<text>商品数: {{ totalQuantity }}</text>
</view>
</view>
```
```javascript
// JavaScript (Page.json)
Page({
data: {
products: [], // 商品数据数组
totalPrice: 0,
totalQuantity: 0,
},
// 商品选择函数
onSelectChange(e) {
const itemId = e.detail.value;
const item = this.data.products.find(product => product.id === itemId);
if (item) {
this.setData({
isSelected: (itemId, isChecked) => isChecked ? true : !this.data.isSelected(itemId),
// 更新总价和数量
totalPrice: this.calculateTotalPrice(),
totalQuantity: this.calculateTotalQuantity(),
});
}
},
// 添加商品数量
onAdd(e) {
const itemId = parseInt(e.currentTarget.dataset.itemId); // 获取当前商品ID
const item = this.data.products.find(product => product.id === itemId);
if (item && item.stock > 0) { // 如果库存充足
item.stock -= 1; // 减少库存
this.setData({
// 更新产品数据
products: this.data.products.map(p => p.id === itemId ? item : p),
// 更新总价和数量
totalPrice: this.calculateTotalPrice(),
totalQuantity: this.calculateTotalQuantity(),
});
}
},
// 减少商品数量
onSubtract(e) {
const itemId = parseInt(e.currentTarget.dataset.itemId);
const item = this.data.products.find(product => product.id === itemId);
if (item && item.stock > 1) { // 如果还有库存
item.stock += 1; // 增加库存
this.setData({
// 更新产品数据
products: this.data.products.map(p => p.id === itemId ? item : p),
// 更新总价和数量
totalPrice: this.calculateTotalPrice(),
totalQuantity: this.calculateTotalQuantity(),
});
}
},
// 计算总价和数量的辅助方法
calculateTotalPrice() {
return this.data.products.reduce((sum, item) => sum + (item.stock || 0) * item.price, 0);
},
calculateTotalQuantity() {
return this.data.products.filter(item => item.stock).reduce((sum, item) => sum + item.stock, 0);
},
})
```
注意这只是一个基础的示例,实际项目中可能需要处理更多边界情况,并可能需要从服务器获取商品数据。此外,对于库存不足的商品,可以选择禁用选择项并提示用户。如果库存为0,则在添加和减小操作时不做任何改变。
阅读全文