uniapp 开发小程序，实现购物车功能，实现全选、反选、单选、计算总价
一、计算总价具体代码：
//计算总价
computed: {
totalPrice() {
let totalPrice = 0
this.goodList.map(item => {
item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
})
return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
}
},
关键代码：return totalPrice.toFixed(2); // 保留两位小数
否则会出现多位小数现象：
二、小程序购物车功能总代码：
<template>
<view>
<view class="goodlistItem" v-for="(item,index) in goodList" :key='index'>
<view class="group">
<checkbox-group @change="changeitem(item)" checked class="checkbox">
<checkbox :value="item.unitPrice" :checked="item.checked" />
</checkbox-group>
<view class="goods">
<view class="price">￥{
{item.unitPrice}}</view>
<view class="name">{
{item.name}}</view>
<view class="order-info">
<view>产地：{
{item.home}}</view>
</view>
<view class="subtotal">
<view class="text">
<view>单品小计：</view>
<view>￥{
{item.subtotal}}</view>
</view>
<view class="number">
<wm-numberBox :value='item.numberBox' model="1"
@change="addShopCart($event, item, index)"></wm-numberBox>
</view>
</view>
</view>
</view>
</view>
<view class="allbox">
<view class="checkbox">
<checkbox-group @change="selectAll">
<checkbox :checked="allChecked">全选</checkbox>
</checkbox-group>
</view>
<view class="total-box">
<view class="total">合计：￥{
{totalPrice}}</view>
</view>
</view>
</view>
</template>
<script>
import url from '../../static/api/url';
export default {
data() {
return {
goodList: [{
id: 0,
unitPrice: '23',
name: '文具',
home: '山东',
subtotal: '23',
numberBox: 1,
checked: false
},
{
id: 1,
unitPrice: '50',
name: '图书',
home: '济阳',
subtotal: '50',
numberBox: 1,
checked: false
}
],
checkList: [], //选中值
allChecked: false, //是否全选
}
},
//计算总价
computed: {
totalPrice() {
let totalPrice = 0
this.goodList.map(item => {
item.checked ? totalPrice += item.numberBox * item.unitPrice : totalPrice += 0
})
return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
}
},
methods: {
//单选
changeitem(item) {
item.checked = !item.checked
if (!item.checked) {
this.allChecked = false
} else {
// 判断每一个商品是否是被选择的状态
const cartList = this.goodList.every(item => {
return item.checked === true
})
if (cartList) {
this.allChecked = true
} else {
this.allChecked = false
}
}
},
//全选，全不选
selectAll() {
this.allChecked = !this.allChecked
if (this.allChecked) {
this.goodList.map(item => {
item.checked = true
})
} else {
this.goodList.map(item => {
item.checked = false
})
}
},
}
}
</script>