uni-app购物车-价格、数量计算

╰+攻爆jí腚メ 2023-07-25 08:45 30阅读 0赞

1，购物车所有已勾选商品的总价、总数计算  
2，单个商品的总价、总数计算

// carArr是购物车商品列表

computed: {
    	// 已勾选所有商品的总价和总数计算：
    	// 总价
    	totalPrice () {
    		let totalP = 0
    		this.carArr.map(item => {
    			return item.checked? totalP += Number(item.price) : totalP += 0
    		})
    		return totalP.toFixed(2)
    	},
    	// 总数
    	totalNum () {
    		let totalP = 0
    		this.carArr.map(item => {
    			return item.checked? totalP += item.num : totalP += 0
    		})
    		return totalP.toFixed(0)
    	},
    },
    
    methods: {
    	// 单个商品的总价和总数计算：
    	// 单个商品+
    	add (item) {
    		for (var j = 0; j < this.carArr.length; j++) {
    			var items = this.carArr[j]
    			if (item.id == items.id) {
    				items.num ++ 
    				items.allP = items.num* items.price
    			}
    		}
    	},
    	// 单个商品-
    	cut (item) {
    		for (var j = 0; j < this.carArr.length; j++) {
    			var items = this.carArr[j]
    			if (item.id == items.id) {
    				items.num > 1 ? items.num -- : uni.showToast({title: '哎哟，只剩一件啦！', duration: 2000});
    				items.allP = items.num* items.price
    			}
    		}
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记38 购物车的添加商品到购物车功能

UNIAPP实战项目笔记38 购物车的加入购物车功能通过mapGetters实现此功能 > 在 shopcart.vue中 > 使用mapGetters中的

亦凉/ 2024年04月01日 18:56/ 0 赞/ 248 阅读

相关 UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算

UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算通过template标签,和uniNumberBox组件实现此功能在 shopc

Bertha 。/ 2024年04月01日 15:28/ 0 赞/ 221 阅读

相关 UNIAPP实战项目笔记35 购物车的价格合计和结算数量

UNIAPP实战项目笔记35 购物车的价格合计和结算数量通过mapGetters,mapMutations实现此功能在 shopcart.vue中使用,具体

缺乏、安全感/ 2024年04月01日 15:14/ 0 赞/ 209 阅读

相关 uni-app购物车-价格、数量计算

1，购物车所有已勾选商品的总价、总数计算 2，单个商品的总价、总数计算 // carArr是购物车商品列表 computed: { // 已勾选所有商

╰+攻爆jí腚メ/ 2023年07月25日 08:45/ 0 赞/ 31 阅读

相关 Js实现购物车加减，价格计算等功能

需求说明： 1、单击“半闭”按钮时，关闭当前页面购物车页面 2、单击“移入收藏”弹出收藏提示 3、单击“删除”弹出确认删除提示 4、单击“结算”按钮，弹出结算

谁借莪１个温暖的怀抱￠/ 2023年06月07日 10:58/ 0 赞/ 130 阅读

相关前端JS 购物车的加减数量、计算总价

前端页面用JS技术对购物车页面添加功能前端页面 <!DOCTYPE html> <html> <head lang="en"> <

系统管理员/ 2023年02月16日 04:03/ 0 赞/ 126 阅读

相关实现网页购物车功能，完成基本的商品价格计算等功能

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

系统管理员/ 2023年02月10日 05:20/ 0 赞/ 221 阅读

相关前端学习代码实例-JavaScript商城购物车价格自动计算功能

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 分享一段代码实例，它实现购物车价格自动计算功能。代码实例如下: <!DO

短命女/ 2022年10月01日 13:51/ 0 赞/ 91 阅读

相关购物车商品计算JavaScript实现

html代码 <div> <p>单价:<span>30</span></p> <input type="button" value="

素颜马尾好姑娘i/ 2022年05月27日 12:36/ 0 赞/ 395 阅读

相关 ecshop调用显示购物车商品数量

文件：include/lib\_insert.php / 调用购物车商品数目 / function insert_cart_info_num

迈不过友情╰/ 2021年12月23日 23:51/ 0 赞/ 447 阅读