uniapp购物车基本功能——总价计算（商城项目）

获取数据

// 这是API调用部分

axios.get('/api/shopList').then(res => {

this.shopList = res.data;

// 确保res.data中的每个对象有quantity和price属性

quantity代表商品件数

price代表商品单价

});

渲染页面

<div class="info_shopPrice" v-for="(item, index) in shopList" :key="item.id">

              <span>{{ item.price}}</span>

  <u-number-box v-model="item.quantity" @minus="handMinus(index)" @plus="handPlus(index)"></u-number-box>

</div>

<p>合计价格: {{ totalPrice }} 元</p>

注：此处u-number-box采用的uView里的组件，@minus代表点击减号，@plus代表点击加号

方法

methods: {

handPlus(index) {

        this.shopList[index].quantity++;

},

handMinus(index) {

        if (this.shopList[index].quantity > 1) {

                this.shopList[index].quantity--;

        }

    },

},

计算属性（也是关键的一步，一行代码解决问题）

computed: {

    totalPrice() {

      return this.shopList.reduce((sum, item) => sum + (item.quantity* item.price), 0);

    },

  },

使用reduce方法遍历shopList数组，将每个商品的数量乘以价格累加到总价sum中，并最终返回总价

注：在计算属性定义了totalPrice，不必在data中在定义，否则会报重名的错