帝国cms仿站工具,wordpress本地访问速度慢,网店运营入门基础知识,如何美化wordpress页面cc-product-waterfall仿天猫、淘宝购物车店铺商品列表组件 引言
在电商应用中#xff0c;购物车体验的优化对于提升用户满意度和转化率至关重要。在本文中#xff0c;我们将深入探讨如何使用cc-product-waterfall组件#xff0c;结合uni-number-box和xg-widget#xff0c;…cc-product-waterfall仿天猫、淘宝购物车店铺商品列表组件 引言
在电商应用中购物车体验的优化对于提升用户满意度和转化率至关重要。在本文中我们将深入探讨如何使用cc-product-waterfall组件结合uni-number-box和xg-widget来构建一个仿天猫、淘宝的购物车店铺商品列表。同时我们将详细解析相关的事件处理函数以实现如商品过滤、店铺勾选、商品勾选、数量改变以及全选等功能。
组件介绍
cc-product-waterfall
cc-product-waterfall是一个强大的商品列表组件支持瀑布流布局非常适合用于展示大量商品。
uni-number-box
uni-number-box是一个数字输入框组件用户可以通过它方便地修改商品数量。
xg-widget
xg-widget是一套通用的UI组件库可以帮助我们快速构建出复杂且交互性强的用户界面。
购物车店铺商品列表实现
步骤1引入必要的组件
首先确保你的项目中已经引入了cc-product-waterfall、uni-number-box和xg-widget等组件。具体的引入方法可能会根据你使用的框架或库有所不同。
步骤2构建基本布局
使用cc-product-waterfall构建商品列表uni-number-box用于商品数量的输入xg-widget中的checkbox组件用于实现店铺和商品的勾选功能。
步骤3添加交互功能
通过事件处理函数来实现各种交互功能包括商品过滤、店铺勾选、商品勾选、数量改变以及全选等。
事件处理详解
过滤选择的商品和未选择的商品
filterCheckedProduct和filterUncheckedProduct方法分别用于过滤出已选择和未选择的商品。这两个方法都接受一个商品列表作为参数然后使用数组的filter方法根据商品的checked属性进行过滤。
示例代码
使用方法 引入uni-number-box xg-widget组件事件处理如下
// 过滤选择的商品
filterCheckedProduct(products) {
return products.filter(item item.checked);
},
// 过滤未选择的商品
filterUncheckedProduct(products) {
return products.filter(item !item.checked);
},
// 店铺勾选
onShopCheckboxTap(shop) {
shop.checked !shop.checked;shop.products.forEach(product {
product.checked shop.checked;
});
},
// 商品勾选
onProductCheckboxTap(product) {
product.checked !product.checked
},
// 数量改变
onNumberBoxChange(product, e) {
product.count e;
},
// 全选
onCheckAllTap() {
const checked !this.allChecked;
this.shops.forEach(shop {
shop.products.forEach(product {
product.checked checked;
})
})
}
HTML代码实现部分 templateview!-- 空购物车 --view v-ifisEmptyCartclassbg-color-white border-bottom-left-radius-xl border-bottom-right-radius-xl padding-lgview classrow-center-centerimage classimg-size-xl src/static/cart/empty-cart.png modeaspectFit/imagetext classfont-size-lg text-color-greyblack购物车是空的/text/viewview classrow-center-centertext classempty-button逛逛秒杀/texttext classempty-button看看关注/text/view/view!-- 非空购物车 --view v-if!isEmptyCartview v-for(shop, shopIndex) of cartShops :keyshopIndexclasspadding-lg margin-bottom-lg bg-color-white border-radius-xl!-- 店铺购物车商品 --!-- 店铺标题 --view class taponShopCheckboxTap(shop)label classrow-between-centerview classrow-center-centercheckbox classshop-checkbox :checkedshop.checked /image classimg-size-base border-radius-circle :srcshop.logo modeaspectFit/imagetext classfont-size-lg{{shop.name}}/text/view!-- view class/view --/label/view!-- 店铺产品列表 --view classrow-between-start margin-top-base v-for(product, productIndex) of shop.products:keyproductIndexview classproduct-checkbox taponProductCheckboxTap(product)checkbox :checkedproduct.checked //viewimage classborder-radius-lg product-image :srcproduct.image mode/imageview classflex-1 column-center-stretch padding-left-lgtext classlines-2 font-size-base{{product.title}}/textview classrow-start-center margin-v-side-baseviewclassrow-center-center bg-color-grey border-radius-rect-circle padding-side-base padding-v-side-xstext v-for(property, propertyIndex) of product.sku :keypropertyIndexclassfont-size-sm{{property}},/text/view/viewview classrow-between-centerxg-money camel :sizeUNI_FONT_SIZE_XL :moneyproduct.price/xg-moneyview classnumber-boxuni-number-box :min1 :valueproduct.countchangeonNumberBoxChange(product, $event)/uni-number-box/view/view/view/view/view/viewview classorder-amount-placeholder/viewview classrow-between-center bg-color-white padding-side-lg order-amountview classrow-center-centerview classproduct-checkbox taponCheckAllTapcheckbox :checkedallChecked //viewtext classfont-size-base全选/texttext classfont-size-lg margin-left-lg合计:/texttext classfont-size-lg font-weight-bold{{totalAmount.toFixed(2)}}/text/viewview classbg-color-red border-radius-rect-circle padding-side-lg padding-v-side-basetext classfont-size-lg text-color-white去结算{{totalCount}}/text/view/view/view
/templatescript// 获取购物车数据来源import data from /data/cart/cart;import mixin from /common/mixin;const customData {page: 0}export default {mixins: [mixin],data() {return {isEmptyCart: false,loadMoreStatus: more,shops: [],};},computed: {// 全选事件allChecked() {return this.cartShops.filter(item item.checked).length this.cartShops.length;},// 购物车店铺数据cartShops() {this.shops.forEach(shop {const uncheckedProducts this.filterUncheckedProduct(shop.products);shop.checked (uncheckedProducts.length 0);})return this.shops;},// 计算数量totalCount() {let count 0;this.cartShops.forEach(shop {this.filterCheckedProduct(shop.products).forEach(product {count parseInt(product.count);})})return count;},// 计算金额totalAmount() {let amount 0;this.cartShops.forEach(shop {this.filterCheckedProduct(shop.products).forEach(product {amount Number(product.price * product.count)})})return amount;}},async created() {this.loadMoreStatus loading;// 获取商铺数据const shopPromise data.shops();this.shops await shopPromise;},methods: {// 过滤选择的商品filterCheckedProduct(products) {return products.filter(item item.checked);},// 过滤未选择的商品filterUncheckedProduct(products) {return products.filter(item !item.checked);},// 店铺勾选onShopCheckboxTap(shop) {shop.checked !shop.checked;shop.products.forEach(product {product.checked shop.checked;});},// 商品勾选onProductCheckboxTap(product) {product.checked !product.checked},// 数量改变onNumberBoxChange(product, e) {product.count e;},// 全选onCheckAllTap() {const checked !this.allChecked;this.shops.forEach(shop {shop.products.forEach(product {product.checked checked;})})}},}
/scriptstyle langscss scoped.empty-button {include border(1px solid);font-size: $uni-font-size-lg;border-radius: $uni-border-radius-rect-circle;margin: 0 $uni-spacing-col-xl;padding: $uni-spacing-row-sm $uni-spacing-col-xl;}$order-amount-height: 100rpx;.product-list {/* #ifdef APP-NVUE */include position(fixed, 0 0 $order-amount-height 0);/* #endif */// width: 500rpx;}.shop-checkbox {transform: scale(0.8);}.product-checkbox {transform: scale(0.75);}.product-image {width: 200rpx;height: 200rpx;}.number-box {transform-origin: 100% 50%;transform: scale(0.75);}.order-amount-placeholder {height: $order-amount-height;}.order-amount {/* #ifndef APP-NVUE */include position(fixed, none 0 var(--window-bottom) 0);/* #endif *//* #ifdef APP-NVUE */include position(fixed, none 0 0 0);/* #endif */height: $order-amount-height;/* #ifndef APP-NVUE */z-index: 10000;/* #endif */}
/style 店铺勾选和商品勾选功能实现
当用户点击店铺或商品的勾选框时我们需要更新对应的checked状态。onShopCheckboxTap方法用于处理店铺的勾选事件它会更新店铺及其所有商品的checked状态。onProductCheckboxTap方法用于处理商品的勾选事件只会更新当前商品的checked状态。这两个方法都使用了JavaScript的逻辑非操作符来实现checked状态的切换。当用户点击全选按钮时onCheckAllTap方法将会被调用。这个方法会检查当前的全选状态然后遍历所有的店铺和商品将它们的checked状态设置为相反的值。这样就可以实现一键全选或全不选的功能 阅读全文下载完整组件代码请关注微信公众号 前端组件开发
