|
小程序快速选择商品功能
// 商品分类浏览组件 Page({ data: { categories: [], // 商品分类数组 currentCategoryId: 0, // 当前分类ID selectedItems: [] // 已选择商品数组 }, onLoad: function () { // 加载分类数据 this.setData({ categories: getCategories() }) // 设置默认分类 this.setData({ currentCategoryId: 0 }) }, onShow: function () { // 获取用户已选择的商品 var selectedItems = getSelectedItems() // 更新已选择的商品数组 this.setData({ selectedItems: selectedItems }) }, // 点击分类按钮 categoryClick: function (event) { var categoryId = event.currentTarget.dataset.id // 更新当前分类ID this.setData({ currentCategoryId: categoryId }) }, // 点击商品按钮 itemClick: function (event) { var itemId = event.currentTarget.dataset.id // 添加到已选择的商品数组中 var selectedItems = getSelectedItems() var index = selectedItems.findIndex(item => item.id === itemId) if (index !== -1) { selectedItems.splice(index, 1) } else { selectedItems.push({ id: itemId, name: getItemName(itemId) }) } // 更新已选择的商品数组 this.setData({ selectedItems: selectedItems }) }, // 获取商品名称 getItemName: function (id) { // TODO: 根据商品ID获取商品名称 } }) // 购物车数据模型 const Cart = { // 商品分类列表 categories: [], // 当前分类ID currentCategoryId: 0, // 已选择商品列表 selectedItems: [], // 添加商品到购物车 addToCart: function (itemId, quantity) { // TODO: 根据商品ID和数量更新购物车数据 }, // 删除商品从购物车 removeFromCart: function (itemId) { // TODO: 根据商品ID从购物车数据中删除商品 }, // 更新购物车数据 updateCart: function () { // TODO: 根据当前分类ID和已选择商品列表更新购物车数据 } } // 获取分类列表和商品名称 function getCategories () { return [ { id: 1, name: '分类1' }, { id: 2, name: '分类2' }, { id: 3, name: '分类3' } ]; } function getItems () { return [ { id: 1, name: '商品1' }, { id: 2, name: '商品2' }, { id: 3, name: 小程序快速选择商品的功能,可以减少用户选择时间,提高用户购物效率。也可以基于用户的浏览历史和购买记录,提供个性化的商品推荐,提高用户购买体验。此外,提供便捷的商品分类浏览界面,方便用户快速找到需要的商品。 |