Vue案例：商品购物车（二）

效果图

商品列表

商品列表里的每个商品有：选择框、商品图片、名称介绍、单价、数量、小计和删除按钮组成。

选择框

当选择框被勾选时，底部的合计就会把小计里的价格统计到合计里面，取消勾选时，就会把它从合计里去掉。

methods:{
decideCheck(i) {
            if (i !== '') {
                this.Commodity[i].decide = !this.Commodity[i].decide
            }
            for (let index = 0; index < this.Commodity.length; index++) {
                if (this.Commodity[index].decide === false) {
                    this.all = false
                    return
                }
            }
            this.all = true
        }
},
computed:{
allMoney() {
            let money = 0
            this.Commodity.forEach(item => {
                if (item.decide === true) {
                    money = money + item.subtotal
                }
            })
            return money
        }
}

商品图片、名称介绍、单价

这个没什么好讲的，就是通过v-for把data里的数据给渲染到页面上。

<li v-for='(item,index) in Commodity'>
                    <div class="img-box">
                        <div class="img-check">
                            <i :class='{allCheck:item.decide,checkbox:true}' @click='decideCheck(index)'></i>
                            <img :src="item.src" alt="">
                        </div>
                        <div class="introduce">
                            <p>{{item.name}}</p>
                            <p>{{item.text}}</p>
                        </div>
                    </div>
                    <div class="money">
                        <div>￥<strong>{{item.money.toFixed(2)}}</strong></div> 
                    </div>
</li>

数量

这个数量左右两边是span标签做的按钮，中间是input输入框，下面还有数量限制，最多只能50件，最少要1件，如果当数量达到数量限制的时候，把鼠标放到按钮上就会出现禁止点击的符号，鼠标点击将失去效果，输入框也一样，当你输入的数量不符合标准，就会弹出提示。

数量

<div class="quantity">
                                <span @click='minus(index)'
                                    :style="{'cursor':item.quantity<=1?'no-drop':'pointer'}">-</span>
                                <input type="number" @blur='lose' v-model='item.quantity'>
                                <span @click='add(index)'
                                    :style="{'cursor':item.quantity>=50?'no-drop':'pointer'}">+</span>
                            </div>
                            <p>最多能只能买50件</p>
                        </div>

        add(i) {
            if (this.Commodity[i].quantity >= 50) return
            this.Commodity[i].quantity++
        },
        minus(i) {
            if (this.Commodity[i].quantity <= 1) return
            this.Commodity[i].quantity--
        },
        lose(i) {
            if (this.Commodity[i].quantity > 50 || this.Commodity[i].quantity < 0 || this.Commodity[i].quantity === '') {
                alert('数量不正确')
                this.Commodity[i].quantity = 1
            }
        },

小计

小计就是根据单价*数量得到的结果，然后在合计的时候就是把这里勾选商品的数值给提供给合计，我是利用watch给数据进行监听，当数据发生变化，就会把小计重新计算，得到结果。

小计

<div style="color: red;">￥<strong>{{item.subtotal.toFixed(2)}}</strong></div>

watch: {
        Commodity: {
            handler(newvalue, oldvalue) {
                if (newvalue.length > 0) {
                    for (let index = 0; index < newvalue.length; index++) {
                        newvalue[index].subtotal = newvalue[index].quantity * newvalue[index].money
                    }
                }
            },
            deep: true,
            immediate: true
        }
    }

删除

这个按钮本来是看不见的，只有两个“--”，当点击顶部标题栏的编辑按钮才会出现，点击按钮删除商品。

<div class="del-box">
                            <p :style="{'display':del? 'none':'block'}">--</p>
                            <i :style="{'display':del?'inline-block':'none'}" class="del" @click='deleteLi(index)'></i>
                        </div>

        deleteLi(i) {
            this.Commodity.splice(i, 1)
            this.decideCheck('')
        }