1 回复
针对您提出的uni-app店铺分类的购物车插件需求,以下是一个简化的代码示例,用于展示如何实现基本的购物车功能,包括分类显示和商品添加至购物车。请注意,这只是一个基础实现,实际项目中可能需要根据具体需求进行扩展和优化。
1. 数据结构定义
首先,我们定义商品和购物车的数据结构:
data() {
return {
categories: [
{
id: 1,
name: '电子产品',
products: [
{ id: 101, name: '手机', price: 1999 },
{ id: 102, name: '平板', price: 1499 }
]
},
{
id: 2,
name: '服饰',
products: [
{ id: 201, name: 'T恤', price: 99 },
{ id: 202, name: '裤子', price: 199 }
]
}
],
cart: []
};
}
2. 添加商品到购物车的方法
methods: {
addToCart(productId, categoryId) {
const product = this.categories.find(cat => cat.id === categoryId).products.find(prod => prod.id === productId);
const cartItem = this.cart.find(item => item.id === product.id);
if (cartItem) {
cartItem.quantity += 1;
} else {
this.cart.push({ ...product, quantity: 1 });
}
}
}
3. 模板展示
在模板中,我们遍历分类和商品,并添加添加到购物车的按钮:
<template>
<view>
<block v-for="category in categories" :key="category.id">
<view>{{ category.name }}</view>
<block v-for="product in category.products" :key="product.id">
<view>{{ product.name }} - ¥{{ product.price }}</view>
<button @click="addToCart(product.id, category.id)">加入购物车</button>
</block>
</block>
<view>购物车内容:</view>
<block v-for="item in cart" :key="item.id">
<view>{{ item.name }} - ¥{{ item.price * item.quantity }}</view>
</block>
</view>
</template>
4. 样式(可选)
您可以在<style>
标签内添加CSS样式,以美化您的页面。
总结
以上代码展示了一个基本的uni-app购物车插件实现,包括商品分类、商品列表、以及将商品添加到购物车的功能。在实际项目中,您可能需要添加更多的功能,如删除购物车中的商品、计算总价、持久化存储等。希望这个示例能为您的开发工作提供一个良好的起点。