购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

通过计算属性计算商品总价

allPrice() {// 计算购物车所有商品的总价格// 单价 X 数量 再进行累加操作let sum = 0//计算总价for(let key in this.cart) {let p = this.cart[key]if(p.checked) {// 选中的商品// 单价 X 数量 再进行累加操作sum += p.goods_price * p.num}}return sum
}

附：

calcTotalPrice () {// 计算总价// 计算商品的总价：单价 * 数量 再相加let sum = 0// 计算总价this.products.forEach(item => {// 单价 * 数量 再相加sum += item.goods_price * item.num})return sum
}

实例

结构

    <!-- 底部菜单 --><div class="cart-total"><!-- 左侧CheckBox --><div class="total-button"><icon @click='toggleAll' :color="isAll?'red': '#eee'" type='success' size='18'/>全选</div><!-- 中间的价格 --><div class="total-center"><div class="total-price">合计：<text class="colorRed"><text>￥</text>{{calcTotal}}</text></div><div class="price-tips">包含运费</div></div><!-- 右侧结算按钮 --><div @click='toPay' class="accounts" >结算</div></div>

逻辑

<script>
export default {data () {return {address: null,cart: null}},computed: {calcTotal: function () {// 计算商品总价：单价 * 数量 再进行累加操作let total = 0for (let key in this.cart) {let p = this.cart[key]if (p.checked) {total += p.goods_price * p.num}}return total},}
}

单种商品计算

全选商品计算

注意：

如果跳转页面，再返回不进行数据缓存，商品计算会清零，恢复原始状态

小程序-数据缓存api：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

<script>
export default {onHide () {// 隐藏页面时，把最新的cart数据同步到本地缓存wx.setStorageSync('mycart', this.cart)},
}

数据缓存后效果

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法相关推荐

jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
【计算商品总价~python+】
目录~python 计算商品总价运行效果如下: pandas 每日一练: 程序运行结果如下: 92.计算第一列数字前一个与后一个的差值程序运行结果如下: 93.提取第一列位置在1,5,9 程序运行 ...
Vue实现计算商品总价简单案例
计算商品总价简单案例-Vue 练习vue的指令和计算属性的一个小案例. 主要效果: 数量增加和减少,小于1不可操作删除操作任何加.减.删除操作都会更新总价商品全删除后显示提示代码: <b ...
vue使用计算属性计算商品总价
vue计算商品总价使用 ---- 计算属性注命名规则: 属性名称,方法名称,变量名称尽量使用小驼峰命名法 computed:{totalPrice() {let totalPrice = 0fo ...
原生js实现购物车添加删除商品、计算价格功能
购物车功能需求: 根据数据创建购物车内容: 实现购物车添加商品功能: 实现购物车商品数量的增加.减少: 实现购物车商品的删除功能: 购物车的全选功能: 无货商品不可修改数量.不计入总价: 底部计算总 ...
js购物车选中商品实现计算商品总价格
为了在激烈的互联网竞争中获得一席之地,都努力使自己的网站更为人性化.比如在购物网站一般都有这样的功能,那就是在结算商品的时候,网站可以自动计算要购买商品所需要花费的金钱数量. 代码实例如下: 01 0 ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
【Flink】基于 Flink CEP 实时计算商品订单流失量
1.概述转载:https://blog.csdn.net/tzs_1041218129/article/details/108786597 假设有个需求需要实时计算商品的订单流失量,规则如下: 用户 ...
响应式分布式区别_边缘计算的七种定义，边缘计算与云计算、雾计算的区别
一.概述边缘计算是一个分布式计算的范式,正如云计算也是一个分布式计算的范式. 由于行业.技术背景等不同,边缘计算在不同人眼里是有一定差异的.我们先来看看不同专家是如何定义边缘的,然后介绍边缘计算处理 ...

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

实例

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法相关推荐

最新文章

热门文章

购物车（七）-计算商品总价——计算总价-计算属性 数据缓存api-wx.setStorageSync()方法

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

实例

购物车（七）-计算商品总价——计算总价-计算属性 数据缓存api-wx.setStorageSync()方法相关推荐

最新文章

热门文章

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法

购物车（七）-计算商品总价——计算总价-计算属性数据缓存api-wx.setStorageSync()方法相关推荐